@dxos/react-ui 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.14.0

package/dist/lib/Accordion.mjs

@@ -0,0 +1,72 @@
+import { t as __exportAll } from "./chunk-rolldown-runtime.mjs";
+import { t as recipes } from "./chunk-recipes.mjs";
+import { t as Block } from "./chunk-Block.mjs";
+import { Icon } from "./Icon.mjs";
+import { Accordion, useAccordionItemContext } from "@ark-ui/react/accordion";
+import { forwardRef } from "react";
+import { mx } from "@dxos/ui-theme";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/next/components/Accordion/Accordion.tsx
+var Accordion_exports = /* @__PURE__ */ __exportAll({
+	Item: () => AccordionItem,
+	ItemContent: () => AccordionItemContent,
+	ItemTrigger: () => AccordionItemTrigger,
+	Root: () => AccordionRoot
+});
+/** A stack of disclosure items; any number may be open unless `multiple` is false. */
+var AccordionRoot = forwardRef(({ classNames, multiple = true, border = true, onValueChange, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Accordion.Root, {
+	...props,
+	multiple,
+	onValueChange: onValueChange && ((details) => onValueChange(details.value)),
+	"data-border": border ? "" : void 0,
+	className: mx(recipes.accordion(), classNames),
+	ref: forwardedRef
+}));
+AccordionRoot.displayName = "Accordion.Root";
+/** One item; `disabled` keeps the row in the list's rhythm but shows no caret and does not toggle. */
+var AccordionItem = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Accordion.Item, {
+	...props,
+	className: mx(recipes.accordionItem(), classNames),
+	ref: forwardedRef
+}));
+AccordionItem.displayName = "Accordion.Item";
+/**
+* A block row: an optional leading icon, the label, and a trailing caret (Ark's `ItemIndicator`) that turns to point
+* down while open. A disabled item has nothing to open, so its caret is dropped.
+*/
+var AccordionItemTrigger = forwardRef(({ classNames, icon, children, ...props }, forwardedRef) => {
+	const { disabled } = useAccordionItemContext();
+	return /* @__PURE__ */ jsxs(Accordion.ItemTrigger, {
+		...props,
+		className: mx(recipes.accordionItemTrigger(), classNames),
+		ref: forwardedRef,
+		children: [
+			icon && /* @__PURE__ */ jsx(Block, {
+				classNames: recipes.accordionItemIcon(),
+				children: /* @__PURE__ */ jsx(Icon, { icon })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-scope": "accordion",
+				"data-part": "item-text",
+				className: recipes.accordionItemText(),
+				children
+			}),
+			!disabled && /* @__PURE__ */ jsx(Block, { children: /* @__PURE__ */ jsx(Accordion.ItemIndicator, {
+				className: recipes.accordionItemIndicator(),
+				children: /* @__PURE__ */ jsx(Icon, { icon: "ph--caret-right--regular" })
+			}) })
+		]
+	});
+});
+AccordionItemTrigger.displayName = "Accordion.ItemTrigger";
+/** The disclosed region; its height animates from Ark's measured `--height`. */
+var AccordionItemContent = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Accordion.ItemContent, {
+	...props,
+	className: mx(recipes.accordionItemContent(), classNames),
+	ref: forwardedRef
+}));
+AccordionItemContent.displayName = "Accordion.ItemContent";
+//#endregion
+export { AccordionItem as Item, AccordionItemContent as ItemContent, AccordionItemTrigger as ItemTrigger, AccordionRoot as Root, Accordion_exports as t };
+
+//# sourceMappingURL=Accordion.mjs.map

package/dist/lib/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/next/components/Accordion/Accordion.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { Accordion as AccordionPrimitive, useAccordionItemContext } from '@ark-ui/react/accordion';\nimport React, { forwardRef } from 'react';\n\nimport { mx } from '@dxos/ui-theme';\nimport { type ThemedClassName } from '@dxos/ui-types';\n\nimport { recipes } from '../../recipes.ts';\nimport { Block } from '../Block/Block.tsx';\nimport * as Icon from '../Icon/Icon.tsx';\n\n//\n// Root\n//\n\ntype AccordionRootProps = ThemedClassName<\n  Omit<AccordionPrimitive.RootProps, 'onValueChange' | 'multiple'> & {\n    /** More than one item open at once (the default). */\n    multiple?: boolean;\n    /** A separator frame around and between the items (the default); `false` leaves only the dividers. */\n    border?: boolean;\n    /** Called with the open items' values. */\n    onValueChange?: (value: string[]) => void;\n  }\n>;\n\n/** A stack of disclosure items; any number may be open unless `multiple` is false. */\nconst AccordionRoot = forwardRef<HTMLDivElement, AccordionRootProps>(\n  ({ classNames, multiple = true, border = true, onValueChange, ...props }, forwardedRef) => (\n    <AccordionPrimitive.Root\n      {...props}\n      multiple={multiple}\n      onValueChange={onValueChange && ((details) => onValueChange(details.value))}\n      data-border={border ? '' : undefined}\n      className={mx(recipes.accordion(), classNames)}\n      ref={forwardedRef}\n    />\n  ),\n);\n\nAccordionRoot.displayName = 'Accordion.Root';\n\n//\n// Item\n//\n\ntype AccordionItemProps = ThemedClassName<AccordionPrimitive.ItemProps>;\n\n/** One item; `disabled` keeps the row in the list's rhythm but shows no caret and does not toggle. */\nconst AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(({ classNames, ...props }, forwardedRef) => (\n  <AccordionPrimitive.Item {...props} className={mx(recipes.accordionItem(), classNames)} ref={forwardedRef} />\n));\n\nAccordionItem.displayName = 'Accordion.Item';\n\n//\n// ItemTrigger\n//\n\ntype AccordionItemTriggerProps = ThemedClassName<AccordionPrimitive.ItemTriggerProps> & {\n  /** Leading icon, before the label. */\n  icon?: string;\n};\n\n/**\n * A block row: an optional leading icon, the label, and a trailing caret (Ark's `ItemIndicator`) that turns to point\n * down while open. A disabled item has nothing to open, so its caret is dropped.\n */\nconst AccordionItemTrigger = forwardRef<HTMLButtonElement, AccordionItemTriggerProps>(\n  ({ classNames, icon, children, ...props }, forwardedRef) => {\n    const { disabled } = useAccordionItemContext();\n    return (\n      <AccordionPrimitive.ItemTrigger\n        {...props}\n        className={mx(recipes.accordionItemTrigger(), classNames)}\n        ref={forwardedRef}\n      >\n        {icon && (\n          <Block classNames={recipes.accordionItemIcon()}>\n            <Icon.Icon icon={icon} />\n          </Block>\n        )}\n        <span data-scope='accordion' data-part='item-text' className={recipes.accordionItemText()}>\n          {children}\n        </span>\n        {!disabled && (\n          <Block>\n            <AccordionPrimitive.ItemIndicator className={recipes.accordionItemIndicator()}>\n              <Icon.Icon icon='ph--caret-right--regular' />\n            </AccordionPrimitive.ItemIndicator>\n          </Block>\n        )}\n      </AccordionPrimitive.ItemTrigger>\n    );\n  },\n);\n\nAccordionItemTrigger.displayName = 'Accordion.ItemTrigger';\n\n//\n// ItemContent\n//\n\ntype AccordionItemContentProps = ThemedClassName<AccordionPrimitive.ItemContentProps>;\n\n/** The disclosed region; its height animates from Ark's measured `--height`. */\nconst AccordionItemContent = forwardRef<HTMLDivElement, AccordionItemContentProps>(\n  ({ classNames, ...props }, forwardedRef) => (\n    <AccordionPrimitive.ItemContent\n      {...props}\n      className={mx(recipes.accordionItemContent(), classNames)}\n      ref={forwardedRef}\n    />\n  ),\n);\n\nAccordionItemContent.displayName = 'Accordion.ItemContent';\nexport type {\n  AccordionItemContentProps as ItemContentProps,\n  AccordionItemProps as ItemProps,\n  AccordionItemTriggerProps as ItemTriggerProps,\n  AccordionRootProps as RootProps,\n};\n\nexport {\n  AccordionItem as Item,\n  AccordionItemContent as ItemContent,\n  AccordionItemTrigger as ItemTrigger,\n  AccordionRoot as Root,\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAM,gBAAgB,YACnB,EAAE,YAAY,WAAW,MAAM,SAAS,MAAM,eAAe,GAAG,SAAS,iBACxE,oBAAC,UAAmB,MAApB;CACE,GAAI;CACM;CACV,eAAe,mBAAmB,YAAY,cAAc,QAAQ,KAAK;CACzE,eAAa,SAAS,KAAK,KAAA;CAC3B,WAAW,GAAG,QAAQ,UAAU,GAAG,UAAU;CAC7C,KAAK;AACN,CAAA,CAEL;AAEA,cAAc,cAAc;;AAS5B,IAAM,gBAAgB,YAAgD,EAAE,YAAY,GAAG,SAAS,iBAC9F,oBAAC,UAAmB,MAApB;CAAyB,GAAI;CAAO,WAAW,GAAG,QAAQ,cAAc,GAAG,UAAU;CAAG,KAAK;AAAe,CAAA,CAC7G;AAED,cAAc,cAAc;;;;;AAe5B,IAAM,uBAAuB,YAC1B,EAAE,YAAY,MAAM,UAAU,GAAG,SAAS,iBAAiB;CAC1D,MAAM,EAAE,aAAa,wBAAwB;CAC7C,OACE,qBAAC,UAAmB,aAApB;EACE,GAAI;EACJ,WAAW,GAAG,QAAQ,qBAAqB,GAAG,UAAU;EACxD,KAAK;EAHP,UAAA;GAKG,QACC,oBAAC,OAAD;IAAO,YAAY,QAAQ,kBAAkB;IAC3C,UAAA,oBAAC,MAAD,EAAiB,KAAO,CAAA;GACnB,CAAA;GAET,oBAAC,QAAD;IAAM,cAAW;IAAY,aAAU;IAAY,WAAW,QAAQ,kBAAkB;IACrF;GACG,CAAA;GACL,CAAC,YACA,oBAAC,OAAD,EAAA,UACE,oBAAC,UAAmB,eAApB;IAAkC,WAAW,QAAQ,uBAAuB;IAC1E,UAAA,oBAAC,MAAD,EAAW,MAAK,2BAA4B,CAAA;GACZ,CAAA,EAC7B,CAAA;EAEqB;;AAEpC,CACF;AAEA,qBAAqB,cAAc;;AASnC,IAAM,uBAAuB,YAC1B,EAAE,YAAY,GAAG,SAAS,iBACzB,oBAAC,UAAmB,aAApB;CACE,GAAI;CACJ,WAAW,GAAG,QAAQ,qBAAqB,GAAG,UAAU;CACxD,KAAK;AACN,CAAA,CAEL;AAEA,qBAAqB,cAAc"}

