npm - @scattered-light/loomiere-mojave - Versions diffs - 0.5.3 → 0.7.0 - Mend

@scattered-light/loomiere-mojave 0.5.3 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/dist/exports/AGENTS.md CHANGED Viewed

@@ -2,7 +2,7 @@
 This folder is a Loomiere theme. Load `tokens.css` (every token as a `--sl-` variable, light and dark) and `utilities.css` (text styles, focus ring, brand pairs). Framework adapters sit in `exports/`: `tailwind.css` (Tailwind v4: text styles by tier such as `text-body-base`, concept classes such as `bg-field` and `text-link`, no bare sizes like `text-sm`), `shadcn.css` (shadcn/ui), `mui.js`, `chakra.js`, AG Grid themes, `tokens.dtcg.json`. `tokens.json` lists every token with its path, value, modes and the reason it exists; read a token's `description` before using it.
-Components: `@scattered-light/loomiere-base-ui` (Base UI parts styled by class name; import `@scattered-light/loomiere-base-ui/styles.css` after the theme). `exports/design-system/components/<Name>/README.md` lists each component's classes and an example.
+Components: `@scattered-light/loomiere-base-ui` (Base UI parts styled by class name; import `@scattered-light/loomiere-base-ui/styles.css` after the theme). Collection (`DataTable`, `DataList`, `CollectionToolbar`, `CollectionPagination`) is imported from `@scattered-light/loomiere-base-ui/custom/collection`, and the app installs `@tanstack/react-table`. `EditableList` comes from `@scattered-light/loomiere-base-ui/custom`. Use AG Grid only for spreadsheet work (cell-by-cell editing, ranges, tens of thousands of rows); say why in the code. `exports/design-system/components/<Name>/README.md` lists each component's classes and an example.
 Change the brand only in the brand file and rebuild (`loomiere build`); never edit generated files.
@@ -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`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `Dialog`, `Drawer`, `Field`, `Fieldset`, `Form`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `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`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Splitter`, `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.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`). A plain `.Button`, such as a Popover or Toolbar trigger, is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
-- **Everything else is the bare Base UI part** under its usual name (`Loomiere.Popover.Popup`, `Loomiere.ToggleGroup`). It draws nothing until you give each part its class, which is the component and part names joined: `<Loomiere.Popover.Popup className="PopoverPopup">`, `<Loomiere.Toggle className="Toggle">`. The component READMEs list every class.
+- **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.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 and EditableList 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 comes 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.
@@ -177,18 +177,19 @@ Pick by what the person is doing, not by look:
 | Component | Use it to |
 |---|---|
-| `Button` | Run one action. Set its emphasis by how much the action matters. For a small, frequent action shown as an icon alone (calendar arrows, row actions), use a quiet neutral icon-only Button: `<Loomiere.Button emphasis="quiet" palette="neutral" data-size="xs" aria-label="Next month">` with one icon inside. |
+| `Button` | Run one action. Set its emphasis by how much the action matters. For a small, frequent action shown as an icon alone (the month arrows inside DatePicker, row actions), use a quiet neutral icon-only Button: `<Loomiere.Button emphasis="quiet" palette="neutral" data-size="xs" aria-label="Next month">` with one icon inside. |
 | `Switch` | Turn one setting on or off, taking effect at once. |
 | `Checkbox` | Turn one option on or off inside a form that is submitted later. |
 | `Toggle` | A tool that stays pressed, such as Bold in a toolbar. |
-| `ToggleGroup` | Switch between 2 to 5 short modes or views that apply at once (Single date / Date range, List / Grid). |
+| `ToggleGroup` | Switch between 2 to 5 short modes or views that apply at once (List / Grid). Picking a date or a period is DatePicker, not a toggle. |
 | `Tabs` | Switch between panels of content in the same place. |
 | `Radio` | Choose one of 2 to 6 options in a form, where each option can carry a label and description. |
 | `CheckboxGroup` | Choose any number of a few visible options. |
 | `Select` | Choose one of a fixed list too long to show (about 6 to 15 items). |
 | `Combobox` | Choose one or more from a long list by typing to filter it. |
 | `Autocomplete` | Type free text, with suggestions to speed it up. |
