@justanarthur/modo-ui 0.6.0-canary.3 → 0.6.0-canary.5

package/README.md

@@ -134,12 +134,12 @@ 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. |
+| `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 +178,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) |
@@ -232,7 +232,7 @@ 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) |

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/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/dropdown/menu-parts.tsx

@@ -424,6 +424,10 @@ function DropdownSub({ children, open, defaultOpen = false, onOpenChange, disabl
         open={current}
         disabled={disabled}
         onOpenChange={(next, details) => {
+          // Base UI re-reports a sub that is already closed as closed (reason `sibling-open`,
+          // once per sibling that opens). The caller hears changes only, as it did through
+          // useControllableState's no-op skip: a handler shared with the root must not see them.
+          if (next === current) return
           onOpenChange?.(next, details)
           if (details.isCanceled) return
           if (next) capture(details)

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

@@ -402,6 +402,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 +498,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-e5jyw7g9.js";
-import"../../shared/components-cfn30fa8.js";
+} from "../../shared/components-prsvfkew.js";
+import"../../shared/components-rngyah0v.js";
 import"../../shared/components-kswxnm3h.js";
 import"../../shared/components-rrbpmfx4.js";
-import"../../shared/components-f1f0qvxg.js";
+import"../../shared/components-63bv8e6d.js";
 import"../../shared/components-6zng858q.js";
 import"../../shared/components-124epb7f.js";
 import"../../shared/components-z3v0n0de.js";
-import"../../shared/components-avrrksxk.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-8m623m9h.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";

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-w7zqeatr.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";

package/dist/components/accordion/index.d.ts

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent, HTMLAttributes, ReactNode as ReactNode2, RefAttributes } from "react";
+import { ForwardRefExoticComponent, HTMLAttributes, ReactNode as ReactNode3, RefAttributes } from "react";
 import { ComponentType } from "react";
 interface IconComponentProps {
 	size?: number | string;
@@ -7,6 +7,17 @@ interface IconComponentProps {
 }
 type IconComponent = ComponentType<IconComponentProps>;
 type SizeVariant = "default" | "compact";
+import { ButtonHTMLAttributes, ReactElement, ReactNode as ReactNode2 } from "react";
+interface SlotProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	/** The element that becomes the control, e.g. a Button. Children fill it when it has none of its own. */
+	render?: ReactElement;
+	/** Compose onto the single child instead. Both spellings work in both flavors. Defaults to `false`. */
+	asChild?: boolean;
+	/** Control content when there is no render element, or the content of a render element that has none of its own. */
+	children?: ReactNode2;
+	/** Whether the render element is a native `<button>`: pass `false` for a `<div>` or a link, so Base UI adds the button role and keyboard handling itself. Parts not built on a Base UI button ignore it. Defaults to `true`. */
+	nativeButton?: boolean;
+}
 type AccordionGroupSingleProps = {
 	/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
 	type?: "single";
@@ -30,7 +41,7 @@ type AccordionGroupMultipleProps = {
 	onValueChange?: (value: string[]) => void;
 };
 type AccordionGroupProps = HTMLAttributes<HTMLDivElement> & {
-	children: ReactNode2;
+	children: ReactNode3;
 	/** Pins the group's rows to one step of the size ladder (default 36px,
 	*  compact 28px — see /docs/sizes). Omitted, they follow the surrounding
 	*  SizeProvider. */
@@ -45,7 +56,7 @@ type AccordionGroupProps = HTMLAttributes<HTMLDivElement> & {
 declare const AccordionGroup: ForwardRefExoticComponent<AccordionGroupProps & RefAttributes<HTMLDivElement>>;
 interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
 	/** The accordion's items (`Accordion.Item`). */
-	children: ReactNode2;
+	children: ReactNode3;
 	/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
 	type?: "single" | "multiple";
 	/** Allow collapsing all items when type is single. Defaults to `true` (Base UI's single mode is always collapsible). */
@@ -88,7 +99,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).
@@ -106,12 +119,12 @@ interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
 	/** Standalone equivalent of the group's prop: what an open item tints. Ignored inside a group, which decides for all its rows. Defaults to the standalone root's `highlight`, else `"item"`. */
 	highlight?: "trigger" | "item";
 	/** The item's `Accordion.Trigger` and `Accordion.Content`. */
-	children: ReactNode2;
+	children: ReactNode3;
 }
 declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;
-interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
-	/** Trigger label content. */
-	children: ReactNode2;
+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?: ReactNode3;
 	/** 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`. */
@@ -120,7 +133,7 @@ interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
 declare const AccordionTrigger: ForwardRefExoticComponent<AccordionTriggerProps & RefAttributes<HTMLButtonElement>>;
 interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
 	/** Collapsible content. */
