@justanarthur/modo-ui 0.6.0-canary.4 → 0.6.0-canary.6

package/DESIGN.md

@@ -349,12 +349,12 @@ fun; the only overshoot in the system is the slow tier's 0.12 and the goo's 0.15
 Two text colors, a greyscale ground, one blue.
 
 - **Foreground (`text-foreground`)** — near-black ink in light, near-white in dark. Headings, labels,
-  values, selected items, the primary button's fill.
+  values, selected items, the primary button's fill (until `--primary` is re-pointed).
 - **Muted foreground (`text-muted-foreground`)** — the only secondary text color: descriptions, captions,
   placeholders, idle icons, idle tab labels. Never an opacity step of foreground (`text-foreground/60`
   is wrong); a third text tone does not exist.
 - **Background (`bg-background`)** — the page, equal to surface 1. Also the text color on the primary
-  button and the tooltip (`text-background`).
+  button (until `--primary-foreground` is re-pointed) and the tooltip (`text-background`).
 - **Surfaces (`bg-surface-1` … `bg-surface-8`)** — the elevation ladder (see Elevation & Depth). Prefer a
   surface level over `card`/`background` for anything that floats or nests.
 - **Muted (`bg-muted`)** — a recessed track: the segmented tabs' well, a sunken field at rest.
@@ -367,6 +367,15 @@ Two text colors, a greyscale ground, one blue.
   forced scopes. Hairlines only, 1px.
 - **Brand (`bg-brand`, `ring-focus-ring`)** — `focus-ring` is `brand`: every keyboard ring is a 1px blue
   ring 2px outside the element. The single theming point for focus.
+- **Primary (`bg-primary`, `text-primary-foreground`)** — the primary Button's theme hooks, so a host can
+  recolour it without forking the component: `--primary` (the fill, default `foreground`), `--primary-hover`
+  and `--primary-active` (default: `--primary` mixed 10% / 20% toward `background`), `--primary-foreground`
+  (the label, default `background`) and `--shadow-button-primary` (an extra shadow list drawn on the fill
+  layer, after its press ring: a lit edge, an outline, a drop; default the invisible `0 0 #0000`). All
+  five default to the ink look, so nothing moves until one is overridden. Re-point them on
+  `:root, .light, .dark` (zero-specificity defaults, so any stylesheet order wins), and set the hover and
+  active steps with the fill, since their defaults mix from the `--primary` they are declared with.
+  Other ink fills (checkbox, switch, progress, …) still read `foreground`.
 - **Destructive (`text-destructive`, `bg-destructive-light`)** — errors and destructive confirms only.
 - **Tinted actions (`text-destructive-strong` on `bg-destructive-wash`, `text-success-strong` on
   `bg-success-wash`)** — the destructive and success buttons: the hue as text, dark enough for AA on its
@@ -537,7 +546,7 @@ The signature behaviors:
 Each item lives at `<tier>/[<group>/]<name>/index.tsx` and composes from Base UI (behavior) plus the
 shared systems above (look and motion). Ready-made patterns to reach for before writing anything:
 