-| `NumberField` | Enter an exact number, with steppers. |
+| `NumberField` | Enter an exact number, with steppers. For an amount of money, use MoneyField. |
+| `MoneyField` | Enter an amount of money in one or more currencies. Use NumberField for plain quantities and percentages. |
 | `Slider` | Set a value in a range where roughly is good enough. |
 | `OTPField` | Enter a one-time code. |
 | `Menu` | Offer commands from a button. Menus run actions; they don't hold a value. |
@@ -202,11 +203,26 @@ Pick by what the person is doing, not by look:
 | `Dialog` | A task that needs full attention before the page goes on. |
 | `AlertDialog` | Confirm a destructive or hard-to-undo action. |
 | `Drawer` | A side task or detail panel that keeps the page in view. |
+| `Splitter` | Let people resize side-by-side or stacked areas, like a sidebar or a documents column. |
+| `ListDetail` | Show the details of one item next to its list, falling back to a drawer or a page on narrow screens. Use Dialog when the detail must block the list. |
 | `Accordion` | Several sections where only some need to be open. |
 | `Collapsible` | One section to show or hide. |
 | `Toast` | Report the result of an action, briefly. |
+| `Badge` | Label a status or a count next to something else. Not clickable; use Button or Toggle for that. |
+| `DatePicker` | Pick a date or a period, with quick selections. Use Input type=date only when you can't load React. Calendar is the grid on its own; DatePresets is the list of quick selections. |
+| `EmptyState` | Show that a list, table or page has nothing in it yet, nothing matches, failed to load, or is all done. Pick the kind; write your own copy. |
+| `DataList` | A list people work through: a review queue, inbox, search results. Default for narrow panes. |
+| `DataTable` | Rows people compare across several columns. Use the plain Table for static tables and reports. |
+| `EditableList` | Repeating form rows people add, edit and remove: line items, allocations. |
+| `CollectionToolbar` | Search, tabs, filters and the selection bar for a DataTable or a DataList. |
+| `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
+| `EmptyState` | Don't use it for a message about something that just happened (use Toast) or a warning above content that still shows (use a notice or an inline alert). |
 | `Progress` | Show how far a task has got. |
 | `Meter` | Show a measured amount within known limits, such as storage used. |
-A list of choices that stays on screen inside a panel, one of them selected (quick picks, saved filters, presets), has no Base UI part. Make each row a `<button aria-pressed>` drawn from the item concept: `--sl-item-padding-block`, `-padding-inline`, `-radius` and `-gap`, `--sl-item-background-hover` and `-color-hover` on hover, `--sl-item-background-selected` and `-color-selected` with the `-selected` text style when chosen. These are the same rows menus and selects use. When the choice is a form value, use Radio instead.
+A date or a period, including the quick selections beside the calendar, is DatePicker. Any other list of choices that stays on screen inside a panel, one of them selected (saved filters, views), has no Base UI part. Make each row a `<button aria-pressed>` drawn from the item concept: `--sl-item-padding-block`, `-padding-inline`, `-radius` and `-gap`, `--sl-item-background-hover` and `-color-hover` on hover, `--sl-item-background-selected` and `-color-selected` with the `-selected` text style when chosen. These are the same rows menus and selects use. When the choice is a form value, use Radio instead.
+An empty state's title says what is empty in plain words ("No invoices yet"). The description says why, or what to do next, in one sentence. The action is a verb ("Create invoice", "Clear filters"). The first action is the main one: bold when the person is creating the first thing, standard everywhere else, and a secondary action quiet. Error and no-access stay straight: no jokes.
+Use AG Grid only for spreadsheet work (cell-by-cell editing, ranges, tens of thousands of rows). A screen that is a list people work through uses DataList or DataTable, and the code should say why if it reaches for the grid.

package/dist/exports/catalog.json CHANGED Viewed

@@ -103,6 +103,8 @@
         "design-system/components/Autocomplete/preview.html",
         "design-system/components/Avatar/README.md",
         "design-system/components/Avatar/preview.html",
+        "design-system/components/Badge/README.md",
+        "design-system/components/Badge/preview.html",
         "design-system/components/Button/README.md",
         "design-system/components/Button/preview.html",
         "design-system/components/Checkbox/README.md",
@@ -111,14 +113,27 @@
         "design-system/components/CheckboxGroup/preview.html",
         "design-system/components/Collapsible/README.md",
         "design-system/components/Collapsible/preview.html",
+        "design-system/components/Collection/README.md",
+        "design-system/components/CollectionPagination/README.md",
+        "design-system/components/CollectionToolbar/README.md",
         "design-system/components/Combobox/README.md",
         "design-system/components/Combobox/preview.html",
         "design-system/components/ContextMenu/README.md",
         "design-system/components/ContextMenu/preview.html",
+        "design-system/components/DataList/README.md",
+        "design-system/components/DataList/preview.html",
+        "design-system/components/DataTable/README.md",
+        "design-system/components/DataTable/preview.html",
+        "design-system/components/DatePicker/README.md",
+        "design-system/components/DatePicker/preview.html",
         "design-system/components/Dialog/README.md",
         "design-system/components/Dialog/preview.html",
         "design-system/components/Drawer/README.md",
         "design-system/components/Drawer/preview.html",
+        "design-system/components/EditableList/README.md",
+        "design-system/components/EditableList/preview.html",
+        "design-system/components/EmptyState/README.md",
+        "design-system/components/EmptyState/preview.html",
         "design-system/components/Field/README.md",
         "design-system/components/Field/preview.html",
         "design-system/components/Fieldset/README.md",
@@ -127,12 +142,16 @@
         "design-system/components/Form/preview.html",
         "design-system/components/Input/README.md",
         "design-system/components/Input/preview.html",
+        "design-system/components/ListDetail/README.md",
+        "design-system/components/ListDetail/preview.html",
         "design-system/components/Menu/README.md",
         "design-system/components/Menu/preview.html",
         "design-system/components/Menubar/README.md",
         "design-system/components/Menubar/preview.html",
         "design-system/components/Meter/README.md",
         "design-system/components/Meter/preview.html",
+        "design-system/components/MoneyField/README.md",
+        "design-system/components/MoneyField/preview.html",
         "design-system/components/NavigationMenu/README.md",
         "design-system/components/NavigationMenu/preview.html",
         "design-system/components/NumberField/README.md",
@@ -155,6 +174,8 @@
         "design-system/components/Separator/preview.html",
         "design-system/components/Slider/README.md",
         "design-system/components/Slider/preview.html",
+        "design-system/components/Splitter/README.md",
+        "design-system/components/Splitter/preview.html",
         "design-system/components/Switch/README.md",
         "design-system/components/Switch/preview.html",
         "design-system/components/Table/README.md",

package/dist/exports/chakra.js CHANGED Viewed

@@ -11,6 +11,8 @@
  * Every palette, plus "accent" and "chrome", works as a colorPalette. Button variants are
  * the brand's emphasis levels (solid = bold, outline = standard, subtle = subtle,
  * ghost = quiet); each keeps its own color unless you pass colorPalette.
+ * Badge uses the same levels (solid = bold, outline = standard, subtle and surface = subtle,
+ * plain = quiet) and does not change on hover.
  * To add your own config on top: createSystem(config, yours).
  */
 import { createSystem, defaultConfig, mergeConfigs } from '@chakra-ui/react';
@@ -350,6 +352,194 @@ const recipes = {
       }
     }
   },
+  badge: {
+    base: {
+      colorPalette: "chrome",
+      display: "inline-flex",
+      alignItems: "center",
+      whiteSpace: "nowrap",
+      bg: "colorPalette.soft",
+      color: "colorPalette.on-soft",
+      borderColor: "colorPalette.soft",
+      borderWidth: "var(--sl-stroke-default)",
+      borderStyle: "solid",
+      borderRadius: "var(--sl-radius-pill)",
+      height: "var(--sl-badge-height-condense)",
+      minH: "var(--sl-badge-height-condense)",
+      minW: "var(--sl-badge-height-condense)",
+      px: "var(--sl-badge-padding-inline-condense)",
+      gap: "var(--sl-badge-gap-condense)",
+      fontFamily: "var(--sl-font-trigger-condense-font-family)",
+      fontSize: "var(--sl-font-trigger-condense-font-size)",
+      fontWeight: "var(--sl-font-trigger-condense-font-weight)",
+      lineHeight: "var(--sl-font-trigger-condense-line-height)",
+      letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)"
+    },
+    variants: {
+      variant: {
+        solid: {
+          colorPalette: "accent",
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          bg: "colorPalette.solid",
+          color: "colorPalette.on-solid",
+          borderColor: "colorPalette.solid",
+          borderWidth: "var(--sl-stroke-default)",
+          borderStyle: "solid",
+          borderRadius: "var(--sl-radius-pill)",
+          height: "var(--sl-badge-height-condense)",
+          minH: "var(--sl-badge-height-condense)",
+          minW: "var(--sl-badge-height-condense)",
+          px: "var(--sl-badge-padding-inline-condense)",
+          gap: "var(--sl-badge-gap-condense)",
+          fontFamily: "var(--sl-font-trigger-condense-font-family)",
+          fontSize: "var(--sl-font-trigger-condense-font-size)",
+          fontWeight: "var(--sl-font-trigger-condense-font-weight)",
+          lineHeight: "var(--sl-font-trigger-condense-line-height)",
+          letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)"
+        },
+        subtle: {
+          colorPalette: "chrome",
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          bg: "colorPalette.soft",
+          color: "colorPalette.on-soft",
+          borderColor: "colorPalette.soft",
+          borderWidth: "var(--sl-stroke-default)",
+          borderStyle: "solid",
+          borderRadius: "var(--sl-radius-pill)",
+          height: "var(--sl-badge-height-condense)",
+          minH: "var(--sl-badge-height-condense)",
+          minW: "var(--sl-badge-height-condense)",
+          px: "var(--sl-badge-padding-inline-condense)",
+          gap: "var(--sl-badge-gap-condense)",
+          fontFamily: "var(--sl-font-trigger-condense-font-family)",
+          fontSize: "var(--sl-font-trigger-condense-font-size)",
+          fontWeight: "var(--sl-font-trigger-condense-font-weight)",
+          lineHeight: "var(--sl-font-trigger-condense-line-height)",
+          letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)"
+        },
+        surface: {
+          colorPalette: "chrome",
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          bg: "colorPalette.soft",
+          color: "colorPalette.on-soft",
+          borderColor: "colorPalette.soft",
+          borderWidth: "var(--sl-stroke-default)",
+          borderStyle: "solid",
+          borderRadius: "var(--sl-radius-pill)",
+          height: "var(--sl-badge-height-condense)",
+          minH: "var(--sl-badge-height-condense)",
+          minW: "var(--sl-badge-height-condense)",
+          px: "var(--sl-badge-padding-inline-condense)",
+          gap: "var(--sl-badge-gap-condense)",
+          fontFamily: "var(--sl-font-trigger-condense-font-family)",
+          fontSize: "var(--sl-font-trigger-condense-font-size)",
+          fontWeight: "var(--sl-font-trigger-condense-font-weight)",
+          lineHeight: "var(--sl-font-trigger-condense-line-height)",
+          letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)"
+        },
+        outline: {
+          colorPalette: "accent",
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          bg: "transparent",
+          color: "colorPalette.fg",
+          borderColor: "colorPalette.border",
+          borderWidth: "var(--sl-stroke-default)",
+          borderStyle: "solid",
+          borderRadius: "var(--sl-radius-pill)",
+          height: "var(--sl-badge-height-condense)",
+          minH: "var(--sl-badge-height-condense)",
+          minW: "var(--sl-badge-height-condense)",
+          px: "var(--sl-badge-padding-inline-condense)",
+          gap: "var(--sl-badge-gap-condense)",
+          fontFamily: "var(--sl-font-trigger-condense-font-family)",
+          fontSize: "var(--sl-font-trigger-condense-font-size)",
+          fontWeight: "var(--sl-font-trigger-condense-font-weight)",
+          lineHeight: "var(--sl-font-trigger-condense-line-height)",
+          letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)"
+        },
+        plain: {
+          colorPalette: "chrome",
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          bg: "transparent",
+          color: "colorPalette.fg",
+          borderColor: "colorPalette.border",
+          borderWidth: "var(--sl-stroke-default)",
+          borderStyle: "solid",
+          borderRadius: "var(--sl-radius-pill)",
+          height: "var(--sl-badge-height-condense)",
+          minH: "var(--sl-badge-height-condense)",
+          minW: "var(--sl-badge-height-condense)",
+          px: "var(--sl-badge-padding-inline-condense)",
+          gap: "var(--sl-badge-gap-condense)",
+          fontFamily: "var(--sl-font-trigger-condense-font-family)",
+          fontSize: "var(--sl-font-trigger-condense-font-size)",
+          fontWeight: "var(--sl-font-trigger-condense-font-weight)",
+          lineHeight: "var(--sl-font-trigger-condense-line-height)",
+          letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)"
+        }
+      },
+      size: {
+        xs: {
+          height: "var(--sl-badge-height-minimize)",
+          minH: "var(--sl-badge-height-minimize)",
+          minW: "var(--sl-badge-height-minimize)",
+          px: "var(--sl-badge-padding-inline-minimize)",
+          gap: "var(--sl-badge-gap-minimize)",
+          fontFamily: "var(--sl-font-trigger-minimize-font-family)",
+          fontSize: "var(--sl-font-trigger-minimize-font-size)",
+          fontWeight: "var(--sl-font-trigger-minimize-font-weight)",
+          lineHeight: "var(--sl-font-trigger-minimize-line-height)",
+          letterSpacing: "var(--sl-font-trigger-minimize-letter-spacing)"
+        },
+        sm: {
+          height: "var(--sl-badge-height-condense)",
+          minH: "var(--sl-badge-height-condense)",
+          minW: "var(--sl-badge-height-condense)",
+          px: "var(--sl-badge-padding-inline-condense)",
+          gap: "var(--sl-badge-gap-condense)",
+          fontFamily: "var(--sl-font-trigger-condense-font-family)",
+          fontSize: "var(--sl-font-trigger-condense-font-size)",
+          fontWeight: "var(--sl-font-trigger-condense-font-weight)",
+          lineHeight: "var(--sl-font-trigger-condense-line-height)",
+          letterSpacing: "var(--sl-font-trigger-condense-letter-spacing)"
+        },
+        md: {
+          height: "var(--sl-badge-height-base)",
+          minH: "var(--sl-badge-height-base)",
+          minW: "var(--sl-badge-height-base)",
+          px: "var(--sl-badge-padding-inline-base)",
+          gap: "var(--sl-badge-gap-base)",
+          fontFamily: "var(--sl-font-trigger-base-font-family)",
+          fontSize: "var(--sl-font-trigger-base-font-size)",
+          fontWeight: "var(--sl-font-trigger-base-font-weight)",
+          lineHeight: "var(--sl-font-trigger-base-line-height)",
+          letterSpacing: "var(--sl-font-trigger-base-letter-spacing)"
+        },
+        lg: {
+          height: "var(--sl-badge-height-base)",
+          minH: "var(--sl-badge-height-base)",
+          minW: "var(--sl-badge-height-base)",
+          px: "var(--sl-badge-padding-inline-base)",
+          gap: "var(--sl-badge-gap-base)",
+          fontFamily: "var(--sl-font-trigger-base-font-family)",
+          fontSize: "var(--sl-font-trigger-base-font-size)",
+          fontWeight: "var(--sl-font-trigger-base-font-weight)",
+          lineHeight: "var(--sl-font-trigger-base-line-height)",
+          letterSpacing: "var(--sl-font-trigger-base-letter-spacing)"
+        }
+      }
+    }
+  },
   input: {
     base: {
       boxSizing: "border-box",
@@ -538,6 +728,149 @@ const recipes = {
 };
 const slotRecipes = {
+  emptyState: {
+    base: {
+      root: {
+        width: "100%",
+        color: "var(--sl-text-primary)",
+        textAlign: "center"
+      },
+      content: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      indicator: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      title: {
+        margin: 0
+      },
+      description: {
+        margin: 0
+      }
+    },
+    variants: {
+      size: {
+        sm: {
+          root: {
+            px: "var(--sl-empty-padding-inline-compact)",
+            py: "var(--sl-empty-padding-block-compact)"
+          },
+          content: {
+            gap: "var(--sl-empty-gap-compact)",
+            flexDirection: "row"
+          },
+          title: {
+            fontFamily: "var(--sl-font-subtitle-condense-font-family)",
+            fontSize: "var(--sl-font-subtitle-condense-font-size)",
+            fontWeight: "var(--sl-font-subtitle-condense-font-weight)",
+            lineHeight: "var(--sl-font-subtitle-condense-line-height)",
+            letterSpacing: "var(--sl-font-subtitle-condense-letter-spacing)",
+            textStyle: null,
+            color: "var(--sl-text-primary)"
+          },
+          description: {
+            fontFamily: "var(--sl-font-body-condense-font-family)",
+            fontSize: "var(--sl-font-body-condense-font-size)",
+            fontWeight: "var(--sl-font-body-condense-font-weight)",
+            lineHeight: "var(--sl-font-body-condense-line-height)",
+            letterSpacing: "var(--sl-font-body-condense-letter-spacing)",
+            textStyle: null,
+            color: "var(--sl-text-secondary)",
+            maxWidth: "var(--sl-empty-description-max-width)"
+          },
+          indicator: {
+            width: "auto",
+            height: "auto",
+            background: "transparent",
+            color: "var(--sl-scope-chrome-on-soft)",
+            borderRadius: 0,
+            fontSize: "var(--sl-icon-size-condense)",
+            textStyle: null
+          }
+        },
+        md: {
+          root: {
+            px: "var(--sl-empty-padding-inline-standard)",
+            py: "var(--sl-empty-padding-block-standard)"
+          },
+          content: {
+            gap: "var(--sl-empty-gap-standard)",
+            flexDirection: "column"
+          },
+          title: {
+            fontFamily: "var(--sl-font-title-condense-font-family)",
+            fontSize: "var(--sl-font-title-condense-font-size)",
+            fontWeight: "var(--sl-font-title-condense-font-weight)",
+            lineHeight: "var(--sl-font-title-condense-line-height)",
+            letterSpacing: "var(--sl-font-title-condense-letter-spacing)",
+            textStyle: null,
+            color: "var(--sl-text-primary)"
+          },
+          description: {
+            fontFamily: "var(--sl-font-body-base-font-family)",
+            fontSize: "var(--sl-font-body-base-font-size)",
+            fontWeight: "var(--sl-font-body-base-font-weight)",
+            lineHeight: "var(--sl-font-body-base-line-height)",
+            letterSpacing: "var(--sl-font-body-base-letter-spacing)",
+            textStyle: null,
+            color: "var(--sl-text-secondary)",
+            maxWidth: "var(--sl-empty-description-max-width)"
+          },
+          indicator: {
+            width: "var(--sl-empty-media-size-standard)",
+            height: "var(--sl-empty-media-size-standard)",
+            background: "var(--sl-scope-chrome-soft)",
+            color: "var(--sl-scope-chrome-on-soft)",
+            borderRadius: "var(--sl-radius-pill)",
+            fontSize: "var(--sl-icon-size-magnify)",
+            textStyle: null
+          }
+        },
+        lg: {
+          root: {
+            px: "var(--sl-empty-padding-inline-spacious)",
+            py: "var(--sl-empty-padding-block-spacious)"
+          },
+          content: {
+            gap: "var(--sl-empty-gap-spacious)",
+            flexDirection: "column"
+          },
+          title: {
+            fontFamily: "var(--sl-font-title-magnify-font-family)",
+            fontSize: "var(--sl-font-title-magnify-font-size)",
+            fontWeight: "var(--sl-font-title-magnify-font-weight)",
+            lineHeight: "var(--sl-font-title-magnify-line-height)",
+            letterSpacing: "var(--sl-font-title-magnify-letter-spacing)",
+            textStyle: null,
+            color: "var(--sl-text-primary)"
+          },
+          description: {
+            fontFamily: "var(--sl-font-body-base-font-family)",
+            fontSize: "var(--sl-font-body-base-font-size)",
+            fontWeight: "var(--sl-font-body-base-font-weight)",
+            lineHeight: "var(--sl-font-body-base-line-height)",
+            letterSpacing: "var(--sl-font-body-base-letter-spacing)",
+            textStyle: null,
+            color: "var(--sl-text-secondary)",
+            maxWidth: "var(--sl-empty-description-max-width)"
+          },
+          indicator: {
+            width: "var(--sl-empty-media-size-spacious)",
+            height: "var(--sl-empty-media-size-spacious)",
+            background: "var(--sl-scope-chrome-soft)",
+            color: "var(--sl-scope-chrome-on-soft)",
+            borderRadius: "var(--sl-radius-pill)",
+            fontSize: "var(--sl-icon-size-maximize)",
+            textStyle: null
+          }
+        }
+      }
+    }
+  },
   field: {
     base: {
       root: {

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

@@ -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`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `Dialog`, `Drawer`, `Field`, `Fieldset`, `Form`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `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`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Splitter`, `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.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`). A plain `.Button`, such as a Popover or Toolbar trigger, is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
-- **Everything else is the bare Base UI part** under its usual name (`Loomiere.Popover.Popup`, `Loomiere.ToggleGroup`). It draws nothing until you give each part its class, which is the component and part names joined: `<Loomiere.Popover.Popup className="PopoverPopup">`, `<Loomiere.Toggle className="Toggle">`. The component READMEs list every class.
+- **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.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 and EditableList 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 comes 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.
@@ -169,18 +169,19 @@ Pick by what the person is doing, not by look:
 | Component | Use it to |
 |---|---|
-| `Button` | Run one action. Set its emphasis by how much the action matters. For a small, frequent action shown as an icon alone (calendar arrows, row actions), use a quiet neutral icon-only Button: `<Loomiere.Button emphasis="quiet" palette="neutral" data-size="xs" aria-label="Next month">` with one icon inside. |
+| `Button` | Run one action. Set its emphasis by how much the action matters. For a small, frequent action shown as an icon alone (the month arrows inside DatePicker, row actions), use a quiet neutral icon-only Button: `<Loomiere.Button emphasis="quiet" palette="neutral" data-size="xs" aria-label="Next month">` with one icon inside. |
 | `Switch` | Turn one setting on or off, taking effect at once. |
 | `Checkbox` | Turn one option on or off inside a form that is submitted later. |
 | `Toggle` | A tool that stays pressed, such as Bold in a toolbar. |
-| `ToggleGroup` | Switch between 2 to 5 short modes or views that apply at once (Single date / Date range, List / Grid). |
+| `ToggleGroup` | Switch between 2 to 5 short modes or views that apply at once (List / Grid). Picking a date or a period is DatePicker, not a toggle. |
 | `Tabs` | Switch between panels of content in the same place. |
 | `Radio` | Choose one of 2 to 6 options in a form, where each option can carry a label and description. |
 | `CheckboxGroup` | Choose any number of a few visible options. |
 | `Select` | Choose one of a fixed list too long to show (about 6 to 15 items). |
 | `Combobox` | Choose one or more from a long list by typing to filter it. |
 | `Autocomplete` | Type free text, with suggestions to speed it up. |
-| `NumberField` | Enter an exact number, with steppers. |
+| `NumberField` | Enter an exact number, with steppers. For an amount of money, use MoneyField. |
+| `MoneyField` | Enter an amount of money in one or more currencies. Use NumberField for plain quantities and percentages. |
 | `Slider` | Set a value in a range where roughly is good enough. |
 | `OTPField` | Enter a one-time code. |
 | `Menu` | Offer commands from a button. Menus run actions; they don't hold a value. |
@@ -194,11 +195,26 @@ Pick by what the person is doing, not by look:
 | `Dialog` | A task that needs full attention before the page goes on. |
 | `AlertDialog` | Confirm a destructive or hard-to-undo action. |
 | `Drawer` | A side task or detail panel that keeps the page in view. |
+| `Splitter` | Let people resize side-by-side or stacked areas, like a sidebar or a documents column. |
+| `ListDetail` | Show the details of one item next to its list, falling back to a drawer or a page on narrow screens. Use Dialog when the detail must block the list. |
 | `Accordion` | Several sections where only some need to be open. |
 | `Collapsible` | One section to show or hide. |
 | `Toast` | Report the result of an action, briefly. |
+| `Badge` | Label a status or a count next to something else. Not clickable; use Button or Toggle for that. |
+| `DatePicker` | Pick a date or a period, with quick selections. Use Input type=date only when you can't load React. Calendar is the grid on its own; DatePresets is the list of quick selections. |
+| `EmptyState` | Show that a list, table or page has nothing in it yet, nothing matches, failed to load, or is all done. Pick the kind; write your own copy. |
+| `DataList` | A list people work through: a review queue, inbox, search results. Default for narrow panes. |
+| `DataTable` | Rows people compare across several columns. Use the plain Table for static tables and reports. |
+| `EditableList` | Repeating form rows people add, edit and remove: line items, allocations. |
+| `CollectionToolbar` | Search, tabs, filters and the selection bar for a DataTable or a DataList. |
+| `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
+| `EmptyState` | Don't use it for a message about something that just happened (use Toast) or a warning above content that still shows (use a notice or an inline alert). |
 | `Progress` | Show how far a task has got. |
 | `Meter` | Show a measured amount within known limits, such as storage used. |
-A list of choices that stays on screen inside a panel, one of them selected (quick picks, saved filters, presets), has no Base UI part. Make each row a `<button aria-pressed>` drawn from the item concept: `--sl-item-padding-block`, `-padding-inline`, `-radius` and `-gap`, `--sl-item-background-hover` and `-color-hover` on hover, `--sl-item-background-selected` and `-color-selected` with the `-selected` text style when chosen. These are the same rows menus and selects use. When the choice is a form value, use Radio instead.
+A date or a period, including the quick selections beside the calendar, is DatePicker. Any other list of choices that stays on screen inside a panel, one of them selected (saved filters, views), has no Base UI part. Make each row a `<button aria-pressed>` drawn from the item concept: `--sl-item-padding-block`, `-padding-inline`, `-radius` and `-gap`, `--sl-item-background-hover` and `-color-hover` on hover, `--sl-item-background-selected` and `-color-selected` with the `-selected` text style when chosen. These are the same rows menus and selects use. When the choice is a form value, use Radio instead.
+An empty state's title says what is empty in plain words ("No invoices yet"). The description says why, or what to do next, in one sentence. The action is a verb ("Create invoice", "Clear filters"). The first action is the main one: bold when the person is creating the first thing, standard everywhere else, and a secondary action quiet. Error and no-access stay straight: no jokes.
+Use AG Grid only for spreadsheet work (cell-by-cell editing, ranges, tens of thousands of rows). A screen that is a list people work through uses DataList or DataTable, and the code should say why if it reaches for the grid.