@scattered-light/loomiere-mojave 0.1.0 → 0.2.0

package/README.md

@@ -9,7 +9,12 @@ import '@scattered-light/loomiere-mojave/tokens.css';
 import '@scattered-light/loomiere-mojave/utilities.css';
 ```
 
-It ships everything `loomiere build` writes: `tokens.css`, `utilities.css`, `tokens` (JS), `tokens.json`, `pairs.json`, and `exports/*` for Tailwind, MUI, Chakra, Figma and DTCG. AG Grid themes have short paths:
+It ships everything `loomiere build` writes: `tokens.css`, `utilities.css`, `tokens` (JS), `tokens.json`, `pairs.json`, and `exports/*` for Tailwind, shadcn/ui, MUI, Chakra, Figma, DTCG, a Claude Design System (`exports/design-system/`) and `AGENTS.md`. Tailwind, shadcn/ui and AG Grid have short paths:
+
+```css
+@import "tailwindcss";
+@import "@scattered-light/loomiere-mojave/tailwind.css";   /* or shadcn.css for shadcn/ui */
+```
 
 ```ts
 import { withBrand } from '@scattered-light/loomiere-mojave/ag-grid/v36';

package/dist/exports/AGENTS.md

@@ -0,0 +1,150 @@
+# Mojave theme: guide for agents
+
+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-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.
+
+Change the brand only in the brand file and rebuild (`loomiere build`); never edit generated files.
+
+Mojave: warm desert neutrals with a violet primary and ember accent.
+
+Every value in this system is a CSS variable with the `--sl-` prefix. Reach for the semantic tokens (surfaces, text, borders, fills, emphasis); use a palette step only when no semantic token says what you mean. Never paste a hex value: the variables carry light and dark, high contrast and color vision modes, and a palette or role change in the brand reaches everything that uses them.
+
+### Color
+
+The **chrome** role is the neutral (stone) palette: surfaces, text, borders and quiet controls. The **accent** role is the primary (mirage) palette: links, focus and the loudest actions. Status colors (success, warning, error, info) mean only their status; pair each with a word or an icon, never color alone.
+
+#### Surfaces and text
+
+| Token | Use |
+|---|---|
+| `--sl-surface-canvas` | The page itself. Paper in light mode, the darkest neutral in dark mode. |
+| `--sl-surface-raised` | Cards and panels one level above the canvas. |
+| `--sl-surface-overlay` | Popups, menus and code blocks that sit above raised surfaces. |
+| `--sl-surface-modal` | Dialogs and drawers. Paper in light mode; in dark mode one step lighter than the page, so a modal lifts off the dimmed page under it. |
+| `--sl-surface-tray` | The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA. |
+| `--sl-surface-inverse` | Dark-on-light flip for small floating things such as tooltips. Inside a brand pair it becomes the pair's text color. |
+| `--sl-text-primary` | Body text and headings. The highest-contrast neutral. |
+| `--sl-text-secondary` | Supporting text such as descriptions and helper copy. Over 7:1 on every surface, and darker still under prefers-contrast: more. |
+| `--sl-text-tertiary` | Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface. |
+| `--sl-text-disabled` | Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI. |
+| `--sl-text-accent` | Accent text such as active tabs. One step darker than the interactive color so it stays AA as text. |
+| `--sl-text-on-primary` | Text on the accent fill: that step's own on-color, so it reads on any accent the brand picks. |
+| `--sl-text-on-tint` | Text on an accent wash (interactive.tint*). Stays in the accent family. |
+| `--sl-text-on-inverse-surface` | Text on surface.inverse (tooltips): the on-color of the inverse step, so it passes AA in both themes. |
+
+#### Borders, fills and interaction
+
+| Token | Use |
+|---|---|
+| `--sl-border-subtle` | Hairlines inside a surface (table rows, list separators) that should barely register. |
+| `--sl-border-default` | Everyday dividers and control outlines. Darkens under prefers-contrast: more. |
+| `--sl-border-strong` | Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. |
+| `--sl-border-control` | Edge of a small control (checkbox, radio, switch) that must be found before it is filled. |
+| `--sl-border-control-hover` | Control edge under the pointer: one clear step darker than border.control. |
+| `--sl-border-accent` | Borders that signal selection or the active item. |
+| `--sl-fill-subtle` | Lightest fill: hovered rows, chips, empty tracks. |
+| `--sl-fill-default` | Standard fill: slider and switch tracks, pressed rows. |
+| `--sl-fill-strong` | Heaviest fill: scroll thumbs, slider marks, hovered tracks. |
+| `--sl-fill-inverse` | A small solid chip in the chrome color that flips with the theme: dark on light pages, light on dark ones. Keyboard keys use it. |
+| `--sl-interactive-default` | Primary accent for buttons, links and selected states. Step 600 is 6.1:1 on paper; step 400 is 5.6:1 on the dark canvas. |
+| `--sl-interactive-hover` | Hover state of the main accent. One step away from default in the direction of more contrast. |
+| `--sl-interactive-active` | Pressed state of the main accent. Darker than hover so the press is felt. |
+| `--sl-interactive-tint` | Faint accent wash behind a ghost or outline control on hover, or a selected row. |
+| `--sl-interactive-tint-hover` | Accent wash for a highlighted menu item or a pressed toggle. |
+| `--sl-interactive-tint-active` | Accent wash for a selected or pressed item: one step past tint-hover. |
+| `--sl-focus-ring` | Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". |
+
+#### Status
+
+| Token | Use |
+|---|---|
+| `--sl-status-success` | Confirmations and completed states. |
+| `--sl-status-warning` | Warnings, and the required-field marker. |
+| `--sl-status-error` | Errors and destructive actions. |
+| `--sl-status-info` | Neutral notices and help. |
+| `--sl-status-error-dark` | Error color for text or icons that need more contrast than the base color. |
+| `--sl-status-error-light` | Error tint for backgrounds behind error messages. |
+
+Each status has `-dark` (text and icons that need more contrast) and `-light` (the tint behind a message) variants.
+
+#### Palettes
+
+Palettes: `neutral` (stone), `primary` (mirage), `secondary` (ember), `tertiary` (dune), `quaternary` (silhouette), `success`, `warning`, `error`, `info`, `data`. Steps run from 50 (lightest) to the darkest step, and each step is placed by its contrast against paper, so a step number means the same contrast in every palette: text on paper needs 500 or darker (4.5:1). Every step has an on-color, `--sl-color-<palette>-on-<step>`, for text or icons placed on it.
+
+The `data` palette (`--sl-color-data-<n>`) is for charts only: series colors, never UI.
+
+#### Emphasis
+
+Controls come in four levels of loudness. Pick the level by how much the action matters, not by color; the brand decides what each level looks like.
+
+| Level | Looks like | Use for |
+|---|---|---|
+| `bold` | solid in accent | The one main action in a view. |
+| `standard` | outline in accent | Secondary actions beside a bold one. |
+| `subtle` | soft in chrome | Frequent, low-stakes actions such as toolbar buttons. |
+| `quiet` | outline in chrome | Actions that should stay out of the way until needed. |
+
+Set it with `data-emphasis="bold|standard|subtle|quiet"` on a Button or any element styled from `--sl-emphasis-<level>-bg|fg|border` (with `-hover` and `-active`). On Button, `data-variant` is an alias: `solid` = bold, `outline` = standard, `ghost` = quiet.
+
+#### Color scopes
+
+`data-color="<palette>"` on any element repaints everything inside it in that palette (`primary`, `secondary`, `error`, `accent`, `chrome`...): a destructive button is `<Button data-emphasis="bold" data-color="error">`.
+
+#### Brand pairs
+
+A pair is a background with its own text and accent, checked to meet AA. Put `class="sl-pair-<name>"` on a band, card or callout and everything inside (text, links, buttons, focus) takes the pair's colors.
+
+| Pair | Use |
+|---|---|
+| `.sl-pair-ember-dune` | warm callouts and toasts. |
+| `.sl-pair-mirage-deep` | a dark brand band. |
+| `.sl-pair-stone-soft` | a quiet inset panel that flips in dark mode. |
+
+### Typography
+
+Families: display 'Funnel Display', sans-serif, body 'Barlow Semi Condensed', sans-serif, mono 'Roboto Mono', monospace.
+
+All text uses one whole text style, never a size or weight on its own: `class="text-style-<name>"`, or the `--sl-font-<name>-*` variables (font-family, font-size, font-weight, line-height, letter-spacing) together. Styles come in tiers named for why the text is that size:
+
+- **minimize**: the smallest functional text: captions, fine print, dense metadata. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
+- **condense**: compact UI: small controls, table cells, secondary labels. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
+- **base**: the default UI and body text. Variants: `selected`, `label`, `link`, `subtitle`, `trigger`.
+- **magnify**: emphasized body text: lead paragraphs, larger controls. Variants: `trigger`.
+- **maximize**: display text for headings and hero copy, in steps xs to 4xl. Variants: `2xl`, `3xl`, `4xl`, `lg`, `md`, `sm`, `xl`, `xs`.
+- **code**: code, in the mono family.
+
+Inside a tier, `-trigger` is for buttons and triggers, `-selected` for the current tab, toggle or nav item, `-link` for links, `-subtitle` for subheads and `-label` for form labels. Sizes below the base are fixed; the base and up grow with the viewport.
+
+### Space, shape and depth
+
+Space is a 4px grid: `--sl-space-<n>` is n × 4px (`space-4` = 16px). Use the steps; never a number in between.
+
+Corners are chosen by what a thing is, not by size:
+
+| Token | Use |
+|---|---|
+| `--sl-radius-control` | Inputs, buttons and other controls you click or type in. |
+| `--sl-radius-item` | Rows inside menus and lists, so highlighted items keep a soft edge inside the popup. |
+| `--sl-radius-surface` | Cards, popovers and panels. |
+| `--sl-radius-chrome` | App chrome such as toolbars and menubars. |
+| `--sl-radius-modal` | Dialogs get the largest radius so they read as a separate layer. |
+| `--sl-radius-pill` | Fully rounded ends for pills, badges and switches. |
+| `--sl-radius-minimal` | Square corners for things that tile edge to edge. |
+
+Depth: `--sl-elevation-xs` to `-2xl`, lowest first. Popups, menus and dialogs already carry theirs. Borders: `--sl-stroke-default` everywhere, `-emphasis` for selected or focused edges.
+
+### Focus and states
+
+Keyboard focus is one ring, `--sl-focus-outline` with `--sl-focus-outline-offset`, plus a soft halo in `--sl-focus-halo-color`. Never remove it; the `.focus-ring` utility applies it. Hover moves one step toward more contrast, pressed one more. Disabled controls use `--sl-text-disabled` and `--sl-interactive-disabled`.
+
+### Modes
+
+Light and dark: `data-theme="light|dark"` on the root, or the system setting when neither is set. High contrast follows `prefers-contrast: more`. Color vision themes: `data-vision="deuteranopia|protanopia|tritanopia|achromatopsia"`, each designed from this brand. Never hand-pick dark colors; the tokens already flip.
+
+### 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`, `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`). In previews and designs they are `window.Loomiere.<Name>`; Button, Input, Field, Fieldset, Form and NavigationMenu are wrappers that put their classes on themselves.
+
+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.
+

