diff --git a/components/custom/Badge/Badge.svelte b/components/custom/Badge/Badge.svelte
index 901ed7a1..f116262b 100644
--- a/components/custom/Badge/Badge.svelte
+++ b/components/custom/Badge/Badge.svelte
@@ -32,7 +32,7 @@ span {
 </style>
 
 <span
-  class="mdc-typography dib text-align-center white fs-16 {$$props.class}"
+  class="mdc-typography dib text-align-center white fs-16 {$$props.class || ''}"
   class:bordered
   style="--theme-color: {color}; --bg-color: {transparentColor}; --border-radius: {borderRadius}; --padding: {padding}"
 >
diff --git a/components/custom/DateInput/DateInput.svelte b/components/custom/DateInput/DateInput.svelte
index 86ffe9f8..746413ce 100644
--- a/components/custom/DateInput/DateInput.svelte
+++ b/components/custom/DateInput/DateInput.svelte
@@ -107,7 +107,7 @@ const focus = (node) => autofocus && node.focus()
 }
 </style>
 
-<label class="{$$props.class} custom-field">
+<label class="{$$props.class || ''} custom-field">
   <input
     type="date"
     {required}
diff --git a/components/custom/FileDropArea/FileDropArea.svelte b/components/custom/FileDropArea/FileDropArea.svelte
index 48546fc3..30005da6 100644
--- a/components/custom/FileDropArea/FileDropArea.svelte
+++ b/components/custom/FileDropArea/FileDropArea.svelte
@@ -71,7 +71,7 @@ form > * {
 
 <div
   id="drop-area"
-  class="br-8px {$$props.class}"
+  class="br-8px {$$props.class || ''}"
   class:highlighted
   on:dragenter|preventDefault|stopPropagation={highlight}
   on:dragleave|preventDefault|stopPropagation={unhighlight}
diff --git a/components/custom/Form/Form.svelte b/components/custom/Form/Form.svelte
index de3fa505..1e62783d 100644
--- a/components/custom/Form/Form.svelte
+++ b/components/custom/Form/Form.svelte
@@ -68,7 +68,7 @@ const listenForBlurOnForm = (form) => {
   bind:this={form}
   on:reset={resetSelf}
   {id}
-  class="w-100 {$$props.class}"
+  class="w-100 {$$props.class || ''}"
   on:submit|preventDefault
   autocomplete="off"
 >
diff --git a/components/custom/SearchableSelect/SearchableSelect.svelte b/components/custom/SearchableSelect/SearchableSelect.svelte
index 65eb4a8d..0aa503bb 100644
--- a/components/custom/SearchableSelect/SearchableSelect.svelte
+++ b/components/custom/SearchableSelect/SearchableSelect.svelte
@@ -67,12 +67,12 @@ const onChange = () => {
 }
 </style>
 
-<label class="custom-field" style="--field-padding: {padding}; {$$props.class}">
+<label class="custom-field" style="--field-padding: {padding}; {$$props.class || ''}">
   <input
     autocomplete="off"
     {disabled}
     {maxlength}
-    class="fs-14 {$$props.class}"
+    class="fs-14 {$$props.class || ''}"
     style="width: {width}"
     {required}
     list={randomId}
diff --git a/components/custom/StaticChip/StaticChip.svelte b/components/custom/StaticChip/StaticChip.svelte
index 0e858228..ede13070 100644
--- a/components/custom/StaticChip/StaticChip.svelte
+++ b/components/custom/StaticChip/StaticChip.svelte
@@ -15,7 +15,7 @@ export let bgColor = '#e5e5e5'
 </style>
 
 <div
-  class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}"
+  class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class || ''}"
   style="--theme-color: {bgColor}"
 >
   <div class="chip-content flex align-items-center">
diff --git a/components/mdc/Button/Button.svelte b/components/mdc/Button/Button.svelte
index b1268e8d..ff8221e7 100644
--- a/components/mdc/Button/Button.svelte
+++ b/components/mdc/Button/Button.svelte
@@ -20,7 +20,7 @@ onMount(() => {
 
 {#if url}
   <a
-    class="mdc-button {$$props.class}"
+    class="mdc-button {$$props.class || ''}"
     href={url}
     role="button"
     class:mdc-button--outlined={outlined}
@@ -44,7 +44,7 @@ onMount(() => {
   </a>
 {:else}
   <button
-    class="mdc-button {$$props.class}"
+    class="mdc-button {$$props.class || ''}"
     class:mdc-button--outlined={outlined}
     class:mdc-button--raised={raised}
     {disabled}
diff --git a/components/mdc/Card/Card.svelte b/components/mdc/Card/Card.svelte
index b920dda4..d1ba950a 100644
--- a/components/mdc/Card/Card.svelte
+++ b/components/mdc/Card/Card.svelte
@@ -27,7 +27,7 @@ $: tabindex = isClickable ? 0 : undefined
 
 <div
   {tabindex}
-  class="mdc-card mdc-typography {$$props.class}"
+  class="mdc-card mdc-typography {$$props.class || ''}"
   style="background-color: {color}"
   class:mdc-card--outlined={outlined}
   class:mdc-card__primary-action={isClickable}
diff --git a/components/mdc/Checkbox/Checkbox.svelte b/components/mdc/Checkbox/Checkbox.svelte
index 392a3160..766e1a8b 100644
--- a/components/mdc/Checkbox/Checkbox.svelte
+++ b/components/mdc/Checkbox/Checkbox.svelte
@@ -30,7 +30,7 @@ onMount(() => {
 const handleChange = () => dispatch(checkbox.checked ? 'checked' : 'unchecked')
 </script>
 
-<div class="mdc-form-field {$$props.class}" bind:this={formFieldElement}>
+<div class="mdc-form-field {$$props.class || ''}" bind:this={formFieldElement}>
   <div class="mdc-checkbox" bind:this={checkboxElement}>
     <input type="checkbox" {disabled} on:change={handleChange} class="mdc-checkbox__native-control" id={inputID} />
     <div class="mdc-checkbox__background">
diff --git a/components/mdc/CustomCard/CustomCard.svelte b/components/mdc/CustomCard/CustomCard.svelte
index 200f78ee..b38b3847 100644
--- a/components/mdc/CustomCard/CustomCard.svelte
+++ b/components/mdc/CustomCard/CustomCard.svelte
@@ -26,7 +26,7 @@ img {
 }
 </style>
 
-<Card class="h-100 py-1 {$$props.class}">
+<Card class="h-100 py-1 {$$props.class || ''}">
   <div class="flex justify-center">
     <img class="w-100" {src} {alt} class:disabled />
   </div>
diff --git a/components/mdc/Datatable/Data.svelte b/components/mdc/Datatable/Data.svelte
index 6ff63e03..a67b6abd 100644
--- a/components/mdc/Datatable/Data.svelte
+++ b/components/mdc/Datatable/Data.svelte
@@ -1,3 +1,3 @@
-<tbody class="mdc-data-table__content {$$props.class}">
+<tbody class="mdc-data-table__content {$$props.class || ''}">
   <slot />
 </tbody>
diff --git a/components/mdc/Datatable/DataRow.svelte b/components/mdc/Datatable/DataRow.svelte
index 9ce1b2dc..519b4c70 100644
--- a/components/mdc/Datatable/DataRow.svelte
+++ b/components/mdc/Datatable/DataRow.svelte
@@ -6,6 +6,6 @@ export let clickable = false
 const rowId = generateRandomID('row-id-')
 </script>
 
-<tr on:click on:keydown data-row-id={rowId} class="mdc-data-table__row {$$props.class}" class:pointer={clickable}>
+<tr on:click on:keydown data-row-id={rowId} class="mdc-data-table__row {$$props.class || ''}" class:pointer={clickable}>
   <slot {rowId} />
 </tr>
diff --git a/components/mdc/Datatable/DataRowItem.svelte b/components/mdc/Datatable/DataRowItem.svelte
index a8fbdac5..ca544e9a 100644
--- a/components/mdc/Datatable/DataRowItem.svelte
+++ b/components/mdc/Datatable/DataRowItem.svelte
@@ -3,6 +3,6 @@ export let numeric = false
 export let colspan = 1
 </script>
 
-<td class="mdc-data-table__cell {$$props.class}" class:mdc-data-table__cell--numeric={numeric} {colspan}
+<td class="mdc-data-table__cell {$$props.class || ''}" class:mdc-data-table__cell--numeric={numeric} {colspan}
   ><slot /></td
 >
diff --git a/components/mdc/Datatable/Datatable.svelte b/components/mdc/Datatable/Datatable.svelte
index 70f83a4b..2dd26a18 100644
--- a/components/mdc/Datatable/Datatable.svelte
+++ b/components/mdc/Datatable/Datatable.svelte
@@ -43,7 +43,7 @@ onMount(() => {
 $: numberOfCheckboxes && dataTable?.layout()
 </script>
 
-<div class="mdc-data-table w-100 {$$props.class}" bind:this={element}>
+<div class="mdc-data-table w-100 {$$props.class || ''}" bind:this={element}>
   <div class="mdc-data-table__table-container">
     <table class="mdc-data-table__table" aria-label={label}>
       <slot />
diff --git a/components/mdc/Datatable/DatatableCheckbox.svelte b/components/mdc/Datatable/DatatableCheckbox.svelte
index 3785d2f8..e0d00907 100644
--- a/components/mdc/Datatable/DatatableCheckbox.svelte
+++ b/components/mdc/Datatable/DatatableCheckbox.svelte
@@ -10,7 +10,7 @@ const dispatch = createEventDispatcher()
 </script>
 
 <td
-  class="mdc-data-table__cell mdc-data-table__cell--checkbox {$$props.class}"
+  class="mdc-data-table__cell mdc-data-table__cell--checkbox {$$props.class || ''}"
   on:click
   on:keypress
   on:keyup
diff --git a/components/mdc/Datatable/DatatableCheckboxHeader.svelte b/components/mdc/Datatable/DatatableCheckboxHeader.svelte
index 3df87f9d..069f213d 100644
--- a/components/mdc/Datatable/DatatableCheckboxHeader.svelte
+++ b/components/mdc/Datatable/DatatableCheckboxHeader.svelte
@@ -1,5 +1,5 @@
 <th
-  class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox {$$props.class}"
+  class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox {$$props.class || ''}"
   role="columnheader"
   scope="col"
 >
diff --git a/components/mdc/Datatable/Header.svelte b/components/mdc/Datatable/Header.svelte
index d7f31687..1b08058a 100644
--- a/components/mdc/Datatable/Header.svelte
+++ b/components/mdc/Datatable/Header.svelte
@@ -1,5 +1,5 @@
 <thead>
-  <tr class="mdc-data-table__header-row {$$props.class}">
+  <tr class="mdc-data-table__header-row {$$props.class || ''}">
     <slot />
   </tr>
 </thead>
diff --git a/components/mdc/Datatable/HeaderItem.svelte b/components/mdc/Datatable/HeaderItem.svelte
index cd8f2c23..8271c044 100644
--- a/components/mdc/Datatable/HeaderItem.svelte
+++ b/components/mdc/Datatable/HeaderItem.svelte
@@ -11,7 +11,7 @@ const labelID = generateRandomID('column-label-')
 </script>
 
 <th
-  class="mdc-data-table__header-cell {$$props.class} mdc-data-table__header-cell--with-sort"
+  class="mdc-data-table__header-cell {$$props.class || ''} mdc-data-table__header-cell--with-sort"
   class:mdc-data-table__header-cell--numeric={numeric}
   role="columnheader"
   scope="col"
diff --git a/components/mdc/Dialog/Alert.svelte b/components/mdc/Dialog/Alert.svelte
index b8148a69..83a639d3 100644
--- a/components/mdc/Dialog/Alert.svelte
+++ b/components/mdc/Dialog/Alert.svelte
@@ -56,7 +56,7 @@ i.material-icons {
 <div class="mdc-dialog" bind:this={element}>
   <div class="mdc-dialog__container">
     <div
-      class="mdc-dialog__surface {$$props.class}"
+      class="mdc-dialog__surface {$$props.class || ''}"
       role="alertdialog"
       aria-modal="true"
       aria-labelledby="title"
diff --git a/components/mdc/Dialog/Simple.svelte b/components/mdc/Dialog/Simple.svelte
index 5ac44bc7..f7a365d2 100644
--- a/components/mdc/Dialog/Simple.svelte
+++ b/components/mdc/Dialog/Simple.svelte
@@ -38,7 +38,7 @@ const fromAction = (s) => JSON.parse(s)
 <div class="mdc-dialog" bind:this={element}>
   <div class="mdc-dialog__container">
     <div
-      class="mdc-dialog__surface {$$props.class}"
+      class="mdc-dialog__surface {$$props.class || ''}"
       role="alertdialog"
       aria-modal="true"
       aria-labelledby="dialog-title"
diff --git a/components/mdc/Drawer/Drawer.svelte b/components/mdc/Drawer/Drawer.svelte
index 7002f1b1..44d06541 100644
--- a/components/mdc/Drawer/Drawer.svelte
+++ b/components/mdc/Drawer/Drawer.svelte
@@ -111,7 +111,7 @@ main {
 <svelte:window on:resize={showAppropriateThings} />
 
 <aside
-  class="mdc-drawer {$$props.class}"
+  class="mdc-drawer {$$props.class || ''}"
   class:mdc-drawer--modal={modal}
   class:mdc-drawer--dismissible={dismissible}
   bind:this={element}
diff --git a/components/mdc/Fab/Fab.svelte b/components/mdc/Fab/Fab.svelte
index ed6d1892..9f4906a2 100644
--- a/components/mdc/Fab/Fab.svelte
+++ b/components/mdc/Fab/Fab.svelte
@@ -28,23 +28,23 @@ onMount(() => {
 </style>
 
 {#if mini}
-  <button on:click={action} class="mdc-fab mdc-fab--mini {$$props.class}" aria-label={label} bind:this={element}>
+  <button on:click={action} class="mdc-fab mdc-fab--mini {$$props.class || ''}" aria-label={label} bind:this={element}>
     <div class="mdc-fab__ripple" />
     <span class="mdc-fab__icon material-icons">{icon}</span>
   </button>
 {:else if extended}
-  <button on:click={action} class="mdc-fab mdc-fab--extended {$$props.class}" bind:this={element}>
+  <button on:click={action} class="mdc-fab mdc-fab--extended {$$props.class || ''}" bind:this={element}>
     <div class="mdc-fab__ripple" />
     <span class="material-icons mdc-fab__icon">{icon}</span>
     <span class="mdc-fab__label">{label}</span>
   </button>
 {:else if url}
-  <a class="mdc-fab {$$props.class}" aria-label={label} bind:this={element} href={url} {target}>
+  <a class="mdc-fab {$$props.class || ''}" aria-label={label} bind:this={element} href={url} {target}>
     <div class="mdc-fab__ripple" />
     <span class="mdc-fab__icon material-icons">{icon}</span>
   </a>
 {:else}
-  <button on:click={action} class="mdc-fab {$$props.class}" aria-label={label} bind:this={element}>
+  <button on:click={action} class="mdc-fab {$$props.class || ''}" aria-label={label} bind:this={element}>
     <div class="mdc-fab__ripple" />
     <span class="mdc-fab__icon material-icons">{icon}</span>
   </button>
diff --git a/components/mdc/IconButton/IconButton.svelte b/components/mdc/IconButton/IconButton.svelte
index be67e212..3069b0b3 100644
--- a/components/mdc/IconButton/IconButton.svelte
+++ b/components/mdc/IconButton/IconButton.svelte
@@ -23,7 +23,7 @@ onMount(() => {
   <a
     href={url}
     role="button"
-    class="mdc-icon-button material-icons {$$props.class}"
+    class="mdc-icon-button material-icons {$$props.class || ''}"
     aria-label={ariaLabel}
     {disabled}
     {target}
@@ -39,7 +39,7 @@ onMount(() => {
   </a>
 {:else}
   <button
-    class="mdc-icon-button material-icons {$$props.class}"
+    class="mdc-icon-button material-icons {$$props.class || ''}"
     aria-label={ariaLabel}
     {disabled}
     on:click
diff --git a/components/mdc/List/Divider.svelte b/components/mdc/List/Divider.svelte
index 3d8258f4..4193e4b8 100644
--- a/components/mdc/List/Divider.svelte
+++ b/components/mdc/List/Divider.svelte
@@ -1 +1 @@
-<li role="separator" class="mdc-deprecated-list-divider {$$props.class}" />
+<li role="separator" class="mdc-deprecated-list-divider {$$props.class || ''}" />
diff --git a/components/mdc/List/Item.svelte b/components/mdc/List/Item.svelte
index d67c5c05..625012e5 100644
--- a/components/mdc/List/Item.svelte
+++ b/components/mdc/List/Item.svelte
@@ -36,7 +36,7 @@ img {
 
 <li
   bind:this={element}
-  class="mdc-deprecated-list-item {$$props.class}"
+  class="mdc-deprecated-list-item {$$props.class || ''}"
   class:mdc-deprecated-list-item--activated={activated}
   class:mdc-deprecated-list-item--disabled={nonInteractive}
   data-mdc-dialog-action={$$props['data-mdc-dialog-action']}
diff --git a/components/mdc/List/List.svelte b/components/mdc/List/List.svelte
index ed28fb0f..f5c118bb 100644
--- a/components/mdc/List/List.svelte
+++ b/components/mdc/List/List.svelte
@@ -20,7 +20,7 @@ ul {
 </style>
 
 <ul
-  class="mdc-deprecated-list {$$props.class}"
+  class="mdc-deprecated-list {$$props.class || ''}"
   class:mdc-deprecated-list--two-line={twoLine}
   class:mdc-deprecated-list--avatar-list={avatar}
   bind:this={element}
diff --git a/components/mdc/Menu/Menu.svelte b/components/mdc/Menu/Menu.svelte
index fb0c2b87..057c7799 100644
--- a/components/mdc/Menu/Menu.svelte
+++ b/components/mdc/Menu/Menu.svelte
@@ -47,7 +47,7 @@ i {
 <!-- mdc-menu doesn't have a method to let us know when it closes so this listens for clicks -->
 <svelte:body on:click={closeMenuHandler} />
 <div id="toolbar" class="toolbar mdc-menu-surface--anchor">
-  <div class="mdc-menu mdc-menu-surface {$$props.class}" bind:this={element}>
+  <div class="mdc-menu mdc-menu-surface {$$props.class || ''}" bind:this={element}>
     <ul class="mdc-deprecated-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
       {#each menuItems as { icon, label, url, subtitle, action }, i}
         <!-- svelte-ignore a11y-invalid-attribute -->
diff --git a/components/mdc/Page/Page.svelte b/components/mdc/Page/Page.svelte
index 16c12b42..4c7e3589 100644
--- a/components/mdc/Page/Page.svelte
+++ b/components/mdc/Page/Page.svelte
@@ -14,7 +14,7 @@ $: $appBarTitle = title
 </script>
 
 <slot name="tabbar" />
-<div class="mdc-layout-grid {$$props.class}">
+<div class="mdc-layout-grid {$$props.class || ''}">
   <div class="mdc-layout-grid__inner">
     {#if layout == 'default'}
       <div class={center ? `${cell12} flex column align-items-center` : `${cell12}`}>
diff --git a/components/mdc/Page/Subheader.svelte b/components/mdc/Page/Subheader.svelte
index 76caa26e..7e5e70f4 100644
--- a/components/mdc/Page/Subheader.svelte
+++ b/components/mdc/Page/Subheader.svelte
@@ -1,3 +1,3 @@
-<h3 class="mdc-typography--subtitle2 {$$props.class}">
+<h3 class="mdc-typography--subtitle2 {$$props.class || ''}">
   <slot />
 </h3>
diff --git a/components/mdc/Progress/Circular.svelte b/components/mdc/Progress/Circular.svelte
index 963be855..3c4cdc37 100644
--- a/components/mdc/Progress/Circular.svelte
+++ b/components/mdc/Progress/Circular.svelte
@@ -23,7 +23,7 @@ onMount(() => {
 
 <!-- from docs: IMPORTANT: Do not introduce space between the adjacent </div><div> tags below. Doing so will produce unwanted visual artifacts. -->
 <div
-  class="mdc-circular-progress {$$props.class}"
+  class="mdc-circular-progress {$$props.class || ''}"
   style="width:48px;height:48px;"
   role="progressbar"
   aria-label="Progress Circle"
diff --git a/components/mdc/Progress/Linear.svelte b/components/mdc/Progress/Linear.svelte
index d65f5cb2..d4d90bc5 100644
--- a/components/mdc/Progress/Linear.svelte
+++ b/components/mdc/Progress/Linear.svelte
@@ -20,7 +20,7 @@ onMount(() => {
 
 <div
   role="progressbar"
-  class="mdc-linear-progress {$$props.class}"
+  class="mdc-linear-progress {$$props.class || ''}"
   class:mdc-linear-progress--indeterminate={indeterminate}
   aria-label="Progress Bar"
   aria-valuemin="0"
diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
index 3a195161..183b7f4f 100644
--- a/components/mdc/Select/Select.svelte
+++ b/components/mdc/Select/Select.svelte
@@ -51,7 +51,7 @@ afterUpdate(() => {
 })
 </script>
 
-<div class="mdc-select mdc-select--outlined {$$props.class}" bind:this={element} style="width: {width}">
+<div class="mdc-select mdc-select--outlined {$$props.class || ''}" bind:this={element} style="width: {width}">
   <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-labelledby="{labelID} {selectedTextID}">
     <span class="mdc-select__selected-text-container">
       <span id={selectedTextID} class="mdc-select__selected-text" />
diff --git a/components/mdc/Snackbar/Snackbar.svelte b/components/mdc/Snackbar/Snackbar.svelte
index 2b18c83d..984a4483 100644
--- a/components/mdc/Snackbar/Snackbar.svelte
+++ b/components/mdc/Snackbar/Snackbar.svelte
@@ -46,7 +46,11 @@ function open(msg) {
 </script>
 
 <aside class="mdc-snackbar" bind:this={element}>
-  <div class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class}" role="status" aria-relevant="additions">
+  <div
+    class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class || ''}"
+    role="status"
+    aria-relevant="additions"
+  >
     <div class="mdc-snackbar__label" aria-atomic="false" />
     {#if action}
       <div class="mdc-snackbar__actions" aria-atomic="true">
diff --git a/components/mdc/Switch/Switch.svelte b/components/mdc/Switch/Switch.svelte
index 33cf0c14..94fdf703 100644
--- a/components/mdc/Switch/Switch.svelte
+++ b/components/mdc/Switch/Switch.svelte
@@ -44,7 +44,7 @@ function onClick() {
   on:click={onClick}
   bind:this={element}
   {id}
-  class="mdc-switch {$$props.class}"
+  class="mdc-switch {$$props.class || ''}"
   class:mdc-switch--selected={selected}
   class:mdc-switch--unselected={!selected}
   type="button"
diff --git a/components/mdc/TabBar/Indicator.svelte b/components/mdc/TabBar/Indicator.svelte
index 55ef79cb..d93476e6 100644
--- a/components/mdc/TabBar/Indicator.svelte
+++ b/components/mdc/TabBar/Indicator.svelte
@@ -19,6 +19,6 @@ onMount(() => {
 }
 </style>
 
-<span class="mdc-tab-indicator {$$props.class}" class:mdc-tab-indicator--active={active} bind:this={element}>
+<span class="mdc-tab-indicator {$$props.class || ''}" class:mdc-tab-indicator--active={active} bind:this={element}>
   <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline" />
 </span>
diff --git a/components/mdc/TabBar/Scroller.svelte b/components/mdc/TabBar/Scroller.svelte
index 7d57ec93..2643dc1d 100644
--- a/components/mdc/TabBar/Scroller.svelte
+++ b/components/mdc/TabBar/Scroller.svelte
@@ -11,7 +11,7 @@ onMount(() => {
 })
 </script>
 
-<div class="mdc-tab-scroller {$$props.class}" bind:this={element}>
+<div class="mdc-tab-scroller {$$props.class || ''}" bind:this={element}>
   <div class="mdc-tab-scroller__scroll-area">
     <div class="mdc-tab-scroller__scroll-content">
       <slot />
diff --git a/components/mdc/TabBar/Tab.svelte b/components/mdc/TabBar/Tab.svelte
index 67d1b0a1..32476d0c 100644
--- a/components/mdc/TabBar/Tab.svelte
+++ b/components/mdc/TabBar/Tab.svelte
@@ -28,7 +28,7 @@ onMount(() => {
 </style>
 
 <button
-  class="mdc-tab mdc-tab--stacked mdc-tab--min-width {$$props.class}"
+  class="mdc-tab mdc-tab--stacked mdc-tab--min-width {$$props.class || ''}"
   class:mdc-tab--active={active}
   role="tab"
   aria-selected={active}
diff --git a/components/mdc/TabBar/TabBar.svelte b/components/mdc/TabBar/TabBar.svelte
index 4b486aac..5be662ff 100644
--- a/components/mdc/TabBar/TabBar.svelte
+++ b/components/mdc/TabBar/TabBar.svelte
@@ -23,6 +23,6 @@ onMount(() => {
 }
 </style>
 
-<div class="mdc-tab-bar {$$props.class}" role="tablist" bind:this={element}>
+<div class="mdc-tab-bar {$$props.class || ''}" role="tablist" bind:this={element}>
   <slot />
 </div>
diff --git a/components/mdc/TextInput/MoneyInput.svelte b/components/mdc/TextInput/MoneyInput.svelte
index bf9a4757..f4c8b041 100644
--- a/components/mdc/TextInput/MoneyInput.svelte
+++ b/components/mdc/TextInput/MoneyInput.svelte
@@ -64,7 +64,7 @@ const focus = (node) => autofocus && node.focus()
 </style>
 
 <label
-  class="mdc-text-field mdc-text-field--outlined {$$props.class} textfield-radius"
+  class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
   class:mdc-text-field--invalid={error}
diff --git a/components/mdc/TextInput/TextArea.svelte b/components/mdc/TextInput/TextArea.svelte
index 29de0430..3fc23ed2 100644
--- a/components/mdc/TextInput/TextArea.svelte
+++ b/components/mdc/TextInput/TextArea.svelte
@@ -64,7 +64,7 @@ label {
 </style>
 
 <label
-  class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea {$$props.class} textfield-radius"
+  class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--label-floating={label}
   class:mdc-text-field--with-internal-counter={maxlength}
diff --git a/components/mdc/TextInput/TextField.svelte b/components/mdc/TextInput/TextField.svelte
index 55cc4da0..86590bc7 100644
--- a/components/mdc/TextInput/TextField.svelte
+++ b/components/mdc/TextInput/TextField.svelte
@@ -58,7 +58,7 @@ const focus = (node) => autofocus && node.focus()
 </style>
 
 <label
-  class="mdc-text-field mdc-text-field--outlined {$$props.class} textfield-radius"
+  class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
   bind:this={element}
diff --git a/components/mdc/Tooltip/Tooltip.svelte b/components/mdc/Tooltip/Tooltip.svelte
index bbb01ae2..278b6268 100644
--- a/components/mdc/Tooltip/Tooltip.svelte
+++ b/components/mdc/Tooltip/Tooltip.svelte
@@ -33,7 +33,7 @@ onMount(() => {
 </script>
 
 <div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
-  <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class}">
+  <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
     <slot />
   </div>
 </div>
diff --git a/components/mdc/Tooltip/Wrapper.svelte b/components/mdc/Tooltip/Wrapper.svelte
index 7738bfba..d4e477ce 100644
--- a/components/mdc/Tooltip/Wrapper.svelte
+++ b/components/mdc/Tooltip/Wrapper.svelte
@@ -2,6 +2,6 @@
 export let ariaDescribedBy
 </script>
 
-<div class={$$props.class} aria-describedby={ariaDescribedBy}>
+<div class={$$props.class || ''} aria-describedby={ariaDescribedBy}>
   <slot />
 </div>
diff --git a/components/mdc/TopAppBar/TopAppBar.svelte b/components/mdc/TopAppBar/TopAppBar.svelte
index 46a28dc8..240a1753 100644
--- a/components/mdc/TopAppBar/TopAppBar.svelte
+++ b/components/mdc/TopAppBar/TopAppBar.svelte
@@ -32,7 +32,7 @@ onMount(() => {
 </style>
 
 <header
-  class="mdc-top-app-bar absolute {$$props.class}"
+  class="mdc-top-app-bar absolute {$$props.class || ''}"
   class:mdc-top-app-bar--dense={dense}
   class:mdc-top-app-bar--fixed={fixed}
   class:bg-color-variant={bgColorIsVariant}
diff --git a/components/mdc/Tour/Tour.svelte b/components/mdc/Tour/Tour.svelte
index 1f669bac..a494f73e 100644
--- a/components/mdc/Tour/Tour.svelte
+++ b/components/mdc/Tour/Tour.svelte
@@ -71,7 +71,7 @@ function setAlertProps() {
 </script>
 
 <Dialog.Alert
-  class={$$props.class}
+  class={$$props.class || ''}
   title={tourTitle}
   on:chosen={(event) => alertChosen(event.detail)}
   open={openDialog}