@noxlovette/material 0.5.1 → 0.6.1

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

@@ -1,25 +1,25 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const rail = tv({
     slots: {
-        base: 'py-12 hidden bg-md-sys-color-surface-container z-40 flex-col md:flex gap-6 transition-[width,padding,background-color] md-sys-motion-spatial',
-        items: 'flex flex-col gap-3 pt-6 scrollbar-none w-full overflow-x-hidden',
+        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-0'
+        scrim: 'hidden md:block lg:hidden inset-spacing-0'
     },
     variants: {
         anchor: {
             viewport: {
-                base: 'fixed top-[var(--rail-top,0px)] bottom-0 left-0',
+                base: 'fixed top-[var(--rail-top,0px)] bottom-spacing-0 left-spacing-0',
                 scrim: 'fixed'
             },
             parent: {
-                base: 'absolute top-[var(--rail-top,0px)] bottom-0 left-0',
+                base: 'absolute top-[var(--rail-top,0px)] bottom-spacing-0 left-spacing-0',
                 scrim: 'absolute'
             }
         },
         expanded: {
             true: {
-                base: 'pl-9 w-60 items-start bg-md-sys-color-surface-container-highest lg:bg-md-sys-color-surface-container rounded-r-lg',
+                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'
             },
             false: {
@@ -42,7 +42,7 @@ export const rail = tv({
 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-0 rounded-full gap-0.5 py-1.5 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'
@@ -62,14 +62,14 @@ export const railElement = tv({
         expanded: {
             true: {
                 base: 'justify-start',
-                content: 'p-4 gap-3',
+                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-1.5 px-4',
+                iconContainer: 'py-spacing-75 px-spacing-200',
                 label: 'md-sys-typescale-label-medium'
             }
         },
@@ -80,10 +80,10 @@ export const railElement = tv({
         },
         mobile: {
             true: {
-                base: 'flex-1 flex-col items-center justify-center h-full min-w-0 max-w-[168px]',
-                content: 'py-0 gap-1 items-center justify-center w-full',
-                iconContainer: 'h-8 w-16 py-0 px-0',
-                icon: 'size-6',
+                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: {}

package/dist/components/nav/rail/types.d.ts

@@ -41,6 +41,13 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     anchor?: RailVariants['anchor'];
     /** Top offset in px for viewport/parent anchor (e.g. height of a top bar). Default 0. */
     railTop?: number;
-    /** Render a bottom navbar on mobile. */
+    /** Tooltip and accessible name of the toggle while collapsed. Default 'Expand navigation'. */
+    expandLabel?: string;
+    /** Tooltip and accessible name of the toggle while expanded. Default 'Collapse navigation'. */
+    collapseLabel?: string;
+    /**
+     * @deprecated No effect: Rail no longer renders a navigation bar below `md`. Mount a `Navbar`
+     * next to it for small windows.
+     */
     withNavbar?: boolean;
 };

package/dist/components/nav/tabs/Tabs.mdx

@@ -0,0 +1,62 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TabsStories from './Tabs.stories.svelte';
+
+<Meta of={TabsStories} />
+
+<Title />
+
+<Subtitle>Tabs organise related content across views at the same level.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/tabs/specs) ·
+`import { TabHolder, TabContent } from '@noxlovette/material';`
+
+<Canvas of={TabsStories.Playground} />
+
+<Controls of={TabsStories.Playground} />
+
+## Anatomy
+
+- **`TabHolder`** renders the tab row from an `items` array, plus the sliding active indicator.
+- **`Tab`** is one trigger, rendered by `TabHolder` for each item: an `<a>` when the item has
+  `href`, a `<button>` otherwise.
+- **`TabContent`** is the panel matched to a tab by `value`, for content tabs only.
+
+## Content tabs
+
+Give each item a `value` and a matching `TabContent`:
+
+```svelte
+<TabHolder
+  bind:value
+  items={[
+    { value: 'flights', name: 'Flights', iconProps: { name: 'flight' } },
+    { value: 'trips', name: 'Trips', iconProps: { name: 'luggage' } }
+  ]}
+/>
+
+<TabContent value="flights">Flights panel</TabContent>
+<TabContent value="trips">Trips panel</TabContent>
+```
+
+## Navigation tabs
+
+Give each item an `href` instead of a `value`, and leave out `TabContent`. The tabs then route
+between pages.
+
+<Canvas of={TabsStories.NavigationTabsHref} />
+
+## Motion
+
+Tabs are peers, so switching panels runs the M3 lateral transition: the new panel pushes the old
+one out toward the selected tab's side. The indicator slides on the fast spatial spring. Nothing
+needs configuring.
+
+Navigation tabs have no panels inside `TabHolder`, so animate the route change yourself with
+`lateral()` from `@noxlovette/material`.
+
+## Accessibility
+
+- **Keyboard.** Arrow keys move between tabs. With `activationMode="automatic"`, focus selects;
+  with `manual`, Enter or Space does.
+- **Selection.** The active tab gets `aria-selected`; the indicator is decoration.
+- **Disabled tabs** are skipped by the arrow keys.

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

@@ -32,7 +32,7 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="flex flex-col gap-4">
+    <div class="gap-spacing-200 flex flex-col">
       <TabHolder {...args} {items}>
         <TabContent value="flights"><Body>Flights panel content.</Body></TabContent>
         <TabContent value="trips"><Body>Trips panel content.</Body></TabContent>

package/dist/components/nav/tabs/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type TabVariants = VariantProps<typeof tab>;
 export type TabHolderVariants = VariantProps<typeof tabHolder>;
 export declare const tabHolder: import("tailwind-variants").TVReturnType<{

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

@@ -1,8 +1,8 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const tabHolder = tv({
     slots: {
         base: 'relative flex w-full bg-md-sys-color-surface',
-        bar: 'absolute bottom-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform md-sys-motion-fast-spatial'
+        bar: 'absolute bottom-spacing-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform md-sys-motion-fast-spatial'
     },
     variants: {
         rounded: {
@@ -19,15 +19,15 @@ export const tab = tv({
             'data-[state=inactive]:text-md-sys-color-on-surface-variant'
         ].join(' '),
         label: 'md-sys-typescale-title-small',
-        icon: 'size-6 text-[24px]'
+        icon: 'size-spacing-300 text-[24px]'
     },
     variants: {
         variant: {
             primary: {
-                base: 'h-16 gap-1 py-3'
+                base: 'h-spacing-800 gap-spacing-50 py-spacing-150'
             },
             secondary: {
-                base: 'h-12 py-3',
+                base: 'h-spacing-600 py-spacing-150',
                 icon: 'hidden'
             }
         },

package/dist/components/pill/Pill.mdx

@@ -0,0 +1,32 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as PillStories from './Pill.stories.svelte';
+
+<Meta of={PillStories} />
+
+<Title />
+
+<Subtitle>A small rounded label for short static text: a status, a count, a category.</Subtitle>
+
+`import { Pill } from '@noxlovette/material';`
+
+<Canvas of={PillStories.Playground} />
+
+<Controls of={PillStories.Playground} />
+
+## Pill or Chip
+
+`Pill` is not an M3 component. It renders a plain `<div>` with no click handler, remove button or
+selected state. For anything the user interacts with, use `Chip`, which implements M3 chips.
+
+## Variants
+
+The system variants (`primary`, `secondary-container`, and so on) use M3 color roles, so they
+follow the theme. `yellow` and `green` are fixed colors for status labels like "New" or "Beta"
+that should look the same in every theme.
+
+<Canvas of={PillStories.Variants} />
+
+## Accessibility
+
+- **Not a control.** A pill has no role and isn't focusable, so never make one clickable.
+- **Contrast.** Each system variant pairs a container with its `on-*` role.

package/dist/components/pill/Pill.stories.svelte

@@ -32,7 +32,7 @@
 <Story name="Playground">New</Story>
 
 <Story name="Variants" asChild>
-  <div class="flex flex-wrap items-center gap-3 p-6">
+  <div class="gap-spacing-150 p-spacing-300 flex flex-wrap items-center">
     <Pill variant="primary">Primary</Pill>
     <Pill variant="secondary">Secondary</Pill>
     <Pill variant="tertiary">Tertiary</Pill>

package/dist/components/pill/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export type PillVariants = VariantProps<typeof pill>;
 export declare const pill: import("tailwind-variants").TVReturnType<{
     variant: {
@@ -14,7 +14,7 @@ export declare const pill: import("tailwind-variants").TVReturnType<{
         yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
         green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
-}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap", {
+}, undefined, "relative inline-flex items-center justify-center px-spacing-200 py-spacing-75 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap", {
     variant: {
         primary: "md-component-button-filled-primary";
         secondary: "md-component-button-filled-secondary";

package/dist/components/pill/theme.js

@@ -1,6 +1,6 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const pill = tv({
-    base: 'relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap',
+    base: 'relative inline-flex items-center justify-center px-spacing-200 py-spacing-75 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap',
     variants: {
         variant: {
             primary: 'md-component-button-filled-primary',

package/dist/components/progress/LinearProgress.svelte

@@ -11,7 +11,7 @@ The track always keeps a gap either side of the bar.
 -->
 <script lang="ts">
   import clsx from 'clsx';
-  import { tv } from 'tailwind-variants';
+  import { tv } from '../../utils/tv.js';
   import { Progress } from 'bits-ui';
   import { animate, type AnimationPlaybackControls } from 'motion';
   import { springTokens, springTransition } from '../../animation/spring.js';
@@ -35,7 +35,7 @@ The track always keeps a gap either side of the bar.
   const linearProgress = tv({
     slots: {
       container: 'relative overflow-hidden',
-      segment: 'absolute inset-y-0 rounded-full',
+      segment: 'absolute inset-y-spacing-0 rounded-full',
       bar: 'bg-md-sys-color-primary',
       track: 'bg-md-sys-color-secondary-container'
     }

package/dist/components/progress/Progress.mdx

@@ -0,0 +1,50 @@
+import { Meta, Title, Subtitle, Canvas } from '@storybook/addon-docs/blocks';
+import * as ProgressStories from './Progress.stories.svelte';
+
+<Meta of={ProgressStories} />
+
+<Title />
+
+<Subtitle>Progress indicators show the status of an ongoing process.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/progress-indicators/specs) ·
+`import { CircularProgress, LinearProgress, WavyLinearProgress } from '@noxlovette/material';`
+
+## Three components
+
+There's no shared `variant` prop. Pick the component for the shape you need:
+
+- **`CircularProgress`** and **`LinearProgress`** are M3's circular and linear indicators.
+- **`WavyLinearProgress`** is this library's own sine-wave linear indicator, inspired by M3
+  Expressive but not a literal reproduction of the spec.
+
+All three take the same `percent`: a number from 0 to 100 for a determinate indicator, or
+omitted (or `null`) for an indeterminate one.
+
+```svelte
+<CircularProgress percent={uploadPercent} />
+<LinearProgress percent={uploadPercent} class="w-full" />
+
+<!-- Indeterminate: omit percent -->
+<CircularProgress />
+```
+
+<Canvas of={ProgressStories.CircularDeterminate} />
+
+<Canvas of={ProgressStories.CircularIndeterminate} />
+
+<Canvas of={ProgressStories.LinearDeterminate} />
+
+<Canvas of={ProgressStories.WavyDeterminate} />
+
+## Motion
+
+A determinate indicator springs to each new `percent` on a critically damped spring, so progress
+never visibly runs backwards. Indeterminate indicators animate continuously.
+
+## Accessibility
+
+- **Role.** Each renders `role="progressbar"`, with `aria-valuenow` set from `percent` and left
+  out when indeterminate.
+- **Label.** None of them says what is loading. Give each an `aria-label`, or put visible text
+  next to it.

package/dist/components/progress/Progress.stories.svelte

@@ -23,42 +23,42 @@
 
 <Story name="Circular (Determinate)">
   {#snippet template(args)}
-    <div class="flex items-center justify-center p-6">
+    <div class="p-spacing-300 flex items-center justify-center">
       <CircularProgress percent={args.percent} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Circular (Indeterminate)" asChild>
-  <div class="flex items-center justify-center p-6">
+  <div class="p-spacing-300 flex items-center justify-center">
     <CircularProgress />
   </div>
 </Story>
 
 <Story name="Linear (Determinate)">
   {#snippet template(args)}
-    <div class="flex items-center p-6">
+    <div class="p-spacing-300 flex items-center">
       <LinearProgress percent={args.percent} class="w-full max-w-sm" />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Linear (Indeterminate)" asChild>
-  <div class="flex items-center p-6">
+  <div class="p-spacing-300 flex items-center">
     <LinearProgress class="w-full max-w-sm" />
   </div>
 </Story>
 
 <Story name="Wavy (Determinate)">
   {#snippet template(args)}
-    <div class="flex items-center p-6">
+    <div class="p-spacing-300 flex items-center">
       <WavyLinearProgress percent={args.percent} class="w-full max-w-sm" />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Wavy (Indeterminate)" asChild>
-  <div class="flex items-center p-6">
+  <div class="p-spacing-300 flex items-center">
     <WavyLinearProgress class="w-full max-w-sm" />
   </div>
 </Story>

package/dist/components/snackbar/Snackbar.mdx

@@ -0,0 +1,52 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SnackbarStories from './Snackbar.stories.svelte';
+
+<Meta of={SnackbarStories} />
+
+<Title />
+
+<Subtitle>
+  Snackbars show a brief message about an app process at the bottom of the screen.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/snackbar/specs) ·
+`import { Snackbar } from '@noxlovette/material';`
+
+<Canvas of={SnackbarStories.Playground} />
+
+<Controls of={SnackbarStories.Playground} />
+
+## Showing a snackbar
+
+There's no `toast()` function or queue. Mount one `Snackbar`, bind its `message`, and assign to
+that state to show it:
+
+```svelte
+<script lang="ts">
+  import { Snackbar } from '@noxlovette/material';
+
+  let snackbarMessage = $state('');
+</script>
+
+<button onclick={() => (snackbarMessage = 'Changes saved.')}>Save</button>
+
+<Snackbar bind:message={snackbarMessage} label="Undo" callback={undoSave} />
+```
+
+When `message` becomes non-empty (a string or a snippet), the snackbar slides in. After 4
+seconds it hides and resets a string `message` to `''`, so the same text can be shown again. With
+`static`, it stays until the user closes it.
+
+`label` and `callback` add an action button.
+
+<Canvas of={SnackbarStories.Triggered} />
+
+<Canvas of={SnackbarStories.WithAction} />
+
+## Accessibility
+
+- **Timing.** A non-static snackbar disappears on its own, so never make it the only place
+  critical information appears.
+- **Dismiss.** `showClose` (on by default) renders a close button labelled "Dismiss snackbar".
+- **One at a time.** Mount one snackbar per region and drive it through one binding; stacking
+  instances isn't supported.

package/dist/components/snackbar/Snackbar.stories.svelte

@@ -9,10 +9,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Snackbar from './Snackbar.svelte';
-</script>
-
-<script lang="ts">
-  import Button from '../buttons/Button.svelte';
 
   const { Story } = defineMeta({
     title: 'Feedback/Snackbar',
@@ -28,6 +24,10 @@
       static: false
     }
   });
+</script>
+
+<script lang="ts">
+  import Button from '../buttons/Button.svelte';
 
   let playgroundMessage = $state('This is a snackbar message.');
   let triggeredMessage = $state('');
@@ -50,7 +50,7 @@
 </Story>
 
 <Story name="Triggered" asChild>
-  <div class="relative flex min-h-32 flex-col items-center justify-center gap-4">
+  <div class="gap-spacing-200 relative flex min-h-32 flex-col items-center justify-center">
     <Button
       variant="tonal"
       onclick={() => {

package/dist/components/snackbar/Snackbar.svelte

@@ -88,7 +88,7 @@ Snackbars provide brief messages about app processes at the bottom of the screen
 
       {#if showClose}
         <button
-          class="relative rounded-full p-1"
+          class="p-spacing-50 relative rounded-full"
           onclick={() => {
             dismissed = true;
             if (typeof message === 'string') {

package/dist/components/snackbar/theme.d.ts

@@ -1,8 +1,8 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export type SnackBarVariants = VariantProps<typeof snackbar>;
 export declare const snackbar: import("tailwind-variants").TVReturnType<{
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {
@@ -13,7 +13,7 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, undefined, {
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {
@@ -24,7 +24,7 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {

package/dist/components/snackbar/theme.js

@@ -1,15 +1,15 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const snackbar = tv({
     slots: {
-        base: 'rounded-xs relative min-h-12 md:max-h-17 flex z-[100] items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-2 pl-4 justify-between h-max py-3',
-        label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-3 cursor-pointer ',
+        base: 'rounded-xs relative min-h-spacing-600 md:max-h-17 flex z-layer-snackbar items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-spacing-100 pl-spacing-200 justify-between h-max py-spacing-150',
+        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-6 text-[24px] text-md-sys-color-inverse-on-surface mr-1 ml-3'
+        icon: 'size-spacing-300 text-[24px] text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
     },
     variants: {
         fixed: {
-            true: 'fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2',
+            true: 'fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2',
             false: ''
         }
     }

package/dist/components/table/Table.stories.svelte

@@ -11,6 +11,7 @@
 
   const { Story } = defineMeta({
     title: 'Table/Table',
+    tags: ['autodocs'],
     component: Table,
     argTypes: {
       rounded: { control: 'boolean' }

package/dist/components/table/TableHeader.svelte

@@ -25,7 +25,7 @@ and `sortDirection` props. Defaults to `scope="col"`.
 </script>
 
 <th {scope} class={header({ class: clsx(className) })} {...restProps}>
-  <span class="inline-flex items-center gap-1">
+  <span class="gap-spacing-50 inline-flex items-center">
     {@render children?.()}
     {#if sortable}
       <span

package/dist/components/table/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export declare const table: import("tailwind-variants").TVReturnType<{
     hoverable: {
         true: {

package/dist/components/table/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const table = tv({
     slots: {
         root: 'w-full border-collapse text-left md-sys-typescale-body-medium text-md-sys-color-on-surface',
@@ -6,8 +6,8 @@ export const table = tv({
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',
         row: 'border-b border-md-sys-color-outline-variant transition-colors md-sys-motion-fast-effects focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
-        cell: 'px-4 py-3 align-middle',
-        header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
+        cell: 'px-spacing-200 py-spacing-150 align-middle',
+        header: 'px-spacing-200 py-spacing-200 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface whitespace-nowrap'
     },
     variants: {
         hoverable: {
@@ -43,7 +43,7 @@ export const table = tv({
         },
         sticky: {
             true: {
-                head: 'sticky top-0 z-10 bg-md-sys-color-surface-container-high shadow-[0_1px_0_0_var(--md-sys-color-outline-variant)]'
+                head: 'sticky top-spacing-0 z-10 bg-md-sys-color-surface-container-high shadow-[0_1px_0_0_var(--md-sys-color-outline-variant)]'
             }
         }
     }

package/dist/components/time/TimeField.stories.svelte

@@ -9,6 +9,7 @@
 
   const { Story } = defineMeta({
     title: 'Time/TimeField',
+    tags: ['autodocs'],
     component: TimeField,
     argTypes: {
       label: { control: 'text' },
@@ -28,14 +29,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-xs p-8">
+    <div class="p-spacing-400 max-w-xs">
       <TimeField {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Near Bottom Edge" asChild>
-  <div class="flex min-h-dvh max-w-xs flex-col justify-end p-8">
+  <div class="p-spacing-400 flex min-h-dvh max-w-xs flex-col justify-end">
     <TimeField label="Time" value="18:45" />
   </div>
 </Story>

package/dist/components/time/TimeField.svelte

@@ -77,7 +77,7 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
         <button
           {...props}
           title="time-overlay"
-          class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
+          class="inset-spacing-0 absolute cursor-pointer disabled:cursor-not-allowed"
           type="button"
           data-cy="calendar-time-toggle"
         ></button>
@@ -92,7 +92,7 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
       align="start"
       sideOffset={12}
       collisionPadding={8}
-      class="z-100"
+      class="z-layer-popup"
     >
       {#snippet child({ wrapperProps, props, open })}
         <div {...wrapperProps}>

package/dist/components/time/TimepickerInput.svelte

@@ -63,7 +63,7 @@ It follows the Material 3 design for time input pickers.
   </TimeField.Root>
 
   <div class={cls.buttonDiv()}>
-    <ButtonIcon type="button" iconProps={{ name: 'schedule' }} />
+    <ButtonIcon variant="standard" type="button" iconProps={{ name: 'schedule' }} />
     <div>
       <Button variant="text" type="button" onclick={() => close()}>{cancelText}</Button>
       <Button

package/dist/components/time/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export type TimepickerVariants = VariantProps<typeof timepicker>;
 export declare const timepicker: import("tailwind-variants").TVReturnType<{
     [key: string]: {