@scattered-light/loomiere-mojave 0.8.0 → 0.9.0

package/dist/exports/AGENTS.md

@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ### Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Slider`, `Splitter`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Slider`, `Splitter`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 
@@ -166,8 +166,8 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
-- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure and DescriptionList are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure and DescriptionList (with `Loomiere.DescriptionItem`) come from the package root or `./custom`.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`, `Loomiere.AppBar`, `Loomiere.PickerButton`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
+- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure, DescriptionList, AppBar and PickerButton are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure, DescriptionList (with `Loomiere.DescriptionItem`), AppBar (with `Loomiere.AppBarSpacer`) and PickerButton come from the package root or `./custom`.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
 

package/dist/exports/catalog.json

@@ -99,6 +99,8 @@
         "design-system/components/Accordion/preview.html",
         "design-system/components/AlertDialog/README.md",
         "design-system/components/AlertDialog/preview.html",
+        "design-system/components/AppBar/README.md",
+        "design-system/components/AppBar/preview.html",
         "design-system/components/Autocomplete/README.md",
         "design-system/components/Autocomplete/preview.html",
         "design-system/components/Avatar/README.md",
@@ -160,6 +162,8 @@
         "design-system/components/NumberField/preview.html",
         "design-system/components/OTPField/README.md",
         "design-system/components/OTPField/preview.html",
+        "design-system/components/PickerButton/README.md",
+        "design-system/components/PickerButton/preview.html",
         "design-system/components/Popover/README.md",
         "design-system/components/Popover/preview.html",
         "design-system/components/PreviewCard/README.md",

package/dist/exports/design-system/README.md

@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ## Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Slider`, `Splitter`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Slider`, `Splitter`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 
@@ -158,8 +158,8 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
-- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure and DescriptionList are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure and DescriptionList (with `Loomiere.DescriptionItem`) come from the package root or `./custom`.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`, `Loomiere.AppBar`, `Loomiere.PickerButton`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
+- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure, DescriptionList, AppBar and PickerButton are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure, DescriptionList (with `Loomiere.DescriptionItem`), AppBar (with `Loomiere.AppBarSpacer`) and PickerButton come from the package root or `./custom`.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
 

package/dist/exports/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/exports/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/exports/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/exports/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/exports/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/exports/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>