@noxlovette/material 0.5.1 → 0.6.0

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

@@ -2,11 +2,11 @@ import { tv } from 'tailwind-variants';
 export const breadcrumb = tv({
     slots: {
         base: 'flex',
-        list: 'flex flex-wrap items-center gap-1',
-        item: 'flex items-center gap-1',
-        link: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant md-sys-state-focus-indicator relative inline-flex min-h-12 items-center rounded-full px-3 transition-colors md-sys-motion-fast-effects',
-        text: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant px-1 py-0.5',
-        current: 'md-sys-typescale-label-large font-bold px-1 py-0.5',
+        list: 'flex flex-wrap items-center gap-spacing-50',
+        item: 'flex items-center gap-spacing-50',
+        link: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant md-sys-state-focus-indicator relative inline-flex min-h-spacing-600 items-center rounded-full px-spacing-150 transition-colors md-sys-motion-fast-effects',
+        text: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant px-spacing-50 py-spacing-25',
+        current: 'md-sys-typescale-emphasized-label-large px-spacing-50 py-spacing-25',
         separator: 'text-md-sys-color-on-surface-variant inline-flex shrink-0'
     },
     variants: {

package/dist/components/nav/navbar/Navbar.mdx

@@ -0,0 +1,38 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as NavbarStories from './Navbar.stories.svelte';
+
+<Meta of={NavbarStories} />
+
+<Title />
+
+<Subtitle>
+  Navigation bars give access to 3–5 primary destinations at the bottom of small windows.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/navigation-bar/specs) ·
+`import { Navbar, NavbarItem } from '@noxlovette/material';`
+
+<Canvas of={NavbarStories.Playground} />
+
+<Controls of={NavbarStories.Playground} />
+
+## Pairing with Rail
+
+The bar is fixed to the bottom of the window and hides itself from `md` up, where a `Rail` takes
+over. Give both the same destinations. `ghost` adds a spacer the height of the bar, so the end of
+the page isn't hidden behind it.
+
+```svelte
+<Navbar ghost>
+  <NavbarItem label="Home" href="/" iconProps={{ name: 'house' }} />
+  <NavbarItem label="Messages" href="/messages" iconProps={{ name: 'mail' }} badge={5} />
+  <NavbarItem label="Settings" href="/settings" iconProps={{ name: 'settings' }} />
+</Navbar>
+```
+
+## Accessibility
+
+- **Landmark.** The bar is a navigation list, so assistive tech announces it as navigation.
+- **Active item.** The active item gets `aria-current="page"`.
+- **Badges.** A `badge` isn't announced on its own; put the count in the item's label if it
+  matters.

package/dist/components/nav/navbar/Navbar.svelte

@@ -44,7 +44,7 @@ This component takes NavbarItems as its children
     </NavigationMenu.List>
   </NavigationMenu.Root>
   {#if trailing}
-    <div class="shrink-0 px-2">
+    <div class="px-spacing-100 shrink-0">
       {@render trailing()}
     </div>
   {/if}

package/dist/components/nav/navbar/NavbarItem.svelte

@@ -48,15 +48,18 @@ A single destination within a navigation bar.
         <div class={content()}>
           <div class={iconContainer()}>
             <Layer />
-            <Icon
-              {...iconProps}
-              class={icon()}
-              wght={isActive ? 600 : 400}
-              fill={isActive ? 1 : 0}
-            />
-            {#if badge}
-              <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge}></Badge>
-            {/if}
+            <!-- Badge offsets are measured from the icon's corner, not the indicator's. -->
+            <span class="relative inline-flex">
+              <Icon
+                {...iconProps}
+                class={icon()}
+                wght={isActive ? 600 : 400}
+                fill={isActive ? 1 : 0}
+              />
+              {#if badge}
+                <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge} />
+              {/if}
+            </span>
           </div>
           <span class={labelClass()}>
             {label}

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

@@ -1,18 +1,18 @@
 import { tv } from 'tailwind-variants';
 export const navbar = tv({
     slots: {
-        base: 'shadow-elevation-2 bg-md-sys-color-surface-container relative z-20 flex h-20 fixed bottom-0 w-full left-0 justify-around py-3 md:hidden',
+        base: 'shadow-elevation-2 bg-md-sys-color-surface-container relative z-20 flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
         items: 'flex justify-around w-full',
-        fab: 'bottom-24 right-4 absolute',
+        fab: 'bottom-24 right-spacing-200 absolute',
         ghost: 'h-20 w-full shrink-0 md:hidden pointer-events-none'
     }
 });
 export const navitem = tv({
     slots: {
-        base: 'group relative flex flex-1 flex-col items-center justify-center min-w-0 max-w-[168px] h-full transition-colors md-sys-motion-fast-effects',
-        content: 'flex flex-col items-center justify-center gap-1 w-full',
-        iconContainer: 'relative flex items-center justify-center h-8 w-16 rounded-full transition-colors md-sys-motion-effects',
-        icon: 'text-[24px] size-6',
+        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',
         label: 'md-sys-typescale-label-medium truncate w-full text-center'
     },
     variants: {

package/dist/components/nav/rail/Rail.mdx

@@ -0,0 +1,73 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as RailStories from './Rail.stories.svelte';
+
+<Meta of={RailStories} />
+
+<Title />
+
+<Subtitle>
+  Navigation rails give access to 3–7 primary destinations on medium and larger windows.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/navigation-rail/specs) ·
+`import { Rail, RailItem } from '@noxlovette/material';`
+
+<Canvas of={RailStories.Playground} />
+
+<Controls of={RailStories.Playground} />
+
+## Anatomy
+
+- **`Rail`** is the container: the sidebar, a spacer that reserves its width in the page, and the
+  scrim shown while it's expanded on medium windows.
+- **`RailItem`** is one destination. It detects the active route, shows an optional `badge` (a
+  count, or `-1` for a dot), and lays itself out for the collapsed or expanded rail.
+- **`railStore`** exposes the collapsed state to components outside the rail.
+
+## Window sizes
+
+The rail shows from `md` up and is hidden below it. For small windows, mount a `Navbar` with the
+same destinations; it hides itself from `md` up, so the two never show together.
+
+| Window         | Collapsed rail | Expanded rail                                       |
+| -------------- | -------------- | --------------------------------------------------- |
+| Small (< `md`) | Hidden         | Hidden                                              |
+| Medium (`md`)  | 96dp           | Overlays content over a scrim; outside click closes |
+| Large (`lg`+)  | 96dp           | Pushes content aside                                |
+
+## Layout
+
+The rail renders a spacer next to itself that takes the rail's width. Put the rail and your
+content in a flex row and the content moves aside on its own, with no `margin-left`:
+
+```svelte
+<div class="flex min-h-dvh">
+  <Rail bind:collapsed>
+    <RailItem label="Home" href="/" iconProps={{ name: 'house' }} />
+    <RailItem label="Messages" href="/messages" iconProps={{ name: 'mail' }} badge={5} />
+  </Rail>
+  <div class="min-w-spacing-0 flex-1">
+    {@render children()}
+  </div>
+</div>
+
+<Navbar>
+  <NavbarItem label="Home" href="/" iconProps={{ name: 'house' }} />
+  <NavbarItem label="Messages" href="/messages" iconProps={{ name: 'mail' }} badge={5} />
+</Navbar>
+```
+
+- **Under an app bar:** pass the bar's height in px to `railTop` so the rail starts below it.
+- **Anchoring:** `anchor="viewport"` (the default) fixes the rail to the window's leading edge.
+  `anchor="parent"` positions it inside the nearest positioned ancestor, for embedded layouts
+  and demos.
+- **Extras:** the `fab` snippet places a FAB above the destinations. `expandable={false}` removes
+  the menu toggle.
+
+<Canvas of={RailStories.WithFAB} />
+
+## Accessibility
+
+- **Active item.** The active item gets `aria-current="page"`.
+- **Disabled items** set `aria-disabled` and leave the tab order but stay visible.
+- **Keyboard.** Every item is a link reachable with Tab; the menu toggle is a real button.

package/dist/components/nav/rail/Rail.stories.svelte

@@ -14,15 +14,13 @@
       anchor: {
         control: 'select',
         options: ['viewport', 'parent']
-      },
-      withNavbar: { control: 'boolean' }
+      }
     },
     args: {
       collapsed: true,
       expandable: true,
       rounded: false,
-      anchor: 'parent',
-      withNavbar: false
+      anchor: 'parent'
     }
   });
 </script>
@@ -35,7 +33,6 @@
         collapsed={args.collapsed}
         expandable={args.expandable}
         rounded={args.rounded}
-        withNavbar={args.withNavbar}
       >
         <RailItem label="Home" href="/" iconProps={{ name: 'house' }} selected />
         <RailItem label="Inbox" href="#" iconProps={{ name: 'mail' }} badge={4} />
@@ -55,10 +52,9 @@
         collapsed={args.collapsed}
         expandable={args.expandable}
         rounded={args.rounded}
-        withNavbar={args.withNavbar}
       >
         {#snippet fab()}
-          <FAB size="small" iconProps={{ name: 'add' }} label="New" />
+          <FAB iconProps={{ name: 'add' }} label="New" />
         {/snippet}
         <RailItem label="Home" href="/" iconProps={{ name: 'house' }} selected />
         <RailItem label="Inbox" href="#" iconProps={{ name: 'mail' }} badge={4} />

package/dist/components/nav/rail/Rail.svelte

@@ -66,6 +66,7 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
 >
   {#if expandable}
     <ButtonIcon
+      variant="standard"
       type="button"
       tooltipContent={collapsed ? 'Открыть' : 'Закрыть'}
       iconProps={{ name: `${collapsed ? 'menu' : 'menu_open'}` }}

package/dist/components/nav/rail/RailItem.svelte

@@ -99,15 +99,18 @@ In mobile (navbar) mode the same item renders as a bottom-bar tab.
         <div class={content()}>
           <div class={iconContainer()}>
             <Layer />
-            <Icon
-              {...iconProps}
-              class={icon()}
-              wght={isActive ? 600 : 400}
-              fill={isActive ? 1 : 0}
-            />
-            {#if badge}
-              <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge}></Badge>
-            {/if}
+            <!-- Badge offsets are measured from the icon's corner, not the indicator's. -->
+            <span class="relative inline-flex">
+              <Icon
+                {...iconProps}
+                class={icon()}
+                wght={isActive ? 600 : 400}
+                fill={isActive ? 1 : 0}
+              />
+              {#if badge}
+                <Badge size={badge === -1 ? 'sm' : 'lg'} number={badge} />
+              {/if}
+            </span>
           </div>
           <p class={labelClass()}>
             {label}

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

@@ -1,25 +1,25 @@
 import { tv } from 'tailwind-variants';
 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-40 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,9 @@ 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. */
+    /**
+     * @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.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 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

@@ -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';
 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

@@ -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>