package/dist/exports/catalog.json

@@ -26,7 +26,16 @@
       "files": [
         "tailwind.css"
       ],
-      "for": "Tailwind v4 projects: import after tailwindcss and tokens.css. Utilities like bg-accent-solid, text-fg, border-chrome-border."
+      "for": "Tailwind v4 projects: import after tailwindcss (it brings tokens.css along). Utilities like bg-accent-solid, text-fg, bg-emphasis-bg, and text styles by tier: text-base, text-magnify-trigger."
+    },
+    {
+      "id": "shadcn",
+      "name": "shadcn/ui",
+      "file": "shadcn.css",
+      "files": [
+        "shadcn.css"
+      ],
+      "for": "shadcn/ui on Tailwind v4: import after tailwindcss in place of the color blocks in globals.css. Dark mode follows data-theme (next-themes: attribute=\"data-theme\")."
     },
     {
       "id": "mui",
@@ -78,6 +87,95 @@
         "ag-grid-v32.css"
       ],
       "for": "AG Grid 31 and 32 (CSS themes): load after ag-theme-quartz.css and put class=\"ag-theme-quartz ag-theme-loomiere\" on the grid."
+    },
+    {
+      "id": "design-system",
+      "name": "Claude Design System",
+      "file": "design-system/README.md",
+      "files": [
+        "design-system/components/bundle.js",
+        "design-system/components/index.d.ts",
+        "design-system/components/Accordion/README.md",
+        "design-system/components/Accordion/preview.html",
+        "design-system/components/AlertDialog/README.md",
+        "design-system/components/AlertDialog/preview.html",
+        "design-system/components/Autocomplete/README.md",
+        "design-system/components/Autocomplete/preview.html",
+        "design-system/components/Avatar/README.md",
+        "design-system/components/Avatar/preview.html",
+        "design-system/components/Button/README.md",
+        "design-system/components/Button/preview.html",
+        "design-system/components/Checkbox/README.md",
+        "design-system/components/Checkbox/preview.html",
+        "design-system/components/CheckboxGroup/README.md",
+        "design-system/components/CheckboxGroup/preview.html",
+        "design-system/components/Collapsible/README.md",
+        "design-system/components/Collapsible/preview.html",
+        "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/Dialog/README.md",
+        "design-system/components/Dialog/preview.html",
+        "design-system/components/Drawer/README.md",
+        "design-system/components/Drawer/preview.html",
+        "design-system/components/Field/README.md",
+        "design-system/components/Field/preview.html",
+        "design-system/components/Fieldset/README.md",
+        "design-system/components/Fieldset/preview.html",
+        "design-system/components/Form/README.md",
+        "design-system/components/Form/preview.html",
+        "design-system/components/Input/README.md",
+        "design-system/components/Input/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/NavigationMenu/README.md",
+        "design-system/components/NavigationMenu/preview.html",
+        "design-system/components/NumberField/README.md",
+        "design-system/components/NumberField/preview.html",
+        "design-system/components/OTPField/README.md",
+        "design-system/components/OTPField/preview.html",
+        "design-system/components/Popover/README.md",
+        "design-system/components/Popover/preview.html",
+        "design-system/components/PreviewCard/README.md",
+        "design-system/components/PreviewCard/preview.html",
+        "design-system/components/Progress/README.md",
+        "design-system/components/Progress/preview.html",
+        "design-system/components/Radio/README.md",
+        "design-system/components/Radio/preview.html",
+        "design-system/components/ScrollArea/README.md",
+        "design-system/components/ScrollArea/preview.html",
+        "design-system/components/Select/README.md",
+        "design-system/components/Select/preview.html",
+        "design-system/components/Separator/README.md",
+        "design-system/components/Separator/preview.html",
+        "design-system/components/Slider/README.md",
+        "design-system/components/Slider/preview.html",
+        "design-system/components/Switch/README.md",
+        "design-system/components/Switch/preview.html",
+        "design-system/components/Tabs/README.md",
+        "design-system/components/Tabs/preview.html",
+        "design-system/components/Toast/README.md",
+        "design-system/components/Toast/preview.html",
+        "design-system/components/Toggle/README.md",
+        "design-system/components/Toggle/preview.html",
+        "design-system/components/ToggleGroup/README.md",
+        "design-system/components/ToggleGroup/preview.html",
+        "design-system/components/Toolbar/README.md",
+        "design-system/components/Toolbar/preview.html",
+        "design-system/components/Tooltip/README.md",
+        "design-system/components/Tooltip/preview.html",
+        "design-system/components/bundle.css",
+        "design-system/README.md",
+        "design-system/components/Cover/preview.html",
+        "design-system/tokens.json",
+        "AGENTS.md"
+      ],
+      "for": "A Design System artifact on claude.ai, so Claude designs, makes decks and builds UI with this brand. Also AGENTS.md: the brand book for coding agents."
     }
   ]
 }

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