-- **Buttons** — `primary` (ink fill), `secondary` (accent fill), `tertiary` (transparent, a 1px
+- **Buttons** — `primary` (ink fill by default, the `--primary` theme hooks), `secondary` (accent fill), `tertiary` (transparent, a 1px
   `border` ring that moves inward on press), `ghost` (transparent, muted text that turns foreground over
   the hover overlay). A component token with no `backgroundColor` is transparent over its substrate.
   Sizes `default` 36 / `compact` 28 / `icon` / `icon-compact`. Icons sit 4px closer to their edge than

package/README.md

@@ -75,7 +75,9 @@ import 'virtual:uno.css'
 import '@justanarthur/modo-ui/base.css'
 ```
 
-`tokens.css` holds the CSS variables alone.
+`tokens.css` holds the CSS variables alone. Each token file also ships on its
+own, unchanged, as `@justanarthur/modo-ui/tokens/<group>.css` (`colors`, `motion`,
+`radius`, `spacing`, `typography`), for a host whose modo viewer reads `tokens/*.css`.
 
 ### Theme
 
@@ -133,13 +135,13 @@ positioning) are ported.
 |---|---|
 | `AGENTS.md` | The ui-specific guide for coding agents (where things live, the rules that matter most, the checks); `CLAUDE.md` imports it. |
 | `DESIGN.md` | The design language in Google's [DESIGN.md](https://github.com/google-labs-code/design.md) format: the tokens as front matter, the rules as prose. Agents building here follow the `modo-ui` skill (`.claude/skills/modo-ui` at the repo root). |
-| `tokens/*.css` | Colors, typography (`--font-sans`, `--text-*`), motion (`--duration-*`), radius and spacing. |
-| `base.css` | Theme switching, base styles, focus fallback, scrollbars, shimmer/spinner keyframes and `.scroll-fade`. Shipped in the package. |
+| `tokens/*.css` | Colors, typography (`--font-sans`, `--text-*`), motion (`--duration-*`), radius and spacing. Shipped per group as `dist/tokens/*.css` (`./tokens/*`). |
+| `base.css` | Theme switching, base styles, focus fallback, scrollbars, shimmer/spinner keyframes and `.scroll-fade`. Shipped in the package. The inline `code` chip applies only inside the docs shell, `data-modo="prose"` and `.modo-prose`. |
 | `global.css` | The docs site's stylesheet (`modo.config.ts` `css`): imports `base.css`, then the modo-only focus revert and the docs chrome. |
 | `preset.ts` | The UnoCSS preset (theme and token utilities), shipped as `@justanarthur/modo-ui/unocss`. |
 | `uno.config.ts`, `vite.ts` | The UnoCSS setup of the docs site and the prebuilt CSS (see below). |
 | `index.ts`, `bunup.config.ts`, `scripts/build-css.ts` | The package build: `bun run build` writes the components, their types and the stylesheets to `dist/`. The docs site builds with `bun run build:docs` into `docs-dist/`. |
-| `scripts/exports.ts`, `scripts/use-client.ts`, `scripts/check-singletons.ts` | Packaging around that build. `exports.ts` (first step of `bun run build`) writes one `./lib/<name>` export per `lib/` module into `package.json`, plus `./components/*/variants` and `./blocks/*/variants` for the items' server-callable `variants.ts` entries; commit the `package.json` it leaves. `use-client.ts` (after bunup) puts `"use client"` on the emitted modules that render, call a hook or create a context, or use a binding from one; pure helpers (`cn`, class tables, springs, `variants.ts`) and re-export entries stay directive-free so a React Server Component can call them (`--list` prints the split). `check-singletons.ts` (`bun run check:dist`) checks that every React context and the `toast()` manager exist once in `dist/`, and that every entry has its `.d.ts`. |
+| `scripts/exports.ts`, `scripts/use-client.ts`, `scripts/check-singletons.ts` | Packaging around that build. `exports.ts` (first step of `bun run build`) writes one `./lib/<name>` export per `lib/` module into `package.json`, plus `./components/*/variants` and `./blocks/*/variants` for the items' server-callable `variants.ts` entries; commit the `package.json` it leaves. `use-client.ts` (after bunup) puts `"use client"` on the emitted modules that render, call a hook or create a context, or use a binding from one; pure helpers (`cn`, class tables, springs, `variants.ts`) and re-export entries stay directive-free so a React Server Component can call them (`--list` prints the split). `check-singletons.ts` (`bun run check:dist`) checks that every React context and the `toast()` manager exist once in `dist/`, and that every entry has its `.d.ts`. `typesVersions` in `package.json` maps every public subpath to `dist/**/*.d.ts`, so `moduleResolution: node` consumers do not type-check the shipped source. |
 | `lib/` | FF's shared system files (upstream `lib/`, `hooks/` and the fluid-hover highlight, flat, upstream names), imported relatively by items. modo only scans the tier folders, so it never mistakes them for items. |
 | `modo.components.tsx` | Components only the docs site uses: the `Icon`, `Select` and `DocsNav` shell-slot adapters and the `ThemeSwitcher` panel item, picked in `modo.config.ts` by export name (`./modo.components.tsx#Select`). |
 | `primitives/<id>/` | FF's "System" pages: `index.tsx` (component + TSDoc prose) and `examples.mdx`, pulled in by `@example {@include ./examples.mdx}`. |
@@ -178,7 +180,7 @@ positioning) are ported.
 | — (new) | `lib/inert.ts` | Local addition: `inert` that holds on React 18 and 19 (18 passes it through as an unknown attribute and needs `''`, 19 reads a boolean and drops `''`): `inertProps(on)` to spread, `markInert` as a ref for an element that is always inert; Sidebar's folded and collapsed parts, Tabs' ghost label |
 | — (new) | `lib/focus-ring.tsx` | Local addition: `FocusRing`, the one keyboard ring a list panel draws, 2px outside the focused row and springing between rows (a snap under reduced motion); radius from the surrounding shape, or pinned with `shape` (popups pin `rounded`); Dropdown and its submenus, NavigationMenu, Select |
 | — (new) | `lib/scroll-column.tsx` | Local addition: `ScrollColumn`, the scrolling option list beside a calendar (months, years, hours, minutes) or a strip above it: the pick gets a dot, a run of `inView` options one band, the followed option stays centred; fluid hover, listbox semantics, arrow keys; `dividedColumns` puts a hairline between neighbours; `layout="grid"` (`columns` 2–6, 2-D fluid hover, row-wise arrow keys) after utegsk/ui's 0.14 grid picker |
