@scattered-light/loomiere-mojave 0.15.6 → 0.16.0

package/dist/exports/AGENTS.md

@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ### Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Splitter`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 
@@ -166,8 +166,8 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`, `Loomiere.AppBar`, `Loomiere.PickerButton`, `Loomiere.SideNav`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
-- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure, DescriptionList, AppBar, PickerButton and SideNav are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure, DescriptionList (with `Loomiere.DescriptionItem`), AppBar (with `Loomiere.AppBarSpacer`), PickerButton and SideNav (with `Loomiere.SideNavItem`, `Loomiere.SideNavGroup` and `Loomiere.SideNavToggle`) come from the package root or `./custom`.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.StatCard`, `Loomiere.DescriptionList`, `Loomiere.AppBar`, `Loomiere.PickerButton`, `Loomiere.SideNav`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
+- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure, StatCard, DescriptionList, AppBar, PickerButton and SideNav are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure, StatCard, DescriptionList (with `Loomiere.DescriptionItem`), AppBar (with `Loomiere.AppBarSpacer`), PickerButton and SideNav (with `Loomiere.SideNavItem`, `Loomiere.SideNavGroup` and `Loomiere.SideNavToggle`) come from the package root or `./custom`.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
 
@@ -218,6 +218,7 @@ Pick by what the person is doing, not by look:
 | `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
 | `Sheet` | Frame a section of a working page (open items, a profile, periods) with a ruled top and an optional tab label. A table or list inside runs edge to edge. |
 | `StatFigure` | Lead a page with one figure that matters (a balance, a count to act on), with a caps label and a caption. Give a final total the double underline. |
+| `StatCard` | Show one item of a list (an Entity, an account) as a card with its name, a caption and a row of figures. Give it href or onOpen and the whole card opens. |
 | `DescriptionList` | Show label and value pairs, such as a profile. variant="leader" runs dotted leaders to values at the end of the row, as on a working paper. |
 | `EmptyState` | Don't use it for a message about something that just happened (use Toast) or a warning above content that still shows (use a notice or an inline alert). |
 | `Progress` | Show how far a task has got. |

package/dist/exports/catalog.json

@@ -187,6 +187,8 @@
         "design-system/components/Slider/preview.html",
         "design-system/components/Splitter/README.md",
         "design-system/components/Splitter/preview.html",
+        "design-system/components/StatCard/README.md",
+        "design-system/components/StatCard/preview.html",
         "design-system/components/StatFigure/README.md",
         "design-system/components/StatFigure/preview.html",
         "design-system/components/Switch/README.md",

package/dist/exports/design-system/README.md

@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ## Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Splitter`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 
@@ -158,8 +158,8 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`, `Loomiere.AppBar`, `Loomiere.PickerButton`, `Loomiere.SideNav`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
-- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure, DescriptionList, AppBar, PickerButton and SideNav are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure, DescriptionList (with `Loomiere.DescriptionItem`), AppBar (with `Loomiere.AppBarSpacer`), PickerButton and SideNav (with `Loomiere.SideNavItem`, `Loomiere.SideNavGroup` and `Loomiere.SideNavToggle`) come from the package root or `./custom`.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.StatCard`, `Loomiere.DescriptionList`, `Loomiere.AppBar`, `Loomiere.PickerButton`, `Loomiere.SideNav`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
+- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure, StatCard, DescriptionList, AppBar, PickerButton and SideNav are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure, StatCard, DescriptionList (with `Loomiere.DescriptionItem`), AppBar (with `Loomiere.AppBarSpacer`), PickerButton and SideNav (with `Loomiere.SideNavItem`, `Loomiere.SideNavGroup` and `Loomiere.SideNavToggle`) come from the package root or `./custom`.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
 