@@ -0,0 +1,142 @@
+Mojave: warm desert neutrals with a violet primary and ember accent.
+
+Every value in this system is a CSS variable with the `--sl-` prefix. Reach for the semantic tokens (surfaces, text, borders, fills, emphasis); use a palette step only when no semantic token says what you mean. Never paste a hex value: the variables carry light and dark, high contrast and color vision modes, and a palette or role change in the brand reaches everything that uses them.
+
+## Color
+
+The **chrome** role is the neutral (stone) palette: surfaces, text, borders and quiet controls. The **accent** role is the primary (mirage) palette: links, focus and the loudest actions. Status colors (success, warning, error, info) mean only their status; pair each with a word or an icon, never color alone.
+
+### Surfaces and text
+
+| Token | Use |
+|---|---|
+| `--sl-surface-canvas` | The page itself. Paper in light mode, the darkest neutral in dark mode. |
+| `--sl-surface-raised` | Cards and panels one level above the canvas. |
+| `--sl-surface-overlay` | Popups, menus and code blocks that sit above raised surfaces. |
+| `--sl-surface-modal` | Dialogs and drawers. Paper in light mode; in dark mode one step lighter than the page, so a modal lifts off the dimmed page under it. |
+| `--sl-surface-tray` | The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA. |
+| `--sl-surface-inverse` | Dark-on-light flip for small floating things such as tooltips. Inside a brand pair it becomes the pair's text color. |
+| `--sl-text-primary` | Body text and headings. The highest-contrast neutral. |
+| `--sl-text-secondary` | Supporting text such as descriptions and helper copy. Over 7:1 on every surface, and darker still under prefers-contrast: more. |
+| `--sl-text-tertiary` | Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface. |
+| `--sl-text-disabled` | Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI. |
+| `--sl-text-accent` | Accent text such as active tabs. One step darker than the interactive color so it stays AA as text. |
+| `--sl-text-on-primary` | Text on the accent fill: that step's own on-color, so it reads on any accent the brand picks. |
+| `--sl-text-on-tint` | Text on an accent wash (interactive.tint*). Stays in the accent family. |
+| `--sl-text-on-inverse-surface` | Text on surface.inverse (tooltips): the on-color of the inverse step, so it passes AA in both themes. |
+
+### Borders, fills and interaction
+
+| Token | Use |
+|---|---|
+| `--sl-border-subtle` | Hairlines inside a surface (table rows, list separators) that should barely register. |
+| `--sl-border-default` | Everyday dividers and control outlines. Darkens under prefers-contrast: more. |
+| `--sl-border-strong` | Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. |
+| `--sl-border-control` | Edge of a small control (checkbox, radio, switch) that must be found before it is filled. |
+| `--sl-border-control-hover` | Control edge under the pointer: one clear step darker than border.control. |
+| `--sl-border-accent` | Borders that signal selection or the active item. |
+| `--sl-fill-subtle` | Lightest fill: hovered rows, chips, empty tracks. |
+| `--sl-fill-default` | Standard fill: slider and switch tracks, pressed rows. |
+| `--sl-fill-strong` | Heaviest fill: scroll thumbs, slider marks, hovered tracks. |
+| `--sl-fill-inverse` | A small solid chip in the chrome color that flips with the theme: dark on light pages, light on dark ones. Keyboard keys use it. |
+| `--sl-interactive-default` | Primary accent for buttons, links and selected states. Step 600 is 6.1:1 on paper; step 400 is 5.6:1 on the dark canvas. |
+| `--sl-interactive-hover` | Hover state of the main accent. One step away from default in the direction of more contrast. |
+| `--sl-interactive-active` | Pressed state of the main accent. Darker than hover so the press is felt. |
+| `--sl-interactive-tint` | Faint accent wash behind a ghost or outline control on hover, or a selected row. |
+| `--sl-interactive-tint-hover` | Accent wash for a highlighted menu item or a pressed toggle. |
+| `--sl-interactive-tint-active` | Accent wash for a selected or pressed item: one step past tint-hover. |
+| `--sl-focus-ring` | Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". |
+
+### Status
+
+| Token | Use |
+|---|---|
+| `--sl-status-success` | Confirmations and completed states. |
+| `--sl-status-warning` | Warnings, and the required-field marker. |
+| `--sl-status-error` | Errors and destructive actions. |
+| `--sl-status-info` | Neutral notices and help. |
+| `--sl-status-error-dark` | Error color for text or icons that need more contrast than the base color. |
+| `--sl-status-error-light` | Error tint for backgrounds behind error messages. |
+
+Each status has `-dark` (text and icons that need more contrast) and `-light` (the tint behind a message) variants.
+
+### Palettes
+
+Palettes: `neutral` (stone), `primary` (mirage), `secondary` (ember), `tertiary` (dune), `quaternary` (silhouette), `success`, `warning`, `error`, `info`, `data`. Steps run from 50 (lightest) to the darkest step, and each step is placed by its contrast against paper, so a step number means the same contrast in every palette: text on paper needs 500 or darker (4.5:1). Every step has an on-color, `--sl-color-<palette>-on-<step>`, for text or icons placed on it.
+
+The `data` palette (`--sl-color-data-<n>`) is for charts only: series colors, never UI.
+
+### Emphasis
+
+Controls come in four levels of loudness. Pick the level by how much the action matters, not by color; the brand decides what each level looks like.
+
+| Level | Looks like | Use for |
+|---|---|---|
+| `bold` | solid in accent | The one main action in a view. |
+| `standard` | outline in accent | Secondary actions beside a bold one. |
+| `subtle` | soft in chrome | Frequent, low-stakes actions such as toolbar buttons. |
+| `quiet` | outline in chrome | Actions that should stay out of the way until needed. |
+
+Set it with `data-emphasis="bold|standard|subtle|quiet"` on a Button or any element styled from `--sl-emphasis-<level>-bg|fg|border` (with `-hover` and `-active`). On Button, `data-variant` is an alias: `solid` = bold, `outline` = standard, `ghost` = quiet.
+
+### Color scopes
+
+`data-color="<palette>"` on any element repaints everything inside it in that palette (`primary`, `secondary`, `error`, `accent`, `chrome`...): a destructive button is `<Button data-emphasis="bold" data-color="error">`.
+
+### Brand pairs
+
+A pair is a background with its own text and accent, checked to meet AA. Put `class="sl-pair-<name>"` on a band, card or callout and everything inside (text, links, buttons, focus) takes the pair's colors.
+
+| Pair | Use |
+|---|---|
+| `.sl-pair-ember-dune` | warm callouts and toasts. |
+| `.sl-pair-mirage-deep` | a dark brand band. |
+| `.sl-pair-stone-soft` | a quiet inset panel that flips in dark mode. |
+
+## Typography
+
+Families: display 'Funnel Display', sans-serif, body 'Barlow Semi Condensed', sans-serif, mono 'Roboto Mono', monospace.
+
+All text uses one whole text style, never a size or weight on its own: `class="text-style-<name>"`, or the `--sl-font-<name>-*` variables (font-family, font-size, font-weight, line-height, letter-spacing) together. Styles come in tiers named for why the text is that size:
+
+- **minimize**: the smallest functional text: captions, fine print, dense metadata. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
+- **condense**: compact UI: small controls, table cells, secondary labels. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
+- **base**: the default UI and body text. Variants: `selected`, `label`, `link`, `subtitle`, `trigger`.
+- **magnify**: emphasized body text: lead paragraphs, larger controls. Variants: `trigger`.
+- **maximize**: display text for headings and hero copy, in steps xs to 4xl. Variants: `2xl`, `3xl`, `4xl`, `lg`, `md`, `sm`, `xl`, `xs`.
+- **code**: code, in the mono family.
+
+Inside a tier, `-trigger` is for buttons and triggers, `-selected` for the current tab, toggle or nav item, `-link` for links, `-subtitle` for subheads and `-label` for form labels. Sizes below the base are fixed; the base and up grow with the viewport.
+
+## Space, shape and depth
+
+Space is a 4px grid: `--sl-space-<n>` is n × 4px (`space-4` = 16px). Use the steps; never a number in between.
+
+Corners are chosen by what a thing is, not by size:
+
+| Token | Use |
+|---|---|
+| `--sl-radius-control` | Inputs, buttons and other controls you click or type in. |
+| `--sl-radius-item` | Rows inside menus and lists, so highlighted items keep a soft edge inside the popup. |
+| `--sl-radius-surface` | Cards, popovers and panels. |
+| `--sl-radius-chrome` | App chrome such as toolbars and menubars. |
+| `--sl-radius-modal` | Dialogs get the largest radius so they read as a separate layer. |
+| `--sl-radius-pill` | Fully rounded ends for pills, badges and switches. |
+| `--sl-radius-minimal` | Square corners for things that tile edge to edge. |
+
+Depth: `--sl-elevation-xs` to `-2xl`, lowest first. Popups, menus and dialogs already carry theirs. Borders: `--sl-stroke-default` everywhere, `-emphasis` for selected or focused edges.
+
+## Focus and states
+
+Keyboard focus is one ring, `--sl-focus-outline` with `--sl-focus-outline-offset`, plus a soft halo in `--sl-focus-halo-color`. Never remove it; the `.focus-ring` utility applies it. Hover moves one step toward more contrast, pressed one more. Disabled controls use `--sl-text-disabled` and `--sl-interactive-disabled`.
+
+## Modes
+
+Light and dark: `data-theme="light|dark"` on the root, or the system setting when neither is set. High contrast follows `prefers-contrast: more`. Color vision themes: `data-vision="deuteranopia|protanopia|tritanopia|achromatopsia"`, each designed from this brand. Never hand-pick dark colors; the tokens already flip.
+
+## 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`, `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`). In previews and designs they are `window.Loomiere.<Name>`; Button, Input, Field, Fieldset, Form and NavigationMenu are wrappers that put their classes on themselves.
+
+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.
+

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

