@scattered-light/loomiere-mojave 0.6.0 → 0.7.1

package/dist/exports/AGENTS.md

@@ -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.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.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.
-- **Table is plain HTML**, not a Base UI part, so it has no wrapper. Use the classes in its stylesheet.
+- **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

@@ -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

@@ -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

@@ -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.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.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.
-- **Table is plain HTML**, not a Base UI part, so it has no wrapper. Use the classes in its stylesheet.
+- **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.
 

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

@@ -0,0 +1,35 @@
+# Badge
+
+Loomiere component, not part of Base UI. A status or count label. Not a Base UI part, and not interactive: no hover or focus. Colors are the emphasis levels (--sl-e-bg, --sl-e-fg, --sl-e-border), so data-emphasis, data-status and data-color all recolor it. The default level is subtle, from DEFAULT_LEVELS. The shape is radius.pill. Sizes are badge.* (tokens/component/badge.json). Text is the trigger style of the same tier (trigger-minimize, trigger-condense, trigger-base): medium weight, and those three tiers already exist. subtitle is bold, which would shout, and label only exists at base. Icons use icon-size of that same tier (a badge icon is a mark beside the label, not a control that fills the line the way a Button icon does). Min width equals the height on every badge, so a single digit is a circle and a wider label is unchanged. Padding stays, so "12" does not touch the pill edges.
+
+Use `Loomiere.Badge`, this package's component: it puts the class names on for you (`import { Badge } 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 |
+|---|---|
+| `Badge` | `data-size`: `minimize`, `base`; `data-dot` |
+
+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 Badge stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <div style={row}>
+      <Badge status="info">Info</Badge>
+      <Badge status="success">Success</Badge>
+      <Badge status="warning">Warning</Badge>
+      <Badge status="error">Error</Badge>
+      <Badge>3</Badge>
+    </div>
+  ),
+};
+```
+
+The preview also shows `Emphasis`, `Statuses`, `Sizes`.