@noxlovette/material 0.9.3 → 0.10.0

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/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/Theme.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { MediaQuery } from 'svelte/reactivity';
-  import { generateThemeCSS, themeState, STORAGE_KEY } from './theme.svelte.js';
+  import { generateThemeCSS, themeState, STORAGE_KEY } from './themeState.svelte.js';
 
   /**
    * Whether to generate and inject the M3 dynamic-color CSS custom properties

package/dist/utils/ThemeScript.svelte

@@ -9,7 +9,7 @@ Add this to your root +layout.svelte (or any layout that wraps the whole app):
 <App>...</App>
 -->
 <script lang="ts">
-  import { THEME_INIT_SCRIPT } from './theme.svelte.js';
+  import { THEME_INIT_SCRIPT } from './themeState.svelte.js';
 </script>
 
 <svelte:head>

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/dist/utils/index.d.ts

@@ -1,9 +1,9 @@
 export * from './icon/index.js';
 export * from './shortcut.js';
-export * from './theme.svelte.js';
+export * from './themeState.svelte.js';
 export * from './types.js';
 export * from './ui.js';
-export type { ColorScheme, ContrastMode, ThemeConfig, ThemeVariant } from './theme.svelte.js';
+export type { ColorScheme, ContrastMode, ThemeConfig, ThemeVariant } from './themeState.svelte.js';
 export { default as Layer } from './Layer.svelte';
 export { default as Theme } from './Theme.svelte';
 export { default as ThemeScript } from './ThemeScript.svelte';

package/dist/utils/index.js

@@ -1,6 +1,6 @@
 export * from './icon/index.js';
 export * from './shortcut.js';
-export * from './theme.svelte.js';
+export * from './themeState.svelte.js';
 export * from './types.js';
 export * from './ui.js';
 export { default as Layer } from './Layer.svelte';

package/package.json

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