fix: move class prop classes to end of list for sub-components

Closes #698

Author: hperrin

packages/autocomplete/src/Autocomplete.svelte

@@ -47,8 +47,8 @@
   </div>
   <Menu
     class={classMap({
-      [menu$class]: true,
       'smui-autocomplete__menu': true,
+      [menu$class]: true,
     })}
     id={menuId}
     managed

packages/banner/src/Banner.svelte

@@ -31,8 +31,8 @@
     <div
       bind:this={content}
       class={classMap({
-        [content$class]: true,
         'mdc-banner__content': true,
+        [content$class]: true,
       })}
       role="alertdialog"
       aria-live="assertive"
@@ -41,16 +41,16 @@
       {#if icon || label}
         <div
           class={classMap({
-            [textWrapper$class]: true,
             'mdc-banner__graphic-text-wrapper': true,
+            [textWrapper$class]: true,
           })}
           {...prefixFilter(restProps, 'textWrapper$')}
         >
           {#if icon}
             <div
               class={classMap({
-                [graphic$class]: true,
                 'mdc-banner__graphic': true,
+                [graphic$class]: true,
               })}
               role="img"
               {...altProp}

packages/checkbox/src/Checkbox.svelte

@@ -38,8 +38,8 @@
     bind:this={checkbox}
     use:useActions={input$use}
     class={classMap({
-      [input$class]: true,
       'mdc-checkbox__native-control': true,
+      [input$class]: true,
     })}
     type="checkbox"
     {...inputProps}

packages/chip-input/src/ChipInput.svelte

@@ -24,8 +24,8 @@
   <Set
     bind:chips
     class={classMap({
-      [chipSet$class]: true,
       'smui-chip-input__chip-set': true,
+      [chipSet$class]: true,
     })}
     input
     nonInteractive={disabled}
@@ -57,8 +57,8 @@
   <Autocomplete
     bind:this={autocomplete}
     class={classMap({
-      [autocomplete$class]: true,
       'smui-chip-input__autocomplete': true,
+      [autocomplete$class]: true,
     })}
     combobox={autocomplete$combobox}
     showMenuWithNoInput={false}
@@ -76,8 +76,8 @@
   >
     <Textfield
       class={classMap({
-        [textfield$class]: true,
         'smui-chip-input__textfield': true,
+        [textfield$class]: true,
       })}
       {input}
       {floatingLabel}
@@ -104,8 +104,8 @@
     {#snippet loading()}
       <ListText
         class={classMap({
-          [loading$class]: true,
           'smui-chip-input__loading': true,
+          [loading$class]: true,
         })}
         {...prefixFilter(restProps, 'loading$')}
       >

packages/chips/src/TrailingAction.svelte

@@ -44,8 +44,8 @@
   <span
     use:useActions={icon$use}
     class={classMap({
-      [icon$class]: true,
       'mdc-deprecated-chip-trailing-action__icon': true,
+      [icon$class]: true,
     })}
     {...prefixFilter(restProps, 'icon$')}>{@render children?.()}</span
   >

packages/data-table/src/DataTable.svelte

@@ -33,16 +33,16 @@
     bind:this={container}
     use:useActions={container$use}
     class={classMap({
-      [container$class]: true,
       'mdc-data-table__table-container': true,
+      [container$class]: true,
     })}
     {...prefixFilter(restProps, 'container$')}
   >
     <table
       use:useActions={table$use}
       class={classMap({
-        [table$class]: true,
         'mdc-data-table__table': true,
+        [table$class]: true,
       })}
       {...prefixFilter(restProps, 'table$')}
     >

packages/data-table/src/Pagination.svelte

@@ -12,8 +12,8 @@
   <div
     use:useActions={trailing$use}
     class={classMap({
-      [trailing$class]: true,
       'mdc-data-table__pagination-trailing': true,
+      [trailing$class]: true,
     })}
     {...prefixFilter(restProps, 'trailing$')}
   >

packages/dialog/src/Dialog.svelte

@@ -49,15 +49,15 @@
 >
   <div
     class={classMap({
-      [container$class]: true,
       'mdc-dialog__container': true,
+      [container$class]: true,
     })}
     {...prefixFilter(restProps, 'container$')}
   >
     <div
       class={classMap({
-        [surface$class]: true,
         'mdc-dialog__surface': true,
+        [surface$class]: true,
       })}
       role="alertdialog"
       aria-modal="true"

packages/menu/src/SelectionGroup.svelte

@@ -4,8 +4,8 @@
   <ul
     use:useActions={list$use}
     class={classMap({
-      [list$class]: true,
       'mdc-menu__selection-group': true,
+      [list$class]: true,
     })}
     {...prefixFilter(restProps, 'list$')}
   >

packages/radio/src/Radio.svelte

@@ -26,8 +26,8 @@
   <input
     use:useActions={input$use}
     class={classMap({
-      [input$class]: true,
       'mdc-radio__native-control': true,
+      [input$class]: true,
     })}
     type="radio"
     {...inputProps}