@scattered-light/loomiere-base-ui 0.19.0 → 0.20.1

package/dist/custom/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aL as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aM as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aN as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aO as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aP as ListDetailList, aQ as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aR as MAX_MINOR_UNITS, aS as MoneyChangeDetails, aT as MoneyDisplay, M as MoneyField, aU as MoneyFieldAffix, aV as MoneyFieldGroup, aW as MoneyFieldInput, z as MoneyFieldProps, aX as MoneyFieldRoot, F as MoneyFieldRootProps, aY as MoneyFieldSteps, aZ as NormalizedPaste, a_ as PanelSpec, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, a$ as RuntimePanel, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, b0 as Size, b1 as SizeInput, a2 as Splitter, b2 as SplitterHandle, a3 as SplitterHandleProps, b3 as SplitterKey, b4 as SplitterPanel, a4 as SplitterPanelProps, b5 as SplitterRoot, a5 as SplitterRootProps, a6 as StatCard, a7 as StatCardFact, a8 as StatCardProps, a9 as StatFigure, aa as StatFigureProps, b6 as StoredLayout, b7 as StoredPanel, ab as addDays, ac as addMonths, b8 as affixSide, b9 as applyKey, ba as applyStored, bb as ariaPercents, ad as builtinPresets, ae as clampDate, bc as createPanels, bd as cssSize, be as currencyName, bf as currencySymbol, af as daysInMonth, ag as defaultPresets, ah as defaultWeekStartsOn, ai as endOfWeek, bg as formatDay, bh as formatFull, aj as formatMoney, ak as fromMinorUnits, al as getCurrencyDigits, bi as handleTarget, am as inclusiveDays, an as isValidCurrency, ao as isoWeek, ap as last30Days, aq as last7Days, ar as lastMonth, as as lastWeek, bj as layoutOf, at as lengthBlockReason, bk as measure, bl as monthCells, bm as moveFocusDate, au as nextMonth, av as nextWeek, bn as normalizePaste, aw as orderRange, bo as parseDate, ax as parseDecimalString, bp as parseSize, bq as presetInBounds, br as resetToDefault, bs as resizeByDelta, ay as resolvePreset, bt as roundHalfExpand, bu as roundingChangesValue, bv as sameSelection, bw as serializeSize, bx as settle, by as sizeText, az as startOfWeek, bz as syncPanels, aA as thisMonth, aB as thisQuarter, aC as thisWeek, aD as toDecimalString, aE as toMinorUnits, aF as today, aG as todayDate, bA as toggleCollapsed, aH as tomorrow, aI as useListDetail, bB as valueText, aJ as yearToDate, aK as yesterday } from '../index-ywBkS0AA.js';
+export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aO as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aP as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aQ as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aR as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aS as ListDetailList, aT as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aU as MAX_MINOR_UNITS, aV as MoneyChangeDetails, aW as MoneyDisplay, M as MoneyField, aX as MoneyFieldAffix, aY as MoneyFieldGroup, aZ as MoneyFieldInput, z as MoneyFieldProps, a_ as MoneyFieldRoot, F as MoneyFieldRootProps, a$ as MoneyFieldSteps, b0 as NormalizedPaste, b1 as PanelSpec, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, b2 as RuntimePanel, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, b3 as Size, b4 as SizeInput, a2 as SplitButton, a3 as SplitButtonItem, a4 as SplitButtonProps, a5 as Splitter, b5 as SplitterHandle, a6 as SplitterHandleProps, b6 as SplitterKey, b7 as SplitterPanel, a7 as SplitterPanelProps, b8 as SplitterRoot, a8 as SplitterRootProps, a9 as StatCard, aa as StatCardFact, ab as StatCardProps, ac as StatFigure, ad as StatFigureProps, b9 as StoredLayout, ba as StoredPanel, ae as addDays, af as addMonths, bb as affixSide, bc as applyKey, bd as applyStored, be as ariaPercents, ag as builtinPresets, ah as clampDate, bf as createPanels, bg as cssSize, bh as currencyName, bi as currencySymbol, ai as daysInMonth, aj as defaultPresets, ak as defaultWeekStartsOn, al as endOfWeek, bj as formatDay, bk as formatFull, am as formatMoney, an as fromMinorUnits, ao as getCurrencyDigits, bl as handleTarget, ap as inclusiveDays, aq as isValidCurrency, ar as isoWeek, as as last30Days, at as last7Days, au as lastMonth, av as lastWeek, bm as layoutOf, aw as lengthBlockReason, bn as measure, bo as monthCells, bp as moveFocusDate, ax as nextMonth, ay as nextWeek, bq as normalizePaste, az as orderRange, br as parseDate, aA as parseDecimalString, bs as parseSize, bt as presetInBounds, bu as resetToDefault, bv as resizeByDelta, aB as resolvePreset, bw as roundHalfExpand, bx as roundingChangesValue, by as sameSelection, bz as serializeSize, bA as settle, bB as sizeText, aC as startOfWeek, bC as syncPanels, aD as thisMonth, aE as thisQuarter, aF as thisWeek, aG as toDecimalString, aH as toMinorUnits, aI as today, aJ as todayDate, bD as toggleCollapsed, aK as tomorrow, aL as useListDetail, bE as valueText, aM as yearToDate, aN as yesterday } from '../index-CB3_OECu.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@base-ui/react';