@@ -0,0 +1,97 @@
+# Accordion
+
+The Base UI Accordion styled by the theme. No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the maximize-md heading and the panel is base text. The accordion sits on whatever surface holds it.
+
+Use `Loomiere.Accordion` (`import { Accordion } from '@base-ui/react/accordion'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/accordion
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `Accordion` | `data-variant`: `separated`, `bordered` |
+| `AccordionItem` |   |
+| `AccordionHeader` |   |
+| `AccordionTrigger` | `data-disabled`; `data-panel-open` |
+| `AccordionIcon` |   |
+| `AccordionPanel` | `data-starting-style`; `data-ending-style` |
+| `AccordionContent` |   |
+
+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 Accordion stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: '600px' }}>
+      <Accordion.Root className="Accordion" defaultValue={[0]}>
+        <Accordion.Item className="AccordionItem" value={0}>
+          <Accordion.Header className="AccordionHeader">
+            <Accordion.Trigger className="AccordionTrigger">
+              What is Base UI?
+              <MaterialSymbol
+                name="expand_more"
+                className="AccordionIcon"
+                aria-hidden
+                style={{ fontSize: 'var(--sl-accordion-icon-size, 1.25rem)' }}
+              />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className="AccordionPanel">
+            <div className="AccordionContent">
+              Base UI is a library of headless (unstyled) React components and low-level hooks.
+              You gain complete control over your app's CSS and accessibility features.
+            </div>
+          </Accordion.Panel>
+        </Accordion.Item>
+
+        <Accordion.Item className="AccordionItem" value={1}>
+          <Accordion.Header className="AccordionHeader">
+            <Accordion.Trigger className="AccordionTrigger">
+              Why use Base UI?
+              <MaterialSymbol
+                name="expand_more"
+                className="AccordionIcon"
+                aria-hidden
+                style={{ fontSize: 'var(--sl-accordion-icon-size, 1.25rem)' }}
+              />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className="AccordionPanel">
+            <div className="AccordionContent">
+              Base UI gives you complete control over styling while handling all the complex
+              accessibility and interaction logic for you.
+            </div>
+          </Accordion.Panel>
+        </Accordion.Item>
+
+        <Accordion.Item className="AccordionItem" value={2}>
+          <Accordion.Header className="AccordionHeader">
+            <Accordion.Trigger className="AccordionTrigger">
+              How do I style it?
+              <MaterialSymbol
+                name="expand_more"
+                className="AccordionIcon"
+                aria-hidden
+                style={{ fontSize: 'var(--sl-accordion-icon-size, 1.25rem)' }}
+              />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className="AccordionPanel">
+            <div className="AccordionContent">
+              You apply class names to each component part and style them with CSS.
+              Base UI handles all the accessibility and interaction logic automatically.
+            </div>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  ),
+};
+```
+
+The preview also shows `SingleOpen`, `Separated`, `Bordered`.

package/dist/exports/design-system/components/Accordion/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Disclosure" height=480 subtitle="Default / SingleOpen / Separated / Bordered" -->
+<!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-minimize-label-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 v=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var f=(a,c)=>()=>(c||a((c={exports:{}}).exports,c),c.exports),S=(a,c)=>{for(var r in c)l(a,r,{get:c[r],enumerable:!0})},P=(a,c,r,s)=>{if(c&&typeof c=="object"||typeof c=="function")for(let n of I(c))!h.call(a,n)&&n!==r&&l(a,n,{get:()=>c[n],enumerable:!(s=y(c,n))||s.enumerable});return a};var T=(a,c,r)=>(r=a!=null?v(u(a)):{},P(c||!a||!a.__esModule?l(r,"default",{value:a,enumerable:!0}):r,a));var p=f((_,g)=>{g.exports=window.Loomiere.Base});var A={};S(A,{Bordered:()=>b,Default:()=>x,Separated:()=>w,SingleOpen:()=>z,default:()=>m});var o=T(p(),1);var t=window.React;function e(a,c,r){let{children:s,...n}=c||{};return r!==void 0&&(n.key=r),s===void 0?t.createElement(a,n):Array.isArray(s)?t.createElement(a,n,...s):t.createElement(a,n,s)}var k=t.Fragment;function i({name:a,className:c,...r}){let s=["material-symbols-outlined",c].filter(Boolean).join(" ");return e("span",{className:s,...r,children:a})}var H={title:"Components/Accordion",component:o.Accordion.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=H,x={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["What is Base UI?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Base UI is a library of headless (unstyled) React components and low-level hooks. You gain complete control over your app's CSS and accessibility features."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Why use Base UI?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Base UI gives you complete control over styling while handling all the complex accessibility and interaction logic for you."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["How do I style it?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"You apply class names to each component part and style them with CSS. Base UI handles all the accessibility and interaction logic automatically."})})]})]})})},z={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion",defaultValue:[0],multiple:!1,children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 1",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Only one section can be open at a time. Try opening another section - this one will close."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 2",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Opening this will automatically close Section 1."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 3",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This is a common pattern for FAQs and settings panels."})})]})]})})},w={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion","data-variant":"separated",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 1",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Notice the gaps between items and individual borders. Each item looks like a separate card."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 2",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This variant is great for settings panels or feature lists."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 3",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Each item is visually distinct and separated."})})]})]})})},b={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion","data-variant":"bordered",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Bordered Accordion",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This variant has a border around the entire accordion container."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Another Section",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"All items are contained within a single bordered container."})})]})]})})};var d=window.React,N=m||{},C=["Default","SingleOpen","Separated","Bordered"];function R({id:a}){let c=A[a],r={...N.args||{},...c.args||{}};return(c.render||(n=>d.createElement(N.component,n)))(r,{args:r,id:a,name:a})}var E=C.map(a=>d.createElement("section",{key:a,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(R,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,E));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,52 @@
+# AlertDialog
+
+The Base UI AlertDialog styled by the theme. No component tokens and no rules of its own. An alert dialog looks exactly like a dialog, so its backdrop, popup, title, description and actions are styled with the dialog's in Dialog.css. Its buttons are .Button elements: the confirming one bold, a cancel quiet, and a destructive one bold with data-color="error".
+
+Use `Loomiere.AlertDialog` (`import { AlertDialog } from '@base-ui/react/alert-dialog'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/alert-dialog
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+
+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 AlertDialog stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger className="Button">
+        Delete Account
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <AlertDialog.Backdrop className="AlertDialogBackdrop" />
+        <AlertDialog.Popup className="AlertDialogPopup">
+          <AlertDialog.Title className="AlertDialogTitle">
+            Are you absolutely sure?
+          </AlertDialog.Title>
+          <AlertDialog.Description className="AlertDialogDescription">
+            This action cannot be undone. This will permanently delete your account
+            and remove your data from our servers.
+          </AlertDialog.Description>
+          <div className="AlertDialogActions">
+            <AlertDialog.Close className="Button" data-variant="ghost">
+              Cancel
+            </AlertDialog.Close>
+            <AlertDialog.Close className="Button" data-color="error">
+              Delete Account
+            </AlertDialog.Close>
+          </div>
+        </AlertDialog.Popup>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  ),
+};
+```
+
+The preview also shows `Warning`.