@scattered-light/loomiere-base-ui 0.7.1 → 0.8.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 { B as Badge, a as BadgeProps, ao as CURRENCY_SEARCH_THRESHOLD, C as Calendar, b as CalendarProps, c as CurrencyCode, ap as CurrencySelect, D as DatePicker, d as DatePickerProps, e as DatePresets, f as DatePresetsProps, g as DateRange, h as DateValue, i as DescriptionItem, j as DescriptionItemProps, k as DescriptionList, l as DescriptionListProps, E as EditableList, m as EditableListApi, n as EditableListRootProps, o as EmptyState, p as EmptyStateKind, q as EmptyStateProps, aq as KeyOptions, L as ListDetail, r as ListDetailCloseReason, ar as ListDetailDetail, s as ListDetailDetailProps, t as ListDetailLayout, as as ListDetailList, at as ListDetailRoot, u as ListDetailRootProps, v 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, w as MoneyFieldProps, aA as MoneyFieldRoot, x as MoneyFieldRootProps, aB as MoneyFieldSteps, aC as NormalizedPaste, aD as PanelSpec, P as Preset, z as PresetValue, aE as RuntimePanel, S as Sheet, A as SheetProps, aF as Size, aG as SizeInput, F as Splitter, aH as SplitterHandle, G as SplitterHandleProps, aI as SplitterKey, aJ as SplitterPanel, H as SplitterPanelProps, aK as SplitterRoot, I as SplitterRootProps, J as StatFigure, K as StatFigureProps, aL as StoredLayout, aM as StoredPanel, O as addDays, Q as addMonths, aN as affixSide, aO as applyKey, aP as applyStored, aQ as ariaPercents, R as builtinPresets, T as clampDate, aR as createPanels, aS as cssSize, aT as currencyName, aU as currencySymbol, U as daysInMonth, V as defaultPresets, W as defaultWeekStartsOn, X as endOfWeek, aV as formatDay, aW as formatFull, Y as formatMoney, Z as fromMinorUnits, _ as getCurrencyDigits, aX as handleTarget, $ as inclusiveDays, a0 as isValidCurrency, a1 as isoWeek, a2 as last30Days, a3 as last7Days, a4 as lastMonth, a5 as lastWeek, aY as layoutOf, a6 as lengthBlockReason, aZ as measure, a_ as monthCells, a$ as moveFocusDate, a7 as nextMonth, a8 as nextWeek, b0 as normalizePaste, a9 as orderRange, b1 as parseDate, aa as parseDecimalString, b2 as parseSize, b3 as presetInBounds, b4 as resetToDefault, b5 as resizeByDelta, ab as resolvePreset, b6 as roundHalfExpand, b7 as roundingChangesValue, b8 as sameSelection, b9 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-CBAo353T.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 { Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, 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-LJQ3RZDJ.js';
 export { EmptyState } from '../chunk-M7KJASGK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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`.