@exsto/ds 0.0.1-rc.15 → 0.0.1-rc.16

package/dist/ui/src/components/edyn/presence/index.d.ts

@@ -0,0 +1 @@
+export * from './presence';

package/dist/ui/src/components/edyn/presence/presence.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from 'react';
+/** Where a person is, as a chat or a directory shows it. */
+export declare const PRESENCE_STATES: readonly ["available", "busy", "away", "offline", "unknown"];
+export type TPresenceState = (typeof PRESENCE_STATES)[number];
+/** The words for each state, for assistive technology and for the visible label. A product that is not in English passes its own. */
+export declare const DEFAULT_PRESENCE_LABELS: Readonly<Record<TPresenceState, string>>;
+export interface IPresenceProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+    state: TPresenceState;
+    /** Show the state's word beside the dot. Off, the dot stands alone and the word is there for assistive technology only. */
+    showLabel?: boolean;
+    /** Other words for the state (a translation, or "In a meeting"); the default words are in `DEFAULT_PRESENCE_LABELS`. */
+    label?: string;
+}
+/** A person's presence: a small dot, and optionally its word. Always has the word as text, so it is never a picture alone. */
+export declare const Presence: ({ state, showLabel, label, className, ...props }: IPresenceProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/presence/presence.js

@@ -0,0 +1,54 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../ui/src/components/edyn/presence/presence.tsx
+/** Where a person is, as a chat or a directory shows it. */
+var PRESENCE_STATES = [
+	"available",
+	"busy",
+	"away",
+	"offline",
+	"unknown"
+];
+/** The words for each state, for assistive technology and for the visible label. A product that is not in English passes its own. */
+var DEFAULT_PRESENCE_LABELS = {
+	available: "Available",
+	busy: "Busy",
+	away: "Away",
+	offline: "Offline",
+	unknown: "Unknown"
+};
+/**
+* Each state has its own colour and its own shape, because colour alone is not a signal (WCAG 1.4.1): available is a solid dot,
+* busy a solid dot with a bar across it, away a solid dot with a bite out of it, offline a hollow ring and unknown a dashed ring.
+* The colours are the theme's tokens, so they follow light and dark, and each clears 3:1 against the page, a card and a muted
+* surface in both (e2e/presence.spec.ts measures it).
+*/
+var DOT = {
+	available: "bg-success",
+	busy: "bg-destructive after:absolute after:inset-x-0.5 after:top-1/2 after:h-0.5 after:-translate-y-1/2 after:bg-background",
+	away: "bg-warning after:absolute after:-top-px after:-right-px after:size-1.5 after:rounded-full after:bg-background",
+	offline: "border-2 border-muted-foreground",
+	unknown: "border-2 border-dashed border-muted-foreground"
+};
+/** A person's presence: a small dot, and optionally its word. Always has the word as text, so it is never a picture alone. */
+var Presence = ({ state, showLabel = false, label, className, ...props }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "presence",
+		"data-state": state,
+		className: cn("inline-flex items-center gap-1.5 text-sm", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "presence-dot",
+			className: cn("relative size-2.5 shrink-0 rounded-full", DOT[state])
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "presence-label",
+			className: cn(!showLabel && "sr-only"),
+			children: label ?? DEFAULT_PRESENCE_LABELS[state]
+		})]
+	});
+};
+//#endregion
+export { DEFAULT_PRESENCE_LABELS, PRESENCE_STATES, Presence };
+
+//# sourceMappingURL=presence.js.map