package/dist/lib/AlertDialog.mjs

@@ -0,0 +1,81 @@
+import { t as __exportAll } from "./chunk-rolldown-runtime.mjs";
+import { t as Button } from "./chunk-Button.mjs";
+import { Body as DialogBody, Content as DialogContent, Description as DialogDescription, Footer as DialogFooter, Header as DialogHeader, Root as DialogRoot, Title as DialogTitle, Trigger as DialogTrigger } from "./Dialog.mjs";
+import { forwardRef, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialogContext } from "@ark-ui/react/dialog";
+import { useEnvironmentContext } from "@ark-ui/react/environment";
+//#region src/next/components/AlertDialog/AlertDialog.tsx
+var AlertDialog_exports = /* @__PURE__ */ __exportAll({
+	Action: () => AlertDialogAction,
+	Body: () => AlertDialogBody,
+	Cancel: () => AlertDialogCancel,
+	Content: () => AlertDialogContent,
+	Description: () => AlertDialogDescription,
+	Footer: () => AlertDialogFooter,
+	Header: () => AlertDialogHeader,
+	Root: () => AlertDialogRoot,
+	Title: () => AlertDialogTitle,
+	Trigger: () => AlertDialogTrigger
+});
+/**
+* A Dialog with `role=alertdialog` that only its own controls close. It opens with focus on a control marked
+* `DIALOG_AUTOFOCUS_ATTRIBUTE`, else on `Cancel`, the least destructive choice.
+*/
+var AlertDialogRoot = ({ ids, initialFocusEl, ...props }) => {
+	const id = useId();
+	const { getRootNode } = useEnvironmentContext();
+	const byId = (elementId) => {
+		const root = getRootNode();
+		return "getElementById" in root ? root.getElementById(elementId) : null;
+	};
+	const contentId = ids?.content ?? `dx-alert-dialog-${id}-content`;
+	const cancelId = ids?.closeTrigger ?? `dx-alert-dialog-${id}-cancel`;
+	return /* @__PURE__ */ jsx(DialogRoot, {
+		...props,
+		closeOnInteractOutside: false,
+		closeOnEscape: false,
+		role: "alertdialog",
+		ids: {
+			...ids,
+			content: contentId,
+			closeTrigger: cancelId
+		},
+		initialFocusEl: initialFocusEl ?? (() => byId(contentId)?.querySelector(`[data-autofocus]`) ?? byId(cancelId))
+	});
+};
+AlertDialogRoot.displayName = "AlertDialog.Root";
+/** A Button that closes the dialog without acting; the caller names it (Next ships no translated labels). */
+var AlertDialogCancel = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx(Button, {
+		...props,
+		ref: forwardedRef
+	})
+}));
+AlertDialogCancel.displayName = "AlertDialog.Cancel";
+/** The confirming Button (`primary` by default): runs `onClick`, then closes unless the handler prevents default. */
+var AlertDialogAction = forwardRef(({ variant = "primary", onClick, ...props }, forwardedRef) => {
+	const dialog = useDialogContext();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		variant,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) dialog.setOpen(false);
+		},
+		ref: forwardedRef
+	});
+});
+AlertDialogAction.displayName = "AlertDialog.Action";
+var AlertDialogTrigger = DialogTrigger;
+var AlertDialogContent = DialogContent;
+var AlertDialogHeader = DialogHeader;
+var AlertDialogTitle = DialogTitle;
+var AlertDialogDescription = DialogDescription;
+var AlertDialogBody = DialogBody;
+var AlertDialogFooter = DialogFooter;
+//#endregion
+export { AlertDialogAction as Action, AlertDialogBody as Body, AlertDialogCancel as Cancel, AlertDialogContent as Content, AlertDialogDescription as Description, AlertDialogFooter as Footer, AlertDialogHeader as Header, AlertDialogRoot as Root, AlertDialogTitle as Title, AlertDialogTrigger as Trigger, AlertDialog_exports as t };
+
+//# sourceMappingURL=AlertDialog.mjs.map

