npm - @exsto/ds - Versions diffs - 0.0.1-rc.14 → 0.0.1-rc.16 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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,

package/dist/ui/src/components/ui/sheet/sheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sheet.js","names":[],"sources":["../../../../../../../ui/src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } 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 Sheet = ({ ...props }: SheetPrimitive.Root.Props) => {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n};\n\nexport const SheetTrigger = ({ ...props }: SheetPrimitive.Trigger.Props) => {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n};\n\nexport const SheetClose = ({ ...props }: SheetPrimitive.Close.Props) => {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n};\n\nconst SheetPortal = ({ ...props }: SheetPrimitive.Portal.Props) => {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n};\n\nconst SheetOverlay = ({ className, ...props }: SheetPrimitive.Backdrop.Props) => {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',\n className,\n )}\n {...props}\n />\n );\n};\n\nexport const SheetContent = ({\n className,\n children,\n side = 'right',\n showCloseButton = true,\n ...props\n}: SheetPrimitive.Popup.Props & {\n side?: 'top' \| 'right' \| 'bottom' \| 'left';\n showCloseButton?: boolean;\n}) => {\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 motion-reduce:transition-none ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <SheetPrimitive.Close data-slot=\"sheet-close\" render={<Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\" />}>\n <IconX />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n )}\n </SheetPrimitive.Popup>\n </SheetPortal>\n );\n};\n\nexport const SheetHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sheet-header\" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />;\n};\n\nexport const SheetFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sheet-footer\" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n};\n\nexport const SheetTitle = ({ className, ...props }: SheetPrimitive.Title.Props) => {\n return <SheetPrimitive.Title data-slot=\"sheet-title\" className={cn('font-heading text-base font-medium text-foreground', className)} {...props} />;\n};\n\nexport const SheetDescription = ({ className, ...props }: SheetPrimitive.Description.Props) => {\n return <SheetPrimitive.Description data-slot=\"sheet-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":"~~;;;;;;AAMA~~,IAAa,SAAS,EAAE,GAAG,YAAuC;CAChE,OAAO,oBAAC,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,cAAc,EAAE,GAAG,YAAwC;CACtE,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,eAAe,EAAE,GAAG,YAAyC;CACjE,OAAO,oBAAC,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,gBAAgB,EAAE,WAAW,GAAG,YAA2C;CAC/E,OACE,oBAAC,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,mMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAC3B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAAC,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,2rCACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACA,mBACC,qBAAC,OAAe,OAAhB;GAAsB,aAAU;GAAc,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAjI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CACjB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnJ;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,OAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I"}
1	+ {"version":3,"file":"sheet.js","names":[],"sources":["../../../../../../../ui/src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } 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 Sheet = ({ ...props }: SheetPrimitive.Root.Props) => {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n};\n\nexport const SheetTrigger = ({ ...props }: SheetPrimitive.Trigger.Props) => {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n};\n\nexport const SheetClose = ({ ...props }: SheetPrimitive.Close.Props) => {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n};\n\nconst SheetPortal = ({ ...props }: SheetPrimitive.Portal.Props) => {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n};\n\nconst SheetOverlay = ({ className, ...props }: SheetPrimitive.Backdrop.Props) => {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',\n className,\n )}\n {...props}\n />\n );\n};\n\nexport const SheetContent = ({\n className,\n children,\n side = 'right',\n showCloseButton = true,\n ...props\n}: SheetPrimitive.Popup.Props & {\n side?: 'top' \| 'right' \| 'bottom' \| 'left';\n showCloseButton?: boolean;\n}) => {\n useExposedFocusGuards();\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 motion-reduce:transition-none ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <SheetPrimitive.Close data-slot=\"sheet-close\" render={<Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\" />}>\n <IconX />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n )}\n </SheetPrimitive.Popup>\n </SheetPortal>\n );\n};\n\nexport const SheetHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sheet-header\" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />;\n};\n\nexport const SheetFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sheet-footer\" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n};\n\nexport const SheetTitle = ({ className, ...props }: SheetPrimitive.Title.Props) => {\n return <SheetPrimitive.Title data-slot=\"sheet-title\" className={cn('font-heading text-base font-medium text-foreground', className)} {...props} />;\n};\n\nexport const SheetDescription = ({ className, ...props }: SheetPrimitive.Description.Props) => {\n return <SheetPrimitive.Description data-slot=\"sheet-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAOA,IAAa,SAAS,EAAE,GAAG,YAAuC;CAChE,OAAO,oBAAC,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,cAAc,EAAE,GAAG,YAAwC;CACtE,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,eAAe,EAAE,GAAG,YAAyC;CACjE,OAAO,oBAAC,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,gBAAgB,EAAE,WAAW,GAAG,YAA2C;CAC/E,OACE,oBAAC,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,mMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAC3B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,sBAAsB;CACtB,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAAC,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,2rCACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACA,mBACC,qBAAC,OAAe,OAAhB;GAAsB,aAAU;GAAc,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAjI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CACjB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnJ;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,OAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I"}

package/dist/ui/src/index.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export * from './components/edyn/audio-player';
 export * from './components/edyn/date-range-picker';
 export * from './components/edyn/initials-avatar';
 export * from './components/edyn/multi-select';
+export * from './components/edyn/presence';
 export * from './components/edyn/progress-line';
 export * from './components/edyn/rich-text-content';
 export * from './components/edyn/video-player';

package/dist/ui/src/lib/focus-guards.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /** Call from a popup's content component: while it is mounted, the focus guards around popups are not aria-hidden. */
2	+ export declare const useExposedFocusGuards: () => void;

package/dist/ui/src/lib/focus-guards.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+//#region ../ui/src/lib/focus-guards.ts
+/**
+* Base UI wraps an open popup in focus-trap sentinels: empty spans with `tabindex="0"`, because tabbing onto one is how focus is
+* handed back into the popup, and with `aria-hidden="true"`, so a screen reader skips them. A control that is hidden from
+* assistive technology and can still be focused is a trap, and axe's aria-hidden-focus rule (WCAG 4.1.2) reports exactly that
+* pair; whether as a violation or as "needs review" depends on the page, so an application's audit fails on every open menu
+* while a test page does not. Base UI 1.8 and 1.9 render them this way and give a wrapper no way to change it.
+*
+* `useExposedFocusGuards` takes the `aria-hidden` off them while the popup is open. They stay focusable, so focus is handed
+* back as before, and they stay empty, so there is nothing for a screen reader to read. It is called by the design system's
+* popup content components, which exist only while their popup is open: one observer serves every popup open at once and
+* goes away with the last of them. React does not write an attribute whose prop has not changed, so the removal holds.
+*/
+var HIDDEN_GUARD = "[data-base-ui-focus-guard][aria-hidden]";
+/** Takes `aria-hidden` off the guards in a subtree, or off the node itself when it is one. */
+var expose = (root) => {
+	if (root instanceof Element && root.matches(HIDDEN_GUARD)) root.removeAttribute("aria-hidden");
+	for (const guard of root.querySelectorAll(HIDDEN_GUARD)) guard.removeAttribute("aria-hidden");
+};
+var users = 0;
+var observer;
+var start = () => {
+	users += 1;
+	expose(document);
+	if (observer !== void 0) return;
+	observer = new MutationObserver((records) => {
+		for (const record of records) for (const added of record.addedNodes) if (added instanceof Element) expose(added);
+	});
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true
+	});
+};
+var stop = () => {
+	users -= 1;
+	if (users === 0) {
+		observer?.disconnect();
+		observer = void 0;
+	}
+};
+/** Call from a popup's content component: while it is mounted, the focus guards around popups are not aria-hidden. */
+var useExposedFocusGuards = () => {
+	useEffect(() => {
+		start();
+		return stop;
+	}, []);
+};
+//#endregion
+export { useExposedFocusGuards };
+//# sourceMappingURL=focus-guards.js.map