package/dist/ui/src/components/edyn/presence/presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/presence/presence.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/** Where a person is, as a chat or a directory shows it. */\nexport const PRESENCE_STATES = ['available', 'busy', 'away', 'offline', 'unknown'] as const;\n\nexport type TPresenceState = (typeof PRESENCE_STATES)[number];\n\n/** The words for each state, for assistive technology and for the visible label. A product that is not in English passes its own. */\nexport const DEFAULT_PRESENCE_LABELS: Readonly<Record<TPresenceState, string>> = {\n  available: 'Available',\n  busy: 'Busy',\n  away: 'Away',\n  offline: 'Offline',\n  unknown: 'Unknown',\n};\n\n/**\n * Each state has its own colour and its own shape, because colour alone is not a signal (WCAG 1.4.1): available is a solid dot,\n * busy a solid dot with a bar across it, away a solid dot with a bite out of it, offline a hollow ring and unknown a dashed ring.\n * The colours are the theme's tokens, so they follow light and dark, and each clears 3:1 against the page, a card and a muted\n * surface in both (e2e/presence.spec.ts measures it).\n */\nconst DOT: Readonly<Record<TPresenceState, string>> = {\n  available: 'bg-success',\n  busy: 'bg-destructive after:absolute after:inset-x-0.5 after:top-1/2 after:h-0.5 after:-translate-y-1/2 after:bg-background',\n  away: 'bg-warning after:absolute after:-top-px after:-right-px after:size-1.5 after:rounded-full after:bg-background',\n  offline: 'border-2 border-muted-foreground',\n  unknown: 'border-2 border-dashed border-muted-foreground',\n};\n\nexport interface IPresenceProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {\n  state: TPresenceState;\n  /** Show the state's word beside the dot. Off, the dot stands alone and the word is there for assistive technology only. */\n  showLabel?: boolean;\n  /** Other words for the state (a translation, or \"In a meeting\"); the default words are in `DEFAULT_PRESENCE_LABELS`. */\n  label?: string;\n}\n\n/** A person's presence: a small dot, and optionally its word. Always has the word as text, so it is never a picture alone. */\nexport const Presence = ({ state, showLabel = false, label, className, ...props }: IPresenceProps) => {\n  return (\n    <span data-slot=\"presence\" data-state={state} className={cn('inline-flex items-center gap-1.5 text-sm', className)} {...props}>\n      <span aria-hidden=\"true\" data-slot=\"presence-dot\" className={cn('relative size-2.5 shrink-0 rounded-full', DOT[state])} />\n      <span data-slot=\"presence-label\" className={cn(!showLabel && 'sr-only')}>\n        {label ?? DEFAULT_PRESENCE_LABELS[state]}\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,kBAAkB;CAAC;CAAa;CAAQ;CAAQ;CAAW;AAAS;;AAKjF,IAAa,0BAAoE;CAC/E,WAAW;CACX,MAAM;CACN,MAAM;CACN,SAAS;CACT,SAAS;AACX;;;;;;;AAQA,IAAM,MAAgD;CACpD,WAAW;CACX,MAAM;CACN,MAAM;CACN,SAAS;CACT,SAAS;AACX;;AAWA,IAAa,YAAY,EAAE,OAAO,YAAY,OAAO,OAAO,WAAW,GAAG,YAA4B;CACpG,OACE,qBAAC,QAAD;EAAM,aAAU;EAAW,cAAY;EAAO,WAAW,GAAG,4CAA4C,SAAS;EAAG,GAAI;EAAxH,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,GAAG,2CAA2C,IAAI,MAAM;EAAI,CAAA,GACzH,oBAAC,QAAD;GAAM,aAAU;GAAiB,WAAW,GAAG,CAAC,aAAa,SAAS;GACnE,UAAA,SAAS,wBAAwB;EAC9B,CAAA,CACF;;AAEV"}

package/dist/ui/src/components/edyn/presence/presence.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Presence: a dot and the word for a person's state.
+ *
+ * PATH TAKEN: what the component renders (the word, what is hidden, what is decorative, how each state differs) does not depend
+ * on layout, so happy-dom is enough. That the colours clear 3:1 in both themes and the label contrast needs a real browser:
+ * e2e/presence.spec.ts measures it.
+ */
+export {};

package/dist/ui/src/components/ui/alert-dialog/alert-dialog.js

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../button/button.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region ../ui/src/components/ui/alert-dialog/alert-dialog.tsx
@@ -29,6 +30,7 @@ var AlertDialogOverlay = ({ className, ...props }) => {
 	});
 };
 var AlertDialogContent = ({ className, size = "default", ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
 		"data-slot": "alert-dialog-content",
 		"data-size": size,

package/dist/ui/src/components/ui/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../../../../../../ui/src/components/ui/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nimport { Button } from '../button';\n\nexport const AlertDialog = ({ ...props }: AlertDialogPrimitive.Root.Props) => {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n};\n\nexport const AlertDialogTrigger = ({ ...props }: AlertDialogPrimitive.Trigger.Props) => {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n};\n\nexport const AlertDialogPortal = ({ ...props }: AlertDialogPrimitive.Portal.Props) => {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n};\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) => {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogContent = ({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: 'default' | 'sm';\n}) => {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 motion-reduce:animate-none outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n};\n\nexport const AlertDialogHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogMedia = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogTitle = ({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) => {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        'font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogDescription = ({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) => {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogAction = ({ className, ...props }: React.ComponentProps<typeof Button>) => {\n  return <Button data-slot=\"alert-dialog-action\" className={cn(className)} {...props} />;\n};\n\nexport const AlertDialogCancel = ({\n  className,\n  variant = 'outline',\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) => {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;AAMA,IAAa,iBAAe,EAAE,GAAG,YAA6C;CAC5E,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,sBAAsB,EAAE,GAAG,YAAgD;CACtF,OAAO,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AACpF;AAEA,IAAa,qBAAqB,EAAE,GAAG,YAA+C;CACpF,OAAO,oBAAC,YAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAiD;CAClG,OACE,oBAAC,YAAqB,UAAtB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,sBAAsB,EACjC,WACA,OAAO,WACP,GAAG,YAGC;CACJ,OACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,YAAqB,OAAtB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,ycACA,SACF;EACA,GAAI;CACL,CAAA,CACgB,EAAA,CAAA;AAEvB;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAyC;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sZACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAyC;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAyC;CACxF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAqE;CACpH,OACE,oBAAC,YAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,0BAA0B,EAAE,WAAW,GAAG,YAA2E;CAChI,OACE,oBAAC,YAAqB,aAAtB;EACE,aAAU;EACV,WAAW,GACT,kIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAiD;CACjG,OAAO,oBAAC,QAAD;EAAQ,aAAU;EAAsB,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACvF;AAEA,IAAa,qBAAqB,EAChC,WACA,UAAU,WACV,OAAO,WACP,GAAG,YACmG;CACtG,OACE,oBAAC,YAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GAAG,SAAS;EACvB,QAAQ,oBAAC,QAAD;GAAiB;GAAe;EAAO,CAAA;EAC/C,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../../../../../../ui/src/components/ui/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nimport { Button } from '../button';\n\nexport const AlertDialog = ({ ...props }: AlertDialogPrimitive.Root.Props) => {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n};\n\nexport const AlertDialogTrigger = ({ ...props }: AlertDialogPrimitive.Trigger.Props) => {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n};\n\nexport const AlertDialogPortal = ({ ...props }: AlertDialogPrimitive.Portal.Props) => {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n};\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) => {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogContent = ({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: 'default' | 'sm';\n}) => {\n  useExposedFocusGuards();\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 motion-reduce:animate-none outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n};\n\nexport const AlertDialogHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogMedia = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogTitle = ({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) => {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        'font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogDescription = ({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) => {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const AlertDialogAction = ({ className, ...props }: React.ComponentProps<typeof Button>) => {\n  return <Button data-slot=\"alert-dialog-action\" className={cn(className)} {...props} />;\n};\n\nexport const AlertDialogCancel = ({\n  className,\n  variant = 'outline',\n  size = 'default',\n  ...props\n}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) => {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,iBAAe,EAAE,GAAG,YAA6C;CAC5E,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,sBAAsB,EAAE,GAAG,YAAgD;CACtF,OAAO,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AACpF;AAEA,IAAa,qBAAqB,EAAE,GAAG,YAA+C;CACpF,OAAO,oBAAC,YAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAiD;CAClG,OACE,oBAAC,YAAqB,UAAtB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,sBAAsB,EACjC,WACA,OAAO,WACP,GAAG,YAGC;CACJ,sBAAsB;CACtB,OACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,YAAqB,OAAtB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,ycACA,SACF;EACA,GAAI;CACL,CAAA,CACgB,EAAA,CAAA;AAEvB;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAyC;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sZACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAyC;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAyC;CACxF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAqE;CACpH,OACE,oBAAC,YAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,0BAA0B,EAAE,WAAW,GAAG,YAA2E;CAChI,OACE,oBAAC,YAAqB,aAAtB;EACE,aAAU;EACV,WAAW,GACT,kIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAiD;CACjG,OAAO,oBAAC,QAAD;EAAQ,aAAU;EAAsB,WAAW,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACvF;AAEA,IAAa,qBAAqB,EAChC,WACA,UAAU,WACV,OAAO,WACP,GAAG,YACmG;CACtG,OACE,oBAAC,YAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GAAG,SAAS;EACvB,QAAQ,oBAAC,QAAD;GAAiB;GAAe;EAAO,CAAA;EAC/C,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/context-menu/context-menu.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconCheck, IconChevronRight } from "@tabler/icons-react";
 import { ContextMenu } from "@base-ui/react/context-menu";
@@ -24,6 +25,7 @@ var ContextMenuTrigger = ({ className, ...props }) => {
 	});
 };
 var ContextMenuContent = ({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
 		className: "isolate z-50 outline-none",
 		align,

package/dist/ui/src/components/ui/context-menu/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nexport const ContextMenu = ({ ...props }: ContextMenuPrimitive.Root.Props) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuPortal = ({ ...props }: ContextMenuPrimitive.Portal.Props) => {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n};\n\nexport const ContextMenuTrigger = ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" className={cn('select-none', className)} {...props} />;\n};\n\nexport const ContextMenuContent = ({\n  className,\n  align = 'start',\n  alignOffset = 4,\n  side = 'right',\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\nexport const ContextMenuGroup = ({ ...props }: ContextMenuPrimitive.Group.Props) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn('px-1.5 py-1 text-xs font-medium text-muted-foreground data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSub = ({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) => {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />;\n};\n\nexport const ContextMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({ ...props }: React.ComponentProps<typeof ContextMenuContent>) => {\n  return <ContextMenuContent data-slot=\"context-menu-sub-content\" className=\"shadow-lg\" side=\"right\" {...props} />;\n};\n\nexport const ContextMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const ContextMenuRadioGroup = ({ ...props }: ContextMenuPrimitive.RadioGroup.Props) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuSeparator = ({ className, ...props }: ContextMenuPrimitive.Separator.Props) => {\n  return <ContextMenuPrimitive.Separator data-slot=\"context-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const ContextMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\n\nexport const ContextMenu = ({ ...props }: ContextMenuPrimitive.Root.Props) => {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n};\n\nexport const ContextMenuPortal = ({ ...props }: ContextMenuPrimitive.Portal.Props) => {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n};\n\nexport const ContextMenuTrigger = ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" className={cn('select-none', className)} {...props} />;\n};\n\nexport const ContextMenuContent = ({\n  className,\n  align = 'start',\n  alignOffset = 4,\n  side = 'right',\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\n\nexport const ContextMenuGroup = ({ ...props }: ContextMenuPrimitive.Group.Props) => {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n};\n\nexport const ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn('px-1.5 py-1 text-xs font-medium text-muted-foreground data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ContextMenuSub = ({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) => {\n  return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />;\n};\n\nexport const ContextMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const ContextMenuSubContent = ({ ...props }: React.ComponentProps<typeof ContextMenuContent>) => {\n  return <ContextMenuContent data-slot=\"context-menu-sub-content\" className=\"shadow-lg\" side=\"right\" {...props} />;\n};\n\nexport const ContextMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const ContextMenuRadioGroup = ({ ...props }: ContextMenuPrimitive.RadioGroup.Props) => {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n};\n\nexport const ContextMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n};\n\nexport const ContextMenuSeparator = ({ className, ...props }: ContextMenuPrimitive.Separator.Props) => {\n  return <ContextMenuPrimitive.Separator data-slot=\"context-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const ContextMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/dialog/dialog.js

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../button/button.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconX } from "@tabler/icons-react";
 import { Dialog } from "@base-ui/react/dialog";
@@ -36,6 +37,7 @@ var DialogOverlay = ({ className, ...props }) => {
 	});
 };
 var DialogContent = ({ className, children, showCloseButton = true, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 		"data-slot": "dialog-content",
 		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 motion-reduce:animate-none outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),

package/dist/ui/src/components/ui/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\nexport const Dialog = ({ ...props }: DialogPrimitive.Root.Props) => {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n};\n\nexport const DialogTrigger = ({ ...props }: DialogPrimitive.Trigger.Props) => {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n};\n\nexport const DialogPortal = ({ ...props }: DialogPrimitive.Portal.Props) => {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n};\n\nexport const DialogClose = ({ ...props }: DialogPrimitive.Close.Props) => {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n};\n\nexport const DialogOverlay = ({ className, ...props }: DialogPrimitive.Backdrop.Props) => {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DialogContent = ({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n}) => {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 motion-reduce:animate-none outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" render={<Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  );\n};\n\nexport const DialogHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"dialog-header\" className={cn('flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DialogFooter = ({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) => {\n  return (\n    <div data-slot=\"dialog-footer\" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props}>\n      {children}\n      {showCloseButton && <DialogPrimitive.Close render={<Button variant=\"outline\" />}>Close</DialogPrimitive.Close>}\n    </div>\n  );\n};\n\nexport const DialogTitle = ({ className, ...props }: DialogPrimitive.Title.Props) => {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" className={cn('text-base leading-none font-medium', className)} {...props} />;\n};\n\nexport const DialogDescription = ({ className, ...props }: DialogPrimitive.Description.Props) => {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,YAAU,EAAE,GAAG,YAAwC;CAClE,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,eAAe,EAAE,GAAG,YAAyC;CACxE,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA4C;CACxF,OACE,oBAAC,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAC5B,WACA,UACA,kBAAkB,MAClB,GAAG,YAGC;CACJ,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,qYACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,qBAAC,OAAgB,OAAjB;GAAuB,aAAU;GAAe,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAnI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CAChB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAEA,IAAa,gBAAgB,EAC3B,WACA,kBAAkB,OAClB,UACA,GAAG,YAGC;CACJ,OACE,qBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,0DAA0D,SAAS;EAAG,GAAI;EAAvH,UAAA,CACG,UACA,mBAAmB,oBAAC,OAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,UAAW,CAAA;GAAG,UAAA;EAA4B,CAAA,CAC1G;;AAET;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrI;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OACE,oBAAC,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,sGAAsG,SAAS;EAC7H,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\nexport const Dialog = ({ ...props }: DialogPrimitive.Root.Props) => {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n};\n\nexport const DialogTrigger = ({ ...props }: DialogPrimitive.Trigger.Props) => {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n};\n\nexport const DialogPortal = ({ ...props }: DialogPrimitive.Portal.Props) => {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n};\n\nexport const DialogClose = ({ ...props }: DialogPrimitive.Close.Props) => {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n};\n\nexport const DialogOverlay = ({ className, ...props }: DialogPrimitive.Backdrop.Props) => {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DialogContent = ({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n}) => {\n  useExposedFocusGuards();\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 motion-reduce:animate-none outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" render={<Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  );\n};\n\nexport const DialogHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"dialog-header\" className={cn('flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DialogFooter = ({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) => {\n  return (\n    <div data-slot=\"dialog-footer\" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props}>\n      {children}\n      {showCloseButton && <DialogPrimitive.Close render={<Button variant=\"outline\" />}>Close</DialogPrimitive.Close>}\n    </div>\n  );\n};\n\nexport const DialogTitle = ({ className, ...props }: DialogPrimitive.Title.Props) => {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" className={cn('text-base leading-none font-medium', className)} {...props} />;\n};\n\nexport const DialogDescription = ({ className, ...props }: DialogPrimitive.Description.Props) => {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,YAAU,EAAE,GAAG,YAAwC;CAClE,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,eAAe,EAAE,GAAG,YAAyC;CACxE,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA4C;CACxF,OACE,oBAAC,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAC5B,WACA,UACA,kBAAkB,MAClB,GAAG,YAGC;CACJ,sBAAsB;CACtB,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,qYACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,qBAAC,OAAgB,OAAjB;GAAuB,aAAU;GAAe,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAnI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CAChB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAEA,IAAa,gBAAgB,EAC3B,WACA,kBAAkB,OAClB,UACA,GAAG,YAGC;CACJ,OACE,qBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,0DAA0D,SAAS;EAAG,GAAI;EAAvH,UAAA,CACG,UACA,mBAAmB,oBAAC,OAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,UAAW,CAAA;GAAG,UAAA;EAA4B,CAAA,CAC1G;;AAET;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrI;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OACE,oBAAC,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,sGAAsG,SAAS;EAC7H,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/drawer/drawer.js

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../button/button.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconX } from "@tabler/icons-react";
 import { Dialog } from "@base-ui/react/dialog";
@@ -30,6 +31,7 @@ var DrawerOverlay = ({ className, ...props }) => {
 	});
 };
 var DrawerContent = ({ className, children, side = "right", showCloseButton = true, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsxs(Dialog.Portal, {
 		"data-slot": "drawer-portal",
 		children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {

package/dist/ui/src/components/ui/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":[],"sources":["../../../../../../../ui/src/components/ui/drawer/drawer.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\n// A Drawer is a side-anchored overlay (a \"sheet\"): the same Base UI Dialog\n// primitive as Dialog, positioned against an edge with a slide animation. It is\n// click-triggered (no swipe). The swipe-gesture Drawer (Base UI's dedicated\n// drawer primitive) is a deferred enhancement.\n\nexport const Drawer = ({ ...props }: DialogPrimitive.Root.Props) => {\n  return <DialogPrimitive.Root data-slot=\"drawer\" {...props} />;\n};\n\nexport const DrawerTrigger = ({ ...props }: DialogPrimitive.Trigger.Props) => {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n};\n\nexport const DrawerClose = ({ ...props }: DialogPrimitive.Close.Props) => {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n};\n\nconst DrawerOverlay = ({ className, ...props }: DialogPrimitive.Backdrop.Props) => {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\ntype TDrawerSide = 'left' | 'right' | 'top' | 'bottom';\n\nexport const DrawerContent = ({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  side?: TDrawerSide;\n  showCloseButton?: boolean;\n}) => {\n  return (\n    <DialogPrimitive.Portal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"drawer-content\"\n        data-side={side}\n        className={cn(\n          // duration-100 matches the overlay's duration so both exit animations finish\n          // together; a longer content animation leaves the overlay mounted after its\n          // fade-out ends, reverting it to full opacity (a visible flash on close).\n          // border-border is explicit because the portal renders outside .edx-root,\n          // where the scoped reset's default border color does not reach.\n          'fixed z-50 flex flex-col gap-4 border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg outline-none duration-100 motion-reduce:animate-none data-open:animate-in data-closed:animate-out',\n          side === 'right' && 'inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-open:slide-in-from-right data-closed:slide-out-to-right',\n          side === 'left' && 'inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-open:slide-in-from-left data-closed:slide-out-to-left',\n          side === 'top' && 'inset-x-0 top-0 h-auto border-b data-open:slide-in-from-top data-closed:slide-out-to-top',\n          side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"drawer-close\" render={<Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport const DrawerHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"drawer-header\" className={cn('flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DrawerFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"drawer-footer\" className={cn('mt-auto flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DrawerTitle = ({ className, ...props }: DialogPrimitive.Title.Props) => {\n  return <DialogPrimitive.Title data-slot=\"drawer-title\" className={cn('text-base leading-none font-medium', className)} {...props} />;\n};\n\nexport const DrawerDescription = ({ className, ...props }: DialogPrimitive.Description.Props) => {\n  return <DialogPrimitive.Description data-slot=\"drawer-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;AAWA,IAAa,UAAU,EAAE,GAAG,YAAwC;CAClE,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,eAAe,EAAE,GAAG,YAAyC;CACxE,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,iBAAiB,EAAE,WAAW,GAAG,YAA4C;CACjF,OACE,oBAAC,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,IAAa,iBAAiB,EAC5B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,OACE,qBAAC,OAAgB,QAAjB;EAAwB,aAAU;EAAlC,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,OAAgB,OAAjB;GACE,aAAU;GACV,aAAW;GACX,WAAW,GAMT,2MACA,SAAS,WAAW,iHACpB,SAAS,UAAU,8GACnB,SAAS,SAAS,4FAClB,SAAS,YAAY,qGACrB,SACF;GACA,GAAI;GAhBN,UAAA,CAkBG,UACA,mBACC,qBAAC,OAAgB,OAAjB;IAAuB,aAAU;IAAe,QAAQ,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,WAAU;KAAyB,MAAK;IAAW,CAAA;IAAnI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CAChB;GAEJ,CAAA,CAAA;EACD,CAAA,CAAA;;AAE5B;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrI;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OAAO,oBAAC,OAAgB,aAAjB;EAA6B,aAAU;EAAqB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5I"}
+{"version":3,"file":"drawer.js","names":[],"sources":["../../../../../../../ui/src/components/ui/drawer/drawer.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\n// A Drawer is a side-anchored overlay (a \"sheet\"): the same Base UI Dialog\n// primitive as Dialog, positioned against an edge with a slide animation. It is\n// click-triggered (no swipe). The swipe-gesture Drawer (Base UI's dedicated\n// drawer primitive) is a deferred enhancement.\n\nexport const Drawer = ({ ...props }: DialogPrimitive.Root.Props) => {\n  return <DialogPrimitive.Root data-slot=\"drawer\" {...props} />;\n};\n\nexport const DrawerTrigger = ({ ...props }: DialogPrimitive.Trigger.Props) => {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n};\n\nexport const DrawerClose = ({ ...props }: DialogPrimitive.Close.Props) => {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n};\n\nconst DrawerOverlay = ({ className, ...props }: DialogPrimitive.Backdrop.Props) => {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed inset-0 isolate z-50 bg-overlay duration-100 motion-reduce:animate-none supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\ntype TDrawerSide = 'left' | 'right' | 'top' | 'bottom';\n\nexport const DrawerContent = ({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  side?: TDrawerSide;\n  showCloseButton?: boolean;\n}) => {\n  useExposedFocusGuards();\n  return (\n    <DialogPrimitive.Portal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"drawer-content\"\n        data-side={side}\n        className={cn(\n          // duration-100 matches the overlay's duration so both exit animations finish\n          // together; a longer content animation leaves the overlay mounted after its\n          // fade-out ends, reverting it to full opacity (a visible flash on close).\n          // border-border is explicit because the portal renders outside .edx-root,\n          // where the scoped reset's default border color does not reach.\n          'fixed z-50 flex flex-col gap-4 border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg outline-none duration-100 motion-reduce:animate-none data-open:animate-in data-closed:animate-out',\n          side === 'right' && 'inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-open:slide-in-from-right data-closed:slide-out-to-right',\n          side === 'left' && 'inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-open:slide-in-from-left data-closed:slide-out-to-left',\n          side === 'top' && 'inset-x-0 top-0 h-auto border-b data-open:slide-in-from-top data-closed:slide-out-to-top',\n          side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"drawer-close\" render={<Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport const DrawerHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"drawer-header\" className={cn('flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DrawerFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"drawer-footer\" className={cn('mt-auto flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const DrawerTitle = ({ className, ...props }: DialogPrimitive.Title.Props) => {\n  return <DialogPrimitive.Title data-slot=\"drawer-title\" className={cn('text-base leading-none font-medium', className)} {...props} />;\n};\n\nexport const DrawerDescription = ({ className, ...props }: DialogPrimitive.Description.Props) => {\n  return <DialogPrimitive.Description data-slot=\"drawer-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAYA,IAAa,UAAU,EAAE,GAAG,YAAwC;CAClE,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,IAAa,iBAAiB,EAAE,GAAG,YAA2C;CAC5E,OAAO,oBAAC,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,eAAe,EAAE,GAAG,YAAyC;CACxE,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,iBAAiB,EAAE,WAAW,GAAG,YAA4C;CACjF,OACE,oBAAC,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,IAAa,iBAAiB,EAC5B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,sBAAsB;CACtB,OACE,qBAAC,OAAgB,QAAjB;EAAwB,aAAU;EAAlC,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,OAAgB,OAAjB;GACE,aAAU;GACV,aAAW;GACX,WAAW,GAMT,2MACA,SAAS,WAAW,iHACpB,SAAS,UAAU,8GACnB,SAAS,SAAS,4FAClB,SAAS,YAAY,qGACrB,SACF;GACA,GAAI;GAhBN,UAAA,CAkBG,UACA,mBACC,qBAAC,OAAgB,OAAjB;IAAuB,aAAU;IAAe,QAAQ,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,WAAU;KAAyB,MAAK;IAAW,CAAA;IAAnI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CAChB;GAEJ,CAAA,CAAA;EACD,CAAA,CAAA;;AAE5B;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrI;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAA+C;CAC/F,OAAO,oBAAC,OAAgB,aAAjB;EAA6B,aAAU;EAAqB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5I"}

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { ScrollArea } from "../scroll-area/scroll-area.js";
 import { POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from "../../../lib/popup-list.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -35,6 +36,7 @@ var DropdownMenuTrigger = ({ ...props }) => {
 * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.
 */
 var DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, children, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		className: "isolate z-50 outline-none",
 		align,

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const DropdownMenu = ({ ...props }: MenuPrimitive.Root.Props) => {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n};\n\nexport const DropdownMenuPortal = ({ ...props }: MenuPrimitive.Portal.Props) => {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n};\n\nexport const DropdownMenuTrigger = ({ ...props }: MenuPrimitive.Trigger.Props) => {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n};\n\n/**\n * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown\n * for as long as the menu overflows and a fade on whichever end is cut off.\n *\n * Base UI puts `role=\"menu\"` on this popup itself and offers no inner list part\n * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal\n * because ScrollArea drops the `role=\"presentation\"` Base UI gives its root,\n * viewport and content: a menu may not own presentation wrappers (axe reports\n * a critical aria-required-children violation), but it may own plain divs.\n * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.\n */\nexport const DropdownMenuContent = ({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner className=\"isolate z-50 outline-none\" align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset}>\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* max-h-inherit hands the positioner's measured height to the element that\n              scrolls; the padding sits on the content so the cap is the popup's exactly. */}\n          <ScrollArea type=\"always\" fade focusable={false} className=\"max-h-inherit\">\n            <div className=\"p-1\">{children}</div>\n          </ScrollArea>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n};\n\nexport const DropdownMenuGroup = ({ ...props }: MenuPrimitive.Group.Props) => {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n};\n\nexport const DropdownMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it:\n        // the shared translucent one would make it read like any other item.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuSub = ({ ...props }: MenuPrimitive.SubmenuRoot.Props) => {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n};\n\nexport const DropdownMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is\n        // down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const DropdownMenuSubContent = ({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) => {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n        'motion-reduce:animate-none',\n        className,\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-checkbox-item-indicator\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const DropdownMenuRadioGroup = ({ ...props }: MenuPrimitive.RadioGroup.Props) => {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n};\n\nexport const DropdownMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-radio-item-indicator\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n};\n\nexport const DropdownMenuSeparator = ({ className, ...props }: MenuPrimitive.Separator.Props) => {\n  return <MenuPrimitive.Separator data-slot=\"dropdown-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const DropdownMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const DropdownMenu = ({ ...props }: MenuPrimitive.Root.Props) => {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n};\n\nexport const DropdownMenuPortal = ({ ...props }: MenuPrimitive.Portal.Props) => {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n};\n\nexport const DropdownMenuTrigger = ({ ...props }: MenuPrimitive.Trigger.Props) => {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n};\n\n/**\n * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown\n * for as long as the menu overflows and a fade on whichever end is cut off.\n *\n * Base UI puts `role=\"menu\"` on this popup itself and offers no inner list part\n * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal\n * because ScrollArea drops the `role=\"presentation\"` Base UI gives its root,\n * viewport and content: a menu may not own presentation wrappers (axe reports\n * a critical aria-required-children violation), but it may own plain divs.\n * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.\n */\nexport const DropdownMenuContent = ({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner className=\"isolate z-50 outline-none\" align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset}>\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* max-h-inherit hands the positioner's measured height to the element that\n              scrolls; the padding sits on the content so the cap is the popup's exactly. */}\n          <ScrollArea type=\"always\" fade focusable={false} className=\"max-h-inherit\">\n            <div className=\"p-1\">{children}</div>\n          </ScrollArea>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n};\n\nexport const DropdownMenuGroup = ({ ...props }: MenuPrimitive.Group.Props) => {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n};\n\nexport const DropdownMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it:\n        // the shared translucent one would make it read like any other item.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuSub = ({ ...props }: MenuPrimitive.SubmenuRoot.Props) => {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n};\n\nexport const DropdownMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is\n        // down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const DropdownMenuSubContent = ({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) => {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n        'motion-reduce:animate-none',\n        className,\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-checkbox-item-indicator\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const DropdownMenuRadioGroup = ({ ...props }: MenuPrimitive.RadioGroup.Props) => {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n};\n\nexport const DropdownMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-radio-item-indicator\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n};\n\nexport const DropdownMenuSeparator = ({ className, ...props }: MenuPrimitive.Separator.Props) => {\n  return <MenuPrimitive.Separator data-slot=\"dropdown-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const DropdownMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,EAAE,GAAG,YAAsC;CACtE,OAAO,oBAAC,KAAc,MAAf;EAAoB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAa,sBAAsB,EAAE,GAAG,YAAwC;CAC9E,OAAO,oBAAC,KAAc,QAAf;EAAsB,aAAU;EAAuB,GAAI;CAAQ,CAAA;AAC5E;AAEA,IAAa,uBAAuB,EAAE,GAAG,YAAyC;CAChF,OAAO,oBAAC,KAAc,SAAf;EAAuB,aAAU;EAAwB,GAAI;CAAQ,CAAA;AAC9E;;;;;;;;;;;;AAaA,IAAa,uBAAuB,EAClC,QAAQ,SACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,WACA,UACA,GAAG,YACoH;CACvH,sBAAsB;CACtB,OACE,oBAAC,KAAc,QAAf,EAAA,UACE,oBAAC,KAAc,YAAf;EAA0B,WAAU;EAAmC;EAAoB;EAAmB;EAAkB;EAC9H,UAAA,oBAAC,KAAc,OAAf;GACE,aAAU;GACV,WAAW,GACT,+mBACA,8BACA,SACF;GACA,GAAI;GAIJ,UAAA,oBAAC,YAAD;IAAY,MAAK;IAAS,MAAA;IAAK,WAAW;IAAO,WAAU;IACzD,UAAA,oBAAC,OAAD;KAAK,WAAU;KAAO;IAAc,CAAA;GAC1B,CAAA;EACO,CAAA;CACG,CAAA,EACN,CAAA;AAE1B;AAEA,IAAa,qBAAqB,EAAE,GAAG,YAAuC;CAC5E,OAAO,oBAAC,KAAc,OAAf;EAAqB,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC1E;AAEA,IAAa,qBAAqB,EAChC,WACA,OACA,GAAG,YAGC;CACJ,OACE,oBAAC,KAAc,YAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,yBAAyB,0BAA0B,SAAS;EAC1E,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAC/B,WACA,OACA,UAAU,WACV,GAAG,YAIC;CACJ,OACE,oBAAC,KAAc,MAAf;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,4BACA,eAAe,GACf,0BAGA,mGACA,8HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,mBAAmB,EAAE,GAAG,YAA6C;CAChF,OAAO,oBAAC,KAAc,aAAf;EAA2B,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAC9E;AAEA,IAAa,0BAA0B,EACrC,WACA,OACA,UACA,GAAG,YAGC;CACJ,OACE,qBAAC,KAAc,gBAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,eAAe,GAGf,kGACA,SACF;EACA,GAAI;EAVN,UAAA,CAYG,UACD,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA,CACX;;AAElC;AAEA,IAAa,0BAA0B,EACrC,QAAQ,SACR,cAAc,IACd,OAAO,SACP,aAAa,GACb,WACA,GAAG,YACmD;CACtD,OACE,oBAAC,qBAAD;EACE,aAAU;EACV,WAAW,GACT,2ZACA,8BACA,SACF;EACO;EACM;EACP;EACM;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,4BAA4B,EACvC,WACA,UACA,SACA,OACA,GAAG,YAGC;CACJ,OACE,qBAAC,KAAc,cAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,mDAAmD,SAAS;EAClG;EACT,GAAI;EALN,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAW;GAA4B,aAAU;GACrD,UAAA,oBAAC,KAAc,uBAAf,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACuB,CAAA;EACjC,CAAA,GACL,QACyB;;AAEhC;AAEA,IAAa,0BAA0B,EAAE,GAAG,YAA4C;CACtF,OAAO,oBAAC,KAAc,YAAf;EAA0B,aAAU;EAA4B,GAAI;CAAQ,CAAA;AACrF;AAEA,IAAa,yBAAyB,EACpC,WACA,UACA,OACA,GAAG,YAGC;CACJ,OACE,qBAAC,KAAc,WAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,mDAAmD,SAAS;EAC3G,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAW;GAA4B,aAAU;GACrD,UAAA,oBAAC,KAAc,oBAAf,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACoB,CAAA;EAC9B,CAAA,GACL,QACsB;;AAE7B;AAEA,IAAa,yBAAyB,EAAE,WAAW,GAAG,YAA2C;CAC/F,OAAO,oBAAC,KAAc,WAAf;EAAyB,aAAU;EAA0B,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzI;AAEA,IAAa,wBAAwB,EAAE,WAAW,GAAG,YAA0C;CAC7F,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,+GAA+G,SAAS;EACtI,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { IconChevronDown } from "@tabler/icons-react";
@@ -43,6 +44,7 @@ var NavigationMenuTrigger = ({ className, children, ...props }) => {
 	});
 };
 var NavigationMenuContent = ({ className, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsx(NavigationMenu.Content, {
 		"data-slot": "navigation-menu-content",
 		className: cn("motion-reduce:animate-none motion-reduce:transition-none", "data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),

package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/navigation-menu/navigation-menu.tsx"],"sourcesContent":["import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport { cva } from 'class-variance-authority';\n\nexport const NavigationMenu = ({\n  align = 'start',\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) => {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  );\n};\n\nexport const NavigationMenuList = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) => {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuItem = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) => {\n  return <NavigationMenuPrimitive.Item data-slot=\"navigation-menu-item\" className={cn('relative', className)} {...props} />;\n};\n\nexport const navigationMenuTriggerStyle = cva(\n  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted',\n);\n\nexport const NavigationMenuTrigger = ({ className, children, ...props }: NavigationMenuPrimitive.Trigger.Props) => {\n  return (\n    <NavigationMenuPrimitive.Trigger data-slot=\"navigation-menu-trigger\" className={cn(navigationMenuTriggerStyle(), 'group', className)} {...props}>\n      {children}{' '}\n      <IconChevronDown\n        className=\"relative top-px ml-1 size-3 transition duration-300 motion-reduce:transition-none group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n};\n\nexport const NavigationMenuContent = ({ className, ...props }: NavigationMenuPrimitive.Content.Props) => {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        'motion-reduce:animate-none motion-reduce:transition-none',\n        'data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuPositioner = ({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) => {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',\n          className,\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none motion-reduce:transition-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n};\n\nexport const NavigationMenuLink = ({ className, ...props }: NavigationMenuPrimitive.Link.Props) => {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuIndicator = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) => {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        'motion-reduce:animate-none',\n        'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  );\n};\n"],"mappings":";;;;;;AAKA,IAAa,oBAAkB,EAC7B,QAAQ,SACR,WACA,UACA,GAAG,YAC+F;CAClG,OACE,qBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,oFAAoF,SAAS;EAC3G,GAAI;EAHN,UAAA,CAKG,UACD,oBAAC,0BAAD,EAAiC,MAAQ,CAAA,CACb;;AAElC;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA8E;CAC/H,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA8E;CAC/H,OAAO,oBAAC,eAAwB,MAAzB;EAA8B,aAAU;EAAuB,WAAW,GAAG,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1H;AAEA,IAAa,6BAA6B,IACxC,kdACF;AAEA,IAAa,yBAAyB,EAAE,WAAW,UAAU,GAAG,YAAmD;CACjH,OACE,qBAAC,eAAwB,SAAzB;EAAiC,aAAU;EAA0B,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAAG,GAAI;EAA1I,UAAA;GACG;GAAU;GACX,oBAAC,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;AAEA,IAAa,yBAAyB,EAAE,WAAW,GAAG,YAAmD;CACvG,OACE,oBAAC,eAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,4DACA,ynDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,4BAA4B,EACvC,WACA,OAAO,UACP,aAAa,GACb,QAAQ,SACR,cAAc,GACd,GAAG,YAC2C;CAC9C,OACE,oBAAC,eAAwB,QAAzB,EAAA,UACE,oBAAC,eAAwB,YAAzB;EACQ;EACM;EACL;EACM;EACb,WAAW,GACT,oVACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,eAAwB,OAAzB;GAA+B,WAAU;GACvC,UAAA,oBAAC,eAAwB,UAAzB,EAAkC,WAAU,qCAAsC,CAAA;EACrD,CAAA;CACG,CAAA,EACN,CAAA;AAEpC;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAgD;CACjG,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,uXACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,2BAA2B,EAAE,WAAW,GAAG,YAA8E;CACpI,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,8BACA,8LACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD,EAAK,WAAU,yEAA0E,CAAA;CAC7D,CAAA;AAElC"}
+{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/navigation-menu/navigation-menu.tsx"],"sourcesContent":["import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport { cva } from 'class-variance-authority';\n\nexport const NavigationMenu = ({\n  align = 'start',\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) => {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  );\n};\n\nexport const NavigationMenuList = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) => {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuItem = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) => {\n  return <NavigationMenuPrimitive.Item data-slot=\"navigation-menu-item\" className={cn('relative', className)} {...props} />;\n};\n\nexport const navigationMenuTriggerStyle = cva(\n  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted',\n);\n\nexport const NavigationMenuTrigger = ({ className, children, ...props }: NavigationMenuPrimitive.Trigger.Props) => {\n  return (\n    <NavigationMenuPrimitive.Trigger data-slot=\"navigation-menu-trigger\" className={cn(navigationMenuTriggerStyle(), 'group', className)} {...props}>\n      {children}{' '}\n      <IconChevronDown\n        className=\"relative top-px ml-1 size-3 transition duration-300 motion-reduce:transition-none group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n};\n\nexport const NavigationMenuContent = ({ className, ...props }: NavigationMenuPrimitive.Content.Props) => {\n  useExposedFocusGuards();\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        'motion-reduce:animate-none motion-reduce:transition-none',\n        'data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuPositioner = ({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) => {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',\n          className,\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none motion-reduce:transition-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n};\n\nexport const NavigationMenuLink = ({ className, ...props }: NavigationMenuPrimitive.Link.Props) => {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const NavigationMenuIndicator = ({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) => {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        'motion-reduce:animate-none',\n        'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  );\n};\n"],"mappings":";;;;;;;AAMA,IAAa,oBAAkB,EAC7B,QAAQ,SACR,WACA,UACA,GAAG,YAC+F;CAClG,OACE,qBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,oFAAoF,SAAS;EAC3G,GAAI;EAHN,UAAA,CAKG,UACD,oBAAC,0BAAD,EAAiC,MAAQ,CAAA,CACb;;AAElC;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA8E;CAC/H,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA8E;CAC/H,OAAO,oBAAC,eAAwB,MAAzB;EAA8B,aAAU;EAAuB,WAAW,GAAG,YAAY,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1H;AAEA,IAAa,6BAA6B,IACxC,kdACF;AAEA,IAAa,yBAAyB,EAAE,WAAW,UAAU,GAAG,YAAmD;CACjH,OACE,qBAAC,eAAwB,SAAzB;EAAiC,aAAU;EAA0B,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAAG,GAAI;EAA1I,UAAA;GACG;GAAU;GACX,oBAAC,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;AAEA,IAAa,yBAAyB,EAAE,WAAW,GAAG,YAAmD;CACvG,sBAAsB;CACtB,OACE,oBAAC,eAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,4DACA,ynDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,4BAA4B,EACvC,WACA,OAAO,UACP,aAAa,GACb,QAAQ,SACR,cAAc,GACd,GAAG,YAC2C;CAC9C,OACE,oBAAC,eAAwB,QAAzB,EAAA,UACE,oBAAC,eAAwB,YAAzB;EACQ;EACM;EACL;EACM;EACb,WAAW,GACT,oVACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,eAAwB,OAAzB;GAA+B,WAAU;GACvC,UAAA,oBAAC,eAAwB,UAAzB,EAAkC,WAAU,qCAAsC,CAAA;EACrD,CAAA;CACG,CAAA,EACN,CAAA;AAEpC;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAgD;CACjG,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,uXACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,2BAA2B,EAAE,WAAW,GAAG,YAA8E;CACpI,OACE,oBAAC,eAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,8BACA,8LACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD,EAAK,WAAU,yEAA0E,CAAA;CAC7D,CAAA;AAElC"}

package/dist/ui/src/components/ui/popover/popover.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region ../ui/src/components/ui/popover/popover.tsx
@@ -15,6 +16,7 @@ var PopoverTrigger = ({ ...props }) => {
 	});
 };
 var PopoverContent = ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 		align,
 		alignOffset,

package/dist/ui/src/components/ui/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../../../../../../../ui/src/components/ui/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Popover = ({ ...props }: PopoverPrimitive.Root.Props) => {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n};\n\nexport const PopoverTrigger = ({ ...props }: PopoverPrimitive.Trigger.Props) => {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n};\n\nexport const PopoverContent = ({\n  className,\n  align = 'center',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'side' | 'sideOffset'>) => {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n};\n\nexport const PopoverHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"popover-header\" className={cn('flex flex-col gap-0.5 text-sm', className)} {...props} />;\n};\n\nexport const PopoverTitle = ({ className, ...props }: PopoverPrimitive.Title.Props) => {\n  return <PopoverPrimitive.Title data-slot=\"popover-title\" className={cn('font-medium', className)} {...props} />;\n};\n\nexport const PopoverDescription = ({ className, ...props }: PopoverPrimitive.Description.Props) => {\n  return <PopoverPrimitive.Description data-slot=\"popover-description\" className={cn('text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;AAIA,IAAa,aAAW,EAAE,GAAG,YAAyC;CACpE,OAAO,oBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,IAAa,kBAAkB,EAAE,GAAG,YAA4C;CAC9E,OAAO,oBAAC,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,IAAa,kBAAkB,EAC7B,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,GAAG,YACqI;CACxI,OACE,oBAAC,QAAiB,QAAlB,EAAA,UACE,oBAAC,QAAiB,YAAlB;EACS;EACM;EACL;EACF;EACM;EACZ,WAAU;EAEV,UAAA,oBAAC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,klBACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA,EACN,CAAA;AAE7B;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAyC;CACrF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA0C;CACrF,OAAO,oBAAC,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,WAAW,GAAG,eAAe,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAgD;CACjG,OAAO,oBAAC,QAAiB,aAAlB;EAA8B,aAAU;EAAsB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtI"}
+{"version":3,"file":"popover.js","names":[],"sources":["../../../../../../../ui/src/components/ui/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Popover = ({ ...props }: PopoverPrimitive.Root.Props) => {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n};\n\nexport const PopoverTrigger = ({ ...props }: PopoverPrimitive.Trigger.Props) => {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n};\n\nexport const PopoverContent = ({\n  className,\n  align = 'center',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n};\n\nexport const PopoverHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"popover-header\" className={cn('flex flex-col gap-0.5 text-sm', className)} {...props} />;\n};\n\nexport const PopoverTitle = ({ className, ...props }: PopoverPrimitive.Title.Props) => {\n  return <PopoverPrimitive.Title data-slot=\"popover-title\" className={cn('font-medium', className)} {...props} />;\n};\n\nexport const PopoverDescription = ({ className, ...props }: PopoverPrimitive.Description.Props) => {\n  return <PopoverPrimitive.Description data-slot=\"popover-description\" className={cn('text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;AAKA,IAAa,aAAW,EAAE,GAAG,YAAyC;CACpE,OAAO,oBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,IAAa,kBAAkB,EAAE,GAAG,YAA4C;CAC9E,OAAO,oBAAC,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,IAAa,kBAAkB,EAC7B,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,GAAG,YACqI;CACxI,sBAAsB;CACtB,OACE,oBAAC,QAAiB,QAAlB,EAAA,UACE,oBAAC,QAAiB,YAAlB;EACS;EACM;EACL;EACF;EACM;EACZ,WAAU;EAEV,UAAA,oBAAC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,klBACA,SACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA,EACN,CAAA;AAE7B;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAyC;CACrF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA0C;CACrF,OAAO,oBAAC,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,WAAW,GAAG,eAAe,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAgD;CACjG,OAAO,oBAAC,QAAiB,aAAlB;EAA8B,aAAU;EAAsB,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtI"}

package/dist/ui/src/components/ui/select/select.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { ScrollArea } from "../scroll-area/scroll-area.js";
 import { POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from "../../../lib/popup-list.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -31,6 +32,7 @@ var SelectValue = ({ className, ...props }) => {
 	});
 };
 var SelectContent = ({ className, children, portalContainer, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsx(Select.Portal, {
 		container: portalContainer,
 		children: /* @__PURE__ */ jsx(Select.Positioner, {

package/dist/ui/src/components/ui/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Select = <TValue,>({ ...props }: SelectPrimitive.Root.Props<TValue>) => {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n};\n\nexport type TSelectTriggerSize = 'sm' | 'default';\n\nexport interface ISelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  size?: TSelectTriggerSize;\n}\n\nexport const SelectTrigger = ({ className, size = 'default', children, ...props }: ISelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        'flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent text-sm text-foreground transition-colors outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n        'data-popup-open:border-ring data-popup-open:ring-3 data-popup-open:ring-ring/50',\n        'dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        size === 'sm' ? 'h-7 px-2.5 text-[0.8rem]' : 'h-8 px-2.5',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\" className=\"shrink-0 text-muted-foreground\">\n        <IconChevronDown className=\"size-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nexport const SelectValue = ({ className, ...props }: SelectPrimitive.Value.Props) => {\n  return <SelectPrimitive.Value data-slot=\"select-value\" className={cn('truncate data-placeholder:text-muted-foreground', className)} {...props} />;\n};\n\nexport interface ISelectContentProps extends SelectPrimitive.Popup.Props {\n  portalContainer?: SelectPrimitive.Portal.Props['container'];\n}\n\nexport const SelectContent = ({ className, children, portalContainer, ...props }: ISelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal container={portalContainer}>\n      {/* alignItemWithTrigger=false: drop below the trigger (shadcn style), not Base UI's macOS-style overlay */}\n      <SelectPrimitive.Positioner data-slot=\"select-positioner\" sideOffset={4} align=\"start\" alignItemWithTrigger={false}>\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            'z-50 min-w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            'origin-[var(--transform-origin)]',\n            'transition-[transform,scale,opacity] motion-reduce:animate-none motion-reduce:transition-none data-open:scale-100 data-open:opacity-100 data-closed:scale-95 data-closed:opacity-0 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* A long option list has to scroll inside the popup: the popup clips\n              (overflow-hidden) and carries no height of its own, so the options\n              past the fold were simply unreachable. --available-height is the\n              room the positioner measured for it. */}\n          {/* Select.List is what makes the wrappers legal: with a list present Base\n              UI moves `role=\"listbox\"` off the popup and onto it, so the options\n              stay direct children of the role and the ScrollArea sits outside it. */}\n          <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className=\"max-h-(--available-height)\">\n            <SelectPrimitive.List data-slot=\"select-list\">{children}</SelectPrimitive.List>\n          </ScrollArea>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n};\n\nexport const SelectGroup = ({ className, ...props }: SelectPrimitive.Group.Props) => {\n  return <SelectPrimitive.Group data-slot=\"select-group\" className={cn('flex flex-col gap-0.5', className)} {...props} />;\n};\n\nexport const SelectLabel = ({ className, ...props }: SelectPrimitive.GroupLabel.Props) => {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-2 py-1 text-xs font-semibold text-muted-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Props) => {\n  return (\n    <SelectPrimitive.Item data-slot=\"select-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <SelectPrimitive.ItemText data-slot=\"select-item-text\">{children}</SelectPrimitive.ItemText>\n      {/* After the text, not before it: the check marks the end of the item in\n          every list in the system, so the labels all start on one line. */}\n      <SelectPrimitive.ItemIndicator data-slot=\"select-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n};\n\nexport const SelectSeparator = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"select-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} aria-hidden=\"true\" {...props} />;\n};\n"],"mappings":";;;;;;;AAOA,IAAa,YAAmB,EAAE,GAAG,YAAgD;CACnF,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAQA,IAAa,iBAAiB,EAAE,WAAW,OAAO,WAAW,UAAU,GAAG,YAAiC;CACzG,OACE,qBAAC,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,sKACA,6EACA,gFACA,wFACA,mFACA,4HACA,SAAS,OAAO,6BAA6B,cAC7C,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UACD,oBAAC,OAAgB,MAAjB;GAAsB,aAAU;GAAc,WAAU;GACtD,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACjB,CAAA,CACC;;AAE7B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClJ;AAMA,IAAa,iBAAiB,EAAE,WAAW,UAAU,iBAAiB,GAAG,YAAiC;CACxG,OACE,oBAAC,OAAgB,QAAjB;EAAwB,WAAW;EAEjC,UAAA,oBAAC,OAAgB,YAAjB;GAA4B,aAAU;GAAoB,YAAY;GAAG,OAAM;GAAQ,sBAAsB;GAC3G,UAAA,oBAAC,OAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT,kJACA,oCACA,8QACA,SACF;IACA,GAAI;IASJ,UAAA,oBAAC,YAAD;KAAY,MAAK;KAAS,MAAA;KAAK,UAAS;KAAU,WAAU;KAC1D,UAAA,oBAAC,OAAgB,MAAjB;MAAsB,aAAU;MAAe;KAA+B,CAAA;IACpE,CAAA;GACS,CAAA;EACG,CAAA;CACN,CAAA;AAE5B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxH;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA8C;CACxF,OACE,oBAAC,OAAgB,YAAjB;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,UAAU,GAAG,YAAwC;CAC3F,OACE,qBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAc,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAA7G,UAAA,CACE,oBAAC,OAAgB,UAAjB;GAA0B,aAAU;GAAoB;EAAmC,CAAA,GAG3F,oBAAC,OAAgB,eAAjB;GAA+B,aAAU;GAAwB,WAAW;GAC1E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACJ,CAAA,CACX;;AAE1B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,6BAA6B,SAAS;EAAG,eAAY;EAAO,GAAI;CAAQ,CAAA;AACjI"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Select = <TValue,>({ ...props }: SelectPrimitive.Root.Props<TValue>) => {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n};\n\nexport type TSelectTriggerSize = 'sm' | 'default';\n\nexport interface ISelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  size?: TSelectTriggerSize;\n}\n\nexport const SelectTrigger = ({ className, size = 'default', children, ...props }: ISelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        'flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent text-sm text-foreground transition-colors outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n        'data-popup-open:border-ring data-popup-open:ring-3 data-popup-open:ring-ring/50',\n        'dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        size === 'sm' ? 'h-7 px-2.5 text-[0.8rem]' : 'h-8 px-2.5',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\" className=\"shrink-0 text-muted-foreground\">\n        <IconChevronDown className=\"size-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nexport const SelectValue = ({ className, ...props }: SelectPrimitive.Value.Props) => {\n  return <SelectPrimitive.Value data-slot=\"select-value\" className={cn('truncate data-placeholder:text-muted-foreground', className)} {...props} />;\n};\n\nexport interface ISelectContentProps extends SelectPrimitive.Popup.Props {\n  portalContainer?: SelectPrimitive.Portal.Props['container'];\n}\n\nexport const SelectContent = ({ className, children, portalContainer, ...props }: ISelectContentProps) => {\n  useExposedFocusGuards();\n  return (\n    <SelectPrimitive.Portal container={portalContainer}>\n      {/* alignItemWithTrigger=false: drop below the trigger (shadcn style), not Base UI's macOS-style overlay */}\n      <SelectPrimitive.Positioner data-slot=\"select-positioner\" sideOffset={4} align=\"start\" alignItemWithTrigger={false}>\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            'z-50 min-w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            'origin-[var(--transform-origin)]',\n            'transition-[transform,scale,opacity] motion-reduce:animate-none motion-reduce:transition-none data-open:scale-100 data-open:opacity-100 data-closed:scale-95 data-closed:opacity-0 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* A long option list has to scroll inside the popup: the popup clips\n              (overflow-hidden) and carries no height of its own, so the options\n              past the fold were simply unreachable. --available-height is the\n              room the positioner measured for it. */}\n          {/* Select.List is what makes the wrappers legal: with a list present Base\n              UI moves `role=\"listbox\"` off the popup and onto it, so the options\n              stay direct children of the role and the ScrollArea sits outside it. */}\n          <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className=\"max-h-(--available-height)\">\n            <SelectPrimitive.List data-slot=\"select-list\">{children}</SelectPrimitive.List>\n          </ScrollArea>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n};\n\nexport const SelectGroup = ({ className, ...props }: SelectPrimitive.Group.Props) => {\n  return <SelectPrimitive.Group data-slot=\"select-group\" className={cn('flex flex-col gap-0.5', className)} {...props} />;\n};\n\nexport const SelectLabel = ({ className, ...props }: SelectPrimitive.GroupLabel.Props) => {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-2 py-1 text-xs font-semibold text-muted-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Props) => {\n  return (\n    <SelectPrimitive.Item data-slot=\"select-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <SelectPrimitive.ItemText data-slot=\"select-item-text\">{children}</SelectPrimitive.ItemText>\n      {/* After the text, not before it: the check marks the end of the item in\n          every list in the system, so the labels all start on one line. */}\n      <SelectPrimitive.ItemIndicator data-slot=\"select-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n};\n\nexport const SelectSeparator = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"select-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} aria-hidden=\"true\" {...props} />;\n};\n"],"mappings":";;;;;;;;AAQA,IAAa,YAAmB,EAAE,GAAG,YAAgD;CACnF,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAQA,IAAa,iBAAiB,EAAE,WAAW,OAAO,WAAW,UAAU,GAAG,YAAiC;CACzG,OACE,qBAAC,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,sKACA,6EACA,gFACA,wFACA,mFACA,4HACA,SAAS,OAAO,6BAA6B,cAC7C,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UACD,oBAAC,OAAgB,MAAjB;GAAsB,aAAU;GAAc,WAAU;GACtD,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACjB,CAAA,CACC;;AAE7B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClJ;AAMA,IAAa,iBAAiB,EAAE,WAAW,UAAU,iBAAiB,GAAG,YAAiC;CACxG,sBAAsB;CACtB,OACE,oBAAC,OAAgB,QAAjB;EAAwB,WAAW;EAEjC,UAAA,oBAAC,OAAgB,YAAjB;GAA4B,aAAU;GAAoB,YAAY;GAAG,OAAM;GAAQ,sBAAsB;GAC3G,UAAA,oBAAC,OAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT,kJACA,oCACA,8QACA,SACF;IACA,GAAI;IASJ,UAAA,oBAAC,YAAD;KAAY,MAAK;KAAS,MAAA;KAAK,UAAS;KAAU,WAAU;KAC1D,UAAA,oBAAC,OAAgB,MAAjB;MAAsB,aAAU;MAAe;KAA+B,CAAA;IACpE,CAAA;GACS,CAAA;EACG,CAAA;CACN,CAAA;AAE5B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxH;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA8C;CACxF,OACE,oBAAC,OAAgB,YAAjB;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,UAAU,GAAG,YAAwC;CAC3F,OACE,qBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAc,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAA7G,UAAA,CACE,oBAAC,OAAgB,UAAjB;GAA0B,aAAU;GAAoB;EAAmC,CAAA,GAG3F,oBAAC,OAAgB,eAAjB;GAA+B,aAAU;GAAwB,WAAW;GAC1E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACJ,CAAA,CACX;;AAE1B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,6BAA6B,SAAS;EAAG,eAAY;EAAO,GAAI;CAAQ,CAAA;AACjI"}

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

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../button/button.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconX } from "@tabler/icons-react";
 import { Dialog } from "@base-ui/react/dialog";
@@ -36,6 +37,7 @@ var SheetOverlay = ({ className, ...props }) => {
 	});
 };
 var SheetContent = ({ className, children, side = "right", showCloseButton = true, ...props }) => {
+	useExposedFocusGuards();
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 		"data-slot": "sheet-content",
 		"data-side": side,