package/dist/lib/AlertDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.mjs","names":[],"sources":["../../src/next/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { Dialog as DialogPrimitive, useDialogContext } from '@ark-ui/react/dialog';\nimport { useEnvironmentContext } from '@ark-ui/react/environment';\nimport React, { forwardRef, useId } from 'react';\n\nimport { Button, type ButtonProps } from '../Button/Button.tsx';\nimport * as Dialog from '../Dialog/Dialog.tsx';\n\n//\n// Root\n//\n\ntype AlertDialogRootProps = Omit<Dialog.RootProps, 'role' | 'closeOnInteractOutside' | 'closeOnEscape'>;\n\n/**\n * A Dialog with `role=alertdialog` that only its own controls close. It opens with focus on a control marked\n * `DIALOG_AUTOFOCUS_ATTRIBUTE`, else on `Cancel`, the least destructive choice.\n */\nconst AlertDialogRoot = ({ ids, initialFocusEl, ...props }: AlertDialogRootProps) => {\n  const id = useId();\n  const { getRootNode } = useEnvironmentContext();\n  // The same root zag resolves the dialog in, so a dialog portalled into a shadow root or another document still finds them.\n  const byId = (elementId: string): HTMLElement | null => {\n    const root = getRootNode();\n    return 'getElementById' in root ? root.getElementById(elementId) : null;\n  };\n  const contentId = ids?.content ?? `dx-alert-dialog-${id}-content`;\n  const cancelId = ids?.closeTrigger ?? `dx-alert-dialog-${id}-cancel`;\n  return (\n    <Dialog.Root\n      {...props}\n      closeOnInteractOutside={false}\n      closeOnEscape={false}\n      role='alertdialog'\n      ids={{ ...ids, content: contentId, closeTrigger: cancelId }}\n      initialFocusEl={\n        initialFocusEl ??\n        (() => byId(contentId)?.querySelector<HTMLElement>(`[${Dialog.DIALOG_AUTOFOCUS_ATTRIBUTE}]`) ?? byId(cancelId))\n      }\n    />\n  );\n};\n\nAlertDialogRoot.displayName = 'AlertDialog.Root';\n\n//\n// Cancel\n//\n\ntype AlertDialogCancelProps = ButtonProps;\n\n/** A Button that closes the dialog without acting; the caller names it (Next ships no translated labels). */\nconst AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>((props, forwardedRef) => (\n  <DialogPrimitive.CloseTrigger asChild>\n    <Button {...props} ref={forwardedRef} />\n  </DialogPrimitive.CloseTrigger>\n));\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel';\n\n//\n// Action\n//\n\ntype AlertDialogActionProps = ButtonProps;\n\n/** The confirming Button (`primary` by default): runs `onClick`, then closes unless the handler prevents default. */\nconst AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(\n  ({ variant = 'primary', onClick, ...props }, forwardedRef) => {\n    const dialog = useDialogContext();\n    return (\n      <Button\n        {...props}\n        variant={variant}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) {\n            dialog.setOpen(false);\n          }\n        }}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nAlertDialogAction.displayName = 'AlertDialog.Action';\nconst AlertDialogTrigger = Dialog.Trigger;\nconst AlertDialogContent = Dialog.Content;\nconst AlertDialogHeader = Dialog.Header;\nconst AlertDialogTitle = Dialog.Title;\nconst AlertDialogDescription = Dialog.Description;\nconst AlertDialogBody = Dialog.Body;\nconst AlertDialogFooter = Dialog.Footer;\nexport type {\n  AlertDialogActionProps as ActionProps,\n  AlertDialogCancelProps as CancelProps,\n  AlertDialogRootProps as RootProps,\n};\n\nexport {\n  AlertDialogAction as Action,\n  AlertDialogBody as Body,\n  AlertDialogCancel as Cancel,\n  AlertDialogContent as Content,\n  AlertDialogDescription as Description,\n  AlertDialogFooter as Footer,\n  AlertDialogHeader as Header,\n  AlertDialogRoot as Root,\n  AlertDialogTitle as Title,\n  AlertDialogTrigger as Trigger,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAM,mBAAmB,EAAE,KAAK,gBAAgB,GAAG,YAAkC;CACnF,MAAM,KAAK,MAAM;CACjB,MAAM,EAAE,gBAAgB,sBAAsB;CAE9C,MAAM,QAAQ,cAA0C;EACtD,MAAM,OAAO,YAAY;EACzB,OAAO,oBAAoB,OAAO,KAAK,eAAe,SAAS,IAAI;CACrE;CACA,MAAM,YAAY,KAAK,WAAW,mBAAmB,GAAG;CACxD,MAAM,WAAW,KAAK,gBAAgB,mBAAmB,GAAG;CAC5D,OACE,oBAAC,YAAD;EACE,GAAI;EACJ,wBAAwB;EACxB,eAAe;EACf,MAAK;EACL,KAAK;GAAE,GAAG;GAAK,SAAS;GAAW,cAAc;EAAS;EAC1D,gBACE,yBACO,KAAK,SAAS,CAAC,EAAE,cAA2B,kBAAwC,KAAK,KAAK,QAAQ;CAEhH,CAAA;AAEL;AAEA,gBAAgB,cAAc;;AAS9B,IAAM,oBAAoB,YAAuD,OAAO,iBACtF,oBAAC,OAAgB,cAAjB;CAA8B,SAAA;CAC5B,UAAA,oBAAC,QAAD;EAAQ,GAAI;EAAO,KAAK;CAAe,CAAA;AACX,CAAA,CAC/B;AAED,kBAAkB,cAAc;;AAShC,IAAM,oBAAoB,YACvB,EAAE,UAAU,WAAW,SAAS,GAAG,SAAS,iBAAiB;CAC5D,MAAM,SAAS,iBAAiB;CAChC,OACE,oBAAC,QAAD;EACE,GAAI;EACK;EACT,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBACT,OAAO,QAAQ,KAAK;EAExB;EACA,KAAK;CACN,CAAA;AAEL,CACF;AAEA,kBAAkB,cAAc;AAChC,IAAM,qBAAqB;AAC3B,IAAM,qBAAqB;AAC3B,IAAM,oBAAoB;AAC1B,IAAM,mBAAmB;AACzB,IAAM,yBAAyB;AAC/B,IAAM,kBAAkB;AACxB,IAAM,oBAAoB"}

package/dist/lib/Avatar.mjs

@@ -0,0 +1,85 @@
+import { t as __exportAll } from "./chunk-rolldown-runtime.mjs";
+import { t as recipes } from "./chunk-recipes.mjs";
+import { Icon } from "./Icon.mjs";
+import { forwardRef, useState } from "react";
+import { mx } from "@dxos/ui-theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+import { sampleDominantColor } from "@dxos/lit-ui";
+import { hues } from "@dxos/ui-types";
+//#region src/next/components/Avatar/Avatar.tsx
+var Avatar_exports = /* @__PURE__ */ __exportAll({
+	Fallback: () => AvatarFallback,
+	Image: () => AvatarImage,
+	Root: () => AvatarRoot,
+	getAvatarGlyph: () => getAvatarGlyph,
+	toAvatarHue: () => toAvatarHue
+});
+/** A stored hue name (e.g. from a profile) as an `AvatarHue`; `undefined` when it names no palette. */
+var toAvatarHue = (value) => value === "neutral" ? "neutral" : hues.find((hue) => hue === value);
+var getInitials = (label) => label.trim().split(/\s+/).map((word) => word.replace(/[^\p{L}\p{N}]/gu, "")).filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase());
+/** Up to two initials of a name; an emoji or symbol with no letters is shown as given. */
+/** A fallback that is a pictograph rather than a name, drawn larger than initials. */
+var EMOJI = /^\p{Extended_Pictographic}/u;
+var getAvatarGlyph = (fallback = "") => {
+	const initials = getInitials(fallback);
+	return initials.length > 0 ? initials.join("") : fallback;
+};
+/**
+* Ark's avatar: an image over a fallback of initials, an emoji or an icon, in a circle or square one block across
+* (or its host's width with `fill`). The root is the element (`role=img`), so a label, ring and hue all land on it.
+*/
+var AvatarRoot = forwardRef(({ classNames, size, fill, variant = "circle", status, animation = "none", hue, hueVariant = "fill", src, backdrop, fallback = "🫥", icon, label, children, style, ...props }, forwardedRef) => {
+	const [sampled, setSampled] = useState();
+	const color = sampled && sampled.src === src ? sampled.color : void 0;
+	const backdropStyle = color ? { "--dx-avatar-backdrop": color } : {};
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		role: "img",
+		...label && { "aria-label": label },
+		...props,
+		"data-size": size,
+		"data-fill": fill ? "" : void 0,
+		"data-variant": variant,
+		"data-status": status,
+		"data-animation": animation === "none" ? void 0 : animation,
+		"data-hue": hue,
+		"data-hue-variant": hueVariant,
+		"data-backdrop": backdrop,
+		style: {
+			...backdropStyle,
+			...style
+		},
+		className: mx(recipes.avatar(), classNames),
+		ref: forwardedRef,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [src && /* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			onLoad: backdrop === "dominant" ? (event) => setSampled({
+				src,
+				color: sampleDominantColor(event.currentTarget)
+			}) : void 0
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			"data-emoji": !icon && EMOJI.test(fallback) ? "" : void 0,
+			children: icon ? /* @__PURE__ */ jsx(Icon, { icon }) : getAvatarGlyph(fallback)
+		})] })
+	});
+});
+AvatarRoot.displayName = "Avatar.Root";
+var AvatarImage = forwardRef(({ classNames, alt = "", ...props }, forwardedRef) => /* @__PURE__ */ jsx(Avatar.Image, {
+	...props,
+	alt,
+	className: mx(recipes.avatarImage(), classNames),
+	ref: forwardedRef
+}));
+AvatarImage.displayName = "Avatar.Image";
+/** Shown until the image loads; its text scales with the avatar (container query units). */
+var AvatarFallback = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Avatar.Fallback, {
+	"aria-hidden": true,
+	...props,
+	className: mx(recipes.avatarFallback(), classNames),
+	ref: forwardedRef
+}));
+AvatarFallback.displayName = "Avatar.Fallback";
+//#endregion
+export { AvatarFallback as Fallback, AvatarImage as Image, AvatarRoot as Root, getAvatarGlyph, Avatar_exports as t, toAvatarHue };
+
+//# sourceMappingURL=Avatar.mjs.map

