@botiverse/raft-ui 0.10.4 → 0.10.6

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.10.6](https://github.com/botiverse/raft-design/compare/v0.10.5...v0.10.6) (2026-10-21)
+
+### Added
+
+- Comments beside a document, as in Google Docs, through `@botiverse/raft-ui/wip`: `CommentMargin`, `CommentCard` (with `CommentCardTrigger`, `CommentCardMeta`, `CommentCardQuote`), `CommentEntry` and `CommentMarker`. Cards sit level with their passages and keep the document's order; on a narrow viewer a `CommentMarker` beside each passage opens the discussion in a bottom sheet instead. `useCommentMarginFits(viewer, { minWidth })` picks between the two, `setCommentHighlights` with `COMMENT_HIGHLIGHT` / `COMMENT_HIGHLIGHT_ACTIVE` highlights the passages, and `resolveCommentMarginLayout` is the layout for callers that place cards themselves. New pattern: Comments. ([#614](https://github.com/botiverse/raft-design/pull/614))
+- `AvatarGroup` reads `--avatar-group-surface` (default `layer-canvas`) for the ring between overlapping avatars, so a stack on another surface can match it. ([#614](https://github.com/botiverse/raft-design/pull/614))
+
+## [0.10.5](https://github.com/botiverse/raft-design/compare/v0.10.4...v0.10.5) (2026-10-20)
+
+### Added
+
+- `ComboboxSelect` takes `sheetThreshold` (default 10) and `sheetTitle`, and its `messages` take `search`, `done` and `close` for the phone's bottom sheet. ([#618](https://github.com/botiverse/raft-design/pull/618))
+
+### Fixed
+
+- `ComboboxSelect` on a phone (a touch screen under 48rem) no longer focuses a text input and raises the keyboard when people only pick a value. Up to `sheetThreshold` options open as an anchored list that picks its side once and doesn't flip while the keyboard or the address bar moves; more options, `create` and remote search open a bottom sheet with the search input at its top. Desktop and touch tablets are unchanged. ([#618](https://github.com/botiverse/raft-design/pull/618))
+
 ## [0.10.4](https://github.com/botiverse/raft-design/compare/v0.10.3...v0.10.4) (2026-10-20)
 
 ### Fixed

package/dist/components/combobox-select/combobox-select.css

@@ -270,6 +270,121 @@
   background: var(--fill-muted);
   color: var(--foreground-disabled);
 }
+/* On a phone the field is a trigger, not a text input: a select-like button
+   that shows the value. Its hit area covers the whole field; the clear button
+   sits above it. */
+.r-combobox-select__trigger {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: inherit;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+}
+.r-combobox-select__trigger::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.r-combobox-select__trigger:disabled {
+  color: inherit;
+}
+.r-combobox-select__value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.r-combobox-select__placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--foreground-hint);
+}
+.r-combobox-select__trigger .r-combobox-select__chips {
+  margin-inline-start: -6px;
+}
+.r-combobox-select__trigger .r-combobox-select__chip {
+  padding-inline-end: 8px;
+}
+.r-combobox-select__clear {
+  position: relative;
+  z-index: 1;
+}
+.r-combobox-select__arrow {
+  pointer-events: none;
+}
+.r-combobox-select__control--trigger[data-popup-open] .r-combobox-select__arrow > svg {
+  transform: rotate(180deg);
+}
+/* The phone's anchored list fits the room on its side instead of flipping. */
+.r-combobox-select__popup--anchored .r-combobox-select__list {
+  box-sizing: border-box;
+  max-height: min(calc(16rem + 12px), var(--available-height, 100vh));
+}
+/* The phone's bottom sheet: the field's label as its title, the search input
+   at its top, then the whole list, scrolling in the rest of the sheet. */
+.r-combobox-select__sheet-popup {
+  height: 82dvh;
+}
+.r-combobox-select__sheet {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+.r-combobox-select__sheet-header {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-inline-end: 8px;
+}
+.r-combobox-select__sheet-title {
+  min-width: 0;
+  flex: 1;
+}
+.r-combobox-select__sheet-search {
+  flex: 0 0 auto;
+  padding: 4px 16px 8px;
+}
+.r-combobox-select__search-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  color: var(--foreground-hint);
+}
+.r-combobox-select__sheet-body {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px));
+}
+.r-combobox-select__sheet .r-combobox-select__list {
+  max-height: none;
+  overflow: visible;
+  padding: 0;
+}
+.r-combobox-select__sheet .r-combobox-select__option {
+  min-height: 52px;
+  padding: 0 12px;
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+}
+.r-combobox-select__sheet .r-combobox-select__group-label {
+  padding: 12px 12px 4px;
+}
 @keyframes r-combobox-select-spin {
   to {
     transform: rotate(360deg);

package/dist/{dialog-CDPAT3DH.mjs → drawer-yZD16Ybl.mjs}

@@ -7,6 +7,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { Drawer } from "@base-ui/react/drawer";
 //#region src/lib/tv.ts
 const tv$1 = ((options) => {
 	const recipe = tv(options);
@@ -544,4 +545,444 @@ function DialogNav({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { ThemeStateContext as C, useTheme as S, defaultNativeButton as _, DialogDescription as a, resolveThemeScopeProps as b, DialogNav as c, DialogSurface as d, DialogTitle as f, Spinner as g, buttonVariants as h, DialogContent as i, DialogOverlay as l, Button$1 as m, DialogBody as n, DialogFooter as o, DialogTrigger as p, DialogClose as r, DialogHeader as s, Dialog$1 as t, DialogPortal as u, useParentOverlayKind as v, tv$1 as w, useThemeScopeProps as x, withOverlayLayer as y };
+//#region src/components/panel/panel-header.recipe.ts
+/**
+* Where a head's edge controls sit, shared by every head (panel, section,
+* drawer, thread). Phone: a filled thing (a sticker, a pill) puts its shape
+* on 16. A ghost button has no shape, so its empty 44px box overhangs, and
+* the two edge buttons mirror each other: the last action (6px padding,
+* `panelHeadActions`' -3px) and a leading Back (16px padding, -13px) both sit
+* 3px from their edge. Their 22px icon frames are then 14px in and every
+* glyph's centre 25px in, whatever the glyph (an arrow, a gear, a narrow ⋮);
+* aligning ink instead would move each button by its glyph's own side
+* bearing. A Button straight in the head (ghost ones are PanelActions) is a
+* filled control, so its shape ends on the content edge: 20 / 16.
+*/
+const panelHeadEdges = [
+	"pr-3 pl-5 max-md:pr-1.5 max-md:pl-4",
+	"max-md:[&>[data-slot=panel-action]:first-child]:-ml-[13px]",
+	"[&>[data-slot=button]:last-child]:mr-2 max-md:[&>[data-slot=button]:last-child]:mr-2.5"
+];
+/**
+* A head's trailing actions. The last glyph ends on the head's edge: 20px on
+* desktop (12px of padding, 1px here, the 32px button's 7px glyph inset); on
+* a phone 14px in (44px buttons, 11px inset), mirroring a leading Back. The
+* margin and gap follow the button's size, not the layout: a touch screen
+* from 768px has the desktop head with 44px buttons, so -3px puts its last
+* glyph on 20px too.
+*/
+const panelHeadActions = "flex shrink-0 items-center gap-0.5 mr-[-3px] md:pointer-fine:mr-px md:pointer-fine:gap-1";
+/**
+* `header` and `sectionHeader` share one bar, expressed through
+* `compoundSlots`: a 56px row (the shell header height) with a seam under it.
+* On a phone the section head sits on the frame.
+*/
+const panelHeader = tv$1({
+	slots: {
+		header: [],
+		sectionHeader: [],
+		headerIcon: [
+			"flex size-[27px] shrink-0 items-center justify-center",
+			"rounded-sticker border-[1.5px] border-sticker-ink bg-brand text-sticker-ink ring-[1.5px] ring-sticker-edge",
+			"not-data-[icon-kind=avatar]:[&_svg]:size-3.5 not-data-[icon-kind=avatar]:[&_svg]:stroke-2",
+			"data-[icon-kind=avatar]:size-auto data-[icon-kind=avatar]:border-transparent data-[icon-kind=avatar]:bg-transparent"
+		],
+		headerContent: "flex min-w-0 flex-1 flex-col justify-center",
+		heading: "flex min-w-0 items-center gap-2",
+		title: "truncate font-sans text-headline font-bold text-foreground",
+		meta: "min-w-0 truncate font-sans text-caption text-foreground-hint",
+		status: [
+			"inline-flex shrink-0 items-center gap-1 border-0 bg-transparent p-0",
+			"font-sans text-caption font-medium normal-case text-foreground-hint",
+			"[&_svg]:size-3.5 [&_svg]:shrink-0"
+		],
+		activity: [
+			"inline-flex shrink-0 items-center gap-1.5",
+			"font-sans text-caption text-foreground-hint",
+			"[&_svg]:size-3.5 [&_svg]:shrink-0"
+		],
+		actions: panelHeadActions
+	},
+	variants: { size: {
+		sm: {},
+		md: { meta: ["text-footnote"] }
+	} },
+	compoundSlots: [{
+		slots: ["header", "sectionHeader"],
+		class: [
+			"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
+			panelHeadEdges,
+			"border-b border-line-seam bg-layer-canvas text-foreground",
+			"max-md:sticky max-md:top-0 max-md:z-30"
+		]
+	}, {
+		slots: ["sectionHeader"],
+		class: [
+			"max-md:bg-layer-frame max-md:text-foreground-on-frame",
+			"max-md:[&>[data-slot=panel-header-icon]]:hidden",
+			"max-md:**:data-[slot=panel-title]:text-foreground-on-frame",
+			"max-md:**:data-[slot=panel-meta]:text-foreground-on-frame-muted",
+			"max-md:**:data-[slot=panel-action]:text-foreground-on-frame",
+			"max-md:**:data-[slot=panel-action]:hover:bg-fill-frame-pressed max-md:**:data-[slot=panel-action]:active:bg-fill-frame-pressed"
+		]
+	}]
+});
+const drawer = tv$1({
+	extend: tv$1({
+		slots: {
+			overlay: [
+				"opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))]",
+				"transition-opacity duration-200 ease-slide",
+				"data-starting-style:opacity-0 data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-150",
+				"motion-reduce:transition-none"
+			],
+			popup: [
+				"[--drawer-blur:2px] [--drawer-ease:var(--ease-slide)]",
+				"[--closed-transform:translate3d(var(--drawer-exit-x,0px),var(--drawer-exit-y,0px),0)]",
+				"[--drawer-stack-peek:16px] [--drawer-stack-step:0.05]",
+				"[--drawer-stack-progress:clamp(0,var(--drawer-swipe-progress),1)]",
+				"[--drawer-stack-offset:max(0px,calc((var(--nested-drawers)-var(--drawer-stack-progress))*var(--drawer-stack-peek)))]",
+				"[--drawer-stack-scale-base:calc(max(0,1-(var(--nested-drawers)*var(--drawer-stack-step))))]",
+				"[--drawer-stack-scale:clamp(0,calc(var(--drawer-stack-scale-base)+(var(--drawer-stack-step)*var(--drawer-stack-progress))),1)]",
+				"[--drawer-stack-shrink:calc(1-var(--drawer-stack-scale))]",
+				"[--drawer-stack-shrink-offset:calc(var(--drawer-stack-shrink)*var(--drawer-stack-size))]",
+				"origin-(--drawer-transform-origin)",
+				"transform-[translate3d(calc(var(--drawer-swipe-x,0px)+var(--drawer-stack-x,0px)),calc(var(--drawer-swipe-y,0px)+var(--drawer-stack-y,0px)),0)_scale(var(--drawer-stack-scale))]",
+				"opacity-100 blur-0",
+				"transition-[transform,height,opacity,filter] duration-240 ease-(--drawer-ease) will-change-transform",
+				"data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*180ms)]",
+				"data-starting-style:transform-(--closed-transform) data-starting-style:opacity-0 data-starting-style:blur-(--drawer-blur)",
+				"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-0 data-ending-style:blur-(--drawer-blur)",
+				"data-swiping:duration-0 data-nested-drawer-swiping:duration-0 motion-reduce:transition-none"
+			],
+			content: ["transition-opacity duration-150 ease-slide motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"],
+			swipeHandle: ["transition-opacity duration-150 motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"]
+		},
+		variants: {
+			side: {
+				down: { popup: [
+					"[--drawer-exit-y:calc(100%+var(--drawer-inset)+2px)]",
+					"[--drawer-stack-y:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
+					"[--drawer-transform-origin:50%_100%]"
+				] },
+				up: { popup: [
+					"[--drawer-exit-y:calc(-100%-var(--drawer-inset)-2px)]",
+					"[--drawer-stack-y:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
+					"[--drawer-transform-origin:50%_0%]"
+				] },
+				left: { popup: [
+					"[--drawer-exit-x:calc(-100%-var(--drawer-inset)-2px)]",
+					"[--drawer-stack-x:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
+					"[--drawer-transform-origin:0%_50%]"
+				] },
+				right: { popup: [
+					"[--drawer-exit-x:calc(100%+var(--drawer-inset)+2px)]",
+					"[--drawer-stack-x:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
+					"[--drawer-transform-origin:100%_50%]"
+				] }
+			},
+			axis: {
+				x: { popup: ["[--drawer-stack-size:100%]", "[--drawer-swipe-x:var(--drawer-swipe-movement-x)]"] },
+				y: { popup: ["[--drawer-stack-size:max(0px,var(--drawer-frontmost-height,var(--drawer-height)))]", "[--drawer-swipe-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y))]"] }
+			},
+			snapPoints: { true: { overlay: ["[--drawer-overlay-min-opacity:0.5]"] } }
+		}
+	}),
+	slots: {
+		overlay: [
+			"fixed inset-0 z-50 min-h-dvh select-none",
+			"supports-[-webkit-touch-callout:none]:absolute",
+			"bg-layer-backdrop"
+		],
+		viewport: ["pointer-events-none fixed inset-0 z-50 select-none"],
+		popup: [
+			"group/drawer-popup pointer-events-auto fixed z-50 flex h-(--drawer-content-height) flex-col outline-none",
+			"[--drawer-inset:12px] [--drawer-content-height:var(--drawer-height,auto)]",
+			"data-nested-drawer-open:overflow-hidden",
+			"bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		content: ["flex min-h-0 flex-1 flex-col rounded-[inherit] select-text", "group-data-swiping/drawer-popup:select-none"],
+		swipeHandle: [
+			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
+			"before:absolute before:content-['']",
+			"before:rounded-[1px] before:bg-line-seam"
+		],
+		close: ["shrink-0"],
+		closeIcon: ["size-5.5"],
+		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
+		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
+		footer: ["mt-auto py-5", "px-4 pt-3 pb-4"],
+		actions: [
+			"flex w-full flex-col items-stretch",
+			"**:data-[slot=button]:w-full",
+			"gap-2"
+		],
+		title: ["text-pretty text-foreground", "max-w-none text-left font-sans text-headline font-bold"],
+		description: ["text-pretty", "max-w-none text-left font-sans text-callout text-foreground-muted"]
+	},
+	variants: {
+		nested: {
+			false: {},
+			true: { overlay: ["bg-layer-backdrop-nested"] }
+		},
+		side: {
+			down: {
+				popup: [
+					"bottom-(--drawer-inset) min-h-64 max-h-[82vh]",
+					"rounded-t-dialog [--drawer-inset:0px]",
+					"pb-[env(safe-area-inset-bottom,0px)]"
+				],
+				swipeHandle: ["before:top-3"]
+			},
+			up: {
+				popup: [
+					"top-(--drawer-inset) max-h-[80vh]",
+					"rounded-b-dialog [--drawer-inset:0px]",
+					"pt-[env(safe-area-inset-top,0px)]"
+				],
+				swipeHandle: ["order-last", "before:bottom-3"]
+			},
+			left: {
+				popup: ["left-(--drawer-inset)"],
+				swipeHandle: ["order-last", "before:right-3"]
+			},
+			right: {
+				popup: ["right-(--drawer-inset)"],
+				swipeHandle: ["before:left-3"]
+			}
+		},
+		axis: {
+			x: {
+				popup: ["flex-row", "inset-y-0 w-full max-w-[420px] [--drawer-inset:0px]"],
+				swipeHandle: [
+					"my-auto h-16 w-11",
+					"before:top-1/2 before:-translate-y-1/2",
+					"before:w-1 before:h-9"
+				],
+				header: [
+					"min-h-14 shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
+					"border-b border-line-seam",
+					panelHeadEdges
+				],
+				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-5 py-4"],
+				footer: ["border-t border-line-seam px-5 py-3"],
+				title: ["min-w-0 max-w-none flex-1 text-left"],
+				description: ["max-w-none text-left"],
+				actions: ["flex-row flex-wrap justify-end", "**:data-[slot=button]:w-auto"]
+			},
+			y: {
+				popup: [
+					"data-nested-drawer-open:h-(--drawer-frontmost-height)",
+					"mx-auto md:max-w-md",
+					"inset-x-0"
+				],
+				swipeHandle: [
+					"mx-auto w-16",
+					"before:left-1/2 before:-translate-x-1/2",
+					"h-4",
+					"before:top-1.5 before:h-1 before:w-9"
+				]
+			}
+		}
+	},
+	compoundVariants: [{
+		side: "down",
+		snapPoints: true,
+		class: { header: ["pt-2"] }
+	}, {
+		axis: "y",
+		snapPoints: true,
+		class: { popup: ["[--drawer-content-height:100dvh]"] }
+	}]
+});
+//#endregion
+//#region src/components/drawer/drawer.tsx
+const DrawerConfigContext = createContext(null);
+function useDrawerConfig() {
+	const context = useContext(DrawerConfigContext);
+	if (!context) throw new Error("Drawer parts must be used within Drawer.");
+	return context;
+}
+function Drawer$1({ modal = true, snapPoints, swipeDirection = "down", children, ...props }) {
+	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+	const contextValue = useMemo(() => ({
+		hasSnapPoints,
+		modal,
+		swipeAxis,
+		swipeDirection
+	}), [
+		hasSnapPoints,
+		modal,
+		swipeAxis,
+		swipeDirection
+	]);
+	return /* @__PURE__ */ jsx(DrawerConfigContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			modal,
+			snapPoints,
+			swipeDirection,
+			...props,
+			children: withOverlayLayer("drawer", modal === true, children)
+		})
+	});
+}
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal(props) {
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	const { hasSnapPoints } = useDrawerConfig();
+	const nested = useParentOverlayKind() === "dialog";
+	const { overlay } = drawer({
+		snapPoints: hasSnapPoints,
+		nested
+	});
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		"data-slot": "drawer-overlay",
+		"data-nested": nested ? "" : void 0,
+		forceRender: nested,
+		className: overlay({ className }),
+		...props
+	});
+}
+function DrawerSwipeHandle() {
+	const { swipeAxis, swipeDirection } = useDrawerConfig();
+	const { swipeHandle } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: swipeHandle()
+	});
+}
+function DrawerContent({ className, children, portalProps, ...props }) {
+	const { hasSnapPoints, modal, swipeAxis, swipeDirection } = useDrawerConfig();
+	const { content, popup, viewport } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis,
+		snapPoints: hasSnapPoints
+	});
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		...portalProps,
+		children: [modal === true ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null, /* @__PURE__ */ jsx(Drawer.Viewport, {
+			"data-slot": "drawer-viewport",
+			className: cn(viewport(), modal === true && "pointer-events-auto"),
+			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+				"data-slot": "drawer-popup",
+				className: popup({ className }),
+				...props,
+				children: [hasSnapPoints ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer.Content, {
+					"data-slot": "drawer-content",
+					className: content(),
+					children
+				})]
+			})
+		})]
+	});
+}
+function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
+	const { close, closeIcon } = drawer();
+	if (render) return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		className,
+		render,
+		"aria-label": ariaLabel,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		render: /* @__PURE__ */ jsx(Button$1, {
+			variant: variant ?? "ghost",
+			size: size ?? "icon-lg",
+			"aria-label": ariaLabel ?? "Close"
+		}),
+		className: close({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: closeIcon() })
+	});
+}
+function DrawerHeader({ className, render, ...props }) {
+	const { hasSnapPoints, swipeAxis, swipeDirection } = useDrawerConfig();
+	const { header } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis,
+		snapPoints: hasSnapPoints
+	});
+	const defaultProps = { className: header({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-header" }
+	});
+}
+function DrawerFooter({ className, render, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { footer } = drawer({ axis: swipeAxis });
+	const defaultProps = { className: footer({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-footer" }
+	});
+}
+function DrawerBody({ className, render, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { body } = drawer({ axis: swipeAxis });
+	const defaultProps = { className: body({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-body" }
+	});
+}
+function DrawerActions({ className, render, children, ...props }) {
+	const swipeAxis = useContext(DrawerConfigContext)?.swipeAxis;
+	const { actions } = drawer({ axis: swipeAxis });
+	const defaultProps = {
+		className: actions({ className }),
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-actions" }
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { title } = drawer({ axis: swipeAxis });
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: title({ className }),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { description } = drawer({ axis: swipeAxis });
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: description({ className }),
+		...props
+	});
+}
+//#endregion
+export { buttonVariants as A, DialogNav as C, DialogTitle as D, DialogSurface as E, resolveThemeScopeProps as F, useThemeScopeProps as I, useTheme as L, defaultNativeButton as M, useParentOverlayKind as N, DialogTrigger as O, withOverlayLayer as P, ThemeStateContext as R, DialogHeader as S, DialogPortal as T, DialogBody as _, DrawerContent as a, DialogDescription as b, DrawerHeader as c, DrawerTitle as d, DrawerTrigger as f, Dialog$1 as g, panelHeader as h, DrawerClose as i, Spinner as j, Button$1 as k, DrawerOverlay as l, panelHeadEdges as m, DrawerActions as n, DrawerDescription as o, panelHeadActions as p, DrawerBody as r, DrawerFooter as s, Drawer$1 as t, DrawerPortal as u, DialogClose as v, DialogOverlay as w, DialogFooter as x, DialogContent as y, tv$1 as z };

package/dist/index.d.mts

@@ -4992,7 +4992,7 @@ export declare const TaskStatusBadge: typeof TaskStatusBadgeRoot;
 //#endregion
 //#region src/components/legacy-task-panel/legacy-task-panel.d.ts
 type LegacyTaskPanelRootProps = useRender.ComponentProps<"div"> & {
-  /** Docs preview chrome. Shell hosts (Playground) leave this off. */
+  /** Docs preview chrome. A host shell that draws its own frame leaves this off. */
   framed?: boolean;
 };
 /** @deprecated No consumer uses it; compose read-only task details from Dialog and DescriptionList. Removed in raft-ui 1.0. */