@scattered-light/loomiere-mojave 0.18.0 → 0.20.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`, `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`).
+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`, `CollectionCards`, `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`, `SplitButton`, `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.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`.
+- **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.CollectionCards`, `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, CollectionCards, 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, CollectionPagination and CollectionCards 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.
 
@@ -216,6 +216,7 @@ Pick by what the person is doing, not by look:
 | `EditableList` | Repeating form rows people add, edit and remove: line items, allocations. |
 | `CollectionToolbar` | Search, tabs, filters and the selection bar for a DataTable or a DataList. |
 | `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
+| `CollectionCards` | The rows of a collection as a grid of cards, such as StatCards, with the same search, sort, filters and paging as the table. |
 | `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. |

package/dist/exports/catalog.json

@@ -116,6 +116,8 @@
         "design-system/components/Collapsible/README.md",
         "design-system/components/Collapsible/preview.html",
         "design-system/components/Collection/README.md",
+        "design-system/components/CollectionCards/README.md",
+        "design-system/components/CollectionCards/preview.html",
         "design-system/components/CollectionPagination/README.md",
         "design-system/components/CollectionToolbar/README.md",
         "design-system/components/Combobox/README.md",
@@ -185,6 +187,8 @@
         "design-system/components/SideNav/preview.html",
         "design-system/components/Slider/README.md",
         "design-system/components/Slider/preview.html",
+        "design-system/components/SplitButton/README.md",
+        "design-system/components/SplitButton/preview.html",
         "design-system/components/Splitter/README.md",
         "design-system/components/Splitter/preview.html",
         "design-system/components/StatCard/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`, `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`).
+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`, `CollectionCards`, `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`, `SplitButton`, `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.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`.
+- **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.CollectionCards`, `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, CollectionCards, 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, CollectionPagination and CollectionCards 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.
 
@@ -208,6 +208,7 @@ Pick by what the person is doing, not by look:
 | `EditableList` | Repeating form rows people add, edit and remove: line items, allocations. |
 | `CollectionToolbar` | Search, tabs, filters and the selection bar for a DataTable or a DataList. |
 | `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