-	children: ReactNode2;
+	children: ReactNode3;
 	/** How the panel grows out of its row (see Morph): `goo` melts the open tint out of the row through a liquid neck, `morph` grows it without one. Defaults to `'goo'`. */
 	effect?: "goo" | "morph";
 	/** Spring tier the panel opens on; it closes on the tier's faster exit tween. Defaults to `'slow'`. */

package/dist/components/accordion/index.js

@@ -5,7 +5,8 @@ import {
   AccordionTrigger2,
   AccordionContent2,
   accordion_default
-} from "../../shared/components-p9mzwfbt.js";
+} from "../../shared/components-d7nhksd0.js";
+import"../../shared/components-mrbaxt8q.js";
 import"../../shared/components-4y816hwp.js";
 import"../../shared/components-b1e239g3.js";
 import"../../shared/components-jqpefjsn.js";

package/dist/components/card/index.d.ts

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent, HTMLAttributes, ReactNode as ReactNode2, RefAttributes } from "react";
+import { ForwardRefExoticComponent, HTMLAttributes, MouseEventHandler, ReactNode as ReactNode2, RefAttributes } from "react";
 import { ComponentType } from "react";
 interface IconComponentProps {
 	size?: number | string;
@@ -40,8 +40,8 @@ declare const CardGroup: ForwardRefExoticComponent<CardGroupProps & RefAttribute
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
 	/** Compositional parts: Card.Image, Card.Media, Card.Header, Card.Content, Card.Footer. */
 	children?: ReactNode2;
-	/** 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/dist/components/copy/index.js

@@ -1,9 +1,9 @@
 import {
   Copy2,
   copy_default
-} from "../../shared/components-fz1pnkzq.js";
-import"../../shared/components-rz7wh3jx.js";
-import"../../shared/components-0d6zzjjz.js";
+} from "../../shared/components-q4z71n18.js";
+import"../../shared/components-vqqapw72.js";
+import"../../shared/components-mrbaxt8q.js";
 import"../../shared/components-4y816hwp.js";
 import"../../shared/components-b1e239g3.js";
 import"../../shared/components-dhgk6mbt.js";

package/dist/components/inputs/color-picker/index.js

@@ -5,15 +5,15 @@ import {
   ColorPicker2,
   ColorPickerPopover2,
   color_picker_default
-} from "../../../shared/components-8yqkpbqa.js";
+} from "../../../shared/components-vbh98t9d.js";
 import {
   parseColor2,
   buildParsed2
 } from "../../../shared/components-26snnbs9.js";
 import"../../../shared/components-jkctvwz9.js";
-import"../../../shared/components-rz7wh3jx.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";

package/dist/components/inputs/date-time/date-picker/index.js

@@ -1,22 +1,22 @@
 import {
   DatePicker2,
   date_picker_default
-} from "../../../../shared/components-xmepz8d9.js";
+} from "../../../../shared/components-ar5swjbr.js";
 import"../../../../shared/components-7s7pykk5.js";
 import"../../../../shared/components-daqy7ydp.js";
 import"../../../../shared/components-kr40s3z0.js";
-import"../../../../shared/components-cr081ppn.js";
+import"../../../../shared/components-5rdj02v9.js";
 import"../../../../shared/components-v0nz1m4t.js";
 import"../../../../shared/components-54nq988h.js";
 import"../../../../shared/components-y1w3a6wx.js";
 import"../../../../shared/components-adkarj8n.js";
 import"../../../../shared/components-rrbpmfx4.js";
-import"../../../../shared/components-f1f0qvxg.js";
+import"../../../../shared/components-63bv8e6d.js";
 import"../../../../shared/components-6zng858q.js";
 import"../../../../shared/components-124epb7f.js";
-import"../../../../shared/components-09gadh7e.js";
+import"../../../../shared/components-8m623m9h.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";

package/dist/components/inputs/date-time/date-range-picker/index.js

@@ -1,22 +1,22 @@
 import {
   DateRangePicker2,
   date_range_picker_default
-} from "../../../../shared/components-n9q8dcyf.js";
+} from "../../../../shared/components-egzetyq9.js";
 import"../../../../shared/components-7s7pykk5.js";
 import"../../../../shared/components-daqy7ydp.js";
 import"../../../../shared/components-kr40s3z0.js";
-import"../../../../shared/components-cr081ppn.js";
+import"../../../../shared/components-5rdj02v9.js";
 import"../../../../shared/components-v0nz1m4t.js";
 import"../../../../shared/components-54nq988h.js";
 import"../../../../shared/components-y1w3a6wx.js";
 import"../../../../shared/components-adkarj8n.js";
 import"../../../../shared/components-rrbpmfx4.js";
-import"../../../../shared/components-f1f0qvxg.js";
+import"../../../../shared/components-63bv8e6d.js";
 import"../../../../shared/components-6zng858q.js";
 import"../../../../shared/components-124epb7f.js";
-import"../../../../shared/components-09gadh7e.js";
+import"../../../../shared/components-8m623m9h.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";