@scattered-light/loomiere-base-ui 0.7.1 → 0.9.0

package/dist/custom/index.d.ts

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

package/dist/custom/index.js

@@ -1,4 +1,4 @@
-export { Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, 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-JUUPOOQQ.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, Sheet, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, 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-LQWPDLLQ.js';
 export { EmptyState } from '../chunk-M7KJASGK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,58 @@
+# AppBar
+
+Loomiere component, not part of Base UI. The bar across the top of an app window, one row on a line in the rule color. The line is app-bar.border-width while rule.width is 0, and the thicker of the two once a brand turns the rule on, so an ink-rule brand gets the working-paper rule under its app bar. AppBarSpacer pushes what follows it to the end. A vertical Separator inside is a short divider between groups of icon actions. Tokens: app-bar.* (tokens/component/app-bar.json).
+
+Use `Loomiere.AppBar`, this package's component: it puts the class names on for you (`import { AppBar } 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 |
+|---|---|
+| `AppBar` |   |
+| `AppBarSpacer` |   |
+| `Separator` | `data-orientation`: `vertical` |
+
+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 AppBar stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [module, setModule] = React.useState('accounting');
+    return (
+      <AppBar>
+        <strong style={{ fontSize: '1.5rem', fontWeight: 700 }}>Ledgerly</strong>
+        <Button emphasis="quiet">My Clients</Button>
+        <PickerButton label="Client" value="Alpha Services" />
+        <PickerButton label="Entity" value="North Company" />
+        <AppBarSpacer />
+        <ToggleGroup
+          data-variant="segmented"
+          aria-label="Modules"
+          value={[module]}
+          onValueChange={(next) => next[0] && setModule(next[0])}
+        >
+          <Toggle value="accounting">Accounting</Toggle>
+          <Toggle value="tax">Tax</Toggle>
+        </ToggleGroup>
+        <Button emphasis="quiet" aria-label="Documents">
+          <DocumentIcon />
+        </Button>
+        <Separator orientation="vertical" />
+        <Button emphasis="quiet" aria-label="More">
+          <MoreIcon />
+        </Button>
+      </AppBar>
+    );
+  },
+};
+
+/** Only a wordmark and actions, as on a home screen with no context chosen. */
+```
+
+The preview also shows `Minimal`.

package/dist/design-system/components/AppBar/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Layout" height=240 subtitle="Default / Minimal" -->
+<!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 S=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var p=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),R=(t,r)=>{for(var a in r)l(t,a,{get:r[a],enumerable:!0})},C=(t,r,a,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of M(r))!A.call(t,n)&&n!==a&&l(t,n,{get:()=>r[n],enumerable:!(s=b(r,n))||s.enumerable});return t};var d=(t,r,a)=>(a=t!=null?S(E(t)):{},C(r||!t||!t.__esModule?l(a,"default",{value:t,enumerable:!0}):a,t));var y=p((N,g)=>{g.exports=window.React});var f=p((F,h)=>{h.exports=window.Loomiere});var u={};R(u,{Default:()=>T,Minimal:()=>k,default:()=>m});var v=d(y(),1),o=d(f(),1);var i=window.React;function e(t,r,a){let{children:s,...n}=r||{};return a!==void 0&&(n.key=a),s===void 0?i.createElement(t,n):Array.isArray(s)?i.createElement(t,n,...s):i.createElement(t,n,s)}var I=i.Fragment;var D={title:"Components/Lib/AppBar",component:o.AppBar,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},m=D,x=()=>e("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8","aria-hidden":"true",children:[e("path",{d:"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"}),e("path",{d:"M14 3v5h5"})]}),B=()=>e("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("circle",{cx:"5",cy:"12",r:"1.8"}),e("circle",{cx:"12",cy:"12",r:"1.8"}),e("circle",{cx:"19",cy:"12",r:"1.8"})]}),T={render:function(){let[r,a]=v.useState("accounting");return e(o.AppBar,{children:[e("strong",{style:{fontSize:"1.5rem",fontWeight:700},children:"Ledgerly"}),e(o.Button,{emphasis:"quiet",children:"My Clients"}),e(o.PickerButton,{label:"Client",value:"Alpha Services"}),e(o.PickerButton,{label:"Entity",value:"North Company"}),e(o.AppBarSpacer,{}),e(o.ToggleGroup,{"data-variant":"segmented","aria-label":"Modules",value:[r],onValueChange:s=>s[0]&&a(s[0]),children:[e(o.Toggle,{value:"accounting",children:"Accounting"}),e(o.Toggle,{value:"tax",children:"Tax"})]}),e(o.Button,{emphasis:"quiet","aria-label":"Documents",children:e(x,{})}),e(o.Separator,{orientation:"vertical"}),e(o.Button,{emphasis:"quiet","aria-label":"More",children:e(B,{})})]})}},k={render:()=>e(o.AppBar,{children:[e("strong",{style:{fontSize:"1.5rem",fontWeight:700},children:"Ledgerly"}),e(o.AppBarSpacer,{}),e(o.Button,{emphasis:"quiet","aria-label":"Documents",children:e(x,{})}),e(o.Separator,{orientation:"vertical"}),e(o.Button,{emphasis:"quiet","aria-label":"More",children:e(B,{})})]})};var c=window.React,w=m||{},q=["Default","Minimal"];function j({id:t}){let r=u[t],a={...w.args||{},...r.args||{}};return(r.render||(n=>c.createElement(w.component,n)))(a,{args:a,id:t,name:t})}var z=q.map(t=>c.createElement("section",{key:t,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(j,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,z));})();
+
+</script>
+</body>
+</html>

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

@@ -44,7 +44,7 @@ export const Default: Story = {
           alignItems: 'center',
           justifyContent: 'center',
           border: '2px dashed var(--sl-border-strong)',
-          borderRadius: '8px',
+          borderRadius: 'var(--sl-radius-surface)',
           background: 'var(--sl-surface-overlay)',
           cursor: 'context-menu'
         }}>

package/dist/design-system/components/ContextMenu/preview.html

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var R=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),S=(o,n)=>{for(var a in n)d(o,a,{get:n[a],enumerable:!0})},v=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!P.call(o,r)&&r!==a&&d(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var p=(o,n,a)=>(a=o!=null?R(f(o)):{},v(n||!o||!o.__esModule?d(a,"default",{value:o,enumerable:!0}):a,o));var I=x((W,C)=>{C.exports=window.React});var b=x((V,h)=>{h.exports=window.Loomiere});var l={};S(l,{Default:()=>N,WithCheckboxes:()=>T,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>L,default:()=>m});var c=p(I(),1),t=p(b(),1);var u=window.React;function e(o,n,a){let{children:s,...r}=n||{};return a!==void 0&&(r.key=a),s===void 0?u.createElement(o,r):Array.isArray(s)?u.createElement(o,r,...s):u.createElement(o,r,s)}var A=u.Fragment;var w={title:"Components/Lib/ContextMenu",component:t.ContextMenu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=w,N={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{children:"Cut"}),e(t.ContextMenu.Item,{children:"Paste"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})},T={render:()=>{let[o,n]=c.useState(!1),[a,s]=c.useState(!0),[r,g]=c.useState(!1);return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for view options"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show toolbar"]}),e(t.ContextMenu.CheckboxItem,{checked:a,onCheckedChange:s,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show sidebar"]}),e(t.ContextMenu.CheckboxItem,{checked:r,onCheckedChange:g,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show footer"]})]})})})]})}},E={render:()=>{let[o,n]=c.useState("light");return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click to change theme"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:e(t.ContextMenu.Group,{children:[e(t.ContextMenu.GroupLabel,{children:"Theme"}),e(t.ContextMenu.RadioGroup,{value:o,onValueChange:n,children:[e(t.ContextMenu.RadioItem,{value:"light",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.ContextMenu.RadioItem,{value:"dark",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.ContextMenu.RadioItem,{value:"system",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})]})})})})]})}},L={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for nested menu"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"New File"}),e(t.ContextMenu.Item,{children:"New Folder"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.SubmenuRoot,{children:[e(t.ContextMenu.SubmenuTrigger,{children:"Share"}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Email"}),e(t.ContextMenu.Item,{children:"Copy Link"}),e(t.ContextMenu.Item,{children:"Social Media"})]})})})]})]})})})]})},_={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{disabled:!0,children:"Cut (disabled)"}),e(t.ContextMenu.Item,{disabled:!0,children:"Paste (disabled)"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})};var i=window.React,M=m||{},F=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function j({id:o}){let n=l[o],a={...M.args||{},...n.args||{}};return(n.render||(r=>i.createElement(M.component,r)))(a,{args:a,id:o,name:o})}var D=F.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
+(()=>{var R=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),S=(o,n)=>{for(var a in n)d(o,a,{get:n[a],enumerable:!0})},v=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!P.call(o,r)&&r!==a&&d(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var C=(o,n,a)=>(a=o!=null?R(f(o)):{},v(n||!o||!o.__esModule?d(a,"default",{value:o,enumerable:!0}):a,o));var I=x((W,p)=>{p.exports=window.React});var b=x((V,h)=>{h.exports=window.Loomiere});var l={};S(l,{Default:()=>N,WithCheckboxes:()=>T,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>L,default:()=>m});var c=C(I(),1),t=C(b(),1);var u=window.React;function e(o,n,a){let{children:s,...r}=n||{};return a!==void 0&&(r.key=a),s===void 0?u.createElement(o,r):Array.isArray(s)?u.createElement(o,r,...s):u.createElement(o,r,s)}var A=u.Fragment;var w={title:"Components/Lib/ContextMenu",component:t.ContextMenu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=w,N={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{children:"Cut"}),e(t.ContextMenu.Item,{children:"Paste"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})},T={render:()=>{let[o,n]=c.useState(!1),[a,s]=c.useState(!0),[r,g]=c.useState(!1);return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for view options"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show toolbar"]}),e(t.ContextMenu.CheckboxItem,{checked:a,onCheckedChange:s,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show sidebar"]}),e(t.ContextMenu.CheckboxItem,{checked:r,onCheckedChange:g,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show footer"]})]})})})]})}},E={render:()=>{let[o,n]=c.useState("light");return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click to change theme"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:e(t.ContextMenu.Group,{children:[e(t.ContextMenu.GroupLabel,{children:"Theme"}),e(t.ContextMenu.RadioGroup,{value:o,onValueChange:n,children:[e(t.ContextMenu.RadioItem,{value:"light",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.ContextMenu.RadioItem,{value:"dark",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.ContextMenu.RadioItem,{value:"system",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})]})})})})]})}},L={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for nested menu"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"New File"}),e(t.ContextMenu.Item,{children:"New Folder"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.SubmenuRoot,{children:[e(t.ContextMenu.SubmenuTrigger,{children:"Share"}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Email"}),e(t.ContextMenu.Item,{children:"Copy Link"}),e(t.ContextMenu.Item,{children:"Social Media"})]})})})]})]})})})]})},_={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{disabled:!0,children:"Cut (disabled)"}),e(t.ContextMenu.Item,{disabled:!0,children:"Paste (disabled)"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})};var i=window.React,M=m||{},F=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function j({id:o}){let n=l[o],a={...M.args||{},...n.args||{}};return(n.render||(r=>i.createElement(M.component,r)))(a,{args:a,id:o,name:o})}var D=F.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
 
 </script>
 </body>

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

@@ -1,6 +1,6 @@
 # DataList
 
-Loomiere component, not part of Base UI. The same rows as the table, in one container with the table's borders, hover, selected and current states. Not a stack of floating cards: the two views should read as one family. variant=cards adds the surface radius and a gap when a queue should read as separate items.
+Loomiere component, not part of Base UI. The same rows as the table, in one container with the table's borders, hover, selected and current states. Not a stack of floating cards: the two views should read as one family. variant=cards adds the surface radius and a gap when a queue should read as separate items. The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier line in rule.color: on the first row, or on each card's top edge.
 
 Use `Loomiere.DataList` 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.
 

package/dist/design-system/components/DataList/preview.html

@@ -468,7 +468,7 @@ Unable to find an `+(n===!1?"accessible ":"")+'element with the role "'+t+'"'+l+
 `)),i+=d+n[l+1]}),i}var H9=U9,_c=xa({...zE},{intercept:(e,t)=>t[0]==="fireEvent"||e.startsWith("find")||e.startsWith("waitFor")});_c.screen=new Proxy(_c.screen,{get(e,t,r){return we.warn(H9`
           You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
           More info: https://storybook.js.org/docs/essentials/interactions
