@scattered-light/loomiere-base-ui 0.7.0 → 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/Collection/README.md

@@ -1,6 +1,6 @@
 # Collection
 
-The Base UI Collection styled by the theme. DataTable, DataList, the toolbar and the pagination, in one place so the two views share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes. Each section is its own file so the design system can name the part. This file brings them in. The selection bar replaces the trailing controls (filters, sort, clear, actions) and leaves the tabs and the search where they are, so selecting rows does not grow the toolbar.
+The Base UI Collection styled by the theme. DataTable, DataList, the toolbar and the pagination, in one place so the two views share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes. Each section is its own file so the design system can name the part. This file brings them in. The selection bar replaces the trailing controls (filters, sort, actions) and leaves the tabs and the search where they are, so selecting rows does not grow the toolbar.
 
 Use `Loomiere.Collection` (`import { Collection } from '@base-ui/react/collection'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 

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

@@ -1,6 +1,6 @@
 # CollectionToolbar
 
-Loomiere component, not part of Base UI. The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps even when the page is wide. Search takes the full width first. Filters wrap under it. A container query cannot read the width token, so the component also sets data-narrow.
+Loomiere component, not part of Base UI. The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps even when the page is wide. Search grows to fill the row beside the trailing controls, and wraps to its own line before it shrinks under collection.search-min-width. Under the narrow width it takes the full row and filters wrap under it. A container query cannot read the width token, so the component also sets data-narrow. The search icon and the clear button sit inside the field. The browser's own search cancel is hidden by the reset, so the clear button is the only one, in every browser.
 
 Use `Loomiere.CollectionToolbar` 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.
 
@@ -12,11 +12,16 @@ Not a Base UI part, so there is no base-ui.com page for it.
 |---|---|
 | `CollectionToolbar` | `data-narrow` |
 | `CollectionToolbarMain` |   |
-| `CollectionToolbarTrailing` |   |
 | `CollectionSelectionBar` |   |
 | `CollectionSort` |   |
 | `CollectionSearch` |   |
+| `CollectionSearchField` | `data-filled` |
 | `Input` |   |
+| `CollectionSearchIcon` |   |
+| `CollectionSearchClear` |   |
+| `CollectionToolbarTrailing` |   |
+| `SelectTrigger` |   |
+| `ComboboxInputWrapper` |   |
 | `CollectionToolbarActions` |   |
 | `CollectionView` | `data-narrow` |
 | `CollectionCount` |   |

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.