package/dist/lib/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../src/next/components/Avatar/Avatar.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { Avatar as AvatarPrimitive } from '@ark-ui/react/avatar';\nimport React, { type CSSProperties, forwardRef, useState } from 'react';\n\nimport { sampleDominantColor } from '@dxos/lit-ui';\nimport { mx } from '@dxos/ui-theme';\nimport { type ChromaticPalette, type NeutralPalette, type ThemedClassName, hues } from '@dxos/ui-types';\n\nimport { recipes } from '../../recipes.ts';\nimport { type Size } from '../../sizes.ts';\nimport { type CSSVariables } from '../Container/Container.tsx';\nimport * as Icon from '../Icon/Icon.tsx';\n\ntype AvatarVariant = 'circle' | 'square';\n\ntype AvatarStatus = 'active' | 'inactive' | 'current' | 'internal' | 'error' | 'warning';\n\ntype AvatarAnimation = 'pulse' | 'none';\n\ntype AvatarHue = NeutralPalette | ChromaticPalette;\n\n/** A stored hue name (e.g. from a profile) as an `AvatarHue`; `undefined` when it names no palette. */\nexport const toAvatarHue = (value?: string): AvatarHue | undefined =>\n  value === 'neutral' ? 'neutral' : hues.find((hue) => hue === value);\n\n/** `fill` paints the hue's solid background, `surface` its tint (Tag's colours), `transparent` none. */\ntype AvatarHueVariant = 'fill' | 'surface' | 'transparent';\n\nconst getInitials = (label: string): string[] =>\n  label\n    .trim()\n    .split(/\\s+/)\n    .map((word) => word.replace(/[^\\p{L}\\p{N}]/gu, ''))\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => word[0].toUpperCase());\n\n/** Up to two initials of a name; an emoji or symbol with no letters is shown as given. */\n/** A fallback that is a pictograph rather than a name, drawn larger than initials. */\nconst EMOJI = /^\\p{Extended_Pictographic}/u;\n\nexport const getAvatarGlyph = (fallback = ''): string => {\n  const initials = getInitials(fallback);\n  return initials.length > 0 ? initials.join('') : fallback;\n};\n\n//\n// Root\n//\n\ntype AvatarRootProps = ThemedClassName<Omit<AvatarPrimitive.RootProps, 'children'>> & {\n  /** Diameter is the block at this size; inherited from the enclosing scope when omitted. */\n  size?: Size;\n  /** Fills its host's inline size (a square), for portraits larger than a block. */\n  fill?: boolean;\n  variant?: AvatarVariant;\n  /** Draws a ring in the status colour. */\n  status?: AvatarStatus;\n  animation?: AvatarAnimation;\n  hue?: AvatarHue;\n  hueVariant?: AvatarHueVariant;\n  /** Image source; the fallback shows until it loads, and again if it fails. */\n  src?: string;\n  /** Fills behind the image with its dominant edge colour once it loads (a photo with transparent or uneven edges). */\n  backdrop?: 'dominant';\n  /** A name (shown as initials) or an emoji. */\n  fallback?: string;\n  /** Shown in place of the fallback text. */\n  icon?: string;\n  /** Names the avatar (`aria-label`); otherwise reference a visible name with `aria-labelledby`. */\n  label?: string;\n  /** Replace the default Image and Fallback. */\n  children?: AvatarPrimitive.RootProps['children'];\n};\n\n/**\n * Ark's avatar: an image over a fallback of initials, an emoji or an icon, in a circle or square one block across\n * (or its host's width with `fill`). The root is the element (`role=img`), so a label, ring and hue all land on it.\n */\nconst AvatarRoot = forwardRef<HTMLDivElement, AvatarRootProps>(\n  (\n    {\n      classNames,\n      size,\n      fill,\n      variant = 'circle',\n      status,\n      animation = 'none',\n      hue,\n      hueVariant = 'fill',\n      src,\n      backdrop,\n      fallback = '🫥',\n      icon,\n      label,\n      children,\n      style,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    // Keyed by source, so a new `src` drops the previous image's colour without an effect racing the load event.\n    const [sampled, setSampled] = useState<{ src: string; color?: string }>();\n    const color = sampled && sampled.src === src ? sampled.color : undefined;\n    const backdropStyle: CSSProperties & CSSVariables = color ? { '--dx-avatar-backdrop': color } : {};\n    return (\n      <AvatarPrimitive.Root\n        role='img'\n        {...(label && { 'aria-label': label })}\n        {...props}\n        data-size={size}\n        data-fill={fill ? '' : undefined}\n        data-variant={variant}\n        data-status={status}\n        data-animation={animation === 'none' ? undefined : animation}\n        data-hue={hue}\n        data-hue-variant={hueVariant}\n        data-backdrop={backdrop}\n        style={{ ...backdropStyle, ...style }}\n        className={mx(recipes.avatar(), classNames)}\n        ref={forwardedRef}\n      >\n        {children ?? (\n          <>\n            {src && (\n              <AvatarImage\n                src={src}\n                onLoad={\n                  backdrop === 'dominant'\n                    ? (event) => setSampled({ src, color: sampleDominantColor(event.currentTarget) })\n                    : undefined\n                }\n              />\n            )}\n            <AvatarFallback data-emoji={!icon && EMOJI.test(fallback) ? '' : undefined}>\n              {icon ? <Icon.Icon icon={icon} /> : getAvatarGlyph(fallback)}\n            </AvatarFallback>\n          </>\n        )}\n      </AvatarPrimitive.Root>\n    );\n  },\n);\n\nAvatarRoot.displayName = 'Avatar.Root';\n\n//\n// Image\n//\n\ntype AvatarImageProps = ThemedClassName<AvatarPrimitive.ImageProps>;\n\nconst AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(\n  ({ classNames, alt = '', ...props }, forwardedRef) => (\n    <AvatarPrimitive.Image {...props} alt={alt} className={mx(recipes.avatarImage(), classNames)} ref={forwardedRef} />\n  ),\n);\n\nAvatarImage.displayName = 'Avatar.Image';\n\n//\n// Fallback\n//\n\ntype AvatarFallbackProps = ThemedClassName<AvatarPrimitive.FallbackProps>;\n\n/** Shown until the image loads; its text scales with the avatar (container query units). */\nconst AvatarFallback = forwardRef<HTMLSpanElement, AvatarFallbackProps>(({ classNames, ...props }, forwardedRef) => (\n  <AvatarPrimitive.Fallback\n    aria-hidden\n    {...props}\n    className={mx(recipes.avatarFallback(), classNames)}\n    ref={forwardedRef}\n  />\n));\n\nAvatarFallback.displayName = 'Avatar.Fallback';\nexport type { AvatarFallbackProps as FallbackProps, AvatarImageProps as ImageProps, AvatarRootProps as RootProps };\n\nexport { AvatarFallback as Fallback, AvatarImage as Image, AvatarRoot as Root };\nexport type {\n  AvatarAnimation as Animation,\n  AvatarHue as Hue,\n  AvatarHueVariant as HueVariant,\n  AvatarStatus as Status,\n  AvatarVariant as Variant,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,IAAa,eAAe,UAC1B,UAAU,YAAY,YAAY,KAAK,MAAM,QAAQ,QAAQ,KAAK;AAKpE,IAAM,eAAe,UACnB,MACG,KAAK,CAAA,CACL,MAAM,KAAK,CAAA,CACX,KAAK,SAAS,KAAK,QAAQ,mBAAmB,EAAE,CAAC,CAAA,CACjD,OAAO,OAAO,CAAA,CACd,MAAM,GAAG,CAAC,CAAA,CACV,KAAK,SAAS,KAAK,EAAE,CAAC,YAAY,CAAC;;;AAIxC,IAAM,QAAQ;AAEd,IAAa,kBAAkB,WAAW,OAAe;CACvD,MAAM,WAAW,YAAY,QAAQ;CACrC,OAAO,SAAS,SAAS,IAAI,SAAS,KAAK,EAAE,IAAI;AACnD;;;;;AAmCA,IAAM,aAAa,YAEf,EACE,YACA,MACA,MACA,UAAU,UACV,QACA,YAAY,QACZ,KACA,aAAa,QACb,KACA,UACA,WAAW,MACX,MACA,OACA,UACA,OACA,GAAG,SAEL,iBACG;CAEH,MAAM,CAAC,SAAS,cAAc,SAA0C;CACxE,MAAM,QAAQ,WAAW,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,KAAA;CAC/D,MAAM,gBAA8C,QAAQ,EAAE,wBAAwB,MAAM,IAAI,CAAC;CACjG,OACE,oBAAC,OAAgB,MAAjB;EACE,MAAK;EACL,GAAK,SAAS,EAAE,cAAc,MAAM;EACpC,GAAI;EACJ,aAAW;EACX,aAAW,OAAO,KAAK,KAAA;EACvB,gBAAc;EACd,eAAa;EACb,kBAAgB,cAAc,SAAS,KAAA,IAAY;EACnD,YAAU;EACV,oBAAkB;EAClB,iBAAe;EACf,OAAO;GAAE,GAAG;GAAe,GAAG;EAAM;EACpC,WAAW,GAAG,QAAQ,OAAO,GAAG,UAAU;EAC1C,KAAK;EAEJ,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACC,oBAAC,aAAD;GACO;GACL,QACE,aAAa,cACR,UAAU,WAAW;IAAE;IAAK,OAAO,oBAAoB,MAAM,aAAa;GAAE,CAAC,IAC9E,KAAA;EAEP,CAAA,GAEH,oBAAC,gBAAD;GAAgB,cAAY,CAAC,QAAQ,MAAM,KAAK,QAAQ,IAAI,KAAK,KAAA;GAC9D,UAAA,OAAO,oBAAC,MAAD,EAAiB,KAAO,CAAA,IAAI,eAAe,QAAQ;EAC7C,CAAA,CAChB,EAAA,CAAA;CAEgB,CAAA;AAE1B,CACF;AAEA,WAAW,cAAc;AAQzB,IAAM,cAAc,YACjB,EAAE,YAAY,MAAM,IAAI,GAAG,SAAS,iBACnC,oBAAC,OAAgB,OAAjB;CAAuB,GAAI;CAAY;CAAK,WAAW,GAAG,QAAQ,YAAY,GAAG,UAAU;CAAG,KAAK;AAAe,CAAA,CAEtH;AAEA,YAAY,cAAc;;AAS1B,IAAM,iBAAiB,YAAkD,EAAE,YAAY,GAAG,SAAS,iBACjG,oBAAC,OAAgB,UAAjB;CACE,eAAA;CACA,GAAI;CACJ,WAAW,GAAG,QAAQ,eAAe,GAAG,UAAU;CAClD,KAAK;AACN,CAAA,CACF;AAED,eAAe,cAAc"}