+| `CollectionCards` | The rows of a collection as a grid of cards, such as StatCards, with the same search, sort, filters and paging as the table. |
 | `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. |

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

@@ -0,0 +1,58 @@
+# CollectionCards
+
+Loomiere component, not part of Base UI. The page of a collection as a grid. Columns fill the width, none narrower than --sl-collection-cards-min-width. Each card stretches to the row's height.
+
+Use `Loomiere.CollectionCards` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `CollectionCards` |   |
+
+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 CollectionCards stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { collection: undefined as never, label: 'Entities', renderCard: () => null },
+  render: () => <Demo />,
+};
+
+function SegmentedDemo() {
+  const collection = useCollection<Entity>({
+    rows: entities,
+    getRowId: (r) => r.id,
+    pageSize: 6,
+    columns: [
+      { id: 'name', header: 'Entity', value: (r) => r.name, searchable: true, sortable: true, rowHeader: true },
+      { id: 'open', header: 'Most open', value: (r) => (r.open ? 'open' : 'none'), filter: { kind: 'select', options: [{ value: 'open', label: 'Open items' }, { value: 'none', label: 'Nothing open' }] }, hidden: true },
+    ],
+  });
+  return (
+    <div style={{ display: 'grid', gap: '16px' }}>
+      <CollectionToolbar
+        collection={collection}
+        searchLabel="Find an Entity"
+        searchPlaceholder="Find an Entity"
+        ruled
+        segments={[
+          segmentFilter(collection, 'open', 'Filter', [{ value: 'all', label: 'All' }, { value: 'open', label: 'Open items' }, { value: 'none', label: 'Nothing open' }]),
+          { ...segmentSort(collection, 'Sort', [{ value: 'name', label: 'A–Z' }]), showLabel: true, end: true },
+        ]}
+        meta={`${collection.pageTotal} Entities`}
+      />
+      <CollectionCards collection={collection} label="Entities" renderCard={(row) => <StatCard title={row.name} facts={[{ label: 'Open', value: row.open || '–' }]} />} />
+    </div>
+  );
+}
+
+/** `segments` turns the toolbar into search plus toggle groups for quick filters and sort. */
+```
+
+The preview also shows `SegmentedToolbar`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Data" height=240 subtitle="Default / SegmentedToolbar" -->
+<!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 v=Object.create;var d=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var u=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},R=(t,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of w(e))!F.call(t,r)&&r!==o&&d(t,r,{get:()=>e[r],enumerable:!(l=C(e,r))||l.enumerable});return t};var g=(t,e,o)=>(o=t!=null?v(x(t)):{},R(e||!t||!t.__esModule?d(o,"default",{value:t,enumerable:!0}):o,t));var b=u((k,y)=>{y.exports=window.Loomiere});var f=u(($,E)=>{E.exports=window.Loomiere});var p={};D(p,{Default:()=>L,SegmentedToolbar:()=>j,default:()=>m});var c=g(b(),1),n=g(f(),1);var s=window.React;function a(t,e,o){let{children:l,...r}=e||{};return o!==void 0&&(r.key=o),l===void 0?s.createElement(t,r):Array.isArray(l)?s.createElement(t,r,...l):s.createElement(t,r,l)}var H=s.Fragment;var h=Array.from({length:14},(t,e)=>({id:String(e+1),name:["North","Boreal","Cedar","Delta","Elm","Fjord","Grove"][e%7]+(e>6?" Holdings":" Company"),open:e*3%5})),O={title:"Components/Lib/CollectionCards",component:n.CollectionCards,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=O;function A(){let t=(0,n.useCollection)({rows:h,getRowId:e=>e.id,pageSize:6,columns:[{id:"name",header:"Entity",value:e=>e.name,searchable:!0,sortable:!0,rowHeader:!0},{id:"open",header:"Most open",value:e=>e.open,kind:"number",sortable:!0,hidden:!0}]});return a("div",{style:{display:"grid",gap:"16px"},children:[a(n.CollectionToolbar,{collection:t,searchLabel:"Find an Entity",searchPlaceholder:"Find an Entity",showSort:!0}),a(n.CollectionCards,{collection:t,label:"Entities",renderCard:e=>a(c.StatCard,{title:e.name,caption:"USD",href:`#${e.id}`,facts:[{label:"Open",value:e.open||"\u2013",tone:e.open?"accent":"default"}]})}),a(n.CollectionPagination,{page:t.page,pageCount:t.pageCount,pageSize:t.pageSize,total:t.pageTotal,filtered:t.isFiltered,onPageChange:t.setPage,label:"Entities"})]})}var L={args:{collection:void 0,label:"Entities",renderCard:()=>null},render:()=>a(A,{})};function N(){let t=(0,n.useCollection)({rows:h,getRowId:e=>e.id,pageSize:6,columns:[{id:"name",header:"Entity",value:e=>e.name,searchable:!0,sortable:!0,rowHeader:!0},{id:"open",header:"Most open",value:e=>e.open?"open":"none",filter:{kind:"select",options:[{value:"open",label:"Open items"},{value:"none",label:"Nothing open"}]},hidden:!0}]});return a("div",{style:{display:"grid",gap:"16px"},children:[a(n.CollectionToolbar,{collection:t,searchLabel:"Find an Entity",searchPlaceholder:"Find an Entity",ruled:!0,segments:[(0,n.segmentFilter)(t,"open","Filter",[{value:"all",label:"All"},{value:"open",label:"Open items"},{value:"none",label:"Nothing open"}]),{...(0,n.segmentSort)(t,"Sort",[{value:"name",label:"A\u2013Z"}]),showLabel:!0,end:!0}],meta:`${t.pageTotal} Entities`}),a(n.CollectionCards,{collection:t,label:"Entities",renderCard:e=>a(c.StatCard,{title:e.name,facts:[{label:"Open",value:e.open||"\u2013"}]})})]})}var j={args:{collection:void 0,label:"Entities",renderCard:()=>null},render:()=>a(N,{})};var i=window.React,S=m||{},z=["Default","SegmentedToolbar"];function M({id:t}){let e=p[t],o={...S.args||{},...e.args||{}};return(e.render||(r=>i.createElement(S.component,r)))(o,{args:o,id:t,name:t})}var P=z.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,P));})();
+
+</script>
+</body>
+</html>

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

@@ -10,7 +10,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 
 | Class | Data attributes it answers to |
 |---|---|
-| `CollectionToolbar` | `data-narrow`; `data-search`: `fixed`; `data-framed` |
+| `CollectionToolbar` | `data-narrow`; `data-search`: `fixed`; `data-framed`; `data-segmented`; `data-ruled` |
 | `CollectionToolbarMain` |   |
 | `CollectionSelectionBar` |   |
 | `CollectionSort` |   |
@@ -27,5 +27,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 | `CollectionCount` |   |
 | `CollectionToolbarMeta` |   |
 | `CollectionToolbarMetaEnd` |   |
+| `CollectionSegment` | `data-end` |
+| `CollectionSegmentLabel` |   |
 
 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.

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

@@ -1,6 +1,6 @@
 # PickerButton
 
-Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Label and choice share a baseline, so caps beside lowercase read as one line; picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Label and choice are centered on the control's height, so a caps label and its choice sit level at any font size; picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
 
 Use `Loomiere.PickerButton`, this package's component: it puts the class names on for you (`import { PickerButton } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
 

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

