fix: move all custom classes to end of class list, allowing them to override other classes

Author: hperrin

packages/accordion/src/Accordion.svelte

@@ -4,10 +4,10 @@
   bind:this={element}
   use:useActions={use}
   class={classMap({
-    [className]: true,
     'smui-accordion': true,
     'smui-accordion--multiple': multiple,
     'smui-accordion--with-open-dialog': withOpenDialog,
+    [className]: true,
   })}
   {...restProps}
   onSMUIAccordionPanelActivate={(e) => {

packages/accordion/src/Header.svelte

@@ -13,9 +13,9 @@
     addStyle,
   }}
   class={classMap({
-    [className]: true,
     'smui-accordion__header': true,
     ...internalClasses,
+    [className]: true,
   })}
   style={Object.entries(internalStyles)
     .map(([name, value]) => `${name}: ${value};`)

packages/accordion/src/Panel.svelte

@@ -4,7 +4,6 @@
   bind:this={element}
   {use}
   class={classMap({
-    [className]: true,
     'smui-accordion__panel': true,
     'smui-accordion__panel--open': open,
     'smui-accordion__panel--opened': opened,
@@ -16,6 +15,7 @@
     (extend && open ? extendedElevation : elevation)]:
       (elevation !== 0 && variant === 'raised') ||
       (extendedElevation !== 0 && variant === 'raised' && extend && open),
+    [className]: true,
   })}
   {color}
   variant={variant === 'raised' ? 'unelevated' : variant}

packages/autocomplete/src/Autocomplete.svelte

@@ -5,8 +5,8 @@
   use:Anchor
   use:useActions={use}
   class={classMap({
-    [className]: true,
     'smui-autocomplete': true,
+    [className]: true,
   })}
   {...exclude(restProps, ['menu$', 'textfield$', 'list$'])}
   onfocusout={(

packages/badge/src/Badge.svelte

@@ -4,12 +4,12 @@
   bind:this={element}
   use:useActions={use}
   class={classMap({
-    [className]: true,
     'smui-badge': true,
     'smui-badge--rounded': !square,
     ['smui-badge--color-' + color]: true,
     ['smui-badge--position-' + position]: true,
     ['smui-badge--align-' + align]: true,
+    [className]: true,
   })}
   role="status"
   {...restProps}

packages/banner/src/Banner.svelte

@@ -6,11 +6,11 @@
   bind:this={element}
   use:useActions={use}
   class={classMap({
-    [className]: true,
     'mdc-banner': true,
     'mdc-banner--centered': centered,
     'mdc-banner--mobile-stacked': mobileStacked,
     ...internalClasses,
+    [className]: true,
   })}
   style={Object.entries(internalStyles)
     .map(([name, value]) => `${name}: ${value};`)

packages/bottom-app-bar/src/AutoAdjust.svelte

@@ -5,8 +5,8 @@
   bind:this={element}
   {use}
   class={classMap({
-    [className]: true,
     [adjustClass]: true,
+    [className]: true,
   })}
   style={Object.entries(internalStyles)
     .map(([name, value]) => `${name}: ${value};`)

packages/bottom-app-bar/src/BottomAppBar.svelte

@@ -6,10 +6,10 @@
   bind:this={element}
   use:useActions={use}
   class={classMap({
-    [className]: true,
     'smui-bottom-app-bar': true,
     'smui-bottom-app-bar--standard': variant === 'standard',
     'smui-bottom-app-bar--fixed': variant === 'fixed',
+    [className]: true,
   })}
   style={Object.entries(internalStyles)
     .map(([name, value]) => `${name}: ${value};`)

packages/bottom-app-bar/src/Section.svelte

@@ -4,9 +4,9 @@
   bind:this={element}
   {use}
   class={classMap({
-    [className]: true,
     'smui-bottom-app-bar__section': true,
     'smui-bottom-app-bar__section--fab-inset': fabInset,
+    [className]: true,
   })}
   color={$color}
   variant="unelevated"

packages/button/src/Button.svelte

@@ -19,7 +19,6 @@
     ...use,
   ]}
   class={classMap({
-    [className]: true,
     'mdc-button': true,
     'mdc-button--raised': variant === 'raised',
     'mdc-button--unelevated': variant === 'unelevated',
@@ -36,6 +35,7 @@
     'mdc-banner__primary-action': context === 'banner' && !secondary,
     'mdc-tooltip__action': context === 'tooltip:rich-actions',
     ...internalClasses,
+    [className]: true,
   })}
   style={Object.entries(internalStyles)
     .map(([name, value]) => `${name}: ${value};`)