package/dist/lib/Banner.mjs

@@ -0,0 +1,133 @@
+import { t as __exportAll } from "./chunk-rolldown-runtime.mjs";
+import { t as recipes } from "./chunk-recipes.mjs";
+import { n as composableProps, r as slottable, t as composable } from "./chunk-slots.mjs";
+import { t as Block } from "./chunk-Block.mjs";
+import { Icon } from "./Icon.mjs";
+import { n as DefaultGutterProvider, o as useInGrid, r as containerAttributes } from "./chunk-Container.mjs";
+import { t as Button } from "./chunk-Button.mjs";
+import { t as Typography } from "./chunk-Typography.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { createContext as createContext$1 } from "@dxos/react-hooks";
+import { useTranslation } from "react-i18next";
+import { translationKey } from "#translations";
+//#region src/next/components/Banner/Banner.tsx
+var Banner_exports = /* @__PURE__ */ __exportAll({
+	Body: () => BannerBody,
+	Root: () => BannerRoot,
+	Title: () => BannerTitle
+});
+var BANNER_ICONS = {
+	success: "ph--check-circle--duotone",
+	info: "ph--info--duotone",
+	warning: "ph--warning--duotone",
+	error: "ph--warning-circle--duotone",
+	neutral: "ph--info--duotone"
+};
+var [BannerProvider, useBannerContext] = createContext$1("Banner");
+/**
+* A message on its valence's surface: a rail-gutter Container whose Title puts the icon in the start rail and an
+* optional close button in the end rail, so the Body aligns with the title text. A neutral banner is a note,
+* any other an alert. Buttons with `variant='valence'` inside it take its colours.
+*/
+var BannerRoot = composable(({ children, valence = "neutral", icon, inset: insetProp, ...props }, forwardedRef) => {
+	const titleId = useId();
+	const descriptionId = useId();
+	const inGrid = useInGrid();
+	const inset = insetProp ?? !inGrid;
+	const { style, ...attributes } = containerAttributes({ gutter: "rail" });
+	const { className, style: propsStyle, ...rest } = composableProps(props, {
+		classNames: [recipes.container(), recipes.banner()],
+		role: valence === "neutral" ? "note" : "alert"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"aria-labelledby": titleId,
+		"aria-describedby": descriptionId,
+		...rest,
+		...attributes,
+		"data-scope": "banner",
+		"data-part": "root",
+		"data-valence": valence,
+		"data-inset": inset ? "" : void 0,
+		style: {
+			...style,
+			...propsStyle
+		},
+		className,
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx(BannerProvider, {
+			titleId,
+			descriptionId,
+			valence,
+			icon,
+			children: /* @__PURE__ */ jsx(DefaultGutterProvider, {
+				gutter: void 0,
+				children
+			})
+		})
+	});
+});
+BannerRoot.displayName = "Banner.Root";
+var BannerTitle = composable(({ children, icon: iconProp, onClose, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const { titleId, valence, icon: rootIcon } = useBannerContext("Banner.Title");
+	const icon = iconProp ?? rootIcon ?? BANNER_ICONS[valence];
+	const { style, ...attributes } = containerAttributes({ layout: "row" });
+	const { className, style: propsStyle, ...rest } = composableProps(props, { classNames: [recipes.container(), recipes.bannerTitle()] });
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		...attributes,
+		"data-scope": "banner",
+		"data-part": "title",
+		style: {
+			...style,
+			...propsStyle
+		},
+		className,
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsx(Block, {
+				rail: "start",
+				children: /* @__PURE__ */ jsx(Icon, { icon })
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("h2", {
+					id: titleId,
+					children
+				})
+			}),
+			onClose && /* @__PURE__ */ jsx(Block, {
+				rail: "end",
+				children: /* @__PURE__ */ jsx(Button, {
+					icon: "ph--x--regular",
+					label: t("toolbar-close.label"),
+					iconOnly: true,
+					variant: "ghost",
+					onClick: onClose
+				})
+			})
+		]
+	});
+});
+BannerTitle.displayName = "Banner.Title";
+var BannerBody = slottable(({ children, asChild, ...props }, forwardedRef) => {
+	const { descriptionId } = useBannerContext("Banner.Body");
+	const { className, ...rest } = composableProps(props, { classNames: [recipes.typography(), recipes.bannerBody()] });
+	return /* @__PURE__ */ jsx(ark.p, {
+		asChild,
+		...rest,
+		id: descriptionId,
+		"data-scope": "banner",
+		"data-part": "body",
+		className,
+		ref: forwardedRef,
+		children
+	});
+});
+BannerBody.displayName = "Banner.Body";
+//#endregion
+export { BannerBody as Body, BannerRoot as Root, BannerTitle as Title, Banner_exports as t };
+
+//# sourceMappingURL=Banner.mjs.map

