@noxlovette/material 0.9.2 → 0.9.4

package/dist/components/nav/appbar/theme.js

@@ -126,7 +126,7 @@ export const appbar = tv({
         row: 'grid w-full items-center px-spacing-50',
         childrenRow: 'w-full px-spacing-100 pb-spacing-100',
         ghost: 'w-full shrink-0 pointer-events-none',
-        textContainer: 'flex min-w-spacing-0 flex-col gap-spacing-25 [--lead:0.25rem] [--trail:0.25rem]',
+        textContainer: 'flex min-w-spacing-0 flex-col gap-spacing-25 [--lead:var(--spacing-spacing-50)] [--trail:var(--spacing-spacing-50)]',
         title: 'text-md-sys-color-on-surface',
         subtitle: 'text-md-sys-color-on-surface-variant',
         leading: 'text-md-sys-color-on-surface col-start-1 row-start-1 flex shrink-0 items-center justify-self-start',
@@ -163,7 +163,7 @@ export const appbar = tv({
         searchContainer: {
             true: {
                 row: 'grid-cols-[auto_1fr_auto]',
-                textContainer: '[--lead:0.5rem] [--trail:0.5rem]'
+                textContainer: '[--lead:var(--spacing-spacing-100)] [--trail:var(--spacing-spacing-100)]'
             },
             false: ''
         },
@@ -173,10 +173,26 @@ export const appbar = tv({
     },
     compoundVariants: [
         // A title with no button beside it sits at the 16dp inset.
-        { align: 'start', noLeading: true, class: { textContainer: '[--lead:1rem]' } },
-        { align: 'start', noTrailing: true, class: { textContainer: '[--trail:1rem]' } },
-        { searchContainer: true, noLeading: true, class: { textContainer: '[--lead:0.75rem]' } },
-        { searchContainer: true, noTrailing: true, class: { textContainer: '[--trail:0.75rem]' } }
+        {
+            align: 'start',
+            noLeading: true,
+            class: { textContainer: '[--lead:var(--spacing-spacing-200)]' }
+        },
+        {
+            align: 'start',
+            noTrailing: true,
+            class: { textContainer: '[--trail:var(--spacing-spacing-200)]' }
+        },
+        {
+            searchContainer: true,
+            noLeading: true,
+            class: { textContainer: '[--lead:var(--spacing-spacing-150)]' }
+        },
+        {
+            searchContainer: true,
+            noTrailing: true,
+            class: { textContainer: '[--trail:var(--spacing-spacing-150)]' }
+        }
     ],
     defaultVariants: {
         align: 'start',

package/dist/components/nav/navbar/theme.js

@@ -12,7 +12,7 @@ export const navitem = tv({
         base: 'group relative flex flex-1 flex-col items-center justify-center min-w-spacing-0 max-w-[168px] h-full transition-colors md-sys-motion-fast-effects',
         content: 'flex flex-col items-center justify-center gap-spacing-50 w-full',
         iconContainer: 'relative flex items-center justify-center h-spacing-400 w-spacing-800 rounded-full transition-colors md-sys-motion-effects',
-        icon: 'text-[24px] size-spacing-300',
+        icon: 'text-icon-24 size-(--text-icon-24)',
         label: 'md-sys-typescale-label-medium truncate w-full text-center'
     },
     variants: {

package/dist/components/nav/tabs/theme.js

@@ -19,7 +19,7 @@ export const tab = tv({
             'data-[state=inactive]:text-md-sys-color-on-surface-variant'
         ].join(' '),
         label: 'md-sys-typescale-title-small',
-        icon: 'size-spacing-300 text-[24px]'
+        icon: 'size-(--text-icon-24) text-icon-24'
     },
     variants: {
         variant: {

package/dist/components/snackbar/theme.js

@@ -5,7 +5,7 @@ export const snackbar = tv({
         label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-spacing-150 cursor-pointer ',
         actionWrapper: 'flex items-center z-40',
         supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-medium max-w-[60ch] ',
-        icon: 'size-spacing-300 text-[24px] text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
+        icon: 'size-(--text-icon-24) text-icon-24 text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
     },
     variants: {
         fixed: {

package/dist/components/table/TableHeader.svelte

@@ -36,7 +36,7 @@ and `sortDirection` props. Defaults to `scope="col"`.
         ].join(' ')}
         aria-hidden="true"
       >
-        <Icon name="arrow_upward" class="size-[18px] text-[18px]" />
+        <Icon name="arrow_upward" class="text-icon-18 size-(--text-icon-18)" />
       </span>
     {/if}
   </span>

package/dist/components/toolbar/theme.js

@@ -52,7 +52,7 @@ export const toolbar = tv({
 export const toolbarButton = tv({
     slots: {
         base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
-        icon: 'size-spacing-250 text-[20px]'
+        icon: 'size-(--text-icon-20) text-icon-20'
     },
     variants: {
         color: {
@@ -65,7 +65,7 @@ export const toolbarButton = tv({
 export const toolbarGroupItem = tv({
     slots: {
         base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
-        icon: 'size-spacing-250 text-[20px]'
+        icon: 'size-(--text-icon-20) text-icon-20'
     },
     variants: {
         color: {

package/dist/styles/components.css

@@ -1,10 +1,15 @@
 /*
- * M3 component dimensions that aren't on the spacing scale (issue #30). Each property is named
- * after its token in the M3 token database, md.comp.<component>.<…> with dots as dashes, and
+ * M3 component dimensions that aren't on the spacing scale (issue #30). Database-backed properties
+ * are named after md.comp.<component>.<…> with dots as dashes; local component-specific dimensions
+ * are named for their use. Both are
  * used as `w-(--md-comp-…)`. A dimension that lands on the spacing grid uses the spacing token
  * instead (the rail's 4dp item gap is `gap-spacing-50`, not a property here).
  */
 :root {
+  /* XL button pill: half its 136dp height, beyond the system shape scale. */
+  --md-comp-button-xl-round-corner: 4.25rem;
+  --md-comp-slider-inner-corner: 0.125rem; /* 2dp, smaller than system shape XS */
+
   /* Navigation rail: https://m3.material.io/components/navigation-rail/specs */
   --md-comp-nav-rail-collapsed-container-width: 6rem; /* 96dp */
   --md-comp-nav-rail-collapsed-top-space: 2.75rem; /* 44dp */

package/dist/styles/icon.css

@@ -1,3 +1,22 @@
+/* Icon sizes used by the M3 components and the Material Symbols font. The 18, 22, 26, 38 and
+   50dp steps are component-specific glyph dimensions (chips, split buttons), not M3 system sizes.
+   Each token controls both the glyph font size and its box, so they cannot drift apart. */
+@theme {
+  --text-icon-16: 1rem;
+  --text-icon-18: 1.125rem;
+  --text-icon-20: 1.25rem;
+  --text-icon-22: 1.375rem;
+  --text-icon-24: 1.5rem;
+  --text-icon-26: 1.625rem;
+  --text-icon-28: 1.75rem;
+  --text-icon-32: 2rem;
+  --text-icon-36: 2.25rem;
+  --text-icon-38: 2.375rem;
+  --text-icon-40: 2.5rem;
+  --text-icon-48: 3rem;
+  --text-icon-50: 3.125rem;
+}
+
 /*
   Default grade for Icon's `grad="auto"`. Light icons on a dark background look heavier than dark
   ones on a light background (visual bleed), so M3 drops the grade to -25 on dark UI.

package/dist/styles/motion.css

@@ -284,6 +284,23 @@
   /* @generated:springs:end */
 }
 
+/* Spatial CSS transitions settle immediately under the OS motion preference. Effects tokens
+   remain available for short opacity and color fades. Keep this outside the generated block. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --md-sys-motion-duration-fast-spatial: 0ms;
+    --md-sys-motion-duration-spatial: 0ms;
+    --md-sys-motion-duration-slow-spatial: 0ms;
+    --md-sys-motion-timing-function-fast-spatial: var(
+      --md-sys-motion-timing-function-fast-effects-spring
+    );
+    --md-sys-motion-timing-function-spatial: var(--md-sys-motion-timing-function-effects-spring);
+    --md-sys-motion-timing-function-slow-spatial: var(
+      --md-sys-motion-timing-function-slow-effects-spring
+    );
+  }
+}
+
 /*
   One utility per Expressive spring, setting duration + timing function together. Pair with a
   Tailwind transition-property utility: `transition-colors md-sys-motion-fast-effects`.

package/dist/styles/rounding.css

@@ -1,10 +1,14 @@
+/* M3 shape scale: https://m3.material.io/styles/shape/corner-radius-scale */
 @theme {
   --radius-none: 0;
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
+  --radius-lg-increased: 20px;
   --radius-xl: 28px;
+  --radius-xl-increased: 32px;
+  --radius-xxl: 48px;
   --radius-full: calc(infinity * 1px);
 
   --md-util-optical-centering-coefficient: 0.11;

package/dist/utils/icon/Icon.svelte

@@ -24,11 +24,11 @@ With `transition`, a change of `name` crossfades on a spring instead of swapping
   */
   const sizeMap: Record<IconSize, { cls: string; opsz: number }> = {
     inline: { cls: 'size-[1em] align-[-0.115em]', opsz: 20 },
-    xs: { cls: 'size-spacing-200 text-[16px]', opsz: 20 },
-    sm: { cls: 'size-spacing-250 text-[20px]', opsz: 20 },
-    md: { cls: 'size-spacing-300 text-[24px]', opsz: 24 },
-    lg: { cls: 'size-spacing-500 text-[40px]', opsz: 40 },
-    xl: { cls: 'size-spacing-600 text-[48px]', opsz: 48 }
+    xs: { cls: 'size-(--text-icon-16) text-icon-16', opsz: 20 },
+    sm: { cls: 'size-(--text-icon-20) text-icon-20', opsz: 20 },
+    md: { cls: 'size-(--text-icon-24) text-icon-24', opsz: 24 },
+    lg: { cls: 'size-(--text-icon-40) text-icon-40', opsz: 40 },
+    xl: { cls: 'size-(--text-icon-48) text-icon-48', opsz: 48 }
   };
 
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [