@scattered-light/loomiere-base-ui 0.8.0 → 0.10.0

package/dist/custom/index.d.ts

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

@@ -0,0 +1,56 @@
+# PickerButton
+
+Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+
+Use `Loomiere.PickerButton`, this package's component: it puts the class names on for you (`import { PickerButton } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `PickerButton` | `data-popup-open` |
+| `PickerButtonLabel` |   |
+| `PickerButtonValue` | `data-placeholder` |
+| `PickerButtonIcon` |   |
+
+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 PickerButton stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [entity, setEntity] = React.useState(entities[0]);
+    return (
+      <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <PickerButton label="Client" value="Alpha Services" />
+        <Menu.Root>
+          <Menu.Trigger render={(props) => <PickerButton {...props} label="Entity" value={entity} />} />
+          <Menu.Portal>
+            <Menu.Positioner align="start" sideOffset={6}>
+              <Menu.Popup aria-label="Entity">
+                <Menu.RadioGroup value={entity} onValueChange={(next: string) => setEntity(next)}>
+                  {entities.map((name) => (
+                    <Menu.RadioItem key={name} value={name}>
+                      <Menu.RadioItemIndicator />
+                      {name}
+                    </Menu.RadioItem>
+                  ))}
+                </Menu.RadioGroup>
+              </Menu.Popup>
+            </Menu.Positioner>
+          </Menu.Portal>
+        </Menu.Root>
+      </div>
+    );
+  },
+};
+
+/** A long choice is cut with an ellipsis; the label never is. */
+```
+
+The preview also shows `LongValue`, `Placeholder`, `Disabled`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Actions" height=480 subtitle="Default / LongValue / Placeholder / Disabled" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var S=Object.create;var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),M=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of w(t))!h.call(e,s)&&s!==o&&c(e,s,{get:()=>t[s],enumerable:!(r=v(t,s))||r.enumerable});return e};var p=(e,t,o)=>(o=e!=null?S(P(e)):{},C(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e));var f=m((N,y)=>{y.exports=window.React});var b=m((V,g)=>{g.exports=window.Loomiere});var u={};M(u,{Default:()=>k,Disabled:()=>L,LongValue:()=>A,Placeholder:()=>D,default:()=>d});var R=p(f(),1),n=p(b(),1);var i=window.React;function a(e,t,o){let{children:r,...s}=t||{};return o!==void 0&&(s.key=o),r===void 0?i.createElement(e,s):Array.isArray(r)?i.createElement(e,s,...r):i.createElement(e,s,r)}var H=i.Fragment;var I={title:"Components/Lib/PickerButton",component:n.PickerButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Client",value:"Alpha Services"}},d=I,E=["North Company","South Company","Harbor Holdings LLC"],k={render:function(){let[t,o]=R.useState(E[0]);return a("div",{style:{display:"flex",gap:"10px",alignItems:"center"},children:[a(n.PickerButton,{label:"Client",value:"Alpha Services"}),a(n.Menu.Root,{children:[a(n.Menu.Trigger,{render:r=>a(n.PickerButton,{...r,label:"Entity",value:t})}),a(n.Menu.Portal,{children:a(n.Menu.Positioner,{align:"start",sideOffset:6,children:a(n.Menu.Popup,{"aria-label":"Entity",children:a(n.Menu.RadioGroup,{value:t,onValueChange:r=>o(r),children:E.map(r=>a(n.Menu.RadioItem,{value:r,children:[a(n.Menu.RadioItemIndicator,{}),r]},r))})})})})]})]})}},A={args:{label:"Entity",value:"Harbor Family Office Irrevocable Trust of 2009"}},D={args:{label:"Entity",value:void 0,placeholder:"All Entities"}},L={args:{disabled:!0}};var l=window.React,x=d||{},O=["Default","LongValue","Placeholder","Disabled"];function j({id:e}){let t=u[e],o={...x.args||{},...t.args||{}};return(t.render||(s=>l.createElement(x.component,s)))(o,{args:o,id:e,name:e})}var B=O.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,73 @@
+# SideNav
+
+Loomiere component, not part of Base UI. The column of links down the side of a workspace. Rows are ruled apart with a hairline; the current row (aria-current="page") sits on the raised surface with a rule under it in the working-paper ink; counts are figures; group headings are caps labels. SideNavToggle is a small round button on the column's edge, whose chevron turns with the state. The parent sets the width and must not clip the toggle (overflow: visible), since it hangs over the edge. Tokens: side-nav.* (tokens/component/side-nav.json).
+
+Use `Loomiere.SideNav`, this package's component: it puts the class names on for you (`import { SideNav } 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 |
+|---|---|
+| `SideNav` | `data-collapsed` |
+| `SideNavToggle` |   |
+| `SideNavItem` | `data-current`; `data-disabled` |
+| `SideNavItemText` |   |
+| `SideNavItemLabel` |   |
+| `SideNavItemHint` |   |
+| `SideNavItemCount` | `data-tone`: `quiet` |
+| `SideNavGroupLabel` |   |
+| `SideNavToggleIcon` |   |
+
+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 SideNav stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [collapsed, setCollapsed] = React.useState(false);
+    const [current, setCurrent] = React.useState('dashboard');
+    const go = (id: string) => (event: React.MouseEvent) => {
+      event.preventDefault();
+      setCurrent(id);
+    };
+    return (
+      <div style={{ display: 'flex', height: 520, width: collapsed ? 44 : 240, transition: 'width 150ms' }}>
+        <SideNav aria-label="Entity navigation" collapsed={collapsed} style={{ width: '100%' }}>
+          <SideNavItem current={current === 'dashboard'} onClick={go('dashboard')}>
+            Entity Dashboard
+          </SideNavItem>
+          <SideNavItem current={current === 'open'} count={5} onClick={go('open')}>
+            Open Items
+          </SideNavItem>
+          <SideNavItem current={current === 'review'} count={2} onClick={go('review')}>
+            For Review
+          </SideNavItem>
+          <SideNavGroup label="Books">
+            <SideNavItem current={current === 'accounts'} onClick={go('accounts')}>
+              Financial Accounts
+            </SideNavItem>
+            <SideNavItem current={current === 'chart'} onClick={go('chart')}>
+              Chart of Accounts
+            </SideNavItem>
+          </SideNavGroup>
+          <SideNavGroup label="Coming later">
+            <SideNavItem disabled hint="Not yet available">
+              Invoicing
+            </SideNavItem>
+          </SideNavGroup>
+          <SideNavToggle collapsed={collapsed} onCollapsedChange={setCollapsed} />
+        </SideNav>
+      </div>
+    );
+  },
+};
+
+/** countTone="quiet" for a count that is only information, such as a total. */
+```
+
+The preview also shows `QuietCount`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Navigation" height=240 subtitle="Default / QuietCount" -->
+<!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 C=Object.create;var l=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),k=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},D=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of I(t))!x.call(e,s)&&s!==n&&l(e,s,{get:()=>t[s],enumerable:!(r=E(t,s))||r.enumerable});return e};var S=(e,t,n)=>(n=e!=null?C(R(e)):{},D(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var N=v((L,y)=>{y.exports=window.React});var g=v((Q,f)=>{f.exports=window.Loomiere});var p={};k(p,{Default:()=>F,QuietCount:()=>O,default:()=>u});var m=S(N(),1),a=S(g(),1);var d=window.React;function o(e,t,n){let{children:r,...s}=t||{};return n!==void 0&&(s.key=n),r===void 0?d.createElement(e,s):Array.isArray(r)?d.createElement(e,s,...r):d.createElement(e,s,r)}var T=d.Fragment;var A={title:"Components/Lib/SideNav",component:a.SideNav,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},u=A,F={render:function(){let[t,n]=m.useState(!1),[r,s]=m.useState("dashboard"),c=w=>b=>{b.preventDefault(),s(w)};return o("div",{style:{display:"flex",height:520,width:t?44:240,transition:"width 150ms"},children:o(a.SideNav,{"aria-label":"Entity navigation",collapsed:t,style:{width:"100%"},children:[o(a.SideNavItem,{current:r==="dashboard",onClick:c("dashboard"),children:"Entity Dashboard"}),o(a.SideNavItem,{current:r==="open",count:5,onClick:c("open"),children:"Open Items"}),o(a.SideNavItem,{current:r==="review",count:2,onClick:c("review"),children:"For Review"}),o(a.SideNavGroup,{label:"Books",children:[o(a.SideNavItem,{current:r==="accounts",onClick:c("accounts"),children:"Financial Accounts"}),o(a.SideNavItem,{current:r==="chart",onClick:c("chart"),children:"Chart of Accounts"})]}),o(a.SideNavGroup,{label:"Coming later",children:o(a.SideNavItem,{disabled:!0,hint:"Not yet available",children:"Invoicing"})}),o(a.SideNavToggle,{collapsed:t,onCollapsedChange:n})]})})}},O={render:()=>o("div",{style:{width:240},children:o(a.SideNav,{"aria-label":"Client navigation",children:[o(a.SideNavItem,{current:!0,children:"Client Dashboard"}),o(a.SideNavItem,{count:6,children:"Open Items"}),o(a.SideNavItem,{count:2,countTone:"quiet",children:"All Entities"})]})})};var i=window.React,h=u||{},j=["Default","QuietCount"];function M({id:e}){let t=p[e],n={...h.args||{},...t.args||{}};return(t.render||(s=>i.createElement(h.component,s)))(n,{args:n,id:e,name:e})}var G=j.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(M,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
+
+</script>
+</body>
+</html>

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

@@ -10,8 +10,8 @@ Base UI docs: https://base-ui.com/react/components/toggle-group
 
 | Class | Data attributes it answers to |
 |---|---|
-| `ToggleGroup` |   |
-| `Toggle` |   |
+| `ToggleGroup` | `data-variant`: `segmented` |
+| `Toggle` | `data-disabled`; `data-pressed` |
 
 Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
 

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

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var R=Object.create;var g=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var v=(t,l)=>()=>(l||t((l={exports:{}}).exports,l),l.exports),E=(t,l)=>{for(var a in l)g(t,a,{get:l[a],enumerable:!0})},V=(t,l,a,n)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of B(l))!A.call(t,r)&&r!==a&&g(t,r,{get:()=>l[r],enumerable:!(n=I(l,r))||n.enumerable});return t};var m=(t,l,a)=>(a=t!=null?R(k(t)):{},V(l||!t||!t.__esModule?g(a,"default",{value:t,enumerable:!0}):a,t));var y=v((F,f)=>{f.exports=window.React});var b=v(($,x)=>{x.exports=window.Loomiere});var h={};E(h,{Default:()=>D,Disabled:()=>W,MultipleSelection:()=>j,SingleSelection:()=>P,WithText:()=>H,default:()=>c});var T=m(y(),1),o=m(b(),1);var s=window.React;function e(t,l,a){let{children:n,...r}=l||{};return a!==void 0&&(r.key=a),n===void 0?s.createElement(t,r):Array.isArray(n)?s.createElement(t,r,...n):s.createElement(t,r,n)}var J=s.Fragment;var z={title:"Components/Lib/ToggleGroup",component:o.ToggleGroup,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},c=z,d=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),p=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),u=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),w=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),M=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),S=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),G=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h14M3 12h14M3 16h14"})}),D={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})},P={render:()=>{let[t,l]=T.useState(["left"]);return e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Only one can be selected at a time"}),e(o.ToggleGroup,{multiple:!1,value:t,onValueChange:l,children:[e(o.Toggle,{value:"left","aria-label":"Align left",children:e(w,{})}),e(o.Toggle,{value:"center","aria-label":"Align center",children:e(M,{})}),e(o.Toggle,{value:"right","aria-label":"Align right",children:e(S,{})}),e(o.Toggle,{value:"justify","aria-label":"Align justify",children:e(G,{})})]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:["Selected: ",t[0]||"None"]})]})}},j={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Click multiple buttons - they can all be active at once"}),e(o.ToggleGroup,{multiple:!0,defaultValue:["bold","italic"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})]})},H={render:()=>e(o.ToggleGroup,{defaultValue:["left"],children:[e(o.Toggle,{value:"left",children:[e(w,{}),"Left"]}),e(o.Toggle,{value:"center",children:[e(M,{}),"Center"]}),e(o.Toggle,{value:"right",children:[e(S,{}),"Right"]})]})},W={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic",disabled:!0,"aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})};var i=window.React,C=c||{},L=["Default","SingleSelection","MultipleSelection","WithText"];function N({id:t}){let l=h[t],a={...C.args||{},...l.args||{}};return(l.render||(r=>i.createElement(C.component,r)))(a,{args:a,id:t,name:t})}var O=L.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(N,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,O));})();
+(()=>{var C=Object.create;var g=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var m=(t,l)=>()=>(l||t((l={exports:{}}).exports,l),l.exports),k=(t,l)=>{for(var a in l)g(t,a,{get:l[a],enumerable:!0})},E=(t,l,a,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of V(l))!B.call(t,n)&&n!==a&&g(t,n,{get:()=>l[n],enumerable:!(r=I(l,n))||r.enumerable});return t};var f=(t,l,a)=>(a=t!=null?C(A(t)):{},E(l||!t||!t.__esModule?g(a,"default",{value:t,enumerable:!0}):a,t));var x=m(($,y)=>{y.exports=window.React});var b=m((J,T)=>{T.exports=window.Loomiere});var v={};k(v,{Default:()=>D,Disabled:()=>W,MultipleSelection:()=>j,Segmented:()=>L,SingleSelection:()=>P,WithText:()=>H,default:()=>u});var c=f(x(),1),o=f(b(),1);var s=window.React;function e(t,l,a){let{children:r,...n}=l||{};return a!==void 0&&(n.key=a),r===void 0?s.createElement(t,n):Array.isArray(r)?s.createElement(t,n,...r):s.createElement(t,n,r)}var Z=s.Fragment;var z={title:"Components/Lib/ToggleGroup",component:o.ToggleGroup,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},u=z,d=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),p=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),h=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),w=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),M=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),S=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),G=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h14M3 12h14M3 16h14"})}),D={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(h,{})})]})},P={render:()=>{let[t,l]=c.useState(["left"]);return e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Only one can be selected at a time"}),e(o.ToggleGroup,{multiple:!1,value:t,onValueChange:l,children:[e(o.Toggle,{value:"left","aria-label":"Align left",children:e(w,{})}),e(o.Toggle,{value:"center","aria-label":"Align center",children:e(M,{})}),e(o.Toggle,{value:"right","aria-label":"Align right",children:e(S,{})}),e(o.Toggle,{value:"justify","aria-label":"Align justify",children:e(G,{})})]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:["Selected: ",t[0]||"None"]})]})}},j={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Click multiple buttons - they can all be active at once"}),e(o.ToggleGroup,{multiple:!0,defaultValue:["bold","italic"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(h,{})})]})]})},H={render:()=>e(o.ToggleGroup,{defaultValue:["left"],children:[e(o.Toggle,{value:"left",children:[e(w,{}),"Left"]}),e(o.Toggle,{value:"center",children:[e(M,{}),"Center"]}),e(o.Toggle,{value:"right",children:[e(S,{}),"Right"]})]})},W={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic",disabled:!0,"aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(h,{})})]})},L={render:function(){let[l,a]=c.useState(["accounting"]);return e(o.ToggleGroup,{"data-variant":"segmented","aria-label":"Modules",value:l,onValueChange:r=>r.length&&a(r),children:[e(o.Toggle,{value:"accounting",children:"Accounting"}),e(o.Toggle,{value:"tax",children:"Tax"}),e(o.Toggle,{value:"reports",children:"Reports"})]})}};var i=window.React,R=u||{},N=["Default","SingleSelection","MultipleSelection","WithText"];function O({id:t}){let l=v[t],a={...R.args||{},...l.args||{}};return(l.render||(n=>i.createElement(R.component,n)))(a,{args:a,id:t,name:t})}var U=N.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(O,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,U));})();
 
 </script>
 </body>