package/dist/lib/Banner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.mjs","names":[],"sources":["../../src/next/components/Banner/Banner.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { ark } from '@ark-ui/react/factory';\nimport React, { type ReactNode, useId } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { createContext } from '@dxos/react-hooks';\nimport { type MessageValence } from '@dxos/ui-types';\n\nimport { translationKey } from '#translations';\n\nimport { composable, composableProps, slottable } from '../../../util/slots.ts';\nimport { recipes } from '../../recipes.ts';\nimport { Block } from '../Block/Block.tsx';\nimport { Button } from '../Button/Button.tsx';\nimport { DefaultGutterProvider, containerAttributes, useInGrid } from '../Container/Container.tsx';\nimport * as Icon from '../Icon/Icon.tsx';\nimport * as Typography from '../Typography/Typography.tsx';\n\nconst BANNER_ICONS: Record<MessageValence, string> = {\n  success: 'ph--check-circle--duotone',\n  info: 'ph--info--duotone',\n  warning: 'ph--warning--duotone',\n  error: 'ph--warning-circle--duotone',\n  neutral: 'ph--info--duotone',\n};\n\ntype BannerContextValue = { titleId: string; descriptionId: string; valence: MessageValence; icon?: string };\n\nconst [BannerProvider, useBannerContext] = createContext<BannerContextValue>('Banner');\n\n//\n// Root\n//\n\ntype BannerRootProps = {\n  valence?: MessageValence;\n  /** Overrides the valence's icon in the Title's start rail. */\n  icon?: string;\n  /** Inset by a gutter of its own; by default only outside a grid, so `false` for a host that already pads it. */\n  inset?: boolean;\n};\n\n/**\n * A message on its valence's surface: a rail-gutter Container whose Title puts the icon in the start rail and an\n * optional close button in the end rail, so the Body aligns with the title text. A neutral banner is a note,\n * any other an alert. Buttons with `variant='valence'` inside it take its colours.\n */\nconst BannerRoot = composable<HTMLDivElement, BannerRootProps>(\n  ({ children, valence = 'neutral', icon, inset: insetProp, ...props }, forwardedRef) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    // Outside a Container (a pane's body) there is no gutter to sit in, so the banner insets itself as a form's would be.\n    const inGrid = useInGrid();\n    const inset = insetProp ?? !inGrid;\n    const { style, ...attributes } = containerAttributes({ gutter: 'rail' });\n    const {\n      className,\n      style: propsStyle,\n      ...rest\n    } = composableProps<HTMLDivElement>(props, {\n      classNames: [recipes.container(), recipes.banner()],\n      role: valence === 'neutral' ? 'note' : 'alert',\n    });\n    return (\n      <div\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        {...rest}\n        {...attributes}\n        data-scope='banner'\n        data-part='root'\n        data-valence={valence}\n        data-inset={inset ? '' : undefined}\n        style={{ ...style, ...propsStyle }}\n        className={className}\n        ref={forwardedRef}\n      >\n        <BannerProvider titleId={titleId} descriptionId={descriptionId} valence={valence} icon={icon}>\n          <DefaultGutterProvider gutter={undefined}>{children}</DefaultGutterProvider>\n        </BannerProvider>\n      </div>\n    );\n  },\n);\n\nBannerRoot.displayName = 'Banner.Root';\n\n//\n// Title\n//\n\ntype BannerTitleProps = {\n  /** Overrides the Root's icon for this title. */\n  icon?: string;\n  /** Shows a close button in the end rail. */\n  onClose?: () => void;\n  children?: ReactNode;\n};\n\nconst BannerTitle = composable<HTMLDivElement, BannerTitleProps>(\n  ({ children, icon: iconProp, onClose, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    const { titleId, valence, icon: rootIcon } = useBannerContext('Banner.Title');\n    const icon = iconProp ?? rootIcon ?? BANNER_ICONS[valence];\n    const { style, ...attributes } = containerAttributes({ layout: 'row' });\n    const {\n      className,\n      style: propsStyle,\n      ...rest\n    } = composableProps<HTMLDivElement>(props, {\n      classNames: [recipes.container(), recipes.bannerTitle()],\n    });\n    return (\n      <div\n        {...rest}\n        {...attributes}\n        data-scope='banner'\n        data-part='title'\n        style={{ ...style, ...propsStyle }}\n        className={className}\n        ref={forwardedRef}\n      >\n        <Block rail='start'>\n          <Icon.Icon icon={icon} />\n        </Block>\n        <Typography.Text asChild>\n          <h2 id={titleId}>{children}</h2>\n        </Typography.Text>\n        {onClose && (\n          <Block rail='end'>\n            <Button icon='ph--x--regular' label={t('toolbar-close.label')} iconOnly variant='ghost' onClick={onClose} />\n          </Block>\n        )}\n      </div>\n    );\n  },\n);\n\nBannerTitle.displayName = 'Banner.Title';\n\n//\n// Body\n//\n\nconst BannerBody = slottable<HTMLParagraphElement>(({ children, asChild, ...props }, forwardedRef) => {\n  const { descriptionId } = useBannerContext('Banner.Body');\n  const { className, ...rest } = composableProps(props, {\n    classNames: [recipes.typography(), recipes.bannerBody()],\n  });\n  return (\n    <ark.p\n      asChild={asChild}\n      {...rest}\n      id={descriptionId}\n      data-scope='banner'\n      data-part='body'\n      className={className}\n      ref={forwardedRef}\n    >\n      {children}\n    </ark.p>\n  );\n});\n\nBannerBody.displayName = 'Banner.Body';\nexport type { BannerRootProps as RootProps, BannerTitleProps as TitleProps };\n\nexport { BannerBody as Body, BannerRoot as Root, BannerTitle as Title };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,IAAM,eAA+C;CACnD,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,SAAS;AACX;AAIA,IAAM,CAAC,gBAAgB,oBAAoB,gBAAkC,QAAQ;;;;;;AAmBrF,IAAM,aAAa,YAChB,EAAE,UAAU,UAAU,WAAW,MAAM,OAAO,WAAW,GAAG,SAAS,iBAAiB;CACrF,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAE5B,MAAM,SAAS,UAAU;CACzB,MAAM,QAAQ,aAAa,CAAC;CAC5B,MAAM,EAAE,OAAO,GAAG,eAAe,oBAAoB,EAAE,QAAQ,OAAO,CAAC;CACvE,MAAM,EACJ,WACA,OAAO,YACP,GAAG,SACD,gBAAgC,OAAO;EACzC,YAAY,CAAC,QAAQ,UAAU,GAAG,QAAQ,OAAO,CAAC;EAClD,MAAM,YAAY,YAAY,SAAS;CACzC,CAAC;CACD,OACE,oBAAC,OAAD;EACE,mBAAiB;EACjB,oBAAkB;EAClB,GAAI;EACJ,GAAI;EACJ,cAAW;EACX,aAAU;EACV,gBAAc;EACd,cAAY,QAAQ,KAAK,KAAA;EACzB,OAAO;GAAE,GAAG;GAAO,GAAG;EAAW;EACtB;EACX,KAAK;EAEL,UAAA,oBAAC,gBAAD;GAAyB;GAAwB;GAAwB;GAAe;GACtF,UAAA,oBAAC,uBAAD;IAAuB,QAAQ,KAAA;IAAY;GAAgC,CAAA;EAC7D,CAAA;CACb,CAAA;AAET,CACF;AAEA,WAAW,cAAc;AAczB,IAAM,cAAc,YACjB,EAAE,UAAU,MAAM,UAAU,SAAS,GAAG,SAAS,iBAAiB;CACjE,MAAM,EAAE,MAAM,eAAe,cAAc;CAC3C,MAAM,EAAE,SAAS,SAAS,MAAM,aAAa,iBAAiB,cAAc;CAC5E,MAAM,OAAO,YAAY,YAAY,aAAa;CAClD,MAAM,EAAE,OAAO,GAAG,eAAe,oBAAoB,EAAE,QAAQ,MAAM,CAAC;CACtE,MAAM,EACJ,WACA,OAAO,YACP,GAAG,SACD,gBAAgC,OAAO,EACzC,YAAY,CAAC,QAAQ,UAAU,GAAG,QAAQ,YAAY,CAAC,EACzD,CAAC;CACD,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACJ,cAAW;EACX,aAAU;EACV,OAAO;GAAE,GAAG;GAAO,GAAG;EAAW;EACtB;EACX,KAAK;EAPP,UAAA;GASE,oBAAC,OAAD;IAAO,MAAK;IACV,UAAA,oBAAC,MAAD,EAAiB,KAAO,CAAA;GACnB,CAAA;GACP,oBAAC,YAAD;IAAiB,SAAA;IACf,UAAA,oBAAC,MAAD;KAAI,IAAI;KAAU;IAAa,CAAA;GAChB,CAAA;GAChB,WACC,oBAAC,OAAD;IAAO,MAAK;IACV,UAAA,oBAAC,QAAD;KAAQ,MAAK;KAAiB,OAAO,EAAE,qBAAqB;KAAG,UAAA;KAAS,SAAQ;KAAQ,SAAS;IAAU,CAAA;GACtG,CAAA;EAEN;;AAET,CACF;AAEA,YAAY,cAAc;AAM1B,IAAM,aAAa,WAAiC,EAAE,UAAU,SAAS,GAAG,SAAS,iBAAiB;CACpG,MAAM,EAAE,kBAAkB,iBAAiB,aAAa;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS,gBAAgB,OAAO,EACpD,YAAY,CAAC,QAAQ,WAAW,GAAG,QAAQ,WAAW,CAAC,EACzD,CAAC;CACD,OACE,oBAAC,IAAI,GAAL;EACW;EACT,GAAI;EACJ,IAAI;EACJ,cAAW;EACX,aAAU;EACC;EACX,KAAK;EAEJ;CACI,CAAA;AAEX,CAAC;AAED,WAAW,cAAc"}