-| — (new) | `lib/slot.ts` | Local addition: Dialog's `render` / `asChild` slot shape (`SlotProps`, `slotRender`), shared by every overlay part that wraps a control; `children` fill a `render` element that has none of its own (Base UI semantics), and `nativeButton` reaches the Base UI triggers and closes (`false` for a `<div>` or link); `cloneSlot` / `mergeSlotProps` / `composeRefs` are Radix Slot's merge (child props win, `on*` handlers chain child-first, `className` joins, `style` merges, refs compose; React 18 `forwardRef` and React 19 `props.ref`) |
+| — (new) | `lib/slot.ts` | Local addition: Dialog's `render` / `asChild` slot shape (`SlotProps`, `slotRender`), shared by every overlay part that wraps a control; `children` fill a `render` element that has none of its own (Base UI semantics), and `nativeButton` reaches the Base UI triggers and closes (`false` for a `<div>` or link); `cloneSlot` / `mergeSlotProps` / `composeRefs` are Radix Slot's merge (child props win, `on*` handlers chain child-first, `className` joins, `style` merges, refs compose; React 18 `forwardRef` and React 19 `props.ref`); `slotId(el, id)` hands a slot element's own `id` to the Base UI part, so triggers and Field.Control register the id the DOM carries |
 | — (new) | `lib/morph-part.tsx` | Local addition: `MorphPart` (shared parts over a motion `layoutId`, after motion-primitives' morphing dialog) and the scope contexts overlays provide |
 | — (new) | `lib/goo-indicator.tsx` | Local addition: `GooIndicator` (melts between items, a lingering blob follows it) and `GooLayer` (goo over the shapes' coverage, filled with their own token, on only while moving), on the engine's `GOO_MATRIX` / `GOO_BLUR_RATIO` |
 | — (new) | `lib/morph-layers.tsx` | Local addition: `MorphSurface`, the renderer (shapes layer with beUI's goo filter plus a `--shadow-color` hairline around the melted shape, surface background and shadow, clipped content) |
@@ -187,7 +189,7 @@ positioning) are ported.
 
 | Upstream | Local |
 |---|---|
-| `app/globals.css` §1 tokens | `tokens/colors.css`, with HEX converted to oklch. The surface ladder and shadows live in `primitives/surface/surface.css`. Local addition: the `--status-*` roles (toast states), by reference to the badge palette, `--destructive` and `--brand`. |
+| `app/globals.css` §1 tokens | `tokens/colors.css`, with HEX converted to oklch. The surface ladder and shadows live in `primitives/surface/surface.css`. Local addition: the `--status-*` roles (toast states), by reference to the badge palette, `--destructive` and `--brand`; and the primary-action hooks `--primary`, `--primary-hover`, `--primary-active`, `--primary-foreground`, `--shadow-button-primary` (defaults: the ink, its 90% / 80% mixes toward the background, the background, a no-op shadow), read by Button's `primary` variant and by `bg-primary` / `text-primary-foreground`. |
 | `app/globals.css` §2 theme switching | `base.css` (`color-scheme`, `--overlay`) and `surface.css` (`--shadow-N` per scheme) |
 | `app/globals.css` §3 `@theme inline` | `preset.ts` `theme` |
 | `app/globals.css` `--fs-*` + `@utility text-*` | `tokens/typography.css` `--text-*` and `preset.ts` `utilities` |
@@ -232,11 +234,11 @@ only what is specific to it:
 
 | Item | Upstream | Local | Specific modifications |
 |---|---|---|---|
-| `Accordion` | `registry/base/accordion.tsx` | `components/accordion/index.tsx` | open state runs through `useControllableState` (see [Behavior additions](#behavior-additions)); standalone `Accordion` accepts `highlight` and passes it to its items as their default; the panel morphs out of its row (a shape grows from the press point into the item, content clipped by it, layout height on its bottom edge; the `"item"` tint is that shape melted into the row through `GooFilter`), `effect` / `tier` on `Accordion.Content`; the group's hover highlight and focus ring snap with reflowed rows; statics `.Group/.Item/.Trigger/.Content`; local Trigger `icon` / `weightShift`, Content `contentClassName` |
+| `Accordion` | `registry/base/accordion.tsx` | `components/accordion/index.tsx` | open state runs through `useControllableState` (see [Behavior additions](#behavior-additions)); standalone `Accordion` accepts `highlight` and passes it to its items as their default; the panel morphs out of its row (a shape grows from the press point into the item, content clipped by it, layout height on its bottom edge; the `"item"` tint is that shape melted into the row through `GooFilter`), `effect` / `tier` on `Accordion.Content`; the group's hover highlight and focus ring snap with reflowed rows; statics `.Group/.Item/.Trigger/.Content`; local Trigger `icon` / `weightShift`, Content `contentClassName`; `Accordion.Trigger` takes `render` / `asChild` (`lib/slot.ts`) |
 | `AlertDialog` | — (local) | `components/overlays/alert-dialog/index.tsx` (+ `pending-demo.tsx`) | Base UI AlertDialog root (always modal, no outside-press dismissal) over Dialog's own parts and `DialogState`, so it morphs like Dialog; `AlertDialog.Content` drops the ✕ by default; statics as Dialog's; `AlertDialog.Action` (promise-aware confirm: Button `loading`, every close blocked via `details.cancel()` while pending, closes on resolve, `onError` on reject; a controlled `pending` makes a plain `onClick` close once `pending` goes true and back to false) and `AlertDialog.Cancel` (Close as a ghost Button, disabled while pending); `pending-demo.tsx` is the docs stage; `onOpenChange(open, details)` with Base UI's change details (an action's own close reports `'imperative-action'`) |
 | `Avatar` | — (local) | `components/avatar/index.tsx` | Base UI Avatar (image loading status, the fallback's `delay`); one control tall (36 / 28px compact), `shape` circle or square; a 1px inset image edge after FF's media outline (`outline-image-edge`); the image fades in on the fast tier; statics `.Image/.Fallback` |
 | `Badge` | `registry/default/badge.tsx` | `components/badge/index.tsx` | `variant` re-declared (it came from cva's `VariantProps` upstream); changes animate: a new label or variant springs the width (inner content span, `spring.moderate`) while the label blur-crossfades, a new color fades, the dot scales in and out; "Changes" example over a local `change-demo.tsx` stage; `badgeColors`, `badgeVariants` and the size aliases moved to `variants.ts` (server-callable) and re-exported; local variant `outline` (the dot badge's neutral hairline without the dot; `color` has no effect) |
-| `Button` | `registry/base/button.tsx` | `components/button/index.tsx` | `variant`/`disabled`/`children` re-declared; extra Sizes / Active / As-child / Loading morph examples; `loading` folds the surface into a circle around the spinner and back (`spring.moderate`, box unchanged), label and spinner crossfade, `aria-busy`, the disabled dim fades; "Loading morph" example over a local `loading-demo.tsx` stage; also serves modo's chrome Button (`shell.Button`); `buttonVariants` and the size aliases moved to `variants.ts` (server-callable) and re-exported; local variants for shadcn-style hosts: `outline` (renders as `tertiary`), `destructive` / `success` (their `-strong` hue as text on a translucent wash that deepens on hover and press, never a solid fill), `link` (underlined foreground text on the control height); size `xs` → `compact`; `buttonVariants` resolves the size aliases and takes `surface` (fill/ring/wash/hover/press/`aria-disabled` as root classes, for an anchor host); `loading` keeps focus (`focusableWhenDisabled`; `asChild` sets `aria-disabled` and blocks clicks) |
+| `Button` | `registry/base/button.tsx` | `components/button/index.tsx` | `variant`/`disabled`/`children` re-declared; extra Sizes / Active / As-child / Loading morph examples; `loading` folds the surface into a circle around the spinner and back (`spring.moderate`, box unchanged), label and spinner crossfade, `aria-busy`, the disabled dim fades; "Loading morph" example over a local `loading-demo.tsx` stage; also serves modo's chrome Button (`shell.Button`); `buttonVariants` and the size aliases moved to `variants.ts` (server-callable) and re-exported; local variants for shadcn-style hosts: `outline` (renders as `tertiary`), `destructive` / `success` (their `-strong` hue as text on a translucent wash that deepens on hover and press, never a solid fill), `link` (underlined foreground text on the control height); size `xs` → `compact`; the `primary` variant reads the `--primary*` / `--shadow-button-primary` hooks (the same ink look by default); `buttonVariants` resolves the size aliases and takes `surface` (fill/ring/wash/hover/press/`aria-disabled` as root classes, for an anchor host); `loading` keeps focus (`focusableWhenDisabled`; `asChild` sets `aria-disabled` and blocks clicks) |
 | `Calendar` | — (local, on react-day-picker) | `components/inputs/date-time/calendar/index.tsx` (+ `use-month-window.ts`) | DayPicker props pass through (as shadcn's Calendar); styled through `classNames` and custom `Month` / `Day` / `DayButton` (no react-day-picker stylesheet); one scrolling list of months rendered as a 25-month window that moves as you scroll; a pinned weekday row, muted weekends, today's dot; FF's fills (the pick `bg-foreground text-background` like the primary button, a range `bg-active`, its preview `bg-hover`); month and year columns that mark the month being read and jump on click, before or after the days (`columnsSide`), turning into strips when narrow; `extraColumns` / `extraColumnsSide` for the date picker's time; `columnLabels`; a named `CalendarProps` and a `ReactElement` return; the month window's edge margin is capped, so a list with no height of its own no longer loops |
 | `Card` | `registry/default/card.tsx` | `components/card/index.tsx` | `next/link` → plain anchors (stretched card link, `CardButton`'s `href` form); statics `.Group/.Header/.Title/.Description/.Action/.Content/.Footer/.Media/.Image/.Eyebrow/.Feature/.Button/.Divider`; local `border="outlined"` on a standalone card (the outlined group's hairline frame; inside a group the group decides); local `Card.Divider` (a full-bleed hairline between the card's parts, vertical in an inline card; the Separator primitive); local Title `as`, Content `bodyText` |
 | `Checkbox` (upstream `CheckboxItem`), `Checkbox.Group` (upstream `CheckboxGroup`) | `registry/base/checkbox-group.tsx` | `components/inputs/checkbox/index.tsx` | renamed; the row stands alone too (own state from `defaultChecked`, `onCheckedChange`, own hover and focus ring, `size`); rows numbered by the group (`lib/row-index.tsx`), so `index` is optional; uncontrolled mode + group-level callback; item `checked`/`onToggle` optional, falling back to group context; arrow-key focus guarded for `noUncheckedIndexedAccess`; shared `useSelectionRuns`, picks melt and split through the goo; `label` optional, any node (named via `aria-labelledby`); without a label and outside a group the checkbox is a bare box, Base UI's Checkbox.Root itself (`id` / `<label htmlFor>`, `aria-label`, `name` / `value` / `required` for forms), keeping its border when checked; `indeterminate` / `checked="indeterminate"` shows the icon set's `minus`, swapped with the self-drawing check in one cell; `disabled` dims a row and takes it out of the group's hover and arrow keys |

package/components/accordion/examples.mdx

@@ -1,4 +1,5 @@
 import Accordion from './index'
+import Button from '../button'
 import { ArrowRight } from 'lucide-react'
 
 # Standalone
@@ -201,3 +202,26 @@ By default the trigger renders its label twice: a hidden semibold copy reserves
     </Accordion.Content>
   </Accordion.Item>
 </Accordion.Group>
+
+# Your own trigger
+
+`asChild` (or `render`) makes your element the trigger, so a Button, a link-styled control or anything else can open the item. It is rendered as it is: the row's label copy, the chevron and the row padding are not added, so the element brings its own content and look. Base UI still wires `aria-expanded`, `aria-controls`, `data-panel-open` and the keys onto it, so style the open state with `data-[panel-open]`.
+
+<Accordion.Group type="single" collapsible defaultValue="one">
+  <Accordion.Item value="one" index={0}>
+    <Accordion.Trigger asChild>
+      <Button variant="ghost" className="w-full justify-start">Billing</Button>
+    </Accordion.Trigger>
+    <Accordion.Content>
+      Invoices, payment methods and receipts.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="two" index={1}>
+    <Accordion.Trigger render={<Button variant="ghost" className="w-full justify-start" />}>
+      Security
+    </Accordion.Trigger>
+    <Accordion.Content>
+      Passwords, sessions and two-factor.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Group>

package/components/accordion/index.tsx

@@ -39,6 +39,9 @@
  *   focus ring snap with rows a morph pushes around (instead of springing
  *   after them over the content) until the pointer or focus moves. `effect`
  *   and `tier` on `AccordionContent`; reduced motion snaps, as before.
+ * - `AccordionTrigger` takes `render` / `asChild` (`lib/slot.ts`, local): the element is
+ *   Base UI's Trigger as it is, inside the same row and header, with no row look, label
+ *   copy or chevron. Its own `id` is the one Base UI registers (`slotId`).
  */
 
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
@@ -70,6 +73,7 @@ import { GooFilter } from '../../lib/morph-layers'
 import { useReduceMotion } from '../../lib/reduced-motion'
 import { useShape } from '../../lib/shape-context'
 import { type SizeVariant, useSize } from '../../lib/size-context'
+import { type SlotProps, slotId, slotRender } from '../../lib/slot'
 import { spring } from '../../lib/springs'
 import { useControllableState } from '../../lib/use-controllable-state'
 import { useFluidHover, useRegisterFluidHoverItem } from '../../lib/use-fluid-hover'
@@ -515,7 +519,9 @@ type AccordionComponent = ForwardRefExoticComponent<AccordionProps & RefAttribut
  * Statics: Accordion.Group (the grouped root: type, collapsible,
  * defaultValue, value, onValueChange, highlight, size), Accordion.Item (value,
  * index, disabled), Accordion.Trigger (the row that toggles its item: `icon`
- * swaps or hides the chevron, `weightShift={false}` renders a rich label once)
+ * swaps or hides the chevron, `weightShift={false}` renders a rich label once,
+ * `render` / `asChild` make your own element the trigger, unstyled and without
+ * chevron or label copy)
  * and Accordion.Content (the collapsible panel: `effect` — `'goo'` or a plain
  * `'morph'` — the spring `tier`, `'slow'` or `'moderate'`, and
  * `contentClassName` for the inner row).
@@ -668,9 +674,9 @@ AccordionItem.displayName = 'AccordionItem'
 
 // ─── AccordionTrigger ────────────────────────────────────────────────────────
 
-interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
-  /** Trigger label content. */
-  children: ReactNode
+interface AccordionTriggerProps extends Omit<SlotProps, 'children'> {
+  /** Trigger label content. With `asChild`, the single child element that becomes the trigger instead, and `render` takes an element the same way: that element is rendered as it is, the whole trigger, look included. It gets Base UI's `aria-expanded`, `aria-controls`, `data-panel-open` and key handling, and sits in the same row, but the label copy, `weightShift`, `icon` and chevron are not rendered (give it its own content), nor are the trigger's padding and ring. */
+  children?: ReactNode
   /** The glyph at the row's end, which turns a quarter turn when the item opens (so give it a right-pointing one), or `false` for none. Defaults to the icon context's `chevron-right`. */
   icon?: IconComponent | false
   /** Whether the label gets heavier while the item is open. On, the label renders twice in one grid cell (a hidden semibold copy reserves its width, so nothing reflows); off, it renders once and keeps whatever weight its content has, which suits rich content such as a whole `Card.Header` that would otherwise be duplicated in the DOM. The label sits inside the trigger `<button>`, so give it phrasing content (spans), not block elements such as a `div`-based header. Rich content that sets its own text colour does not change on open: only the chevron, the highlight and the open tint signal the state. Defaults to `true`. */
@@ -678,7 +684,8 @@ interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
-  ({ children, className, icon, weightShift = true, ...props }, ref) => {
+  ({ children, className, icon, weightShift = true, render, asChild, nativeButton, ...props }, ref) => {
+    const el = slotRender(render, asChild, children)
     const ChevronRight = useIcon('chevron-right')
     const Glyph = icon === false ? null : (icon ?? ChevronRight)
     const groupCtx = useAccordionGroup()
@@ -703,15 +710,21 @@ const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
       <AccordionPrimitive.Header render={<div />}>
         <AccordionPrimitive.Trigger
           ref={ref as React.Ref<HTMLElement>}
-          className={cn(
-            `relative z-10 flex items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} ${sizeClasses.variant === 'compact' ? 'py-1' : 'py-2'} w-full cursor-pointer outline-none select-none`,
-            !groupCtx?.grouped && 'focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-0',
-            className,
-          )}
+          // A `render` / `asChild` element is the whole trigger: its own look, no row padding or ring.
+          className={
+            el
+              ? className
+              : cn(
+                  `relative z-10 flex items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} ${sizeClasses.variant === 'compact' ? 'py-1' : 'py-2'} w-full cursor-pointer outline-none select-none`,
+                  !groupCtx?.grouped &&
+                    'focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-0',
+                  className,
+                )
+          }
           {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+          {...(el ? { render: el, nativeButton, id: slotId(el, props.id) } : {})}
         >
-          {/* Label with dual-layer text */}
-          {weightShift ? (
+          {el ? undefined : weightShift ? (
             <span className={cn('inline-grid flex-1 text-left', sizeClasses.text)}>
               <span className="col-start-1 row-start-1 invisible weight-semibold" aria-hidden="true">
                 {children}
@@ -739,7 +752,7 @@ const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
           )}
 
           {/* Chevron */}
-          {Glyph && (
+          {!el && Glyph && (
             <motion.span
               className="shrink-0 inline-flex items-center justify-center"
               animate={{ rotate: isOpen ? 90 : 0 }}

package/components/button/index.tsx

@@ -37,6 +37,12 @@
  *   never a solid fill; `link` is foreground text on the control height with no padding,
  *   whose always-drawn underline fades in on hover (and shows while `active`). Size `xs`
  *   resolves to `compact`: the ladder has two steps.
+ * - The `primary` fill and label read the theme hooks `--primary`, `--primary-hover`,
+ *   `--primary-active`, `--primary-foreground` and `--shadow-button-primary`
+ *   (`tokens/colors.css`; `bg-primary` / `text-primary-foreground`) instead of the
+ *   ink and `text-background`, so a host can recolour it. Defaults are the old values.
+ *   The shadow hook is appended to the layer's own shadow (it sits on the fill layer:
+ *   a shadow on the root would be covered by it). `variants.ts` mirrors it on the root.
  */
 
 import { Button as ButtonPrimitive } from '@base-ui/react/button'
@@ -94,10 +100,12 @@ interface ButtonProps
    Pressing collapses the spread, shrinking the surface by exactly 1px per
    side at any width — a scale would warp (2% of a 400px button is 8px
    sideways but under 1px vertically). Fill colors are opaque color-mix()es
-   rather than alpha so the fill and its spread ring never seam. */
+   rather than alpha so the fill and its spread ring never seam. The primary
+   fill reads the `--primary*` hooks; `--shadow-button-primary` joins the
+   layer's shadow list after the ring, at rest and pressed. */
 const bgVariants: Record<string, string> = {
   primary:
-    '[--btn-bg:var(--foreground)] group-hover:[--btn-bg:color-mix(in_oklab,var(--foreground)_90%,var(--background))] group-active:[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]',
+    '[--btn-bg:var(--primary)] group-hover:[--btn-bg:var(--primary-hover)] group-active:[--btn-bg:var(--primary-active)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg),var(--shadow-button-primary)] group-active:shadow-[0_0_0_0px_var(--btn-bg),var(--shadow-button-primary)]',
   secondary:
     '[--btn-bg:var(--accent)] group-hover:[--btn-bg:color-mix(in_oklab,var(--accent)_80%,var(--background))] group-active:[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]',
   // The border ring is an outer 1px shadow at rest that hands off to an
@@ -124,7 +132,7 @@ const bgVariants: Record<string, string> = {
    geometric press-collapse still reacts on top. */
 const activeBgVariants: Record<string, string> = {
   primary:
-    '[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]',
+    '[--btn-bg:var(--primary-active)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg),var(--shadow-button-primary)] group-active:shadow-[0_0_0_0px_var(--btn-bg),var(--shadow-button-primary)]',
   secondary:
     '[--btn-bg:var(--accent)] bg-[var(--btn-bg)] shadow-[0_0_0_1px_var(--btn-bg)] group-active:shadow-[0_0_0_0px_var(--btn-bg)]',
   tertiary:

package/components/button/variants.ts

@@ -7,7 +7,9 @@
  * - The class recipe (`buttonVariants`) and the size aliases, split out of
  *   `index.tsx` so server code can call them: no JSX, hooks or contexts here.
  *   `index.tsx` re-exports them.
- * - Styling reads DS tokens (see `index.tsx`).
+ * - Styling reads DS tokens (see `index.tsx`). The `primary` variant reads the theme hooks
+ *   `--primary*` and `--shadow-button-primary` (`tokens/colors.css`), also on the `surface`
+ *   root (the shadow rides `shadow-[…]`, so it composes with the focus ring).
  * - Variants `outline` (an alias of `tertiary`), `destructive`, `success` and
  *   `link`, and the `xs` size alias (→ `compact`), for hosts with a
  *   shadcn-style API; see `index.tsx` for the look.
@@ -34,7 +36,7 @@ const SURFACED: SurfacedVariant[] = ['primary', 'secondary', 'tertiary', 'outlin
    (`index.tsx` bgVariants); plain `hover:` / `active:` instead of `group-*`. */
 const surfaceVariants: Record<SurfacedVariant, string> = {
   primary:
-    '[--btn-bg:var(--foreground)] hover:[--btn-bg:color-mix(in_oklab,var(--foreground)_90%,var(--background))] active:[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)]',
+    '[--btn-bg:var(--primary)] hover:[--btn-bg:var(--primary-hover)] active:[--btn-bg:var(--primary-active)] bg-[var(--btn-bg)] shadow-[var(--shadow-button-primary)]',
   secondary:
     '[--btn-bg:var(--accent)] hover:[--btn-bg:color-mix(in_oklab,var(--accent)_80%,var(--background))] active:[--btn-bg:var(--accent)] bg-[var(--btn-bg)]',
   tertiary: 'shadow-[inset_0_0_0_1px_var(--border)] hover:bg-hover active:bg-active',
@@ -54,7 +56,7 @@ const buttonRecipe = cva(
   {
     variants: {
       variant: {
-        primary: 'text-background',
+        primary: 'text-primary-foreground',
         secondary: 'text-foreground',
         tertiary: 'text-foreground',
         outline: 'text-foreground',

package/components/card/index.tsx

@@ -39,6 +39,7 @@ import {
   forwardRef,
   type HTMLAttributes,
   isValidElement,
+  type MouseEventHandler,
   type ReactElement,
   type ReactNode,
   type Ref,
@@ -235,8 +236,8 @@ CardGroup.displayName = 'CardGroup'
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
   /** Compositional parts: Card.Image, Card.Media, Card.Header, Card.Content, Card.Footer. */
   children?: ReactNode
-  /** Makes the whole card a clickable target (stretched button); fluid hover previews it. */
-  onClick?: () => void
+  /** Makes the whole card a clickable target (stretched button); fluid hover previews it. Receives the click event, or takes no argument. */
+  onClick?: MouseEventHandler<HTMLElement>
   /** Makes the whole card a link (stretched anchor). */
   href?: string
   /** Opens href in a new tab. Defaults to `false`. */

package/components/inputs/field/index.tsx

@@ -19,7 +19,7 @@ import {
 } from 'react'
 import { FIELD_TEXT_INSET, FieldStateContext, useFieldState } from '../../../lib/field-classes'
 import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { slotRender } from '../../../lib/slot'
+import { slotId, slotRender } from '../../../lib/slot'
 import { cn } from '../../../lib/utils'
 import { SizeProvider } from '../../../primitives/sizes'
 import { Label } from '../input'
@@ -143,7 +143,8 @@ interface FieldControlProps {
 }
 
 function FieldControl({ render, asChild, children }: FieldControlProps) {
-  return <BaseField.Control render={slotRender(render, asChild, children)} />
+  const el = slotRender(render, asChild, children)
+  return <BaseField.Control render={el} id={slotId(el)} />
 }
 
 interface ProvideFieldStateProps {

package/components/inputs/select/index.tsx

@@ -88,7 +88,7 @@ import { isDisabledRow, popupScrollAreaClass, popupViewportClass } from '../../.
 import { RowOrderContext, useRowOrder, useRowSlot } from '../../../lib/row-order'
 import { shapeMap, useShape } from '../../../lib/shape-context'
 import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { type SlotProps, slotRender } from '../../../lib/slot'
+import { type SlotProps, slotId, slotRender } from '../../../lib/slot'
 import { spring } from '../../../lib/springs'
 import { SURFACE_BG, SURFACE_SHADOW } from '../../../lib/surface-classes'
 import { SurfaceProvider, useSurface } from '../../../lib/surface-context'
@@ -482,6 +482,7 @@ const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
                 )
           }
           {...props}
+          id={slotId(el, props.id)}
         >
           <span className={cn('flex items-center min-w-0 flex-1', sizeClasses.gap)}>
             {Icon && (

package/components/overlays/dialog/index.tsx

@@ -63,7 +63,7 @@ import { MorphSurface } from '../../../lib/morph-layers'
 import { MorphPartScope } from '../../../lib/morph-part'
 import { useShape } from '../../../lib/shape-context'
 import { useSize, useSizeVariant } from '../../../lib/size-context'
-import { type SlotProps, slotRender } from '../../../lib/slot'
+import { type SlotProps, slotId, slotRender } from '../../../lib/slot'
 import { SURFACE_BG, SURFACE_SHADOW } from '../../../lib/surface-classes'
 import { SurfaceProvider, useSurface } from '../../../lib/surface-context'
 import { useControllableState } from '../../../lib/use-controllable-state'
@@ -86,7 +86,7 @@ const useDialogState = () => useContext(DialogContext)
 const DialogTrigger = forwardRef<HTMLButtonElement, DialogSlotProps>(({ render, asChild, children, ...props }, ref) => {
   const el = slotRender(render, asChild, children)
   return el ? (
-    <DialogPrimitive.Trigger ref={ref} render={el} {...props} />
+    <DialogPrimitive.Trigger ref={ref} render={el} {...props} id={slotId(el, props.id)} />
   ) : (
     <DialogPrimitive.Trigger ref={ref} {...props}>
       {children}

package/components/overlays/dropdown/index.tsx

@@ -119,6 +119,7 @@ import { isDisabledRow, popupScrollAreaClass, popupViewportClass } from '../../.
 import { RowOrderContext, useRowOrder, useRowSlot } from '../../../lib/row-order'
 import { shapeMap } from '../../../lib/shape-context'
 import { type SizeVariant, useSize } from '../../../lib/size-context'
+import { slotId } from '../../../lib/slot'
 import { spring } from '../../../lib/springs'
 import { SURFACE_BG, SURFACE_SHADOW } from '../../../lib/surface-classes'
 import { SurfaceProvider, useSurface } from '../../../lib/surface-context'
@@ -754,9 +755,14 @@ type DropdownTriggerProps = MenuTriggerProps & {
 const DropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(
   ({ asChild, render, children, ...props }, ref) =>
     asChild && isValidElement(children) ? (
-      <BaseMenu.Trigger ref={ref} render={children as ReactElement<Record<string, unknown>>} {...props} />
+      <BaseMenu.Trigger
+        ref={ref}
+        render={children as ReactElement<Record<string, unknown>>}
+        {...props}
+        id={slotId(children, props.id)}
+      />
     ) : (
-      <BaseMenu.Trigger ref={ref} render={render} {...props}>
+      <BaseMenu.Trigger ref={ref} render={render} {...props} id={slotId(render, props.id)}>
         {children}
       </BaseMenu.Trigger>
     ),

package/components/overlays/popover/index.tsx

@@ -25,7 +25,7 @@ import {
 } from 'react'
 import { MorphSurface } from '../../../lib/morph-layers'
 import { useShape } from '../../../lib/shape-context'
-import { type SlotProps, slotRender } from '../../../lib/slot'
+import { type SlotProps, slotId, slotRender } from '../../../lib/slot'
 import { SURFACE_BG, SURFACE_SHADOW } from '../../../lib/surface-classes'
 import { SurfaceProvider, useSurface } from '../../../lib/surface-context'
 import { useControllableState } from '../../../lib/use-controllable-state'
@@ -52,7 +52,7 @@ const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(
   ({ render, asChild, children, ...props }, ref) => {
     const el = slotRender(render, asChild, children)
     return el ? (
-      <PopoverPrimitive.Trigger ref={ref} render={el} {...props} />
+      <PopoverPrimitive.Trigger ref={ref} render={el} {...props} id={slotId(el, props.id)} />
     ) : (
       <PopoverPrimitive.Trigger ref={ref} {...props}>
         {children}

package/components/overlays/tooltip/index.tsx

@@ -58,7 +58,7 @@ import {
 } from 'react'
 import { MorphSurface } from '../../../lib/morph-layers'
 import { useShape } from '../../../lib/shape-context'
-import { type SlotProps, slotRender } from '../../../lib/slot'
+import { type SlotProps, slotId, slotRender } from '../../../lib/slot'
 import { type MorphOrigin, useMorph, useMorphOrigin } from '../../../lib/use-morph'
 import { cn } from '../../../lib/utils'
 
@@ -263,7 +263,7 @@ const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(
     // trigger inherits it from the provider.
     const shared = { ref, delay, closeDelay, onPointerMove: followCursor ? handleMove : onPointerMove, ...props }
     return el ? (
-      <TooltipPrimitive.Trigger {...shared} render={el} />
+      <TooltipPrimitive.Trigger {...shared} render={el} id={slotId(el, props.id)} />
     ) : (
       <TooltipPrimitive.Trigger {...shared}>{children}</TooltipPrimitive.Trigger>
     )

package/dist/base.css

@@ -162,6 +162,33 @@
   --syntax-sign: var(--muted-foreground);
 }
 
+/* ── Primary action (theme hooks) ──
+   What the primary Button paints, as hooks a host re-points to recolour it
+   (a brand fill with a lit edge) without forking the component:
+     --primary             the fill. Defaults to the ink.
+     --primary-hover       its hover fill, 10% toward --background.
+     --primary-active      its pressed fill, 20% toward --background.
+     --primary-foreground  the label on the fill. Defaults to --background.
+     --shadow-button-primary  an extra shadow list for the fill layer, drawn on
+                           top of the layer's own press ring (a highlight,
+                           an outline, a drop). The default is an invisible
+                           no-op that stays valid inside a comma list.
+   All five default to what the primary Button always drew, so nothing
+   changes until one is overridden. Override --primary-hover and
+   --primary-active with it, since their defaults mix from the value
+   --primary has where they are declared. Re-point them on `:root, .light,
+   .dark` (or on `:root` alone when the value is the same in both schemes).
+   `bg-primary`, `text-primary` and `text-primary-foreground` read them.
+   Zero specificity (:where): a host's override wins from any stylesheet
+   order, `<html class="dark">` included. */
+:where(:root, .light, .dark) {
+  --primary: var(--foreground);
+  --primary-hover: color-mix(in oklab, var(--primary) 90%, var(--background));
+  --primary-active: color-mix(in oklab, var(--primary) 80%, var(--background));
+  --primary-foreground: var(--background);
+  --shadow-button-primary: 0 0 #0000;
+}
+
 /* ── Badge palette ──
    Badge's `color` hues (upstream hex, as exact oklch). Constant across
    schemes; the solid variant mixes each 15% into --background. */
@@ -402,6 +429,9 @@
  *   :focus-visible fallback), html.transitioning, native scrollbars,
  *   .scrollbar-hide, shimmer + spinner keyframes, .scroll-fade(-x).
  *
+ * Local scope change: the inline code chip applies inside the docs shell, a
+ * `data-modo="prose"` block or a `.modo-prose` container, not to every <code>.
+ *
  * Local value changes: the inline code chip and the shimmer stops read color
  * tokens instead of upstream's hex (light code chip `--muted`, dark
  * `--surface-4`; shimmer dim → bright runs `--muted-foreground` →
@@ -495,10 +525,11 @@ body {
     text-wrap: pretty;
   }
 
-  /* Inline code chips: bare <code> in prose gets its own ground. Excludes
-     code inside <pre>. Base layer, so a page can still override with
-     utilities. */
-  code:not(pre code) {
+  /* Inline code chips, for prose that opts in: the docs shell (`data-modo="app"`),
+     a modo prose block (`data-modo="prose"`) or a `.modo-prose` container. A bare
+     <code> in an app is left alone. Excludes code inside <pre>. Base layer, so a
+     page can still override with utilities. */
+  :where([data-modo="app"], [data-modo="prose"], .modo-prose) code:not(pre code) {
     background: light-dark(var(--muted), var(--surface-4));
     border-radius: 4px;
     padding: 1px 4px;

package/dist/blocks/sidebar-app/index.js

@@ -1,24 +1,24 @@
 import {
   SidebarApp2
-} from "../../shared/components-58rjf115.js";
-import"../../shared/components-cfn30fa8.js";
+} from "../../shared/components-47226105.js";
+import"../../shared/components-9n43qf8y.js";
 import"../../shared/components-kswxnm3h.js";
 import"../../shared/components-rrbpmfx4.js";
-import"../../shared/components-f1f0qvxg.js";
+import"../../shared/components-nd1baxp1.js";
 import"../../shared/components-6zng858q.js";
 import"../../shared/components-124epb7f.js";
 import"../../shared/components-z3v0n0de.js";
-import"../../shared/components-tknms5b7.js";
+import"../../shared/components-khcnzj3g.js";
 import"../../shared/components-8tt3xbb5.js";
 import"../../shared/components-tz4gaf1v.js";
 import"../../shared/components-8nwsqjn8.js";
 import"../../shared/components-9as3rf68.js";
-import"../../shared/components-rz7wh3jx.js";
+import"../../shared/components-vqqapw72.js";
 import"../../shared/components-krtx3m5b.js";
-import"../../shared/components-09gadh7e.js";
+import"../../shared/components-030n1m1v.js";
 import"../../shared/components-h6p86be3.js";
 import"../../shared/components-vf45j12c.js";
-import"../../shared/components-0d6zzjjz.js";
+import"../../shared/components-mrbaxt8q.js";
 import"../../shared/components-4y816hwp.js";
 import"../../shared/components-b1e239g3.js";
 import"../../shared/components-dhgk6mbt.js";
@@ -28,8 +28,8 @@ import"../../shared/components-pw06rbxq.js";
 import"../../shared/components-yhgq0qxx.js";
 import"../../shared/components-awra5sff.js";
 import"../../shared/components-dcc02hs2.js";
-import"../../shared/components-7d4r7hh1.js";
-import"../../shared/components-f0xfpkhh.js";
+import"../../shared/components-4swzve2d.js";
+import"../../shared/components-4vfm04wq.js";
 import"../../shared/components-tz1fv35x.js";
 import"../../shared/components-2z48g4fp.js";
 import"../../shared/components-drxrtnp2.js";

package/dist/components/AI/input-message/index.js

@@ -2,10 +2,10 @@ import {
   FileThumbnail2,
   InputMessage2,
   input_message_default
-} from "../../../shared/components-jmft19kz.js";
-import"../../../shared/components-rz7wh3jx.js";
+} from "../../../shared/components-bwy8775y.js";
+import"../../../shared/components-vqqapw72.js";
 import"../../../shared/components-vf45j12c.js";
-import"../../../shared/components-0d6zzjjz.js";
+import"../../../shared/components-mrbaxt8q.js";
 import"../../../shared/components-4y816hwp.js";
 import"../../../shared/components-b1e239g3.js";
 import"../../../shared/components-dhgk6mbt.js";
@@ -15,8 +15,8 @@ import"../../../shared/components-pw06rbxq.js";
 import"../../../shared/components-yhgq0qxx.js";
 import"../../../shared/components-awra5sff.js";
 import"../../../shared/components-dcc02hs2.js";
-import"../../../shared/components-7d4r7hh1.js";
-import"../../../shared/components-f0xfpkhh.js";
+import"../../../shared/components-4swzve2d.js";
+import"../../../shared/components-4vfm04wq.js";
 import"../../../shared/components-tz1fv35x.js";
 import"../../../shared/components-de99ykt7.js";
 import"../../../shared/components-3ey0hzpb.js";