@@ -210,6 +210,7 @@ Pick by what the person is doing, not by look:
 | `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
 | `Sheet` | Frame a section of a working page (open items, a profile, periods) with a ruled top and an optional tab label. A table or list inside runs edge to edge. |
 | `StatFigure` | Lead a page with one figure that matters (a balance, a count to act on), with a caps label and a caption. Give a final total the double underline. |
+| `StatCard` | Show one item of a list (an Entity, an account) as a card with its name, a caption and a row of figures. Give it href or onOpen and the whole card opens. |
 | `DescriptionList` | Show label and value pairs, such as a profile. variant="leader" runs dotted leaders to values at the end of the row, as on a working paper. |
 | `EmptyState` | Don't use it for a message about something that just happened (use Toast) or a warning above content that still shows (use a notice or an inline alert). |
 | `Progress` | Show how far a task has got. |

package/dist/exports/design-system/components/StatCard/README.md

@@ -0,0 +1,50 @@
+# StatCard
+
+Loomiere component, not part of Base UI. A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures ruled off under them. With data-interactive the title is a link or a button and its ::after covers the card, so the whole card is the target and the title names it. The hover fill and the focus ring follow the card, not just the title. Tokens: stat-card.* (tokens/component/stat-card.json).
+
+Use `Loomiere.StatCard`, this package's component: it puts the class names on for you (`import { StatCard } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `StatCard` | `data-interactive` |
+| `StatCardHeader` |   |
+| `StatCardTitle` |   |
+| `StatCardCaption` |   |
+| `StatCardLink` |   |
+| `StatCardFacts` |   |
+| `StatCardFooter` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the StatCard stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: (args) => (
+    <div style={grid}>
+      <StatCard {...args} href="#north" />
+      <StatCard
+        {...args}
+        title="Boreal Company"
+        caption="USD · 3 accounts"
+        facts={[
+          { label: 'Questions', value: '–' },
+          { label: 'Docs', value: '4', tone: 'accent' },
+          { label: 'Review', value: '12', tone: 'accent' },
+        ]}
+        href="#boreal"
+      />
+    </div>
+  ),
+};
+
+/** onOpen makes the title a button, for an app that navigates without links. */
+```
+
+The preview also shows `AsButton`, `Static`, `WithFooter`.

package/dist/exports/design-system/components/StatCard/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Display" height=480 subtitle="Default / AsButton / Static / WithFooter" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var f=Object.create;var i=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!x.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(r=S(t,a))||r.enumerable});return e};var D=(e,t,o)=>(o=e!=null?f(b(e)):{},E(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e));var u=v((M,p)=>{p.exports=window.Loomiere});var d={};w(d,{AsButton:()=>F,Default:()=>C,Static:()=>A,TwoFigures:()=>O,WithFooter:()=>B,default:()=>m});var l=D(u(),1);var c=window.React;function s(e,t,o){let{children:r,...a}=t||{};return o!==void 0&&(a.key=o),r===void 0?c.createElement(e,a):Array.isArray(r)?c.createElement(e,a,...r):c.createElement(e,a,r)}var U=c.Fragment;var R={title:"Components/Lib/StatCard",component:l.StatCard,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{title:"North Company",caption:"USD \xB7 1 account",facts:[{label:"Questions",value:"1",tone:"accent"},{label:"Docs",value:"\u2013"},{label:"Review",value:"2",tone:"accent"}]}},m=R,h={display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(18rem, 1fr))",gap:"16px"},C={render:e=>s("div",{style:h,children:[s(l.StatCard,{...e,href:"#north"}),s(l.StatCard,{...e,title:"Boreal Company",caption:"USD \xB7 3 accounts",facts:[{label:"Questions",value:"\u2013"},{label:"Docs",value:"4",tone:"accent"},{label:"Review",value:"12",tone:"accent"}],href:"#boreal"})]})},F={args:{onOpen:()=>{}}},A={},B={args:{footer:"Last reconciled Oct 29"}},O={args:{facts:[{label:"Book balance",value:"75.00",caption:"DR"},{label:"Unposted",value:"2",tone:"accent"}]}};var n=window.React,y=m||{},j=["Default","AsButton","Static","WithFooter"];function N({id:e}){let t=d[e],o={...y.args||{},...t.args||{}};return(t.render||(a=>n.createElement(y.component,a)))(o,{args:o,id:e,name:e})}var k=j.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(N,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,k));})();
+
+</script>
+</body>
+</html>