package/dist/lib/Breadcrumb.mjs

@@ -0,0 +1,77 @@
+import { t as __exportAll } from "./chunk-rolldown-runtime.mjs";
+import { t as recipes } from "./chunk-recipes.mjs";
+import { Icon } from "./Icon.mjs";
+import { forwardRef } from "react";
+import { mx } from "@dxos/ui-theme";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+//#region src/next/components/Breadcrumb/Breadcrumb.tsx
+var Breadcrumb_exports = /* @__PURE__ */ __exportAll({
+	Current: () => BreadcrumbCurrent,
+	Item: () => BreadcrumbItem,
+	Link: () => BreadcrumbLink,
+	List: () => BreadcrumbList,
+	Root: () => BreadcrumbRoot,
+	Separator: () => BreadcrumbSeparator
+});
+/** The `<nav>` landmark holding the trail. */
+var BreadcrumbRoot = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(ark.nav, {
+	...props,
+	"data-scope": "breadcrumb",
+	"data-part": "root",
+	className: mx(recipes.breadcrumb(), classNames),
+	ref: forwardedRef
+}));
+BreadcrumbRoot.displayName = "Breadcrumb.Root";
+/** The ordered trail, one row that scrolls sideways (without a scrollbar) when it overflows. */
+var BreadcrumbList = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(ark.ol, {
+	...props,
+	"data-scope": "breadcrumb",
+	"data-part": "list",
+	className: mx(recipes.breadcrumbList(), classNames),
+	ref: forwardedRef
+}));
+BreadcrumbList.displayName = "Breadcrumb.List";
+/** One step of the trail, holding a Link or, last, the Current page. */
+var BreadcrumbItem = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(ark.li, {
+	...props,
+	"data-scope": "breadcrumb",
+	"data-part": "item",
+	className: mx(recipes.breadcrumbItem(), classNames),
+	ref: forwardedRef
+}));
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+/** An earlier step: an anchor, or with `asChild` a button for in-app navigation. Subdued until hovered. */
+var BreadcrumbLink = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(ark.a, {
+	...props,
+	"data-scope": "breadcrumb",
+	"data-part": "link",
+	className: mx(recipes.breadcrumbLink(), classNames),
+	ref: forwardedRef
+}));
+BreadcrumbLink.displayName = "Breadcrumb.Link";
+/** The page the reader is on (`aria-current='page'`); `asChild` puts the mark on the caller's own title element. */
+var BreadcrumbCurrent = forwardRef(({ classNames, ...props }, forwardedRef) => /* @__PURE__ */ jsx(ark.span, {
+	...props,
+	"aria-current": "page",
+	"data-scope": "breadcrumb",
+	"data-part": "current",
+	className: mx(recipes.breadcrumbCurrent(), classNames),
+	ref: forwardedRef
+}));
+BreadcrumbCurrent.displayName = "Breadcrumb.Current";
+/** A decorative list item between steps, hidden from assistive tech so the list counts only steps. */
+var BreadcrumbSeparator = forwardRef(({ classNames, icon = "ph--caret-right--regular", ...props }, forwardedRef) => /* @__PURE__ */ jsx("li", {
+	...props,
+	"aria-hidden": true,
+	"data-scope": "breadcrumb",
+	"data-part": "separator",
+	className: mx(recipes.breadcrumbSeparator(), classNames),
+	ref: forwardedRef,
+	children: /* @__PURE__ */ jsx(Icon, { icon })
+}));
+BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
+//#endregion
+export { BreadcrumbCurrent as Current, BreadcrumbItem as Item, BreadcrumbLink as Link, BreadcrumbList as List, BreadcrumbRoot as Root, BreadcrumbSeparator as Separator, Breadcrumb_exports as t };
+
+//# sourceMappingURL=Breadcrumb.mjs.map

