@scattered-light/loomiere-mojave 0.24.1 → 0.41.0

package/dist/exports/base-ui.md

@@ -0,0 +1,535 @@
+# Base UI classes for mojave
+
+`base-ui.css` styles every [Base UI](https://base-ui.com) part (written for `@base-ui/react` 1.9.0) with this theme. Base UI renders unstyled parts and leaves the look to you, so the styles target class names: give each part the class below and it takes on the brand, in every mode, look and `data-color`.
+
+```ts
+import './theme/tokens.css';           // the variables: load first
+import './theme/utilities.css';        // optional: text-style and layout classes
+import './theme/exports/base-ui.css';  // reset + Base UI part styles
+```
+
+```tsx
+import { Switch } from '@base-ui/react/switch';
+
+<div className="SwitchContainer" data-size="sm">
+  <Switch.Root id="wifi" className="SwitchRoot"><Switch.Thumb className="SwitchThumb" /></Switch.Root>
+  <label className="SwitchLabel" htmlFor="wifi">Wi-Fi</label>
+</div>
+```
+
+A `className` can be a string or Base UI's state callback; either way, keep the part's class in it (`className="SelectItem my-row"`).
+
+## What you set, what Base UI sets
+
+- Base UI sets the state attributes itself: `data-checked`, `data-open`, `data-disabled`, `data-highlighted`, `data-side` and so on. The styles answer to them; you do nothing.
+- You set the design attributes: `data-size="sm|lg"` (md is the default; some parts also take `xs` or `xl`, listed below), `data-emphasis="bold|standard|subtle|quiet"` on anything with the `Button` class (triggers and close buttons included), and `data-color="<palette>"` (`primary`, `secondary`, `error`, …) on any part or section to repaint it in that palette.
+- `data-theme` (light, dark, high contrast, color vision) and `data-look` go on `<html>` or any section, as for the rest of the theme. Pairs (`.sl-pair-<name>`) work on a section too.
+
+## Notes
+
+- The reset (box sizing, margins, focus outlines, reduced motion) is in `@layer reset`, so any unlayered rule of yours wins over it. The part styles are unlayered.
+- With Tailwind v4, utilities on a part lose to these unlayered styles. Use `@scattered-light/loomiere-base-ui/tailwind.css` there, which puts the same styles in Tailwind's layers.
+- Fonts are yours to load (the brand's families are in `tokens.css` as `--sl-font-family-*`). Icon sizing inside buttons expects [Material Symbols](https://fonts.google.com/icons) (`<span class="material-symbols-outlined">add</span>`); any inline SVG works too.
+- Not included: the React wrappers that put these classes on for you, and the components Base UI doesn't have (Badge, DatePicker, MoneyField, data tables, Splitter, EmptyState, the HTML `Table` class…). Those come with `@scattered-light/loomiere-base-ui`.
+
+## Parts
+
+### Accordion
+
+[Base UI docs](https://base-ui.com/react/components/accordion). No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the title-base heading and the panel is base text. The accordion sits on whatever surface holds it.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Accordion.Root` | `Accordion` | `data-variant`: `separated`, `bordered` |
+| `Accordion.Item` | `AccordionItem` |   |
+| `Accordion.Header` | `AccordionHeader` |   |
+| `Accordion.Trigger` | `AccordionTrigger` | `data-disabled`; `data-panel-open` |
+| `Accordion.Panel` | `AccordionPanel` | `data-starting-style`; `data-ending-style` |
+| `<div>` (yours) | `AccordionContent` |   |
+
+Also styled, for elements you put inside the parts: `AccordionIcon`.
+
+### AlertDialog
+
+[Base UI docs](https://base-ui.com/react/components/alert-dialog). 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".
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `AlertDialog.Trigger` | `Button` |   |
+| `AlertDialog.Backdrop` | `AlertDialogBackdrop` |   |
+| `AlertDialog.Popup` | `AlertDialogPopup` |   |
+| `AlertDialog.Title` | `AlertDialogTitle` |   |
+| `AlertDialog.Description` | `AlertDialogDescription` |   |
+| `AlertDialog.Close` | `Button` |   |
+| `<div>` (yours) | `AlertDialogActions` |   |
+
+### Autocomplete
+
+[Base UI docs](https://base-ui.com/react/components/autocomplete). No component tokens. The input is Input (Input.css), the clear button is an icon button, and the list is a popup of item rows with the shared group label, separator and empty message.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Autocomplete.Input` | `AutocompleteInput` |   |
+| `Autocomplete.Clear` | `AutocompleteClear` |   |
+| `Autocomplete.Positioner` | `AutocompletePositioner` |   |
+| `Autocomplete.Popup` | `AutocompletePopup` | `data-ending-style` |
+| `Autocomplete.List` | `AutocompleteList` |   |
+| `Autocomplete.Item` | `AutocompleteItem` | `data-highlighted`; `data-selected`; `data-disabled` |
+| `Autocomplete.GroupLabel` | `AutocompleteGroupLabel` |   |
+| `Autocomplete.Separator` | `AutocompleteSeparator` |   |
+| `Autocomplete.Empty` | `AutocompleteEmpty` |   |
+| `<div>` (yours) | `AutocompleteRoot` |   |
+
+### Avatar
+
+[Base UI docs](https://base-ui.com/react/components/avatar). A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials paint with the avatar's emphasis level (bold unless data-emphasis says otherwise), so data-color re-colors them and the brand's ladder sets how loud they are. Initials use the heading text style one tier per size. Only the sizes are avatar tokens.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Avatar.Root` | `AvatarRoot` | `data-size`: `xs`, `sm`, `lg`, `xl` |
+| `Avatar.Image` | `AvatarImage` |   |
+| `Avatar.Fallback` | `AvatarFallback` |   |
+| `<div>` (yours) | `AvatarGroup` |   |
+
+### Button
+
+[Base UI docs](https://base-ui.com/react/components/button). Colors are the brand's emphasis levels, sizes are control.*, text is the trigger text style of each tier, and icons fill the button line (icon-size one tier up). Only the pill shape and disabled fade are Button's own (tokens/component/button.json).
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Button` | `Button` | `data-icon-only`; `data-emphasis`: `link`; `data-size`: `xs`, `sm`, `lg` |
+
+### Checkbox
+
+[Base UI docs](https://base-ui.com/react/components/checkbox). Sizes follow the label: the box is the icon size one tier above the label's text tier (like a button's icon) and the check mark one tier below it.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Checkbox.Root` | `CheckboxRoot` | `data-size`: `sm`, `lg`; `data-checked`; `data-indeterminate`; `data-disabled`; `data-variant`: `outline`, `circular-outline`, `circular` |
+| `Checkbox.Indicator` | `CheckboxIndicator` |   |
+| `<label>` (yours) | `CheckboxLabel` | `data-size`: `sm`, `lg`; `data-disabled` |
+
+Also styled, for elements you put inside the parts: `CheckboxIcon`.
+
+### CheckboxGroup
+
+[Base UI docs](https://base-ui.com/react/components/checkbox-group). /* Each checkbox row is already a full tap target tall, so the rows sit close.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `CheckboxGroup` | `CheckboxGroup` | `data-disabled` |
+
+### Collapsible
+
+[Base UI docs](https://base-ui.com/react/components/collapsible). No component tokens. Hover, press, chevron and motion are the disclosure concept (tokens/semantic/disclosure.json). The trigger is base-subtitle text with a base-size chevron; the panel lines up under the trigger's text and sits on the overlay surface.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Collapsible.Root` | `Collapsible` |   |
+| `Collapsible.Trigger` | `CollapsibleTrigger` | `data-panel-open` |
+| `Collapsible.Panel` | `CollapsiblePanel` | `data-starting-style`; `data-ending-style` |
+| `<div>` (yours) | `CollapsibleContent` |   |
+
+Also styled, for elements you put inside the parts: `CollapsibleIcon`.
+
+### Combobox
+
+[Base UI docs](https://base-ui.com/react/components/combobox). No component tokens. The input is Input (Input.css); the chips box is a field; the clear and open buttons are icon buttons; the list is a popup of item rows with the shared group label, separator and empty message. Rules that adjust Input are scoped under a Combobox parent so they win over Input.css, which loads later.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Combobox.Label` | `ComboboxLabel` |   |
+| `Combobox.Input` | `ComboboxInput` |   |
+| `Combobox.Clear` | `ComboboxClear` |   |
+| `Combobox.Icon` | `ComboboxIcon` |   |
+| `Combobox.Chips` | `ComboboxChips` |   |
+| `Combobox.Chip` | `ComboboxChip` | `data-highlighted` |
+| `Combobox.ChipRemove` | `ComboboxChipRemove` |   |
+| `Combobox.Positioner` | `ComboboxPositioner` |   |
+| `Combobox.Popup` | `ComboboxPopup` |   |
+| `Combobox.List` | `ComboboxList` |   |
+| `Combobox.Item` | `ComboboxItem` | `data-highlighted`; `data-selected`; `data-disabled` |
+| `Combobox.ItemIndicator` | `ComboboxItemIndicator` |   |
+| `Combobox.GroupLabel` | `ComboboxGroupLabel` |   |
+| `Combobox.Separator` | `ComboboxSeparator` |   |
+| `Combobox.Empty` | `ComboboxEmpty` |   |
+| `Combobox.Status` | `ComboboxStatus` |   |
+| `<div>` (yours) | `ComboboxRoot` |   |
+
+Also styled, for elements you put inside the parts: `ComboboxContainer`, `ComboboxInputWrapper`, `ComboboxChipRemoveIcon`, `ComboboxActionButtons`, `ComboboxTrigger`, `ComboboxClearIcon`, `ComboboxTriggerIcon`, `ComboboxItemIndicatorIcon`, `ComboboxItemText`, `ComboboxSelectTrigger`, `ComboboxInputContainer`, `ComboboxSpinner`, `ComboboxItemTitle`, `ComboboxItemSubtitle`, `ComboboxItemUsername`, `ComboboxItemEmail`.
+
+### ContextMenu
+
+[Base UI docs](https://base-ui.com/react/components/context-menu). No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `ContextMenu.Trigger` | `ContextMenuTrigger` |   |
+| `ContextMenu.Positioner` | `ContextMenuPositioner` |   |
+| `ContextMenu.Popup` | `ContextMenuPopup` |   |
+| `ContextMenu.Item` | `ContextMenuItem` | `data-highlighted`; `data-disabled` |
+| `ContextMenu.CheckboxItem` | `ContextMenuCheckboxItem` | `data-highlighted`; `data-disabled` |
+| `ContextMenu.CheckboxItemIndicator` | `ContextMenuCheckboxItemIndicator` |   |
+| `ContextMenu.RadioItem` | `ContextMenuRadioItem` | `data-highlighted`; `data-disabled`; `data-unchecked` |
+| `ContextMenu.RadioItemIndicator` | `ContextMenuRadioItemIndicator` |   |
+| `ContextMenu.SubmenuTrigger` | `ContextMenuSubmenuTrigger` | `data-highlighted`; `data-disabled` |
+| `ContextMenu.Group` | `ContextMenuGroup` |   |
+| `ContextMenu.GroupLabel` | `ContextMenuGroupLabel` |   |
+| `ContextMenu.Separator` | `ContextMenuSeparator` |   |
+| `ContextMenu.Arrow` | `ContextMenuArrow` |   |
+
+Also styled, for elements you put inside the parts: `ContextMenuCheckboxItemIndicatorIcon`, `ContextMenuRadioItemIndicatorIcon`.
+
+### Dialog
+
+[Base UI docs](https://base-ui.com/react/components/dialog). Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the title-amplify heading and base description. Alert dialog shares every rule here; AlertDialog.css adds nothing of its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Dialog.Trigger` | `Button` |   |
+| `Dialog.Backdrop` | `DialogBackdrop` | `data-starting-style`; `data-ending-style` |
+| `Dialog.Popup` | `DialogPopup` | `data-starting-style`; `data-ending-style` |
+| `Dialog.Title` | `DialogTitle` |   |
+| `Dialog.Description` | `DialogDescription` |   |
+| `Dialog.Close` | `DialogClose`, or `Button` to draw it as a button |   |
+| `<div>` (yours) | `DialogContent` |   |
+| `<div>` (yours) | `DialogActions` |   |
+
+### Drawer
+
+[Base UI docs](https://base-ui.com/react/components/drawer). The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a drawer reads as a dialog's sibling; only its size and grab bar are its own (--sl-drawer-*). Base UI supplies the swipe through --drawer-swipe-movement-x/y and data-swipe-direction on the popup. The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier line in rule.color. It is an inset shadow, so it stays put while the drawer scrolls.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Drawer.Trigger` | `Button` |   |
+| `Drawer.Backdrop` | `DrawerBackdrop` | `data-starting-style`; `data-ending-style` |
+| `Drawer.Viewport` | `DrawerViewport` |   |
+| `Drawer.Popup` | `DrawerPopup` | `data-swipe-direction`: `down`, `up`, `right`, `left`; `data-starting-style`; `data-ending-style`; `data-swiping` |
+| `Drawer.Title` | `DrawerTitle` |   |
+| `Drawer.Description` | `DrawerDescription` |   |
+| `Drawer.Content` | `DrawerContent` |   |
+| `Drawer.Close` | `Button` |   |
+
+### Field
+
+[Base UI docs](https://base-ui.com/react/components/field). Label, control, description and error. No component tokens: spacing is the field concept (tokens/semantic/field.json) and text is whole text styles. Field.Control is styled with Input (Input.css). Number field's label, description and error are the same parts, so they share these rules.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Field.Root` | `FieldRoot` | `data-disabled` |
+| `Field.Label` | `FieldLabel` |   |
+| `Field.Description` | `FieldDescription` |   |
+| `Field.Error` | `FieldError` |   |
+| `Field.Control` | `FieldControl` |   |
+
+### Fieldset
+
+[Base UI docs](https://base-ui.com/react/components/fieldset). No component tokens: a titled group of fields, spaced by the stack gaps, with whole text styles.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Fieldset.Root` | `Fieldset` |   |
+| `Fieldset.Legend` | `FieldsetLegend` |   |
+| `<div>` (yours) | `FieldsetDescription` |   |
+
+### Form
+
+[Base UI docs](https://base-ui.com/react/components/form). No component tokens: fields stack with the large block space, and the action buttons sit in a row after them.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Form` | `Form` |   |
+| `<div>` (yours) | `FormActions` |   |
+
+### Input
+
+[Base UI docs](https://base-ui.com/react/components/input). No component tokens: the look is the field concept (tokens/semantic/field.json), sizes are control.*, and text is a whole text style. Field.Control is the same control inside a Field, and Number field's, Autocomplete's and Combobox's inputs are the same control with buttons at the end, and an OTP field's slots are the same control cut into squares (OTPField.css sizes them), so they share these rules.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Input` | `Input` | `data-error`; `data-size`: `xs`, `sm`, `lg` |
+
+### Menu
+
+[Base UI docs](https://base-ui.com/react/components/menu). No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Menu.Trigger` | `Button` |   |
+| `Menu.Positioner` | `MenuPositioner` |   |
+| `Menu.Popup` | `MenuPopup` |   |
+| `Menu.Item` | `MenuItem` | `data-highlighted`; `data-disabled` |
+| `Menu.CheckboxItem` | `MenuCheckboxItem` | `data-highlighted`; `data-disabled` |
+| `Menu.CheckboxItemIndicator` | `MenuCheckboxItemIndicator` |   |
+| `Menu.RadioItem` | `MenuRadioItem` | `data-highlighted`; `data-disabled` |
+| `Menu.RadioItemIndicator` | `MenuRadioItemIndicator` | `data-unchecked` |
+| `Menu.SubmenuTrigger` | `MenuSubmenuTrigger` | `data-highlighted`; `data-disabled` |
+| `Menu.Group` | `MenuGroup` |   |
+| `Menu.GroupLabel` | `MenuGroupLabel` |   |
+| `Menu.Separator` | `MenuSeparator` |   |
+
+Also styled, for elements you put inside the parts: `MenuCheckboxItemIndicatorIcon`, `MenuRadioItemIndicatorIcon`.
+
+### Menubar
+
+[Base UI docs](https://base-ui.com/react/components/menubar). No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Menubar` | `MenubarRoot` |   |
+
+Also styled, for elements you put inside the parts: `MenubarTrigger`, `MenubarPositioner`, `MenubarPopup`, `MenubarItem`, `MenubarCheckboxItem`, `MenubarRadioItem`, `MenubarSubmenuTrigger`, `MenubarCheckboxItemIndicator`, `MenubarRadioItemIndicator`, `MenubarCheckboxItemIndicatorIcon`, `MenubarRadioItemIndicatorIcon`, `MenubarGroup`, `MenubarGroupLabel`, `MenubarSeparator`.
+
+### Meter
+
+[Base UI docs](https://base-ui.com/react/components/meter). A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it: the accent by default, or set data-color on the root (success, warning, error, any palette) to show a zone. Base UI doesn't map low/high/optimum, so the app picks the color.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Meter.Root` | `MeterRoot` |   |
+| `Meter.Label` | `MeterLabel` |   |
+| `Meter.Value` | `MeterValue` |   |
+| `Meter.Track` | `MeterTrack` | `data-size`: `sm`, `lg` |
+| `Meter.Indicator` | `MeterIndicator` |   |
+| `<div>` (yours) | `MeterHeader` |   |
+
+### NavigationMenu
+
+[Base UI docs](https://base-ui.com/react/components/navigation-menu). The strip is the bar concept, the panel is the popup concept and each link is an item row with a title and description. Only the panel sizes are its own (tokens/component/navigation-menu.json). The panel slides between triggers on the slow duration with the out easing.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `NavigationMenu.Root` | `NavigationMenuRoot` |   |
+| `NavigationMenu.List` | `NavigationMenuList` |   |
+| `NavigationMenu.Content` | `NavigationMenuContent` | `data-starting-style`; `data-ending-style`; `data-activation-direction`: `left`, `right` |
+| `NavigationMenu.Trigger` | `NavigationMenuTrigger` | `data-popup-open` |
+| `NavigationMenu.Icon` | `NavigationMenuIcon` | `data-popup-open` |
+| `NavigationMenu.Positioner` | `NavigationMenuPositioner` | `data-side`: `top`, `bottom`, `left`, `right`; `data-instant` |
+| `NavigationMenu.Popup` | `NavigationMenuPopup` | `data-starting-style`; `data-ending-style` |
+| `NavigationMenu.Arrow` | `NavigationMenuArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
+| `NavigationMenu.Viewport` | `NavigationMenuViewport` |   |
+| `NavigationMenu.Link` | `NavigationMenuLink` |   |
+
+Also styled, for elements you put inside the parts: `NavigationMenuLinkList`, `NavigationMenuSections`, `NavigationMenuLinkTitle`, `NavigationMenuLinkDescription`, `NavigationMenuSection`, `NavigationMenuSectionHeading`, `NavigationMenuArrowFill`, `NavigationMenuArrowOuterStroke`, `NavigationMenuArrowInnerStroke`, `NavigationMenuSeparator`.
+
+### NumberField
+
+[Base UI docs](https://base-ui.com/react/components/number-field). No component tokens. The input is Input (Input.css) and the label, description and error are Field's parts (Field.css). Only the stepper buttons are drawn here: two stacked halves of the field's height, as wide as the smallest control.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `NumberField.Root` | `NumberFieldRoot` |   |
+| `NumberField.Group` | `NumberFieldGroup` |   |
+| `NumberField.Input` | `NumberFieldInput` |   |
+| `NumberField.Increment` | `NumberFieldIncrement` |   |
+| `NumberField.Decrement` | `NumberFieldDecrement` |   |
+| `NumberField.ScrubArea` | `NumberFieldScrubArea` | `data-scrubbing` |
+| `<label>` (yours) | `NumberFieldLabel` |   |
+
+### OTPField
+
+[Base UI docs](https://base-ui.com/react/components/otp-field). One-time code entry: a row of single-character inputs. Each slot is the same control as Input (Input.css styles .OTPFieldInput with the field pattern, hover, focus, disabled and error), cut into a square as tall as a control of the same size. data-size on the root picks the control size and the text tier of the same name, as on Input. No component tokens.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `OTPField.Root` | `OTPFieldRoot` | `data-size`: `sm`, `lg` |
+| `OTPField.Input` | `OTPFieldInput` |   |
+| `OTPField.Separator` | `OTPFieldSeparator` |   |
+
+### Popover
+
+[Base UI docs](https://base-ui.com/react/components/popover). /* ============================================ TRIGGER ============================================
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Popover.Trigger` | `PopoverTrigger`, or `PopoverTrigger Button` to draw it as a button |   |
+| `Popover.Backdrop` | `PopoverBackdrop` |   |
+| `Popover.Positioner` | `PopoverPositioner` |   |
+| `Popover.Popup` | `PopoverPopup` | `data-starting-style`; `data-ending-style` |
+| `Popover.Title` | `PopoverTitle` |   |
+| `Popover.Description` | `PopoverDescription` |   |
+| `Popover.Close` | `PopoverClose` |   |
+| `Popover.Arrow` | `PopoverArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
+
+Also styled, for elements you put inside the parts: `PopoverArrowFill`, `PopoverArrowOuterStroke`, `PopoverArrowInnerStroke`.
+
+### PreviewCard
+
+[Base UI docs](https://base-ui.com/react/components/preview-card). The popup concept (surface, arrow, motion) with a title-magnify title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `PreviewCard.Trigger` | `PreviewCardTrigger` |   |
+| `PreviewCard.Positioner` | `PreviewCardPositioner` |   |
+| `PreviewCard.Popup` | `PreviewCardPopup` | `data-starting-style`; `data-ending-style` |
+| `PreviewCard.Arrow` | `PreviewCardArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
+| `<img>` (yours) | `PreviewCardImage` |   |
+| `<div>` (yours) | `PreviewCardContent` |   |
+| `<p>` (yours) | `PreviewCardDescription` |   |
+
+Also styled, for elements you put inside the parts: `PreviewCardTitle`, `PreviewCardArrowFill`, `PreviewCardArrowOuterStroke`, `PreviewCardArrowInnerStroke`.
+
+### Progress
+
+[Base UI docs](https://base-ui.com/react/components/progress). A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of the scope around it: the accent by default, or set data-color on the root (success, warning, error, any palette).
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Progress.Root` | `ProgressRoot` | `data-indeterminate`; `data-size`: `sm`, `lg` |
+| `Progress.Label` | `ProgressLabel` |   |
+| `Progress.Value` | `ProgressValue` |   |
+| `Progress.Track` | `ProgressTrack` |   |
+| `Progress.Indicator` | `ProgressIndicator` |   |
+| `<div>` (yours) | `ProgressHeader` |   |
+
+### Radio
+
+[Base UI docs](https://base-ui.com/react/components/radio). Same box as Checkbox, always round. Sizes follow the label the same way, and the dot is a share of the circle (check.dot-scale).
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Radio.Root` | `RadioButton` | `data-unchecked`; `data-checked` |
+| `Radio.Indicator` | `RadioIndicator` | `data-unchecked` |
+| `RadioGroup` | `RadioGroup` |   |
+| `<label>` (yours) | `RadioRoot` | `data-size`: `sm`, `lg`; `data-disabled` |
+| `<span>` (yours) | `RadioLabel` |   |
+
+### ScrollArea
+
+[Base UI docs](https://base-ui.com/react/components/scroll-area). The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until you reach for it, and a thumb in the strong fills. No component tokens.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `ScrollArea.Root` | `ScrollAreaRoot` |   |
+| `ScrollArea.Viewport` | `ScrollAreaViewport` |   |
+| `ScrollArea.Scrollbar` | `ScrollAreaScrollbar` | `data-orientation`: `vertical`, `horizontal` |
+| `ScrollArea.Thumb` | `ScrollAreaThumb` | `data-dragging` |
+| `ScrollArea.Corner` | `ScrollAreaCorner` |   |
+
+### Select
+
+[Base UI docs](https://base-ui.com/react/components/select). The trigger is a field (the field pattern, control sizes, the base text style); the list is a popup of item rows. Select keeps no tokens of its own.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Select.Trigger` | `SelectTrigger`, or `Button` to draw it as a button |   |
+| `Select.Value` | `SelectValue` |   |
+| `Select.Icon` | `SelectIcon` |   |
+| `Select.Backdrop` | `SelectBackdrop` |   |
+| `Select.Positioner` | `SelectPositioner` |   |
+| `Select.Popup` | `SelectPopup` |   |
+| `Select.List` | `SelectList` |   |
+| `Select.Item` | `SelectItem` | `data-highlighted`; `data-disabled`; `data-selected` |
+| `Select.ItemIndicator` | `SelectItemIndicator` |   |
+| `Select.ItemText` | `SelectItemText` |   |
+| `Select.Arrow` | `SelectArrow` |   |
+| `Select.ScrollDownArrow` | `SelectScrollArrow` |   |
+| `Select.ScrollUpArrow` | `SelectScrollArrow` |   |
+| `Select.Group` | `SelectGroup` |   |
+| `Select.GroupLabel` | `SelectGroupLabel` |   |
+| `Select.Separator` | `SelectSeparator` |   |
+
+Also styled, for elements you put inside the parts: `SelectItemIndicatorIcon`, `SelectScrollArrowIcon`, `SelectArrowFill`, `SelectArrowStroke`.
+
+### Separator
+
+[Base UI docs](https://base-ui.com/react/components/separator). A hairline in the everyday divider color (border.default), one stroke thick, with a step of space on either side. No component tokens.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Separator` | `Separator` | `data-orientation`: `horizontal`, `vertical` |
+
+### Slider
+
+[Base UI docs](https://base-ui.com/react/components/slider). A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as Meter and Progress, thin size), and the fill is the scope's solid color, so data-color on the root re-colors it. The thumb is a field-colored knob ringed in that color. Only the knob size and the vertical length are slider tokens.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Slider.Root` | `SliderRoot` |   |
+| `Slider.Label` | `SliderLabel` |   |
+| `Slider.Value` | `SliderValue` |   |
+| `Slider.Control` | `SliderControl` | `data-disabled`; `data-orientation`: `vertical`, `horizontal` |
+| `Slider.Track` | `SliderTrack` |   |
+| `Slider.Indicator` | `SliderIndicator` |   |
+| `Slider.Thumb` | `SliderThumb` | `data-disabled`; `data-dragging` |
+| `<div>` (yours) | `SliderHeader` |   |
+
+Also styled, for elements you put inside the parts: `SliderMark`.
+
+### Switch
+
+[Base UI docs](https://base-ui.com/react/components/switch). Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are worked out from them: the thumb fills the track's height inside the padding, travels (width - height), and the text centers in the part the thumb leaves free.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Switch.Root` | `SwitchRoot` | `data-checked`; `data-disabled` |
+| `Switch.Thumb` | `SwitchThumb` | `data-checked` |
+| `<div>` (yours) | `SwitchContainer` | `data-size`: `sm`, `lg`; `data-disabled` |
+| `<label>` (yours) | `SwitchLabel` |   |
+
+### Tabs
+
+[Base UI docs](https://base-ui.com/react/components/tabs). No component tokens. The divider, the selected line and color, hover and the disabled fade are the disclosure concept (tokens/semantic/disclosure.json). Tabs use the text style of their tier and switch to that tier's selected style when chosen, like a selected row in a list.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Tabs.Root` | `TabsRoot` | `data-orientation`: `vertical`; `data-size`: `sm`, `lg` |
+| `Tabs.List` | `TabsList` | `data-variant`: `sheet` |
+| `Tabs.Tab` | `TabsTab` | `data-disabled`; `data-active` |
+| `Tabs.Panel` | `TabsPanel` |   |
+
+Also styled, for elements you put inside the parts: `TabsTabCount`.
+
+### Toast
+
+[Base UI docs](https://base-ui.com/react/components/toast). A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type is success, warning, error or info takes that palette (the build points the scope at it); data-color picks any other palette. Toast tokens hold only the stack's place and width.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Toast.Viewport` | `Viewport` |   |
+| `Toast.Root` | `Toast` | `data-color`; `data-type`: `success`, `warning`, `error`, `info`; `data-expanded`; `data-starting-style`; `data-ending-style`; `data-swipe-direction`: `up`, `down`, `left`, `right`; `data-limited` |
+| `Toast.Content` | `Content` | `data-behind`; `data-expanded` |
+| `Toast.Title` | `Title` |   |
+| `Toast.Description` | `Description` |   |
+| `Toast.Close` | `Close` |   |
+| `Toast.Action` | `Button` |   |
+
+### Toggle
+
+[Base UI docs](https://base-ui.com/react/components/toggle). A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size. Pressed, it takes its emphasis level's pressed look (standard unless data-emphasis on it or its group says otherwise), so the brand's emphasis ladder decides how loud an "on" toggle is.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Toggle` | `Toggle` | `data-disabled`; `data-pressed`; `data-size`: `sm`, `lg` |
+
+### ToggleGroup
+
+[Base UI docs](https://base-ui.com/react/components/toggle-group). No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the toggles are Toggle, with item corners so they nest inside the strip's.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `ToggleGroup` | `ToggleGroup` | `data-variant`: `segmented` |
+
+### Toolbar
+
+[Base UI docs](https://base-ui.com/react/components/toolbar). The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects and inputs inside it keep their own styles; only the field's width is the toolbar's.
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Toolbar.Root` | `Toolbar` |   |
+| `Toolbar.Group` | `ToolbarGroup` |   |
+| `Toolbar.Separator` | `ToolbarSeparator` |   |
+| `Toolbar.Button` | `Button` |   |
+| `Toolbar.Link` | `ToolbarLink` |   |
+| `Toolbar.Input` | `ToolbarInput` |   |
+
+### Tooltip
+
+[Base UI docs](https://base-ui.com/react/components/tooltip). The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip reads as a label laid over the page. Motion is the popup's; only the width limit is the tooltip's own (tokens/component/tooltip.json).
+
+| Part | Class | Data attributes it answers to |
+|---|---|---|
+| `Tooltip.Trigger` | `TooltipTrigger`, or `TooltipTrigger Button` to draw it as a button |   |
+| `Tooltip.Positioner` | `TooltipPositioner` |   |
+| `Tooltip.Popup` | `TooltipPopup` | `data-starting-style`; `data-ending-style` |
+| `Tooltip.Arrow` | `TooltipArrow` |   |

package/dist/exports/catalog.json

@@ -57,6 +57,16 @@
       ],
       "for": "React apps on @chakra-ui/react v3: pass the exported system to ChakraProvider, and load tokens.css."
     },
+    {
+      "id": "base-ui",
+      "name": "Base UI",
+      "file": "base-ui.css",
+      "files": [
+        "base-ui.css",
+        "base-ui.md"
+      ],
+      "for": "Base UI (@base-ui/react) on its own: the reset and a style for every Base UI part, by class name (className=\"SwitchRoot\"), following data-size, data-emphasis, data-color, data-theme and data-look. base-ui.md lists which class goes on which part. Needs tokens.css. For the React wrappers and custom components, install @scattered-light/loomiere-base-ui instead."
+    },
     {
       "id": "ag-grid-v36",
       "name": "AG Grid 36+",
@@ -113,6 +123,10 @@
         "design-system/components/Checkbox/preview.html",
         "design-system/components/CheckboxGroup/README.md",
         "design-system/components/CheckboxGroup/preview.html",
+        "design-system/components/ChecklistNotice/README.md",
+        "design-system/components/ChecklistNotice/preview.html",
+        "design-system/components/ChipPicker/README.md",
+        "design-system/components/ChipPicker/preview.html",
         "design-system/components/Collapsible/README.md",
         "design-system/components/Collapsible/preview.html",
         "design-system/components/Collection/README.md",
@@ -144,12 +158,16 @@
         "design-system/components/Field/preview.html",
         "design-system/components/Fieldset/README.md",
         "design-system/components/Fieldset/preview.html",
+        "design-system/components/FileDropZone/README.md",
+        "design-system/components/FileDropZone/preview.html",
         "design-system/components/Form/README.md",
         "design-system/components/Form/preview.html",
         "design-system/components/FormGrid/README.md",
         "design-system/components/FormGrid/preview.html",
         "design-system/components/Input/README.md",
         "design-system/components/Input/preview.html",
+        "design-system/components/LineItemGrid/README.md",
+        "design-system/components/LineItemGrid/preview.html",
         "design-system/components/ListDetail/README.md",
         "design-system/components/ListDetail/preview.html",
         "design-system/components/Menu/README.md",
@@ -170,6 +188,8 @@
         "design-system/components/NumberField/preview.html",
         "design-system/components/OTPField/README.md",
         "design-system/components/OTPField/preview.html",
+        "design-system/components/ParameterBar/README.md",
+        "design-system/components/ParameterBar/preview.html",
         "design-system/components/PickerButton/README.md",
         "design-system/components/PickerButton/preview.html",
         "design-system/components/PickerSplit/README.md",
@@ -181,6 +201,8 @@
         "design-system/components/Progress/preview.html",
         "design-system/components/Radio/README.md",
         "design-system/components/Radio/preview.html",
+        "design-system/components/RadioCard/README.md",
+        "design-system/components/RadioCard/preview.html",
         "design-system/components/ScrollArea/README.md",
         "design-system/components/ScrollArea/preview.html",
         "design-system/components/Select/README.md",
@@ -189,26 +211,38 @@
         "design-system/components/Separator/preview.html",
         "design-system/components/Sheet/README.md",
         "design-system/components/Sheet/preview.html",
+        "design-system/components/Shortcuts/README.md",
+        "design-system/components/Shortcuts/preview.html",
         "design-system/components/SideNav/README.md",
         "design-system/components/SideNav/preview.html",
         "design-system/components/Slider/README.md",
         "design-system/components/Slider/preview.html",
+        "design-system/components/SourcePreview/README.md",
+        "design-system/components/SourcePreview/preview.html",
         "design-system/components/Spinner/README.md",
         "design-system/components/Spinner/preview.html",
         "design-system/components/SplitButton/README.md",
         "design-system/components/SplitButton/preview.html",
         "design-system/components/Splitter/README.md",
         "design-system/components/Splitter/preview.html",
+        "design-system/components/StatBand/README.md",
+        "design-system/components/StatBand/preview.html",
         "design-system/components/StatCard/README.md",
         "design-system/components/StatCard/preview.html",
         "design-system/components/StatFigure/README.md",
         "design-system/components/StatFigure/preview.html",
+        "design-system/components/Stepper/README.md",
+        "design-system/components/Stepper/preview.html",
+        "design-system/components/SummaryStrip/README.md",
+        "design-system/components/SummaryStrip/preview.html",
         "design-system/components/Switch/README.md",
         "design-system/components/Switch/preview.html",
         "design-system/components/Table/README.md",
         "design-system/components/Table/preview.html",
         "design-system/components/Tabs/README.md",
         "design-system/components/Tabs/preview.html",
+        "design-system/components/Text/README.md",
+        "design-system/components/Text/preview.html",
         "design-system/components/Toast/README.md",
         "design-system/components/Toast/preview.html",
         "design-system/components/Toggle/README.md",

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

@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ## Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `Notice`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Spinner`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `ChecklistNotice`, `ChipPicker`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `FileDropZone`, `Form`, `FormGrid`, `Input`, `LineItemGrid`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `Notice`, `NumberField`, `OTPField`, `ParameterBar`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `RadioCard`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Shortcuts`, `SideNav`, `Slider`, `SourcePreview`, `Spinner`, `SplitButton`, `Splitter`, `StatBand`, `StatCard`, `StatFigure`, `Stepper`, `SummaryStrip`, `Switch`, `Table`, `Tabs`, `Text`, `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.