@@ -0,0 +1,26 @@
+# SplitButton
+
+Loomiere component, not part of Base UI. A Button and a square Menu trigger side by side, joined into one outline: the inner corners are square and the trigger overlaps the main part's border by one stroke.
+
+Use `Loomiere.SplitButton`, this package's component: it puts the class names on for you (`import { SplitButton } 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 |
+|---|---|
+| `SplitButton` |   |
+| `Button` |   |
+
+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 SplitButton stories (`Default`):
+
+```tsx
+export const Default: Story = {};
+```
+
+The preview also shows `Disabled`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Actions" height=240 subtitle="Default / Disabled" -->
+<!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 y=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of u(t))!f.call(e,a)&&a!==o&&s(e,a,{get:()=>t[a],enumerable:!(n=b(t,a))||n.enumerable});return e};var k=(e,t,o)=>(o=e!=null?y(S(e)):{},E(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e));var d=g((L,m)=>{m.exports=window.Loomiere});var c={};w(c,{Default:()=>B,Disabled:()=>D,default:()=>l});var i=k(d(),1),x={title:"Components/Lib/SplitButton",component:i.SplitButton,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{label:"Add Transaction",onClick:()=>{},moreLabel:"More ways to add transactions",items:[{label:"Bank connection (not yet available)",onSelect:()=>{},disabled:!0},{label:"Import CSV",onSelect:()=>{}},{label:"Import Excel workbook",onSelect:()=>{}}]}},l=x,B={},D={args:{disabled:!0}};var r=window.React,p=l||{},M=["Default","Disabled"];function R({id:e}){let t=c[e],o={...p.args||{},...t.args||{}};return(t.render||(a=>r.createElement(p.component,a)))(o,{args:o,id:e,name:e})}var C=M.map(e=>r.createElement("section",{key:e,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(R,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,C));})();
+
+</script>
+</body>
+</html>

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

@@ -10,7 +10,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 
 | Class | Data attributes it answers to |
 |---|---|
-| `StatCard` | `data-interactive` |
+| `StatCard` | `data-interactive`; `data-detailed` |
 | `StatCardHeader` |   |
 | `StatCardHeading` |   |
 | `StatCardTag` |   |
@@ -19,6 +19,9 @@ Not a Base UI part, so there is no base-ui.com page for it.
 | `StatCardLink` |   |
 | `StatCardFacts` |   |
 | `StatCardFooter` |   |
+| `DescriptionList` |   |
+| `StatCardBar` |   |
+| `StatCardStatus` |   |
 
 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.
 

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

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var f=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=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 S(t))!x.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(r=g(t,a))||r.enumerable});return e};var h=(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((T,d)=>{d.exports=window.Loomiere});var p={};w(p,{AsButton:()=>F,Default:()=>C,Static:()=>A,TwoFigures:()=>O,WithFooter:()=>B,WithTag:()=>j,default:()=>m});var l=h(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 D={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=D,R={display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(18rem, 1fr))",gap:"16px"},C={render:e=>s("div",{style:R,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"}]}},j={args:{tag:"2 new",footer:"1 account \xB7 Cash 75.00 Dr"}};var n=window.React,y=m||{},N=["Default","AsButton","Static","WithFooter"];function k({id:e}){let t=p[e],o={...y.args||{},...t.args||{}};return(t.render||(a=>n.createElement(y.component,a)))(o,{args:o,id:e,name:e})}var L=N.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(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,L));})();
+(()=>{var f=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},E=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of S(e))!x.call(t,a)&&a!==o&&i(t,a,{get:()=>e[a],enumerable:!(n=g(e,a))||n.enumerable});return t};var h=(t,e,o)=>(o=t!=null?f(b(t)):{},E(e||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t));var u=v((T,d)=>{d.exports=window.Loomiere});var p={};w(p,{AsButton:()=>C,Default:()=>R,Detailed:()=>j,Static:()=>B,TwoFigures:()=>A,WithFooter:()=>F,WithTag:()=>N,default:()=>m});var l=h(u(),1);var c=window.React;function s(t,e,o){let{children:n,...a}=e||{};return o!==void 0&&(a.key=o),n===void 0?c.createElement(t,a):Array.isArray(n)?c.createElement(t,a,...n):c.createElement(t,a,n)}var U=c.Fragment;var D={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=D,O={display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(18rem, 1fr))",gap:"16px"},R={render:t=>s("div",{style:O,children:[s(l.StatCard,{...t,href:"#north"}),s(l.StatCard,{...t,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"})]})},C={args:{onOpen:()=>{}}},B={},F={args:{footer:"Last reconciled Oct 29"}},A={args:{facts:[{label:"Book balance",value:"75.00",caption:"DR"},{label:"Unposted",value:"2",tone:"accent"}]}},N={args:{tag:"2 new",footer:"1 account \xB7 Cash 75.00 Dr"}},j={args:{details:[["Last activity","Oct 29"],["Open since","Oct 3"]],status:"Waiting on client",actions:s("button",{type:"button",className:"Button","data-emphasis":"quiet",children:"Open Entity \u2192"})}};var r=window.React,y=m||{},L=["Default","AsButton","Static","WithFooter"];function W({id:t}){let e=p[t],o={...y.args||{},...e.args||{}};return(e.render||(a=>r.createElement(y.component,a)))(o,{args:o,id:t,name:t})}var k=L.map(t=>r.createElement("section",{key:t,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(W,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,k));})();
 
 </script>
 </body>