@adea-ai/ui 0.106.2 → 0.107.0

package/dist/components/ui/sheet/sheet.js

@@ -22,26 +22,74 @@ var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=sheet-footer>`);
 * `end`, and a full-width row for `top` and `bottom`. The slide-in direction
 * follows from the side, so a caller never pairs them by hand.
 *
+* `variant` decides how it meets that edge. `inset` — the default for `end` —
+* docks the panel inside the main view: below the top bar, one equal gap from
+* the top bar, the end edge and the bottom, with no scrim, so the work it edits
+* stays visible and the top bar stays reachable. It is the shape for editing one
+* thing beside its context (appearance settings, a task, a record). `edge` runs
+* edge to edge over a scrim — the shape of a navigation drawer, and the default
+* for every other side.
+*
+* Its parts read alike everywhere: `SheetHeader` holds a heading, a description
+* and a full-width rule beneath, with the close button in the corner;
+* `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that
+* holds the decision.
+*
 * Controlled sheets opened from outside a `SheetTrigger` restore focus to the
 * element focused before opening. Pass `restoreFocusRef` when a stable external
 * opener must be used instead, such as when another layer closes before the
 * sheet opens.
 */
-var sheetVariants = cva("bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col gap-4 border-border shadow-lg", {
-	variants: { side: {
-		top: "inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b data-expanded:slide-in-from-top data-closed:slide-out-to-top",
-		bottom: "inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom",
-		start: "inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e data-expanded:slide-in-from-left data-closed:slide-out-to-left",
-		end: "inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s data-expanded:slide-in-from-right data-closed:slide-out-to-right"
-	} },
-	defaultVariants: { side: "end" }
+var sheetVariants = cva("bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg", {
+	variants: {
+		side: {
+			top: "data-expanded:slide-in-from-top data-closed:slide-out-to-top",
+			bottom: "data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom",
+			start: "data-expanded:slide-in-from-left data-closed:slide-out-to-left",
+			end: "data-expanded:slide-in-from-right data-closed:slide-out-to-right"
+		},
+		variant: {
+			edge: "",
+			inset: "panel-dialog-inset w-lg rounded-xl border"
+		}
+	},
+	compoundVariants: [
+		{
+			side: "top",
+			variant: "edge",
+			class: "inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b"
+		},
+		{
+			side: "bottom",
+			variant: "edge",
+			class: "inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t"
+		},
+		{
+			side: "start",
+			variant: "edge",
+			class: "inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e"
+		},
+		{
+			side: "end",
+			variant: "edge",
+			class: "inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s"
+		}
+	],
+	defaultVariants: {
+		side: "end",
+		variant: "edge"
+	}
 });
+/** `inset` for the end edge, `edge` for every other side, unless the caller says. */
+var sheetVariantFor = (side, variant) => variant ?? ((side ?? "end") === "end" ? "inset" : "edge");
 function SheetContent(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
 		"side",
+		"variant",
 		"children",
 		"closeButton",
+		"closeLabel",
 		"restoreFocusRef",
 		"onOpenAutoFocus",
 		"onCloseAutoFocus"
@@ -53,10 +101,26 @@ function SheetContent(props) {
 		onOpenAutoFocus: local.onOpenAutoFocus,
 		onCloseAutoFocus: local.onCloseAutoFocus
 	});
+	const variant = () => sheetVariantFor(local.side, local.variant);
 	return createComponent(Dialog.Portal, { get children() {
-		return [createComponent(DialogOverlay, {}), createComponent(Content, mergeProps({ get ["class"]() {
-			return cn(sheetVariants({ side: local.side }), "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200", "data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150", local.class);
-		} }, rest, {
+		return [createComponent(Show, {
+			get when() {
+				return variant() === "edge";
+			},
+			get children() {
+				return createComponent(DialogOverlay, {});
+			}
+		}), createComponent(Content, mergeProps({
+			get ["data-variant"]() {
+				return variant();
+			},
+			get ["class"]() {
+				return cn(sheetVariants({
+					side: local.side,
+					variant: variant()
+				}), "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200", "data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150", local.class);
+			}
+		}, rest, {
 			get onOpenAutoFocus() {
 				return focusRestoration.onOpenAutoFocus;
 			},
@@ -70,7 +134,9 @@ function SheetContent(props) {
 					},
 					get children() {
 						return createComponent(Dialog.CloseButton, {
-							"aria-label": "Close",
+							get ["aria-label"]() {
+								return local.closeLabel ?? "Close";
+							},
 							tabindex: "0",
 							"class": "absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle",
 							get children() {
@@ -100,7 +166,7 @@ function SheetHeader(props) {
 	return (() => {
 		var _el$ = _tmpl$();
 		spread(_el$, mergeProps({ get ["class"]() {
-			return cn("flex flex-col gap-1.5 border-b border-border p-4 pe-12 text-start", local.class);
+			return cn("flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start", local.class);
 		} }, rest), false, false);
 		return _el$;
 	})();
@@ -110,7 +176,7 @@ function SheetBody(props) {
 	return (() => {
 		var _el$2 = _tmpl$2();
 		spread(_el$2, mergeProps({ get ["class"]() {
-			return cn("flex-1 overflow-y-auto px-4 pb-4", local.class);
+			return cn("min-h-0 flex-1 overflow-y-auto p-4", local.class);
 		} }, rest), false, false);
 		return _el$2;
 	})();
@@ -120,7 +186,7 @@ function SheetFooter(props) {
 	return (() => {
 		var _el$3 = _tmpl$3();
 		spread(_el$3, mergeProps({ get ["class"]() {
-			return cn("flex items-center justify-end gap-2 border-t border-border p-4", local.class);
+			return cn("flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3", local.class);
 		} }, rest), false, false);
 		return _el$3;
 	})();
@@ -129,7 +195,7 @@ function SheetTitle(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return createComponent(Dialog.Title, mergeProps({ get ["class"]() {
 		return cn(headingVariants({
-			size: "subsection",
+			size: "card",
 			leading: "none"
 		}), local.class);
 	} }, rest));

package/dist/components/ui/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","createDialogFocusRestoration","DialogOverlay","headingVariants","sheetVariants","variants","side","top","bottom","start","end","defaultVariants","SheetContentProps","closeButton","Element","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","_$mergeProps","class","_$memo","when","CloseButton","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","size","leading","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\nimport { headingVariants } from '../typography'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\nconst sheetVariants = cva(\n  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col gap-4 border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom:\n          'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start:\n          'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n    },\n    defaultVariants: { side: 'end' },\n  }\n)\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'children',\n    'closeButton',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  return (\n    <KobalteDialog.Portal>\n      <DialogOverlay />\n      <KobalteDialogContent\n        class={cn(\n          sheetVariants({ side: local.side }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label=\"Close\"\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\nexport function SheetHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn('flex flex-col gap-1.5 border-b border-border p-4 pe-12 text-start', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('flex-1 overflow-y-auto px-4 pb-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn('flex items-center justify-end gap-2 border-t border-border p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Title\n      class={cn(headingVariants({ size: 'subsection', leading: 'none' }), local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}
+{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","createDialogFocusRestoration","DialogOverlay","headingVariants","sheetVariants","variants","side","top","bottom","start","end","variant","edge","inset","compoundVariants","class","defaultVariants","sheetVariantFor","SheetContentProps","closeButton","Element","closeLabel","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","when","_$mergeProps","data-variant","_$memo","CloseButton","aria-label","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","size","leading","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\nimport { headingVariants } from '../typography'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * `variant` decides how it meets that edge. `inset` — the default for `end` —\n * docks the panel inside the main view: below the top bar, one equal gap from\n * the top bar, the end edge and the bottom, with no scrim, so the work it edits\n * stays visible and the top bar stays reachable. It is the shape for editing one\n * thing beside its context (appearance settings, a task, a record). `edge` runs\n * edge to edge over a scrim — the shape of a navigation drawer, and the default\n * for every other side.\n *\n * Its parts read alike everywhere: `SheetHeader` holds a heading, a description\n * and a full-width rule beneath, with the close button in the corner;\n * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that\n * holds the decision.\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\n// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be\n// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the\n// pinned footer out of view. Only SheetBody scrolls.\nconst sheetVariants = cva(\n  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n      variant: {\n        edge: '',\n        inset: 'panel-dialog-inset w-lg rounded-xl border',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        variant: 'edge',\n        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',\n      },\n      {\n        side: 'bottom',\n        variant: 'edge',\n        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',\n      },\n      {\n        side: 'start',\n        variant: 'edge',\n        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',\n      },\n      {\n        side: 'end',\n        variant: 'edge',\n        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',\n      },\n    ],\n    defaultVariants: { side: 'end', variant: 'edge' },\n  }\n)\n\n/** `inset` for the end edge, `edge` for every other side, unless the caller says. */\nconst sheetVariantFor = (\n  side: SheetContentProps['side'],\n  variant: SheetContentProps['variant']\n): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** The close button's accessible name. Defaults to \"Close\". */\n    closeLabel?: string\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'variant',\n    'children',\n    'closeButton',\n    'closeLabel',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  const variant = () => sheetVariantFor(local.side, local.variant)\n\n  return (\n    <KobalteDialog.Portal>\n      {/* An inset panel is beside the work, so the work stays in view: no scrim.\n          It is still modal — focus stays inside and an outside click dismisses. */}\n      <Show when={variant() === 'edge'}>\n        <DialogOverlay />\n      </Show>\n      <KobalteDialogContent\n        data-variant={variant()}\n        class={cn(\n          sheetVariants({ side: local.side, variant: variant() }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label={local.closeLabel ?? 'Close'}\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\nexport function SheetHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn(\n        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Title\n      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}

package/dist/index.js

@@ -119,11 +119,11 @@ import { SettingsNavigation } from "./components/composites/settings/settings-na
 import { SettingsLayout } from "./components/composites/settings/settings-layout.js";
 import { SceneControls } from "./components/composites/scene-controls/scene-controls.js";
 import { PropertyList, PropertyRow, PropertyTerm, PropertyValue, Stat, StatGroup } from "./components/composites/stat/stat.js";
-import { AppearanceEditor, AppearancePopover } from "./components/composites/appearance-editor/appearance-editor.js";
+import { AppearanceEditor, AppearanceEditorActions, AppearancePopover } from "./components/composites/appearance-editor/appearance-editor.js";
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/version-notes.js";
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";
 import { AboutDialog } from "./components/composites/about-dialog/about-dialog.js";
 import { HelpCenter } from "./components/composites/help-center/help-center.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
 import { writeClipboardText } from "./lib/clipboard.js";
-export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, Tree, TreeRow, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, withAccent, writeClipboardText, zIndexTokens };
+export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceEditorActions, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, Tree, TreeRow, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, withAccent, writeClipboardText, zIndexTokens };

package/dist/lib/overlay.d.ts

@@ -50,4 +50,19 @@ export declare const menuLabel = "px-2 py-1.5 text-2xs font-medium tracking-wide
 export declare const menuSeparator = "bg-border -mx-1 my-1 h-px";
 /** Padding shared by every menu-list surface. */
 export declare const menuContentPadding = "p-1";
+/**
+ * Marks a floating layer — a menu, a listbox, a popover — as part of the top
+ * layer.
+ *
+ * A modal dialog hides everything outside itself from assistive technology
+ * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.
+ * A menu or select opened from inside the dialog portals to `<body>`, so the
+ * dialog hid it too: the list was on screen, focused, and invisible to a
+ * screen reader, and an outside-click check could treat a click on it as a
+ * click away from the dialog. Kobalte exempts nodes carrying this attribute
+ * from both, so every floating layer carries it.
+ */
+export declare const topLayerProps: {
+    readonly 'data-kb-top-layer': "";
+};
 //# sourceMappingURL=overlay.d.ts.map

package/dist/lib/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}

package/dist/lib/overlay.js

@@ -60,7 +60,20 @@ var destructiveMenuItem = "border-s-2 border-destructive ps-1.5 text-foreground
 var menuLabel = "px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase";
 /** The rule between menu groups. */
 var menuSeparator = "bg-border -mx-1 my-1 h-px";
+/**
+* Marks a floating layer — a menu, a listbox, a popover — as part of the top
+* layer.
+*
+* A modal dialog hides everything outside itself from assistive technology
+* (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.
+* A menu or select opened from inside the dialog portals to `<body>`, so the
+* dialog hid it too: the list was on screen, focused, and invisible to a
+* screen reader, and an outside-click check could treat a click on it as a
+* click away from the dialog. Kobalte exempts nodes carrying this attribute
+* from both, so every floating layer carries it.
+*/
+var topLayerProps = { "data-kb-top-layer": "" };
 //#endregion
-export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, popoverArrow, popoverMotion, tooltipTip };
+export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, popoverArrow, popoverMotion, tooltipTip, topLayerProps };
 
 //# sourceMappingURL=overlay.js.map

package/dist/lib/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;AAGF,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;AAGF,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;;;;;AAiB7B,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}

package/dist/r/appearance-editor.json

@@ -12,7 +12,7 @@
     "@adea-ai/ui/button",
     "@adea-ai/ui/dropdown-menu",
     "@adea-ai/ui/input",
-    "@adea-ai/ui/popover",
+    "@adea-ai/ui/sheet",
     "@adea-ai/ui/switch",
     "@adea-ai/ui/theme",
     "lib"

package/dist/r/registry.json

@@ -1918,7 +1918,7 @@
         "@adea-ai/ui/button",
         "@adea-ai/ui/dropdown-menu",
         "@adea-ai/ui/input",
-        "@adea-ai/ui/popover",
+        "@adea-ai/ui/sheet",
         "@adea-ai/ui/switch",
         "@adea-ai/ui/theme",
         "lib"

package/dist/r/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -41,12 +41,15 @@ import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '../../../lib/appearance
 
 import { Switch } from '../../ui/switch/switch'
 import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTitle,
-  PopoverTrigger,
-} from '../../ui/popover/popover'
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../ui/sheet/sheet'
 import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'
 import { ModeChoices, AccentChoices, GlassChoices, isCustomAccent } from './appearance-choices'
 import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
@@ -61,7 +64,6 @@ import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
  */
 export function AppearanceEditor(props: AppearanceEditorProps) {
   const errorId = createUniqueId()
-  const saveReasonId = createUniqueId()
   const custom = () => isCustomAccent(props)
   const accentDescription = () => {
     if (props.draft.accent === 'theme') return "Theme default · Uses the palette's intended color."
@@ -188,15 +190,35 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           </Button>
         </SettingsRow>
       </div>
+      <Show when={!props.hideActions}>
+        {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
+            editor scrolls with its host panel, and actions parked at the bottom
+            of a long form were unreachable without scrolling past every row. */}
+        <div class="sticky bottom-0 z-10 mt-2 border-t bg-background px-4 py-3">
+          <AppearanceEditorActions {...props} />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * Reset, Cancel and Save, with the reason Save is unavailable. Rendered by the
+ * editor itself, or — with `hideActions` — by a host that pins them in its own
+ * footer, as `AppearancePopover` does.
+ */
+export function AppearanceEditorActions(props: AppearanceEditorProps) {
+  const saveReasonId = createUniqueId()
+  return (
+    <div class="flex w-full flex-col gap-2">
       <Show when={props.saveDisabledReason}>
-        <p id={saveReasonId} role="status" class="px-4 pt-3 text-xs text-muted-foreground">
+        <p id={saveReasonId} role="status" class="text-xs text-muted-foreground">
           {props.saveDisabledReason}
         </p>
       </Show>
-      {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
-          editor scrolls with its host panel, and actions parked at the bottom
-          of a long form were unreachable without scrolling past every row. */}
-      <div class="global-appearance-editor-actions sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3">
+      {/* `global-appearance-editor-actions` lets these buttons grow with the UI
+          font preference, like the rest of Appearance's own controls. */}
+      <div class="global-appearance-editor-actions flex flex-wrap items-center gap-2">
         <Button
           type="button"
           size="sm"
@@ -232,19 +254,15 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
   )
 }
 
-/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.
- * Its measured available height also bounds scrolling, keeping footer actions
- * reachable when a narrow popup begins below its trigger. */
+/** The editor in an inset Sheet docked beside the main view: the body scrolls and
+ * Reset/Cancel/Save sit in the panel's full-width footer, always reachable.
+ * Dismissal (Escape, the close button, an outside click) is `onDismiss`. */
 export function AppearancePopover(props: AppearancePopoverProps) {
   const [menuPortalMount, setMenuPortalMount] = createSignal<HTMLElement>()
 
   return (
-    <Popover
-      open={props.open}
-      modal
-      onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}
-    >
-      <PopoverTrigger
+    <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>
+      <SheetTrigger
         as={Button}
         type="button"
         variant="ghost"
@@ -252,17 +270,21 @@ export function AppearancePopover(props: AppearancePopoverProps) {
         aria-label="Appearance settings"
       >
         <Palette />
-      </PopoverTrigger>
-      <PopoverContent
-        ref={setMenuPortalMount}
-        class="w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto"
-      >
-        <PopoverTitle>Appearance</PopoverTitle>
-        <PopoverDescription>
-          Changes preview immediately. Save keeps them; Cancel restores the previous appearance.
-        </PopoverDescription>
-        <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} />
-      </PopoverContent>
-    </Popover>
+      </SheetTrigger>
+      <SheetContent side="end" closeLabel="Close appearance settings" ref={setMenuPortalMount}>
+        <SheetHeader>
+          <SheetTitle>Appearance</SheetTitle>
+          <SheetDescription>
+            Changes preview immediately. Save keeps them; Cancel restores the previous appearance.
+          </SheetDescription>
+        </SheetHeader>
+        <SheetBody>
+          <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} hideActions />
+        </SheetBody>
+        <SheetFooter>
+          <AppearanceEditorActions {...props} />
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   )
 }

package/dist/r/src/components/composites/appearance-editor/appearance-types.ts

@@ -55,6 +55,8 @@ export type AppearanceEditorProps = {
   /** Mount nested font menus inside the containing overlay when one exists. */
   menuPortalMount?: HTMLElement
   class?: string
+  /** Leave Reset/Cancel/Save to the host, which renders `AppearanceEditorActions`. */
+  hideActions?: boolean
 }
 
 export type AppearancePopoverProps = AppearanceEditorProps & {

package/dist/r/src/components/composites/appearance-editor/index.ts

@@ -1,4 +1,4 @@
-export { AppearanceEditor, AppearancePopover } from './appearance-editor'
+export { AppearanceEditor, AppearanceEditorActions, AppearancePopover } from './appearance-editor'
 export {
   AppearanceFontSettingsGroup,
   type AppearanceFontSettingsGroupProps,

package/dist/r/src/components/ui/badge/badge.tsx

@@ -19,11 +19,15 @@ export const badgeVariants = cva(
         default: 'bg-primary text-primary-foreground',
         secondary: 'bg-secondary text-secondary-foreground',
         outline: 'border-border text-foreground',
-        /** Tinted status fills, for counts and states rather than actions. */
-        success: 'bg-success-subtle text-foreground',
-        warning: 'bg-warning-subtle text-foreground',
-        destructive: 'bg-destructive-subtle text-foreground',
-        info: 'bg-info-subtle text-foreground',
+        /**
+         * Tinted status fills, for counts and states rather than actions. The
+         * word stays in `foreground` for contrast; the glyph takes the status
+         * hue, so tags of different tones read apart at a glance.
+         */
+        success: 'bg-success-subtle text-foreground [&_svg]:text-success',
+        warning: 'bg-warning-subtle text-foreground [&_svg]:text-warning',
+        destructive: 'bg-destructive-subtle text-foreground [&_svg]:text-destructive',
+        info: 'bg-info-subtle text-foreground [&_svg]:text-info',
         subtle: 'bg-primary-subtle text-primary',
         /**
          * A count that asks for attention, pinned to a corner of another control

package/dist/r/src/components/ui/combobox/combobox.tsx

@@ -2,7 +2,7 @@ import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'
 import { Check, ChevronDown, X } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
-import { menuContentPadding, menuItem, popoverArrow } from '../../../lib/overlay'
+import { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '../../../lib/overlay'
 import { useFormFieldControl } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
@@ -108,6 +108,7 @@ export function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Con
   return (
     <KobalteCombobox.Portal>
       <KobalteCombobox.Content
+        {...topLayerProps}
         class={cn(
           'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',
           'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',

package/dist/r/src/components/ui/context-menu/context-menu.tsx

@@ -10,6 +10,7 @@ import {
   menuSeparator,
   overlayMotion,
   overlaySurface,
+  topLayerProps,
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
@@ -40,6 +41,7 @@ export function ContextMenuContent(props: ComponentProps<typeof KobalteContextMe
   return (
     <KobalteContextMenu.Portal>
       <KobalteContextMenu.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -174,6 +176,7 @@ export function ContextMenuSubContent(props: ComponentProps<typeof KobalteContex
   return (
     <KobalteContextMenu.Portal>
       <KobalteContextMenu.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,

package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -11,6 +11,7 @@ import {
   overlayMotion,
   overlaySurface,
   popoverArrow,
+  topLayerProps,
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
@@ -148,6 +149,12 @@ export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdown
     const isNativeLink = trigger instanceof HTMLAnchorElement && trigger.hasAttribute('href')
     if (trigger instanceof HTMLElement && !isNativeLink) {
       trigger.focus({ preventScroll: true })
+      // Focusing first is not enough in WebKit: the press's default mousedown
+      // action runs afterwards and moves focus off a button to the nearest
+      // focusable ancestor — inside a dialog, the dialog — so the menu that
+      // just opened still reads focus leaving it and closes. Cancelling the
+      // default keeps focus where it was put.
+      if (event.pointerType !== 'touch') event.preventDefault()
     }
   }
   const onKeyDown = (event: DropdownMenuTriggerKeyEvent) => {
@@ -196,6 +203,7 @@ export function DropdownMenuContent(props: DropdownMenuContentProps) {
   return (
     <KobalteDropdownMenu.Portal mount={local.portalMount}>
       <KobalteDropdownMenu.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -372,6 +380,7 @@ export function DropdownMenuSubContent(
   return (
     <KobalteDropdownMenu.Portal>
       <KobalteDropdownMenu.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,