-        `),Reflect.get(e,t,r)}});var{buildQueries:lV,configure:uV,createEvent:cV,fireEvent:dV,findAllByAltText:pV,findAllByDisplayValue:fV,findAllByLabelText:mV,findAllByPlaceholderText:hV,findAllByRole:yV,findAllByTestId:bV,findAllByText:gV,findAllByTitle:vV,findByAltText:EV,findByDisplayValue:_V,findByLabelText:RV,findByPlaceholderText:wV,findByRole:CV,findByTestId:SV,findByText:AV,findByTitle:TV,getAllByAltText:PV,getAllByDisplayValue:OV,getAllByLabelText:qV,getAllByPlaceholderText:xV,getAllByRole:MV,getAllByTestId:NV,getAllByText:jV,getAllByTitle:IV,getByAltText:DV,getByDisplayValue:FV,getByLabelText:LV,getByPlaceholderText:BV,getByRole:kV,getByTestId:$V,getByText:UV,getByTitle:HV,getConfig:VV,getDefaultNormalizer:zV,getElementError:GV,getNodeText:YV,getQueriesForElement:WV,getRoles:KV,getSuggestedQuery:XV,isInaccessible:JV,logDOM:QV,logRoles:ZV,prettyDOM:e8,queries:t8,queryAllByAltText:r8,queryAllByAttribute:n8,queryAllByDisplayValue:o8,queryAllByLabelText:a8,queryAllByPlaceholderText:i8,queryAllByRole:s8,queryAllByTestId:l8,queryAllByText:u8,queryAllByTitle:c8,queryByAltText:d8,queryByAttribute:p8,queryByDisplayValue:f8,queryByLabelText:m8,queryByPlaceholderText:h8,queryByRole:y8,queryByTestId:b8,queryByText:g8,queryByTitle:v8,queryHelpers:E8,screen:_8,waitFor:R8,waitForElementToBeRemoved:w8,within:tn,prettyFormat:C8}=_c,{userEvent:or}=xa({userEvent:$9},{intercept:!0}),{expect:Et}=xa({expect:VE},{getKeys:(e,t)=>{let r=["assert","__methods","__flags","_obj"];if(e.constructor===x){let n=Object.keys(Object.getPrototypeOf(e)).filter(o=>!r.includes(o));return t>2?n:[...n,"not"]}return Object.keys(e)},intercept:e=>e!=="expect"}),V9=({parameters:e})=>{e?.test?.mockReset===!0?y5():e?.test?.clearMocks===!0?h5():e?.test?.restoreMocks!==!1&&b5()},Rc=(e,t=0,r)=>{if(t>5||e==null)return e;if(jE(e))return r&&e.mockName(r),e;if(typeof e=="function"&&"isAction"in e&&e.isAction&&!("implicit"in e&&e.implicit)){let n=f5(e);return r&&n.mockName(r),n}if(Array.isArray(e)){t++;for(let n=0;n<e.length;n++)e[n]=Rc(e[n],t)}if(typeof e=="object"&&e.constructor===Object){t++;for(let[n,o]of Object.entries(e))Object.getOwnPropertyDescriptor(e,n)?.writable&&(e[n]=Rc(o,t,n));return e}return e},z9=({initialArgs:e})=>{Rc(e)},G9=e=>{globalThis.HTMLElement&&e.canvasElement instanceof globalThis.HTMLElement&&(e.canvas=tn(e.canvasElement))};Ie.__STORYBOOK_TEST_LOADERS__=[V9,z9,G9];Ie.__STORYBOOK_TEST_ON_MOCK_CALL__=p5;var Bt=on(Gd(),1);var Wd=on(gs(),1),Jo=on(Gd(),1),st=on(Yd(),1);var Ui=window.React;function re(e,t,r){let{children:n,...o}=t||{};return r!==void 0&&(o.key=r),n===void 0?Ui.createElement(e,o):Array.isArray(n)?Ui.createElement(e,o,...n):Ui.createElement(e,o,n)}var Tz=Ui.Fragment;var Q1=["Joshua Tree","Mojave Preserve","Death Valley","Joshua Tree"],Z1=["Chase","Visitor fee","Camp store","Unassigned"],qt=Array.from({length:40},(e,t)=>({id:`fee-${t+1}`,date:`2026-10-${String(t%27+1).padStart(2,"0")}`,party:Z1[t%Z1.length]??"Chase",memo:t%5===0?"entrance fee":"reservation",park:Q1[t%Q1.length]??"Joshua Tree",amount:t%7===0?"-12.00":(8+t%9+t/100).toFixed(2),status:t%3===0?"posted":"for_review"})),eR=(0,st.defineColumns)([{id:"date",header:"Date",value:e=>e.date,kind:"date",sortable:!0,width:"min"},{id:"party",header:"Party / description",value:e=>e.party,searchable:e=>[e.memo,e.id],rowHeader:!0,sortable:!0},{id:"park",header:"Park",value:e=>e.park,searchable:!0,filter:{kind:"multi-select",label:"Park"}},{id:"amount",header:"Amount",value:e=>e.amount,kind:"money",currency:"USD",negative:"parens",sortable:!0,total:"sum",width:"min"},{id:"status",header:"Status",value:e=>e.status,filter:{kind:"tabs",options:[{value:"",label:"All",all:!0},{value:"for_review",label:"For Review"},{value:"posted",label:"Posted"}]},cell:e=>re(Jo.Badge,{status:e.status==="posted"?"success":"warning",children:e.status==="posted"?"Posted":"For Review"})}]);function tR({rows:e=qt,pageSize:t=10,canSelect:r,groupBy:n,showSort:o,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,activeRowId:d,onRowActivate:m,rowActions:p,getSubRows:h,initialFilters:g,getRowHref:y}){let b=(0,Wd.useMemo)(()=>eR,[]),v=(0,st.useCollection)({rows:e,columns:b,getRowId:C=>C.id,pageSize:t,initialSort:{id:"date",desc:!0},initialFilters:g??{status:"for_review"},canSelect:r,groupBy:n,getSubRows:h});return re("div",{children:[re(st.CollectionToolbar,{collection:v,searchLabel:"Find fee",showSort:o,actions:re(Jo.Button,{emphasis:"standard",children:"Add fee"}),bulkActions:re(Jo.Button,{emphasis:"standard",children:"Post selected"})}),re(st.DataTable,{collection:v,label:"Park fees",onRowActivate:m,getRowHref:y,activeRowId:d,rowActions:p,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u}),t?re(st.CollectionPagination,{page:v.page,pageCount:v.pageCount,pageSize:v.pageSize,total:v.filteredCount,filtered:v.isFiltered,label:"Park fees",onPageChange:v.setPage}):null]})}function Pr({rows:e=qt,extra:t,groupBy:r}){let n=(0,Wd.useMemo)(()=>eR,[]),o=(0,st.useCollection)({rows:e,columns:n,getRowId:a=>a.id,initialSort:{id:"date",desc:!0},initialFilters:{status:"for_review"},canSelect:a=>a.status==="for_review",groupBy:r});return re("div",{children:[re(st.CollectionToolbar,{collection:o,searchLabel:"Find fee",showSort:!0}),re(st.DataList,{collection:o,label:"For Review",onRowActivate:()=>{},renderItemExtra:t?()=>re("span",{"data-subtle":"",children:"Inline review"}):void 0})]})}async function Kd({canvasElement:e}){let t=tn(e),r=t.getByRole("searchbox",{name:"Find fee"});await Et(t.queryByRole("button",{name:"Clear search"})).toBeNull(),r.focus(),await or.keyboard("zzz"),await Et(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters");let n=await t.findByRole("button",{name:"Clear search"});await or.tab(),await Et(n).toHaveFocus(),await or.keyboard("{Enter}"),await Et(r).toHaveValue(""),await Et(r).toHaveFocus(),await Et(t.queryByRole("button",{name:"Clear search"})).toBeNull(),await or.keyboard("chase"),await or.keyboard("{Escape}"),await Et(r).toHaveValue("")}async function rR({canvasElement:e}){let t=tn(e);await Et(await t.findByRole("button",{name:"Clear filters"})).toBeTruthy(),await Et(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters")}var ar=on(Yd(),1);var Y9={title:"Components/Lib/DataList",parameters:{layout:"padded"},tags:["autodocs"]},Xd=Y9,W9={render:()=>re("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[re(tR,{pageSize:5}),re(Pr,{rows:qt.slice(0,8)})]})},K9={render:()=>re(e6,{})};function X9(){let[e,t]=(0,nR.useState)(0);return re("div",{children:[re("output",{"data-testid":"activated",children:e}),re(J9,{onActivate:()=>t(r=>r+1)})]})}function J9({onActivate:e}){let t=(0,ar.defineColumns)([{id:"party",header:"Party",value:n=>n.party,rowHeader:!0}]),r=(0,ar.useCollection)({rows:qt.slice(0,3),columns:t,getRowId:n=>n.id});return re(ar.DataList,{collection:r,label:"For Review",onRowActivate:e,renderItemExtra:()=>re("span",{children:"Plain note"})})}var Q9={render:()=>re(X9,{}),play:async({canvasElement:e})=>{let t=tn(e);await or.click(t.getByText("Plain note")),await Et(t.getByTestId("activated").textContent).toBe("0")}},Z9={render:()=>re(Pr,{rows:qt.slice(0,6)}),play:async({canvasElement:e})=>{let t=tn(e);await or.click(t.getByRole("button",{name:/Sort direction/}))}};function e6(){let e=(0,ar.defineColumns)([{id:"party",header:"Party",value:r=>r.party,rowHeader:!0,searchable:!0},{id:"amount",header:"Amount",value:r=>r.amount,kind:"money",currency:"USD"},{id:"status",header:"Status",value:r=>r.status,filter:{kind:"tabs",options:[{value:"for_review",label:"For Review"}]}}]),t=(0,ar.useCollection)({rows:qt.slice(0,6),columns:e,getRowId:r=>r.id,initialFilters:{status:"for_review"}});return re(ar.DataList,{collection:t,label:"For Review",onRowActivate:()=>{},renderItemExtra:()=>re(Bt.Select.Root,{items:[{value:"fees",label:"Fees"}],defaultValue:"fees",children:[re(Bt.Select.Trigger,{"aria-label":"Account",children:[re(Bt.Select.Value,{}),re(Bt.Select.Icon,{children:re("span",{className:"material-symbols-outlined",children:"expand_more"})})]}),re(Bt.Select.Portal,{children:re(Bt.Select.Positioner,{children:re(Bt.Select.Popup,{children:re(Bt.Select.List,{children:re(Bt.Select.Item,{value:"fees",children:"Fees"})})})})})]})})}var t6={render:()=>re(Pr,{rows:qt.slice(0,8),groupBy:"park"})},r6={render:()=>re(Pr,{rows:[]})},n6={render:()=>re(Pr,{rows:qt.slice(0,1).map(e=>({...e,party:"Posted only",status:"posted"}))}),play:rR},o6={render:()=>re(Pr,{rows:qt.slice(0,8)}),play:Kd},a6={render:()=>re("div",{style:{width:280},children:re(Pr,{rows:qt.slice(0,4)})}),play:Kd};var rn=window.React,oR=Xd||{},i6=["BesideTheTable","ReviewQueue","ExtraDoesNotActivate","Sort"];function s6({id:e}){let t=Jd[e],r={...oR.args||{},...t.args||{}};return(t.render||(o=>rn.createElement(oR.component,o)))(r,{args:r,id:e,name:e})}var l6=i6.map(e=>rn.createElement("section",{key:e,className:"ds-story"},rn.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),rn.createElement("div",{className:"ds-story-body"},rn.createElement(s6,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(rn.createElement(rn.Fragment,null,l6));})();
+        `),Reflect.get(e,t,r)}});var{buildQueries:lV,configure:uV,createEvent:cV,fireEvent:dV,findAllByAltText:pV,findAllByDisplayValue:fV,findAllByLabelText:mV,findAllByPlaceholderText:hV,findAllByRole:yV,findAllByTestId:bV,findAllByText:gV,findAllByTitle:vV,findByAltText:EV,findByDisplayValue:_V,findByLabelText:RV,findByPlaceholderText:wV,findByRole:CV,findByTestId:SV,findByText:AV,findByTitle:TV,getAllByAltText:PV,getAllByDisplayValue:OV,getAllByLabelText:qV,getAllByPlaceholderText:xV,getAllByRole:MV,getAllByTestId:NV,getAllByText:jV,getAllByTitle:IV,getByAltText:DV,getByDisplayValue:FV,getByLabelText:LV,getByPlaceholderText:BV,getByRole:kV,getByTestId:$V,getByText:UV,getByTitle:HV,getConfig:VV,getDefaultNormalizer:zV,getElementError:GV,getNodeText:YV,getQueriesForElement:WV,getRoles:KV,getSuggestedQuery:XV,isInaccessible:JV,logDOM:QV,logRoles:ZV,prettyDOM:e8,queries:t8,queryAllByAltText:r8,queryAllByAttribute:n8,queryAllByDisplayValue:o8,queryAllByLabelText:a8,queryAllByPlaceholderText:i8,queryAllByRole:s8,queryAllByTestId:l8,queryAllByText:u8,queryAllByTitle:c8,queryByAltText:d8,queryByAttribute:p8,queryByDisplayValue:f8,queryByLabelText:m8,queryByPlaceholderText:h8,queryByRole:y8,queryByTestId:b8,queryByText:g8,queryByTitle:v8,queryHelpers:E8,screen:_8,waitFor:R8,waitForElementToBeRemoved:w8,within:tn,prettyFormat:C8}=_c,{userEvent:or}=xa({userEvent:$9},{intercept:!0}),{expect:Et}=xa({expect:VE},{getKeys:(e,t)=>{let r=["assert","__methods","__flags","_obj"];if(e.constructor===x){let n=Object.keys(Object.getPrototypeOf(e)).filter(o=>!r.includes(o));return t>2?n:[...n,"not"]}return Object.keys(e)},intercept:e=>e!=="expect"}),V9=({parameters:e})=>{e?.test?.mockReset===!0?y5():e?.test?.clearMocks===!0?h5():e?.test?.restoreMocks!==!1&&b5()},Rc=(e,t=0,r)=>{if(t>5||e==null)return e;if(jE(e))return r&&e.mockName(r),e;if(typeof e=="function"&&"isAction"in e&&e.isAction&&!("implicit"in e&&e.implicit)){let n=f5(e);return r&&n.mockName(r),n}if(Array.isArray(e)){t++;for(let n=0;n<e.length;n++)e[n]=Rc(e[n],t)}if(typeof e=="object"&&e.constructor===Object){t++;for(let[n,o]of Object.entries(e))Object.getOwnPropertyDescriptor(e,n)?.writable&&(e[n]=Rc(o,t,n));return e}return e},z9=({initialArgs:e})=>{Rc(e)},G9=e=>{globalThis.HTMLElement&&e.canvasElement instanceof globalThis.HTMLElement&&(e.canvas=tn(e.canvasElement))};Ie.__STORYBOOK_TEST_LOADERS__=[V9,z9,G9];Ie.__STORYBOOK_TEST_ON_MOCK_CALL__=p5;var Bt=on(Gd(),1);var Wd=on(gs(),1),Jo=on(Gd(),1),st=on(Yd(),1);var Ui=window.React;function re(e,t,r){let{children:n,...o}=t||{};return r!==void 0&&(o.key=r),n===void 0?Ui.createElement(e,o):Array.isArray(n)?Ui.createElement(e,o,...n):Ui.createElement(e,o,n)}var Tz=Ui.Fragment;var Q1=["Joshua Tree","Mojave Preserve","Death Valley","Joshua Tree"],Z1=["Chase","Visitor fee","Camp store","Unassigned"],qt=Array.from({length:40},(e,t)=>({id:`fee-${t+1}`,date:`2026-10-${String(t%27+1).padStart(2,"0")}`,party:Z1[t%Z1.length]??"Chase",memo:t%5===0?"entrance fee":"reservation",park:Q1[t%Q1.length]??"Joshua Tree",amount:t%7===0?"-12.00":(8+t%9+t/100).toFixed(2),status:t%3===0?"posted":"for_review"})),eR=(0,st.defineColumns)([{id:"date",header:"Date",value:e=>e.date,kind:"date",sortable:!0,width:"min"},{id:"party",header:"Party / description",value:e=>e.party,searchable:e=>[e.memo,e.id],rowHeader:!0,sortable:!0},{id:"park",header:"Park",value:e=>e.park,searchable:!0,filter:{kind:"multi-select",label:"Park"}},{id:"amount",header:"Amount",value:e=>e.amount,kind:"money",currency:"USD",negative:"parens",sortable:!0,total:"sum",width:"min"},{id:"status",header:"Status",value:e=>e.status,filter:{kind:"tabs",options:[{value:"",label:"All",all:!0},{value:"for_review",label:"For Review"},{value:"posted",label:"Posted"}]},cell:e=>re(Jo.Badge,{status:e.status==="posted"?"success":"warning",children:e.status==="posted"?"Posted":"For Review"})}]);function tR({rows:e=qt,pageSize:t=10,canSelect:r,groupBy:n,showSort:o,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,activeRowId:d,onRowActivate:m,rowActions:p,getSubRows:h,initialFilters:g,getRowHref:y,totalStyle:b}){let v=(0,Wd.useMemo)(()=>eR,[]),C=(0,st.useCollection)({rows:e,columns:v,getRowId:S=>S.id,pageSize:t,initialSort:{id:"date",desc:!0},initialFilters:g??{status:"for_review"},canSelect:r,groupBy:n,getSubRows:h});return re("div",{children:[re(st.CollectionToolbar,{collection:C,searchLabel:"Find fee",showSort:o,actions:re(Jo.Button,{emphasis:"standard",children:"Add fee"}),bulkActions:re(Jo.Button,{emphasis:"standard",children:"Post selected"})}),re(st.DataTable,{collection:C,label:"Park fees",onRowActivate:m,getRowHref:y,activeRowId:d,rowActions:p,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,totalStyle:b}),t?re(st.CollectionPagination,{page:C.page,pageCount:C.pageCount,pageSize:C.pageSize,total:C.filteredCount,filtered:C.isFiltered,label:"Park fees",onPageChange:C.setPage}):null]})}function Pr({rows:e=qt,extra:t,groupBy:r}){let n=(0,Wd.useMemo)(()=>eR,[]),o=(0,st.useCollection)({rows:e,columns:n,getRowId:a=>a.id,initialSort:{id:"date",desc:!0},initialFilters:{status:"for_review"},canSelect:a=>a.status==="for_review",groupBy:r});return re("div",{children:[re(st.CollectionToolbar,{collection:o,searchLabel:"Find fee",showSort:!0}),re(st.DataList,{collection:o,label:"For Review",onRowActivate:()=>{},renderItemExtra:t?()=>re("span",{"data-subtle":"",children:"Inline review"}):void 0})]})}async function Kd({canvasElement:e}){let t=tn(e),r=t.getByRole("searchbox",{name:"Find fee"});await Et(t.queryByRole("button",{name:"Clear search"})).toBeNull(),r.focus(),await or.keyboard("zzz"),await Et(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters");let n=await t.findByRole("button",{name:"Clear search"});await or.tab(),await Et(n).toHaveFocus(),await or.keyboard("{Enter}"),await Et(r).toHaveValue(""),await Et(r).toHaveFocus(),await Et(t.queryByRole("button",{name:"Clear search"})).toBeNull(),await or.keyboard("chase"),await or.keyboard("{Escape}"),await Et(r).toHaveValue("")}async function rR({canvasElement:e}){let t=tn(e);await Et(await t.findByRole("button",{name:"Clear filters"})).toBeTruthy(),await Et(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters")}var ar=on(Yd(),1);var Y9={title:"Components/Lib/DataList",parameters:{layout:"padded"},tags:["autodocs"]},Xd=Y9,W9={render:()=>re("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[re(tR,{pageSize:5}),re(Pr,{rows:qt.slice(0,8)})]})},K9={render:()=>re(e6,{})};function X9(){let[e,t]=(0,nR.useState)(0);return re("div",{children:[re("output",{"data-testid":"activated",children:e}),re(J9,{onActivate:()=>t(r=>r+1)})]})}function J9({onActivate:e}){let t=(0,ar.defineColumns)([{id:"party",header:"Party",value:n=>n.party,rowHeader:!0}]),r=(0,ar.useCollection)({rows:qt.slice(0,3),columns:t,getRowId:n=>n.id});return re(ar.DataList,{collection:r,label:"For Review",onRowActivate:e,renderItemExtra:()=>re("span",{children:"Plain note"})})}var Q9={render:()=>re(X9,{}),play:async({canvasElement:e})=>{let t=tn(e);await or.click(t.getByText("Plain note")),await Et(t.getByTestId("activated").textContent).toBe("0")}},Z9={render:()=>re(Pr,{rows:qt.slice(0,6)}),play:async({canvasElement:e})=>{let t=tn(e);await or.click(t.getByRole("button",{name:/Sort direction/}))}};function e6(){let e=(0,ar.defineColumns)([{id:"party",header:"Party",value:r=>r.party,rowHeader:!0,searchable:!0},{id:"amount",header:"Amount",value:r=>r.amount,kind:"money",currency:"USD"},{id:"status",header:"Status",value:r=>r.status,filter:{kind:"tabs",options:[{value:"for_review",label:"For Review"}]}}]),t=(0,ar.useCollection)({rows:qt.slice(0,6),columns:e,getRowId:r=>r.id,initialFilters:{status:"for_review"}});return re(ar.DataList,{collection:t,label:"For Review",onRowActivate:()=>{},renderItemExtra:()=>re(Bt.Select.Root,{items:[{value:"fees",label:"Fees"}],defaultValue:"fees",children:[re(Bt.Select.Trigger,{"aria-label":"Account",children:[re(Bt.Select.Value,{}),re(Bt.Select.Icon,{children:re("span",{className:"material-symbols-outlined",children:"expand_more"})})]}),re(Bt.Select.Portal,{children:re(Bt.Select.Positioner,{children:re(Bt.Select.Popup,{children:re(Bt.Select.List,{children:re(Bt.Select.Item,{value:"fees",children:"Fees"})})})})})]})})}var t6={render:()=>re(Pr,{rows:qt.slice(0,8),groupBy:"park"})},r6={render:()=>re(Pr,{rows:[]})},n6={render:()=>re(Pr,{rows:qt.slice(0,1).map(e=>({...e,party:"Posted only",status:"posted"}))}),play:rR},o6={render:()=>re(Pr,{rows:qt.slice(0,8)}),play:Kd},a6={render:()=>re("div",{style:{width:280},children:re(Pr,{rows:qt.slice(0,4)})}),play:Kd};var rn=window.React,oR=Xd||{},i6=["BesideTheTable","ReviewQueue","ExtraDoesNotActivate","Sort"];function s6({id:e}){let t=Jd[e],r={...oR.args||{},...t.args||{}};return(t.render||(o=>rn.createElement(oR.component,o)))(r,{args:r,id:e,name:e})}var l6=i6.map(e=>rn.createElement("section",{key:e,className:"ds-story"},rn.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),rn.createElement("div",{className:"ds-story-body"},rn.createElement(s6,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(rn.createElement(rn.Fragment,null,l6));})();
 
 </script>
 </body>

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

@@ -38,4 +38,4 @@ export const Default: Story = {
 };
 ```
 
-The preview also shows `Selection`, `Money`, `Grouped`.
+The preview also shows `Selection`, `Money`, `GrandTotal`.