@noxlovette/material 0.6.1 → 0.7.0

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

@@ -1,10 +1,35 @@
 import { tv } from '../../../utils/tv.js';
+/*
+  M3 Expressive navigation rail (https://m3.material.io/components/navigation-rail/specs):
+  - Container: `surface-container`, the spec's optional container role, which is this library's
+    window colour (App), so the rail reads as part of the window beside `surface` panes rather
+    than as a strip. The modal rail's token is `surface-container` too.
+  - Collapsed: 96dp wide, no elevation or shape. Destinations sit 4dp apart.
+  - Expanded: hugs its widest destination between 220 and 360dp, destinations touching. Standard
+    (lg+, pushes content) keeps the collapsed container; modal (md, over a scrim) adds
+    elevation 3 and 16dp trailing corners.
+  - 44dp above the first element; at least 40dp between the menu/FAB header and the destinations.
+  - Header elements sit in a 56dp column 20dp from the leading edge, the same column as the
+    destinations' active indicators, so nothing shifts sideways when the rail expands.
+  Expanding is one spatial spring on a progress value, 0 collapsed to 1 expanded, which
+  Rail.svelte writes to `--rail-p` (after Compose's WideNavigationRail). The width, the gap
+  between destinations, the modal corners and each destination's geometry all follow it, so
+  nothing here transitions spatially on its own.
+*/
 export const rail = tv({
     slots: {
-        base: 'py-spacing-600 hidden bg-md-sys-color-surface-container z-layer-rail flex-col md:flex gap-spacing-300 transition-[width,padding,background-color] md-sys-motion-spatial',
-        items: 'flex flex-col gap-spacing-150 pt-spacing-300 scrollbar-none w-full overflow-x-hidden',
-        ghost: 'hidden md:block shrink-0 transition-[width] md-sys-motion-spatial',
-        scrim: 'hidden md:block lg:hidden inset-spacing-0'
+        // Modal corners grow with the progress (0 → 16dp); the standard rail stays square.
+        base: 'rounded-r-[calc(var(--radius-lg)_*_var(--rail-p,0))] lg:rounded-r-none hidden md:flex flex-col z-layer-rail overflow-hidden pt-(--md-comp-nav-rail-collapsed-top-space) pb-spacing-250 bg-md-sys-color-surface-container transition-[box-shadow] md-sys-motion-effects',
+        // Always start-aligned: collapsed, the content box is exactly the 56dp column, so this is
+        // centred anyway. Centring it would fling the menu and FAB to the middle of the still-wide
+        // rail the moment a collapse starts.
+        header: 'flex flex-col items-start gap-spacing-300 px-spacing-250',
+        menu: 'flex w-spacing-700 justify-center',
+        nav: 'flex min-h-spacing-0 w-full flex-1 flex-col',
+        // 4dp between destinations collapsed, 0 expanded, following the progress.
+        items: 'flex w-full flex-col overflow-x-hidden overflow-y-auto [scrollbar-width:none] gap-[calc(var(--spacing-spacing-50)_*_(1_-_var(--rail-p,0)))]',
+        ghost: 'hidden md:block shrink-0 w-(--md-comp-nav-rail-collapsed-container-width) lg:w-(--rail-width)',
+        scrim: 'hidden md:block lg:hidden inset-spacing-0 z-layer-rail bg-md-sys-color-scrim/32 transition-opacity md-sys-motion-effects'
     },
     variants: {
         anchor: {
@@ -19,15 +44,19 @@ export const rail = tv({
         },
         expanded: {
             true: {
-                base: 'pl-spacing-450 w-60 items-start bg-md-sys-color-surface-container-highest lg:bg-md-sys-color-surface-container rounded-r-lg',
-                ghost: 'w-24 lg:w-60'
+                base: 'w-max min-w-(--md-comp-nav-rail-expanded-container-width-minimum) max-w-(--md-comp-nav-rail-expanded-container-width-maximum) pt-(--md-comp-nav-rail-expanded-top-space) shadow-elevation-3 lg:shadow-elevation-0',
+                scrim: 'opacity-100'
             },
             false: {
-                base: 'w-24 items-center',
-                items: 'items-center',
-                ghost: 'w-24'
+                base: 'w-(--md-comp-nav-rail-collapsed-container-width)',
+                scrim: 'pointer-events-none opacity-0'
             }
         },
+        /* Header space: only when there is a header to keep the destinations away from. */
+        header: {
+            true: { nav: 'mt-spacing-500' },
+            false: {}
+        },
         rounded: {
             true: {
                 base: 'rounded-xl'
@@ -36,81 +65,65 @@ export const rail = tv({
         }
     },
     defaultVariants: {
-        anchor: 'viewport'
+        anchor: 'viewport',
+        header: false
     }
 });
+/*
+  One destination. The link spans the rail's full width (M3: the target area always does); the
+  active indicator inside it hugs its contents. Collapsed, the indicator is 56×32 around the icon
+  with the label 4dp below; expanded, it's a 56dp pill around icon and label, 16dp padding, 8dp
+  between them. State layers are `on-secondary-container` at 8% hover and 10% focus/press, drawn
+  on the indicator but triggered anywhere on the link. Selecting a destination grows its fill
+  out from the centre (M3's active indicator, after Compose's NavigationRailItem).
+
+  Geometry isn't here: it interpolates on the rail's expand progress, in RailItem.svelte's
+  <style>. `layout` is which side of the halfway point that progress is on, and decides only
+  what may switch while the label is invisible: its typescale and colour.
+*/
 export const railElement = tv({
     slots: {
-        base: 'group relative z-30 flex w-full transition-all md-sys-motion-spatial',
-        content: 'flex items-center min-w-spacing-0 rounded-full gap-spacing-25 py-spacing-75 transition-all md-sys-motion-spatial',
-        iconContainer: 'relative rounded-full items-center justify-center inline-flex transition-all md-sys-motion-spatial',
-        icon: 'text-[24px] transition-all md-sys-motion-spatial',
-        label: 'transition-all md-sys-motion-spatial whitespace-nowrap'
+        base: 'group rail-item relative flex w-full px-spacing-250 outline-none',
+        // As wide as the expanded pill, so an expanded rail (w-max) hugs its widest destination.
+        sizer: 'relative h-full shrink-0 pl-spacing-600 pr-spacing-200',
+        measure: 'invisible md-sys-typescale-label-large whitespace-nowrap',
+        indicator: 'rail-indicator absolute left-spacing-0 isolate rounded-full state-layer before:rounded-full',
+        // The selected fill, under the state layer. It grows from the indicator's centre to its
+        // edges on select and shrinks back on deselect, on RailItem's --rail-sel spring.
+        fill: 'rail-fill absolute -z-10 rounded-full bg-md-sys-color-secondary-container',
+        icon: 'rail-icon absolute left-spacing-200 inline-flex',
+        label: 'rail-label absolute whitespace-nowrap transition-colors md-sys-motion-fast-effects'
     },
     variants: {
         active: {
             true: {
-                content: 'text-md-sys-color-on-secondary-container',
-                label: 'font-bold',
-                iconContainer: 'group-hover:text-md-sys-color-secondary  bg-md-sys-color-secondary-container'
+                icon: 'text-md-sys-color-on-secondary-container'
             },
             false: {
-                content: 'text-md-sys-color-on-surface-variant',
-                iconContainer: ''
+                icon: 'text-md-sys-color-on-surface-variant',
+                label: 'text-md-sys-color-on-surface-variant'
             }
         },
-        expanded: {
-            true: {
-                base: 'justify-start',
-                content: 'p-spacing-200 gap-spacing-150',
-                iconContainer: '',
-                label: 'md-sys-typescale-label-large'
-            },
-            false: {
-                base: 'text-center justify-center',
-                content: 'flex-col',
-                iconContainer: 'py-spacing-75 px-spacing-200',
-                label: 'md-sys-typescale-label-medium'
-            }
+        layout: {
+            top: { label: 'md-sys-typescale-label-medium' },
+            start: { label: 'md-sys-typescale-label-large' }
         },
         disabled: {
             true: {
                 base: 'cursor-not-allowed opacity-38'
-            }
-        },
-        mobile: {
-            true: {
-                base: 'flex-1 flex-col items-center justify-center h-full min-w-spacing-0 max-w-[168px]',
-                content: 'py-spacing-0 gap-spacing-50 items-center justify-center w-full',
-                iconContainer: 'h-spacing-400 w-spacing-800 py-spacing-0 px-spacing-0',
-                icon: 'size-spacing-300',
-                label: 'truncate w-full text-center'
             },
-            false: {}
+            false: {
+                // State layer and focus ring on the indicator, triggered by the full-width link.
+                indicator: 'group-hover:before:bg-md-sys-color-on-secondary-container/8 group-focus-visible:before:bg-md-sys-color-on-secondary-container/10 group-active:before:bg-md-sys-color-on-secondary-container/10 group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary'
+            }
         }
     },
     compoundVariants: [
-        {
-            expanded: true,
-            active: true,
-            class: {
-                iconContainer: 'bg-transparent',
-                content: 'bg-md-sys-color-secondary-container'
-            }
-        },
-        {
-            expanded: true,
-            active: false,
-            class: {
-                content: 'group-hover:bg-md-sys-color-surface-variant'
-            }
-        },
-        {
-            expanded: false,
-            active: false,
-            class: {
-                iconContainer: 'group-hover:bg-md-sys-color-surface-variant'
-            }
-        }
-    ]
+        { active: true, layout: 'top', class: { label: 'text-md-sys-color-secondary' } },
+        { active: true, layout: 'start', class: { label: 'text-md-sys-color-on-secondary-container' } }
+    ],
+    defaultVariants: {
+        layout: 'top',
+        disabled: false
+    }
 });

package/dist/components/nav/tabs/Tabs.stories.svelte

@@ -3,6 +3,7 @@
   import TabHolder from './TabHolder.svelte';
   import TabContent from './TabContent.svelte';
   import Body from '../../typography/body/Body.svelte';
+  import type { TabProps } from './types.js';
 
   const { Story } = defineMeta({
     title: 'Navigation/Tabs',
@@ -27,7 +28,7 @@
     { value: 'flights', name: 'Flights', iconProps: { name: 'flight' } },
     { value: 'trips', name: 'Trips', iconProps: { name: 'luggage' } },
     { value: 'explore', name: 'Explore', iconProps: { name: 'explore' } }
-  ];
+  ] satisfies TabProps[];
 </script>
 
 <Story name="Playground">

package/dist/index.css

@@ -4,5 +4,7 @@
 @import './styles/rounding.css';
 @import './styles/elevation.css';
 @import './styles/layers.css';
+@import './styles/components.css';
+@import './styles/icon.css';
 @import './styles/prose.css';
 @import './styles/component.css';

package/dist/styles/components.css

@@ -0,0 +1,50 @@
+/*
+ * 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
+ * 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 {
+  /* 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 */
+  --md-comp-nav-rail-expanded-top-space: 2.75rem; /* 44dp */
+  --md-comp-nav-rail-expanded-container-width-minimum: 13.75rem; /* 220dp */
+  --md-comp-nav-rail-expanded-container-width-maximum: 22.5rem; /* 360dp */
+}
+
+/*
+ * How far the page's content starts from the leading edge to clear a viewport-anchored Rail.
+ * The Rail writes --md-rail-width (its drawn width, every frame while it springs) on <html>;
+ * with no Rail mounted it's unset and the inset is 0. On medium windows the expanded rail is
+ * modal and overlays the content, so the inset stays at the collapsed width; from lg the
+ * standard rail pushes the content, so the inset follows its width. App's shell pads by it;
+ * fixed surfaces that span the window (AppBar) start at it. Custom layouts: `ps-(--md-rail-inset)`.
+ */
+:root {
+  --md-rail-inset: 0px;
+}
+@media (width >= 48rem) {
+  :root {
+    --md-rail-inset: var(--md-rail-rest, 0px);
+  }
+}
+@media (width >= 64rem) {
+  :root {
+    --md-rail-inset: var(--md-rail-width, 0px);
+  }
+}
+
+/*
+ * A page built on App behaves as an app, not a document: scrolling stops at its edges instead of
+ * bouncing (macOS/iOS rubber-banding) or chaining into pull-to-refresh, which showed the blank
+ * canvas past App's shell. The canvas takes the window colour anyway, for the browsers that
+ * still overscroll and the safe areas around it. Scoped to pages with an App, and in the base
+ * layer, so a consumer can restore overscroll with one `html { overscroll-behavior: auto }`.
+ */
+@layer base {
+  :root:has(.md-app) {
+    overscroll-behavior: none;
+    background-color: var(--color-md-sys-color-surface-container);
+  }
+}

package/dist/styles/icon.css

@@ -0,0 +1,13 @@
+/*
+  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.
+  https://m3.material.io/styles/icons/applying-icons#grade
+*/
+:root {
+  --md-icon-grade: 0;
+}
+
+.dark,
+[data-theme^='dark'] {
+  --md-icon-grade: -25;
+}

package/dist/utils/icon/Icon.stories.svelte

@@ -0,0 +1,97 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Body from '../../components/typography/body/Body.svelte';
+  import ButtonIcon from '../../components/buttons/ButtonIcon.svelte';
+  import Icon from './Icon.svelte';
+
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+  const variants = ['rounded', 'outlined', 'sharp'] as const;
+
+  const { Story } = defineMeta({
+    title: 'Utils/Icon',
+    component: Icon,
+    tags: ['autodocs'],
+    argTypes: {
+      size: { control: 'select', options: ['inline', ...sizes] },
+      variant: { control: 'inline-radio', options: variants },
+      fill: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
+      wght: { control: { type: 'range', min: 100, max: 700, step: 100 } },
+      grad: { control: 'select', options: ['auto', -50, -25, 0, 100, 200] },
+      opsz: { control: { type: 'range', min: 20, max: 48, step: 1 } },
+      transition: { control: 'inline-radio', options: ['none', 'fade', 'rotate'] }
+    },
+    args: { name: 'favorite', size: 'xl', variant: 'rounded', fill: 0, wght: 400, grad: 'auto' }
+  });
+</script>
+
+<script lang="ts">
+  let menuOpen = $state(false);
+  let adding = $state(false);
+  let playing = $state(false);
+</script>
+
+<Story name="Playground" />
+
+<!-- Toggle each button, and toggle again mid-flight: the spring reverses from where it is. -->
+<Story name="Transitions" asChild>
+  <div class="gap-spacing-300 flex items-center">
+    <ButtonIcon
+      variant="standard"
+      tooltipContent="rotate: menu ↔ menu_open"
+      iconProps={{ name: menuOpen ? 'menu_open' : 'menu', transition: 'rotate' }}
+      onclick={() => (menuOpen = !menuOpen)}
+    />
+    <ButtonIcon
+      variant="tonal"
+      tooltipContent="rotate: add ↔ close"
+      iconProps={{ name: adding ? 'close' : 'add', transition: 'rotate' }}
+      onclick={() => (adding = !adding)}
+    />
+    <ButtonIcon
+      variant="filled"
+      tooltipContent="fade: play_arrow ↔ pause"
+      iconProps={{ name: playing ? 'pause' : 'play_arrow', transition: 'fade' }}
+      onclick={() => (playing = !playing)}
+    />
+  </div>
+</Story>
+
+<Story name="Styles" asChild>
+  <div class="gap-spacing-300 flex">
+    {#each variants as variant (variant)}
+      <Icon name="home" size="lg" {variant} />
+    {/each}
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="gap-spacing-300 flex items-end">
+    {#each sizes as size (size)}
+      <Icon name="settings" {size} />
+    {/each}
+  </div>
+</Story>
+
+<Story name="Fill for state" asChild>
+  <div class="gap-spacing-300 flex">
+    <Icon name="favorite" size="lg" fill={0} />
+    <Icon name="favorite" size="lg" fill={1} />
+  </div>
+</Story>
+
+<Story name="Weights" asChild>
+  <div class="gap-spacing-200 flex">
+    {#each [200, 300, 400, 500, 600, 700] as wght (wght)}
+      <Icon name="search" size="lg" {wght} />
+    {/each}
+  </div>
+</Story>
+
+<Story name="Inline with text" asChild>
+  <Body size="large">
+    Saved to favorites <Icon name="favorite" size="inline" fill={1} />, shared <Icon
+      name="share"
+      size="inline"
+    />
+  </Body>
+</Story>

package/dist/utils/icon/Icon.stories.svelte.d.ts

@@ -0,0 +1,4 @@
+import Icon from './Icon.svelte';
+declare const Icon: import("svelte").Component<Record<string, never>, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/utils/icon/Icon.svelte

@@ -1,9 +1,29 @@
+<!--
+@component
+A Material Symbol, rendered from the variable icon font with its four axes: fill, weight, grade and
+optical size. https://m3.material.io/styles/icons/applying-icons
+
+Decorative by default (`aria-hidden`), so a screen reader doesn't read out the ligature name.
+Pass `aria-label` when the icon carries meaning with no visible text next to it.
+
+With `transition`, a change of `name` crossfades on a spring instead of swapping the glyph.
+-->
 <script lang="ts">
   import clsx from 'clsx';
-  import { twMerge } from 'tailwind-merge';
-  import type { IconProps, IconSize } from './types.js';
+  import { untrack } from 'svelte';
+  import { presence } from '../../animation/presence.svelte.js';
+  import { twMerge } from '../tv.js';
+  import { atRest, iconSwap, iconSwapReduced } from './swap.js';
+  import type { IconProps, IconSize, MaterialSymbolName } from './types.js';
 
+  /*
+    The optical size tracks the rendered size, so a 40dp icon keeps its stroke weight instead of
+    being a scaled-up 24dp glyph (M3 designs 20, 24, 40 and 48). `inline` takes the size of the
+    surrounding text and drops the baseline by ~11.5% of it, as M3 asks for symbols set in a line
+    of text; body and label text sit nearest the 20 optical size.
+  */
   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 },
@@ -17,21 +37,90 @@
     variant = 'rounded',
     fill = 0,
     wght = 400,
-    grad = 0,
+    grad = 'auto',
     opsz,
-    class: className
+    transition = 'none',
+    class: className,
+    ...restProps
   }: IconProps = $props();
 
   const resolved = $derived(sizeMap[size]);
   const resolvedOpsz = $derived(opsz ?? resolved.opsz);
-  const wrapperClass = 'inline-flex items-center justify-center leading-none';
+  // 'auto' reads --md-icon-grade (styles/icon.css): 0 on light schemes, -25 on dark ones.
+  const resolvedGrad = $derived(grad === 'auto' ? 'var(--md-icon-grade, 0)' : grad);
+  const labelled = $derived(Boolean(restProps['aria-label'] || restProps['aria-labelledby']));
+  // With a transition the glyphs stack in one grid cell; without, the original single glyph.
+  const wrapperClass = $derived(
+    transition === 'none'
+      ? 'inline-flex shrink-0 items-center justify-center leading-none'
+      : 'inline-grid shrink-0 place-items-center leading-none'
+  );
+  const glyphClass = $derived(
+    `material-symbols-${variant} md-sys-motion-fast-effects transition-[font-variation-settings] select-none`
+  );
+  const glyphStyle = $derived(
+    `font-size: 1em; font-variation-settings: 'FILL' ${fill}, 'wght' ${wght}, 'GRAD' ${resolvedGrad}, 'opsz' ${resolvedOpsz};`
+  );
+
+  /*
+    With a transition, the glyphs are a stack: the current one plus any still leaving. A name
+    change marks the current glyph leaving and adds the new one; each drops out of the stack when
+    its exit spring finishes. Changing back to a name that's still leaving brings that glyph back,
+    retargeted mid-flight, instead of stacking a third.
+  */
+  type Glyph = { id: number; name: MaterialSymbolName; leaving: boolean; initial: boolean };
+  let nextId = 1;
+  let glyphs = $state<Glyph[]>([
+    { id: 0, name: untrack(() => name), leaving: false, initial: true }
+  ]);
+
+  $effect.pre(() => {
+    const next = name;
+    untrack(() => {
+      if (glyphs.find((g) => !g.leaving)?.name === next) return;
+      if (transition === 'none') {
+        glyphs = [{ id: nextId++, name: next, leaving: false, initial: true }];
+        return;
+      }
+      for (const g of glyphs) g.leaving = g.name !== next;
+      if (!glyphs.some((g) => g.name === next)) {
+        glyphs.push({ id: nextId++, name: next, leaving: false, initial: false });
+      }
+    });
+  });
+
+  const reducedMotion = () =>
+    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  function swap(glyph: Glyph) {
+    const preset =
+      transition === 'none' || reducedMotion() ? iconSwapReduced : iconSwap[transition];
+    return presence(
+      () => !glyph.leaving,
+      glyph.initial ? atRest(preset) : preset,
+      () => (glyphs = glyphs.filter((g) => g.id !== glyph.id))
+    );
+  }
 </script>
 
 <!-- twMerge: a caller's size class replaces the preset's instead of racing it in the cascade. -->
-<div class={twMerge(resolved.cls, clsx(className), wrapperClass)}>
-  <span
-    class="material-symbols-{variant}"
-    style="font-size: 1em; font-variation-settings: 'FILL' {fill}, 'wght' {wght}, 'GRAD' {grad}, 'opsz' {resolvedOpsz};"
-    >{name}</span
-  >
-</div>
+<span
+  role={labelled ? 'img' : undefined}
+  aria-hidden={labelled ? undefined : 'true'}
+  {...restProps}
+  class={twMerge(resolved.cls, clsx(className), wrapperClass)}
+>
+  <!-- translate="no": page translation would rename the ligature and break the glyph. -->
+  {#if transition === 'none'}
+    <span class={glyphClass} translate="no" style={glyphStyle}>{name}</span>
+  {:else}
+    {#each glyphs as glyph (glyph.id)}
+      <span
+        class="{glyphClass} [grid-area:1/1]"
+        translate="no"
+        style={glyphStyle}
+        {@attach swap(glyph)}>{glyph.name}</span
+      >
+    {/each}
+  {/if}
+</span>

package/dist/utils/icon/Icon.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { IconProps } from './types.js';
+/**
+ * A Material Symbol, rendered from the variable icon font with its four axes: fill, weight, grade and
+ * optical size. https://m3.material.io/styles/icons/applying-icons
+ *
+ * Decorative by default (`aria-hidden`), so a screen reader doesn't read out the ligature name.
+ * Pass `aria-label` when the icon carries meaning with no visible text next to it.
+ *
+ * With `transition`, a change of `name` crossfades on a spring instead of swapping the glyph.
+ */
 declare const Icon: import("svelte").Component<IconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/utils/icon/MaterialSymbolsProvider.svelte

@@ -7,7 +7,12 @@ Use the App.svelte component instead
   import { baseIcons } from './base-icons.js';
   import type { MaterialSymbolsProviderProps } from './types.js';
 
-  const { extraIcons = [], display = 'swap' }: MaterialSymbolsProviderProps = $props();
+  const {
+    extraIcons = [],
+    display = 'swap',
+    subset = true,
+    families = ['rounded', 'outlined', 'sharp']
+  }: MaterialSymbolsProviderProps = $props();
 
   const iconList = $derived.by(() => {
     const combined = [...baseIcons, ...extraIcons].filter(Boolean);
@@ -15,7 +20,7 @@ Use the App.svelte component instead
   });
 
   const iconNamesParam = $derived.by(() => {
-    if (!iconList.length) return '';
+    if (!subset || !iconList.length) return '';
     return `&icon_names=${encodeURIComponent(iconList.join(','))}`;
   });
 
@@ -25,9 +30,11 @@ Use the App.svelte component instead
   });
 
   const href = $derived.by(() => {
-    const families = ['Rounded', 'Outlined', 'Sharp'];
     const familyParams = families
-      .map((f) => `family=Material+Symbols+${f}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`)
+      .map(
+        (f) =>
+          `family=Material+Symbols+${f[0].toUpperCase()}${f.slice(1)}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`
+      )
       .join('&');
     return `https://fonts.googleapis.com/css2?${familyParams}${iconNamesParam}${displayParam}`;
   });

package/dist/utils/icon/base-icons.d.ts

@@ -1 +1 @@
-export declare const baseIcons: readonly ["arrow_drop_down", "check", "chevron_left", "chevron_right", "close", "palette", "file_upload", "home", "info", "search", "settings", "warning", "calendar_month", "schedule", "check_circle", "error", "delete", "right_panel_close", "right_panel_open", "edit", "add", "favorite", "share", "settings", "help", "menu", "menu_open"];
+export declare const baseIcons: readonly ["arrow_drop_down", "check", "chevron_left", "chevron_right", "close", "palette", "upload", "home", "info", "search", "settings", "warning", "calendar_month", "schedule", "check_circle", "error", "delete", "right_panel_close", "right_panel_open", "edit", "add", "favorite", "share", "settings", "help", "menu", "menu_open"];

package/dist/utils/icon/base-icons.js

@@ -5,7 +5,7 @@ export const baseIcons = [
     'chevron_right',
     'close',
     'palette',
-    'file_upload',
+    'upload',
     'home',
     'info',
     'search',