package/dist/custom/index.js

@@ -1,4 +1,4 @@
-export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatCard, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-2BFNETZZ.js';
-export { EmptyState } from '../chunk-M7KJASGK.js';
+export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, SplitButton, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatCard, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-B5FH3RF5.js';
+export { EmptyState } from '../chunk-43IJNNXK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -23,4 +23,36 @@ 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/design-system/components/CollectionCards/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Data" height=160 subtitle="Default" -->
+<!-- @dsCard group="Data" height=240 subtitle="Default / SegmentedToolbar" -->
 <!doctype html>
 <html>
 <head>
@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var h=Object.create;var c=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},F=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of w(e))!v.call(t,o)&&o!==n&&c(t,o,{get:()=>e[o],enumerable:!(r=S(e,o))||r.enumerable});return t};var u=(t,e,n)=>(n=t!=null?h(x(t)):{},F(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t));var y=p((P,g)=>{g.exports=window.Loomiere});var E=p((k,f)=>{f.exports=window.Loomiere});var m={};D(m,{Default:()=>A,default:()=>d});var C=u(y(),1),a=u(E(),1);var i=window.React;function s(t,e,n){let{children:r,...o}=e||{};return n!==void 0&&(o.key=n),r===void 0?i.createElement(t,o):Array.isArray(r)?i.createElement(t,o,...r):i.createElement(t,o,r)}var $=i.Fragment;var R=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})),j={title:"Components/Lib/CollectionCards",component:a.CollectionCards,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},d=j;function z(){let t=(0,a.useCollection)({rows:R,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 s("div",{style:{display:"grid",gap:"16px"},children:[s(a.CollectionToolbar,{collection:t,searchLabel:"Find an Entity",searchPlaceholder:"Find an Entity",showSort:!0}),s(a.CollectionCards,{collection:t,label:"Entities",renderCard:e=>s(C.StatCard,{title:e.name,caption:"USD",href:`#${e.id}`,facts:[{label:"Open",value:e.open||"\u2013",tone:e.open?"accent":"default"}]})}),s(a.CollectionPagination,{page:t.page,pageCount:t.pageCount,pageSize:t.pageSize,total:t.pageTotal,filtered:t.isFiltered,onPageChange:t.setPage,label:"Entities"})]})}var A={args:{collection:void 0,label:"Entities",renderCard:()=>null},render:()=>s(z,{})};var l=window.React,b=d||{},L=["Default"];function M({id:t}){let e=m[t],n={...b.args||{},...e.args||{}};return(e.render||(o=>l.createElement(b.component,o)))(n,{args:n,id:t,name:t})}var N=L.map(t=>l.createElement("section",{key:t,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,N));})();
+(()=>{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>

package/dist/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/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/design-system/components/SplitButton/README.md

@@ -0,0 +1,25 @@
+# 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` |   |
+
+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/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/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/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>