package/dist/lib/Breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../src/next/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// @import-as-namespace\n\n// Ark has no breadcrumb, so this follows the WAI-ARIA breadcrumb pattern with native elements: a labelled `<nav>`\n// landmark around an ordered list, the last item marked `aria-current='page'`.\n\nimport { ark } from '@ark-ui/react/factory';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { mx } from '@dxos/ui-theme';\nimport { type ThemedClassName } from '@dxos/ui-types';\n\nimport { recipes } from '../../recipes.ts';\nimport * as Icon from '../Icon/Icon.tsx';\n\n//\n// Root\n//\n\ntype BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof ark.nav>> & {\n  /** Names the landmark, e.g. \"Breadcrumbs\". */\n  'aria-label': string;\n};\n\n/** The `<nav>` landmark holding the trail. */\nconst BreadcrumbRoot = forwardRef<HTMLElement, BreadcrumbRootProps>(({ classNames, ...props }, forwardedRef) => (\n  <ark.nav\n    {...props}\n    data-scope='breadcrumb'\n    data-part='root'\n    className={mx(recipes.breadcrumb(), classNames)}\n    ref={forwardedRef}\n  />\n));\n\nBreadcrumbRoot.displayName = 'Breadcrumb.Root';\n\n//\n// List\n//\n\ntype BreadcrumbListProps = ThemedClassName<ComponentPropsWithRef<typeof ark.ol>>;\n\n/** The ordered trail, one row that scrolls sideways (without a scrollbar) when it overflows. */\nconst BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(({ classNames, ...props }, forwardedRef) => (\n  <ark.ol\n    {...props}\n    data-scope='breadcrumb'\n    data-part='list'\n    className={mx(recipes.breadcrumbList(), classNames)}\n    ref={forwardedRef}\n  />\n));\n\nBreadcrumbList.displayName = 'Breadcrumb.List';\n\n//\n// Item\n//\n\ntype BreadcrumbItemProps = ThemedClassName<ComponentPropsWithRef<typeof ark.li>>;\n\n/** One step of the trail, holding a Link or, last, the Current page. */\nconst BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(({ classNames, ...props }, forwardedRef) => (\n  <ark.li\n    {...props}\n    data-scope='breadcrumb'\n    data-part='item'\n    className={mx(recipes.breadcrumbItem(), classNames)}\n    ref={forwardedRef}\n  />\n));\n\nBreadcrumbItem.displayName = 'Breadcrumb.Item';\n\n//\n// Link\n//\n\ntype BreadcrumbLinkProps = ThemedClassName<ComponentPropsWithRef<typeof ark.a>>;\n\n/** An earlier step: an anchor, or with `asChild` a button for in-app navigation. Subdued until hovered. */\nconst BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(({ classNames, ...props }, forwardedRef) => (\n  <ark.a\n    {...props}\n    data-scope='breadcrumb'\n    data-part='link'\n    className={mx(recipes.breadcrumbLink(), classNames)}\n    ref={forwardedRef}\n  />\n));\n\nBreadcrumbLink.displayName = 'Breadcrumb.Link';\n\n//\n// Current\n//\n\ntype BreadcrumbCurrentProps = ThemedClassName<ComponentPropsWithRef<typeof ark.span>>;\n\n/** The page the reader is on (`aria-current='page'`); `asChild` puts the mark on the caller's own title element. */\nconst BreadcrumbCurrent = forwardRef<HTMLSpanElement, BreadcrumbCurrentProps>(\n  ({ classNames, ...props }, forwardedRef) => (\n    <ark.span\n      {...props}\n      aria-current='page'\n      data-scope='breadcrumb'\n      data-part='current'\n      className={mx(recipes.breadcrumbCurrent(), classNames)}\n      ref={forwardedRef}\n    />\n  ),\n);\n\nBreadcrumbCurrent.displayName = 'Breadcrumb.Current';\n\n//\n// Separator\n//\n\ntype BreadcrumbSeparatorProps = ThemedClassName<Omit<ComponentPropsWithRef<'li'>, 'children'>> & {\n  /** Replaces the default caret. */\n  icon?: string;\n};\n\n/** A decorative list item between steps, hidden from assistive tech so the list counts only steps. */\nconst BreadcrumbSeparator = forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ classNames, icon = 'ph--caret-right--regular', ...props }, forwardedRef) => (\n    <li\n      {...props}\n      aria-hidden\n      data-scope='breadcrumb'\n      data-part='separator'\n      className={mx(recipes.breadcrumbSeparator(), classNames)}\n      ref={forwardedRef}\n    >\n      <Icon.Icon icon={icon} />\n    </li>\n  ),\n);\n\nBreadcrumbSeparator.displayName = 'Breadcrumb.Separator';\nexport type {\n  BreadcrumbCurrentProps as CurrentProps,\n  BreadcrumbItemProps as ItemProps,\n  BreadcrumbLinkProps as LinkProps,\n  BreadcrumbListProps as ListProps,\n  BreadcrumbRootProps as RootProps,\n  BreadcrumbSeparatorProps as SeparatorProps,\n};\n\nexport {\n  BreadcrumbCurrent as Current,\n  BreadcrumbItem as Item,\n  BreadcrumbLink as Link,\n  BreadcrumbList as List,\n  BreadcrumbRoot as Root,\n  BreadcrumbSeparator as Separator,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,IAAM,iBAAiB,YAA8C,EAAE,YAAY,GAAG,SAAS,iBAC7F,oBAAC,IAAI,KAAL;CACE,GAAI;CACJ,cAAW;CACX,aAAU;CACV,WAAW,GAAG,QAAQ,WAAW,GAAG,UAAU;CAC9C,KAAK;AACN,CAAA,CACF;AAED,eAAe,cAAc;;AAS7B,IAAM,iBAAiB,YAAmD,EAAE,YAAY,GAAG,SAAS,iBAClG,oBAAC,IAAI,IAAL;CACE,GAAI;CACJ,cAAW;CACX,aAAU;CACV,WAAW,GAAG,QAAQ,eAAe,GAAG,UAAU;CAClD,KAAK;AACN,CAAA,CACF;AAED,eAAe,cAAc;;AAS7B,IAAM,iBAAiB,YAAgD,EAAE,YAAY,GAAG,SAAS,iBAC/F,oBAAC,IAAI,IAAL;CACE,GAAI;CACJ,cAAW;CACX,aAAU;CACV,WAAW,GAAG,QAAQ,eAAe,GAAG,UAAU;CAClD,KAAK;AACN,CAAA,CACF;AAED,eAAe,cAAc;;AAS7B,IAAM,iBAAiB,YAAoD,EAAE,YAAY,GAAG,SAAS,iBACnG,oBAAC,IAAI,GAAL;CACE,GAAI;CACJ,cAAW;CACX,aAAU;CACV,WAAW,GAAG,QAAQ,eAAe,GAAG,UAAU;CAClD,KAAK;AACN,CAAA,CACF;AAED,eAAe,cAAc;;AAS7B,IAAM,oBAAoB,YACvB,EAAE,YAAY,GAAG,SAAS,iBACzB,oBAAC,IAAI,MAAL;CACE,GAAI;CACJ,gBAAa;CACb,cAAW;CACX,aAAU;CACV,WAAW,GAAG,QAAQ,kBAAkB,GAAG,UAAU;CACrD,KAAK;AACN,CAAA,CAEL;AAEA,kBAAkB,cAAc;;AAYhC,IAAM,sBAAsB,YACzB,EAAE,YAAY,OAAO,4BAA4B,GAAG,SAAS,iBAC5D,oBAAC,MAAD;CACE,GAAI;CACJ,eAAA;CACA,cAAW;CACX,aAAU;CACV,WAAW,GAAG,QAAQ,oBAAoB,GAAG,UAAU;CACvD,KAAK;CAEL,UAAA,oBAAC,MAAD,EAAiB,KAAO,CAAA;AACtB,CAAA,CAER;AAEA,oBAAoB,cAAc"}

package/dist/lib/Button.mjs

@@ -0,0 +1,5 @@
+import { t as Button } from "./chunk-Button.mjs";
+import { t as Group } from "./chunk-Group.mjs";
+import { n as MenuButton } from "./chunk-Button2.mjs";
+import { t as Toggle } from "./chunk-Toggle.mjs";
+export { Group, MenuButton as Menu, Button as Root, Toggle };