package/dist/ui/src/lib/focus-guards.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"focus-guards.js","names":[],"sources":["../../../../../ui/src/lib/focus-guards.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Base UI wraps an open popup in focus-trap sentinels: empty spans with `tabindex=\"0\"`, because tabbing onto one is how focus is\n * handed back into the popup, and with `aria-hidden=\"true\"`, so a screen reader skips them. A control that is hidden from\n * assistive technology and can still be focused is a trap, and axe's aria-hidden-focus rule (WCAG 4.1.2) reports exactly that\n * pair; whether as a violation or as \"needs review\" depends on the page, so an application's audit fails on every open menu\n * while a test page does not. Base UI 1.8 and 1.9 render them this way and give a wrapper no way to change it.\n *\n * `useExposedFocusGuards` takes the `aria-hidden` off them while the popup is open. They stay focusable, so focus is handed\n * back as before, and they stay empty, so there is nothing for a screen reader to read. It is called by the design system's\n * popup content components, which exist only while their popup is open: one observer serves every popup open at once and\n * goes away with the last of them. React does not write an attribute whose prop has not changed, so the removal holds.\n */\n\nconst HIDDEN_GUARD = '[data-base-ui-focus-guard][aria-hidden]';\n\n/** Takes `aria-hidden` off the guards in a subtree, or off the node itself when it is one. */\nconst expose = (root: ParentNode | Element): void => {\n if (root instanceof Element && root.matches(HIDDEN_GUARD)) {\n root.removeAttribute('aria-hidden');\n }\n for (const guard of root.querySelectorAll(HIDDEN_GUARD)) {\n guard.removeAttribute('aria-hidden');\n }\n};\n\nlet users = 0;\nlet observer: MutationObserver | undefined;\n\nconst start = (): void => {\n users += 1;\n expose(document);\n if (observer !== undefined) {\n return;\n }\n observer = new MutationObserver((records) => {\n for (const record of records) {\n for (const added of record.addedNodes) {\n if (added instanceof Element) {\n expose(added);\n }\n }\n }\n });\n observer.observe(document.body, { childList: true, subtree: true });\n};\n\nconst stop = (): void => {\n users -= 1;\n if (users === 0) {\n observer?.disconnect();\n observer = undefined;\n }\n};\n\n/** Call from a popup's content component: while it is mounted, the focus guards around popups are not aria-hidden. */\nexport const useExposedFocusGuards = (): void => {\n useEffect(() => {\n start();\n return stop;\n }, []);\n};\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAM,eAAe;;AAGrB,IAAM,UAAU,SAAqC;CACnD,IAAI,gBAAgB,WAAW,KAAK,QAAQ,YAAY,GACtD,KAAK,gBAAgB,aAAa;CAEpC,KAAK,MAAM,SAAS,KAAK,iBAAiB,YAAY,GACpD,MAAM,gBAAgB,aAAa;AAEvC;AAEA,IAAI,QAAQ;AACZ,IAAI;AAEJ,IAAM,cAAoB;CACxB,SAAS;CACT,OAAO,QAAQ;CACf,IAAI,aAAa,KAAA,GACf;CAEF,WAAW,IAAI,kBAAkB,YAAY;EAC3C,KAAK,MAAM,UAAU,SACnB,KAAK,MAAM,SAAS,OAAO,YACzB,IAAI,iBAAiB,SACnB,OAAO,KAAK;CAIpB,CAAC;CACD,SAAS,QAAQ,SAAS,MAAM;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC;AACpE;AAEA,IAAM,aAAmB;CACvB,SAAS;CACT,IAAI,UAAU,GAAG;EACf,UAAU,WAAW;EACrB,WAAW,KAAA;CACb;AACF;;AAGA,IAAa,8BAAoC;CAC/C,gBAAgB;EACd,MAAM;EACN,OAAO;CACT,GAAG,CAAC,CAAC;AACP"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.14",
+  "version": "0.0.1-rc.16",
   "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [