@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/buttons/types.d.ts

@@ -1,188 +1,193 @@
 import type { AnchorButtonAttributes, IconProps } from '../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABVariants } from './theme.js';
+import type { Responsive } from '../containers/pane/theme.js';
+import type { ButtonSize, FABColor } from './theme.js';
 export type HTMLButtonOrAnchorAttributes = HTMLButtonAttributes & HTMLAnchorAttributes;
-export type ButtonMDProps = ButtonMDVariants & AnchorButtonAttributes & {
+export type ButtonProps = AnchorButtonAttributes & {
     /**
-     * The visual style of the button.
-     * - 'filled': High emphasis.
-     * - 'tonal': Medium-high emphasis.
-     * - 'outlined': Medium emphasis.
-     * - 'text': Low emphasis.
-     * - 'elevated': High emphasis with elevation.
+     * Colour style, from most to least emphasis:
+     * - `filled`: final or unblocking actions, such as Save or Confirm.
+     * - `tonal`: important actions that sit a step below filled.
+     * - `elevated`: only when the button must stand apart from a patterned background.
+     * - `outlined`: actions that need attention but aren't primary, and ways out of a flow.
+     * - `text`: optional actions, such as Learn more.
+     * @default 'filled'
      */
-    variant?: ButtonMDVariants['variant'];
+    variant?: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text';
     /**
-     * The color scheme of the button.
+     * Height 32, 40, 56, 96 or 136dp. XS and S keep a 48dp target area.
+     * @default 'sm'
      */
-    color?: ButtonMDVariants['color'];
+    size?: ButtonSize;
     /**
-     * The size of the button.
-     */
-    size?: ButtonMDVariants['size'];
-    /**
-     * The shape of the button corners.
-     * - 'round': Fully rounded corners.
-     * - 'square': Slightly rounded corners.
-     */
-    shape?: ButtonMDVariants['shape'];
-    /**
-     * The label or content to display inside the button.
+     * Resting corner shape. Both morph to the same smaller radius while pressed.
+     * @default 'round'
      */
+    shape?: 'round' | 'square';
+    /** The label. */
     children?: Snippet;
-    /** Whether the button is disabled. */
-    disabled?: boolean;
-    /** Whether the button is currently in a selected state (e.g. for toggle buttons). */
-    selected?: boolean;
-    /** Whether the button behaves as a selection control (scopes selected styling). */
-    usage?: ButtonMDVariants['usage'];
-    /**
-     * Configuration for the leading icon.
-     */
+    /** A leading icon, sized for the button. */
     iconProps?: IconProps;
-    /**
-     * The URL to link to. If provided, the button will render as an `<a>` tag.
-     */
+    /** Renders an `<a>` instead of a `<button>`. */
     href?: string;
-    /** The `formaction` attribute for the button when used in a form. */
+    /** The `formaction` attribute, for a submit button. */
     formaction?: string;
-    /** Whether the button is in a loading state. Displays a loading indicator and may disable interaction. */
+    /** Disables the button. On a link, removes it from the tab order and sets `aria-disabled`. */
+    disabled?: boolean;
+    /** Replaces the icon (or the label, with no icon) with a loading indicator. */
     loading?: boolean;
 };
-export type ButtonIconProps = ButtonIconVariants & AnchorButtonAttributes & {
+/** @deprecated Use `ButtonProps`. */
+export type ButtonMDProps = ButtonProps;
+export type ToggleProps = HTMLButtonAttributes & {
     /**
-     * The visual style of the icon button.
+     * Colour style. Unselected and selected colours differ per style; there is no text toggle.
+     * @default 'filled'
      */
-    variant?: ButtonIconVariants['variant'];
+    variant?: 'elevated' | 'filled' | 'tonal' | 'outlined';
+    /** @default 'sm' */
+    size?: ButtonSize;
     /**
-     * The color scheme of the icon button.
+     * Resting shape while unselected. Selecting swaps it: round becomes square, square becomes
+     * round.
+     * @default 'round'
      */
-    color?: ButtonIconVariants['color'];
+    shape?: 'round' | 'square';
+    /** Whether the toggle is selected. Bindable. */
+    pressed?: boolean;
+    /** Called when the selected state changes. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** The label. */
+    children?: Snippet;
+    /** A leading icon, sized for the button. */
+    iconProps?: IconProps;
+    /** Disables the toggle. */
+    disabled?: boolean;
+    /** Replaces the icon (or the label, with no icon) with a loading indicator. */
+    loading?: boolean;
+};
+/** @deprecated Use `ToggleProps`. */
+export type ToggleMDProps = ToggleProps;
+export type ButtonIconProps = AnchorButtonAttributes & {
     /**
-     * The size of the icon button.
+     * Colour style. `standard` has no container until hovered, focused or pressed; use it for
+     * icon buttons in app bars, fields and other dense places.
+     * @default 'filled'
      */
-    size?: ButtonIconVariants['size'];
+    variant?: 'filled' | 'tonal' | 'outlined' | 'standard';
     /**
-     * The width style of the icon button.
-     * - 'default': Aspect square.
-     * - 'narrow': Narrower width.
-     * - 'wide': Wider width.
+     * Height 32, 40, 56, 96 or 136dp. XS and S keep a 48dp target area.
+     * @default 'sm'
      */
-    width?: ButtonIconVariants['width'];
+    size?: ButtonSize;
     /**
-     * The shape of the icon button corners.
+     * Container width around the icon. Use `narrow` and `wide` to fit a layout, for example in a
+     * button group.
+     * @default 'default'
      */
-    shape?: ButtonIconVariants['shape'];
+    width?: 'narrow' | 'default' | 'wide';
     /**
-     * The variation of the icon button.
-     * - 'default': Standard icon button.
-     * - 'toggle': Toggleable icon button.
+     * Resting corner shape. A selected toggle swaps it.
+     * @default 'round'
      */
-    variation?: ButtonIconVariants['variation'];
+    shape?: 'round' | 'square';
     /**
-     * Optional content to render inside the button (usually not used for icon buttons, but available).
+     * `toggle` makes a two-state icon button with `aria-pressed`. Its icon fills while selected.
+     * @default 'default'
      */
-    children?: Snippet;
-    /** Whether the icon button is disabled. */
-    disabled?: boolean;
+    variation?: 'default' | 'toggle';
+    /** Toggle only: whether it is selected. Bindable. */
+    pressed?: boolean;
+    /** Toggle only: called when the selected state changes. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** The icon. */
+    iconProps: IconProps;
     /**
-     * Content to display in a tooltip when hovering over the button.
-     * If omitted, no tooltip is shown.
+     * Tooltip text, shown on hover and focus. Also the accessible name when no `aria-label` is
+     * given, so an icon button should have one or the other.
      */
     tooltipContent?: string;
-    /** CSS class added to the tooltip trigger wrapper. */
+    /** Classes for the tooltip trigger. */
     triggerClass?: string;
-    /** Configuration for the icon to display. */
-    iconProps: IconProps;
-    /** The URL to link to. If provided, the button will render as an `<a>` tag. */
+    /** Tooltip side. @default 'top' */
+    triggerSide?: 'top' | 'right' | 'bottom' | 'left';
+    /** Tooltip alignment. @default 'center' */
+    triggerAlign?: 'start' | 'center' | 'end';
+    /** Renders an `<a>` instead of a `<button>` (not for toggles). */
     href?: string;
-    /** The `formaction` attribute for the button when used in a form. */
+    /** The `formaction` attribute, for a submit button. */
     formaction?: string;
-    /** Whether the toggle button is pressed (only meaningful when `variation === 'toggle'`). */
-    pressed?: boolean;
-    /** Callback when the pressed state changes (only meaningful when `variation === 'toggle'`). */
-    onPressedChange?: (pressed: boolean) => void;
-    /** Whether the button is in a loading state. Displays a loading indicator instead of the icon. */
+    /** Disables the button. */
+    disabled?: boolean;
+    /** Replaces the icon with a loading indicator. */
     loading?: boolean;
-    /** The side of the tooltip relative to the button. */
-    triggerSide?: 'top' | 'right' | 'bottom' | 'left';
-    /** The alignment of the tooltip relative to the button. */
-    triggerAlign?: 'start' | 'center' | 'end';
 };
-export type FABProps = FABVariants & AnchorButtonAttributes & {
+export type FABProps = AnchorButtonAttributes & {
     /**
-     * The color configuration of the FAB.
+     * Container and icon colours. `primary-container` is the default; `primary`, `secondary` and
+     * `tertiary` are the stronger Expressive styles. With `withMenu`, the colour family also picks
+     * the menu's colour set.
+     * @default 'primary-container'
      */
-    config?: FABVariants['config'];
+    color?: FABColor;
     /**
-     * The size of the FAB.
+     * 56dp `regular`, 80dp `medium` or 96dp `large`. `small` (40dp) is the baseline small FAB,
+     * which M3 no longer recommends; it has no extended form.
+     * @default 'regular'
      */
-    size?: FABVariants['size'];
-    /** Whether the FAB is disabled. */
-    disabled?: boolean;
+    size?: 'small' | 'regular' | 'medium' | 'large';
     /**
-     * Whether the FAB is in its extended state, showing the label.
+     * Shows `label` beside the icon: the extended FAB. The two transform into each other with the
+     * space available, so this is responsive; the label slides open and closed. Inside a `Rail` it
+     * follows the rail: a FAB while collapsed, an extended FAB while expanded. Pass `false` to keep
+     * a FAB, or toggle it yourself, for example to collapse while the page scrolls.
+     * @default { small: false, medium: true } (outside a rail)
      */
-    expanded?: boolean;
-    /** The text label to display when the FAB is extended. */
+    expanded?: Responsive<boolean>;
+    /** The extended FAB's label. Also names the collapsed FAB for assistive technology. */
     label?: string;
-    /**
-     * Whether the FAB should toggle a menu when clicked.
-     * If true, use `children` to provide `FABMenuItem` components.
-     */
+    /** Opens a FAB menu of `FABMenuItem` children. The FAB turns into its close button. */
     withMenu?: boolean;
-    /** Configuration for the FAB's icon. */
+    /** The icon. */
     iconProps: IconProps;
-    /** Whether the FAB is in a loading state. Displays a loading indicator instead of the icon. */
+    /** Replaces the icon with a loading indicator. */
     loading?: boolean;
-    /** The URL to link to. If provided, the FAB will render as an `<a>` tag. */
+    /** Renders an `<a>` instead of a `<button>` (not with `withMenu`). */
     href?: string;
-    /** The `formaction` attribute for the FAB when used in a form. */
+    /** The `formaction` attribute, for a submit button. */
     formaction?: string;
+    /** Disables the FAB. */
+    disabled?: boolean;
+    /** With `withMenu`: up to six `FABMenuItem`s. */
+    children?: Snippet;
     /**
-     * The menu items to display when `withMenu` is true.
-     * Expected to be one or more `FABMenuItem` components.
+     * A surface the FAB opens into with a container transform: the FAB's container grows into it
+     * from the FAB's corner, and shrinks back on Escape, an outside click, or `close()`. Keep the
+     * FAB's icon in it (for example on its main row) so the icon persists through the transform.
+     * Not with `withMenu` or `href`.
      */
-    children?: Snippet;
+    surface?: Snippet<[{
+        close: () => void;
+    }]>;
+    /** Whether the `surface` is open. Bindable. */
+    surfaceOpen?: boolean;
 };
 export type FABMenuProps = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * The menu items. Use `FABMenuItem` components.
-     */
+    /** The menu items. Use `FABMenuItem` components. */
     children: Snippet;
 };
-export type FABMenuItemProps = FABMenuItemVariants & AnchorButtonAttributes & {
-    /**
-     * The visual variant of the menu item.
-     */
-    variant?: FABMenuItemVariants['variant'];
-    /** Whether the menu item is disabled (skipped by keyboard navigation). */
+export type FABMenuItemProps = AnchorButtonAttributes & {
+    /** Disables the item; keyboard navigation skips it. */
     disabled?: boolean;
-    /** Whether the menu item is in a loading state. */
+    /** Replaces the icon with a loading indicator. */
     loading?: boolean;
-    /**
-     * The content of the menu item (usually a text label).
-     */
+    /** The label. */
     children: Snippet;
-    /** Configuration for the menu item's icon. */
+    /** The leading icon. */
     iconProps: IconProps;
-    /** The URL to link to. If provided, the menu item will render as an `<a>` tag. */
+    /** Renders an `<a>` instead of a `<button>`. */
     href?: string;
-    /** The `formaction` attribute for the menu item when used in a form. */
+    /** The `formaction` attribute, for a submit button. */
     formaction?: string;
 };
-export type ToggleMDProps = Pick<ButtonMDVariants, 'size' | 'shape'> & HTMLButtonAttributes & {
-    /** Whether the toggle is currently pressed/selected. Bindable. */
-    pressed?: boolean;
-    /** Callback when pressed state changes. */
-    onPressedChange?: (pressed: boolean) => void;
-    /** Label or content inside the toggle. */
-    children?: Snippet;
-    /** Optional leading icon. */
-    iconProps?: IconProps;
-    /** Whether the toggle is disabled. */
-    disabled?: boolean;
-    /** Whether the toggle is in a loading state. */
-    loading?: boolean;
-};

package/dist/components/cards/Card.mdx

@@ -0,0 +1,44 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as CardStories from './Card.stories.svelte';
+
+<Meta of={CardStories} />
+
+<Title />
+
+<Subtitle>Cards group related content and actions about a single subject.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/cards/specs) ·
+`import { Card } from '@noxlovette/material';`
+
+<Canvas of={CardStories.Playground} />
+
+<Controls of={CardStories.Playground} />
+
+## Types
+
+`type` picks one of the three M3 treatments: `elevated`, `filled` or `outlined`. A card is a
+container, not a template: title, media and actions are whatever you put in `children`.
+
+<Canvas of={CardStories.Types} />
+
+## Clickable cards
+
+With `href`, the card renders a real `<a>`. `hoverable` then defaults to on, and so does it
+when `onselect` or `ondelete` is set, so the card gets the state layer. Don't nest another link
+inside a link card. For a card that holds its own buttons, use the selectable pattern below.
+
+```svelte
+<Card href="/details" type="outlined">
+  <h3>Go to details</h3>
+</Card>
+```
+
+<Canvas of={CardStories.HoverableLink} />
+
+<Canvas of={CardStories.SelectableWithNestedButton} />
+
+## Accessibility
+
+- **Native link.** Link cards are a real `<a>`, so they work with the keyboard and assistive
+  tech without extra handlers.
+- **Focus.** Interactive cards draw the M3 focus indicator on keyboard focus.

package/dist/components/cards/Card.stories.svelte

@@ -47,7 +47,7 @@
       href={args.href}
       class="max-w-sm"
     >
-      <p class="md-sys-typescale-title-medium mb-1">Card title</p>
+      <p class="md-sys-typescale-title-medium mb-spacing-50">Card title</p>
       <p class="text-md-sys-color-on-surface-variant text-sm">
         Supporting text describing the card's content.
       </p>
@@ -56,19 +56,19 @@
 </Story>
 
 <Story name="Types" asChild>
-  <div class="flex flex-wrap gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap">
     <Card type="elevated" class="w-56">
-      <p class="md-sys-typescale-title-medium mb-1">Elevated</p>
+      <p class="md-sys-typescale-title-medium mb-spacing-50">Elevated</p>
       <p class="text-md-sys-color-on-surface-variant text-sm">Shadow separates from background.</p>
     </Card>
     <Card type="filled" class="w-56">
-      <p class="md-sys-typescale-title-medium mb-1">Filled</p>
+      <p class="md-sys-typescale-title-medium mb-spacing-50">Filled</p>
       <p class="text-md-sys-color-on-surface-variant text-sm">
         Solid background, subtle separation.
       </p>
     </Card>
     <Card type="outlined" class="w-56">
-      <p class="md-sys-typescale-title-medium mb-1">Outlined</p>
+      <p class="md-sys-typescale-title-medium mb-spacing-50">Outlined</p>
       <p class="text-md-sys-color-on-surface-variant text-sm">Boundary line, least separation.</p>
     </Card>
   </div>
@@ -76,7 +76,7 @@
 
 <Story name="Hoverable Link" asChild>
   <Card href="#" class="max-w-sm">
-    <p class="md-sys-typescale-title-medium mb-1">Clickable card</p>
+    <p class="md-sys-typescale-title-medium mb-spacing-50">Clickable card</p>
     <p class="text-md-sys-color-on-surface-variant text-sm">
       Rendered as an anchor when <code>href</code> is provided; hoverable defaults to true.
     </p>
@@ -84,7 +84,7 @@
 </Story>
 
 <Story name="Selectable" asChild>
-  <div class="flex flex-wrap gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap">
     {#each items as item (item.id)}
       <Card
         type="outlined"
@@ -96,7 +96,7 @@
           if (selectedId === item.id) selectedId = null;
         }}
       >
-        <p class="md-sys-typescale-title-medium mb-1">{item.title}</p>
+        <p class="md-sys-typescale-title-medium mb-spacing-50">{item.title}</p>
         <p class="text-md-sys-color-on-surface-variant text-sm">{item.body}</p>
       </Card>
     {/each}
@@ -104,15 +104,15 @@
 </Story>
 
 <Story name="Selectable With Nested Button" asChild>
-  <div class="flex flex-wrap gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap">
     <Card
       type="outlined"
       class="w-64"
       onselect={() => console.log('card selected')}
       ondelete={() => console.log('card deleted')}
     >
-      <p class="md-sys-typescale-title-medium mb-1">Card with an action</p>
-      <p class="text-md-sys-color-on-surface-variant mb-3 text-sm">
+      <p class="md-sys-typescale-title-medium mb-spacing-50">Card with an action</p>
+      <p class="text-md-sys-color-on-surface-variant mb-spacing-150 text-sm">
         Clicking the card selects it. The button below calls
         <code>event.stopPropagation()</code> so it doesn't also trigger selection.
       </p>

package/dist/components/cards/theme.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const card = tv({
     slots: {
         base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg transition-shadow md-sys-motion-effects',
-        icon: 'size-6 text-[24px] text-md-sys-color-primary'
+        icon: 'size-spacing-300 text-[24px] text-md-sys-color-primary'
     },
     variants: {
         type: {
@@ -11,10 +11,10 @@ export const card = tv({
             outlined: 'bg-md-sys-color-surface outline-1 outline-md-sys-color-outline-variant'
         },
         padding: {
-            none: { base: 'p-0' },
-            sm: { base: 'p-3' },
-            md: { base: 'p-4' },
-            lg: { base: 'p-6' }
+            none: { base: 'p-spacing-0' },
+            sm: { base: 'p-spacing-150' },
+            md: { base: 'p-spacing-200' },
+            lg: { base: 'p-spacing-300' }
         },
         hoverable: {
             true: ''

package/dist/components/chips/Chip.mdx

@@ -0,0 +1,68 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ChipStories from './Chip.stories.svelte';
+
+<Meta of={ChipStories} />
+
+<Title />
+
+<Subtitle>
+  Chips help people enter information, make selections, filter content, or trigger actions.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/chips/specs) ·
+`import { Chip } from '@noxlovette/material';`
+
+<Canvas of={ChipStories.Playground} />
+
+<Controls of={ChipStories.Playground} />
+
+## Choosing a variant
+
+`variant` sets both the look and the element the chip renders:
+
+| Variant      | Use for                                                         | Renders                                                |
+| ------------ | --------------------------------------------------------------- | ------------------------------------------------------ |
+| `assist`     | A smart or automated action, like adding an event to a calendar | `<button>` (or `<a>` with `href`); icon tinted primary |
+| `filter`     | Filtering content by tags or descriptive words                  | A toggle; a checkmark replaces the icon when selected  |
+| `input`      | A piece of information the user entered (a contact, a value)    | A plain container; `onRemove` adds a remove button     |
+| `suggestion` | A generated suggestion that narrows intent                      | Like `assist`, without the tinted icon                 |
+
+`elevated` swaps the flat, outlined container for a shadowed one on every variant except `input`,
+which the spec keeps flat. For a static label with no interaction (a status or a count), use
+`Pill` instead.
+
+<Canvas of={ChipStories.Assist} />
+
+<Canvas of={ChipStories.Filter} />
+
+```svelte
+<Chip variant="filter" bind:selected={wifiOnly}>Wifi</Chip>
+```
+
+<Canvas of={ChipStories.Input} />
+
+Render one input chip per entry, and remove the entry from your own array in `onRemove`:
+
+```svelte
+{#each recipients as name}
+  <Chip
+    variant="input"
+    iconProps={{ name: 'person' }}
+    onRemove={() => (recipients = recipients.filter((r) => r !== name))}
+  >
+    {name}
+  </Chip>
+{/each}
+```
+
+<Canvas of={ChipStories.Suggestion} />
+
+## Accessibility
+
+- **Roles.** Assist and suggestion chips are real buttons or links. Filter chips are toggles
+  whose `aria-pressed` reflects `selected`. An input chip's remove button is its own focusable
+  `<button>`, never nested inside another interactive element.
+- **Disabled.** Assist, filter and suggestion chips use the native `disabled` attribute. An input
+  chip's container is a `<div>`, so it gets `aria-disabled`, and its remove button a real
+  `disabled`.
+- **Contrast.** Every state pairs a container with its `on-*` role, so text keeps AA contrast.

package/dist/components/chips/Chip.stories.svelte

@@ -28,7 +28,7 @@
 <Story name="Playground">Chip</Story>
 
 <Story name="Assist" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap items-center">
     <Chip variant="assist" iconProps={{ name: 'calendar_today' }}>Set reminder</Chip>
     <Chip variant="assist" elevated iconProps={{ name: 'calendar_today' }}>Set reminder</Chip>
     <Chip variant="assist" disabled iconProps={{ name: 'calendar_today' }}>Set reminder</Chip>
@@ -36,7 +36,7 @@
 </Story>
 
 <Story name="Filter" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap items-center">
     <Chip variant="filter" bind:selected={filterSelected}>Filter chip</Chip>
     <Chip variant="filter" iconProps={{ name: 'star' }}>Starred</Chip>
     <Chip variant="filter" elevated selected>Elevated selected</Chip>
@@ -45,7 +45,7 @@
 </Story>
 
 <Story name="Input" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap items-center">
     <Chip variant="input" iconProps={{ name: 'person' }} onRemove={() => {}}>Ada Lovelace</Chip>
     <Chip variant="input" onRemove={() => {}}>No avatar</Chip>
     <Chip variant="input" selected iconProps={{ name: 'person' }} onRemove={() => {}}>Selected</Chip
@@ -56,7 +56,7 @@
 </Story>
 
 <Story name="Suggestion" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap items-center">
     <Chip variant="suggestion">Try this</Chip>
     <Chip variant="suggestion" elevated>Elevated</Chip>
     <Chip variant="suggestion" disabled>Disabled</Chip>

package/dist/components/chips/theme.js

@@ -1,11 +1,11 @@
 import { tv } from 'tailwind-variants';
 export const chip = tv({
     slots: {
-        base: 'md-component-button-base group inline-flex h-8 max-w-max items-center justify-center gap-2 rounded-sm before:rounded-sm px-4 md-sys-typescale-label-large font-medium',
+        base: 'md-component-button-base group inline-flex h-spacing-400 max-w-max items-center justify-center gap-spacing-100 rounded-sm before:rounded-sm px-spacing-200 md-sys-typescale-label-large',
         icon: 'shrink-0',
         label: '',
-        trailing: 'relative -mr-2 ml-1 inline-flex size-[18px] shrink-0 items-center justify-center rounded-full',
-        checkIcon: 'size-4 shrink-0'
+        trailing: 'relative -mr-spacing-100 ml-spacing-50 inline-flex size-[18px] shrink-0 items-center justify-center rounded-full',
+        checkIcon: 'size-spacing-200 shrink-0'
     },
     variants: {
         variant: {

package/dist/components/containers/action-rail/ActionRail.stories.svelte

@@ -7,6 +7,7 @@
 
   const { Story } = defineMeta({
     title: 'Containers/Action Rail',
+    tags: ['autodocs'],
     component: ActionRail,
     argTypes: {
       anchor: {

package/dist/components/containers/action-rail/theme.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const actionRail = tv({
     slots: {
-        base: 'z-30 flex flex-col items-center justify-center right-0'
+        base: 'z-30 flex flex-col items-center justify-center right-spacing-0'
     },
     variants: {
         anchor: {