@optiaxiom/react 1.5.5 → 1.5.7

package/dist/esm/packages/react/src/menu/MenuSubContent.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useId } from '@radix-ui/react-id';
+import clsx from 'clsx';
 import { forwardRef, useState, useMemo, useRef, useEffect } from 'react';
 import { Command } from '../command/Command.js';
 import '../command/CommandInput.js';
@@ -19,7 +21,7 @@ import { useMenuSubContext, MenuSubProvider } from './MenuSubContext.js';
 import { MenuSubInput } from './MenuSubInput.js';
 
 const MenuSubContent = forwardRef(
-  ({ align = "start", children, side = "right", ...props }, outerRef) => {
+  ({ align = "start", side = "right", ...props }, outerRef) => {
     const { onSelect, setOpen: setRootMenuOpen } = useMenuContext(
       "@optiaxiom/react/MenuSubContent"
     );
@@ -31,11 +33,12 @@ const MenuSubContent = forwardRef(
     const {
       contentRef: parentContentRef,
       inputRef: parentInputRef,
-      triggerRef: parentTriggerRef
+      itemRef: parentItemRef
     } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
     const { open, presence } = usePopoverContext(
       "@optiaxiom/react/MenuSubContent"
     );
+    const labelId = useId();
     const ref = useComposedRefs(parentContentRef, outerRef);
     const [inputValue, setInputValue] = useState("");
     const options = useMemo(
@@ -44,7 +47,7 @@ const MenuSubContent = forwardRef(
     );
     const contentRef = useRef(null);
     const inputRef = useRef(null);
-    const triggerRef = useRef(null);
+    const itemRef = useRef(null);
     const [subMenuOpen, setSubMenuOpen] = useState(false);
     useEffect(() => {
       if (!open) {
@@ -61,12 +64,13 @@ const MenuSubContent = forwardRef(
       return null;
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: parentTriggerRef }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: parentItemRef }),
+      /* @__PURE__ */ jsxs(
         PopoverContent,
         {
           align,
           alignOffset: item.subOptionsInputVisible ? -46 : -4,
+          "aria-labelledby": clsx(parentItemRef.current?.id, labelId),
           onCloseAutoFocus: (event) => {
             event.preventDefault();
             parentInputRef.current?.focus();
@@ -98,51 +102,54 @@ const MenuSubContent = forwardRef(
           side,
           sideOffset: 0,
           ...props,
-          children: children ?? /* @__PURE__ */ jsxs(
-            Command,
-            {
-              enabled: true,
-              inputValue,
-              onHover: (item2) => {
-                setSubMenuOpen(
-                  typeof item2.subOptions === "function" || !!item2.subOptions?.length
-                );
-              },
-              onInputValueChange: (inputValue2) => {
-                if (item.subOptionsInputVisible) {
-                  setInputValue(inputValue2);
-                  return;
-                }
-                parentInputRef.current?.focus();
-                setParentInputValue(inputValue2);
-              },
-              onSelect: (item2, { dismiss }) => {
-                if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
-                  setSubMenuOpen(true);
-                } else {
-                  onSelect(item2, { dismiss });
-                }
-              },
-              options,
-              children: [
-                /* @__PURE__ */ jsx(VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsx(MenuSubInput, { ref: inputRef }) }),
-                /* @__PURE__ */ jsx(
-                  MenuSubProvider,
-                  {
-                    contentRef,
-                    inputRef,
-                    open: subMenuOpen,
-                    setOpen: setSubMenuOpen,
-                    triggerRef,
-                    children: /* @__PURE__ */ jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+          children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("h2", { id: labelId, children: "Submenu" }) }),
+            /* @__PURE__ */ jsxs(
+              Command,
+              {
+                enabled: true,
+                inputValue,
+                onHover: (item2, pointer) => {
+                  setSubMenuOpen(
+                    pointer && (typeof item2.subOptions === "function" || !!item2.subOptions?.length)
+                  );
+                },
+                onInputValueChange: (inputValue2) => {
+                  if (item.subOptionsInputVisible) {
+                    setInputValue(inputValue2);
+                    return;
                   }
-                )
-              ]
-            },
-            item.key ?? resolveItemProperty(item.label, {
-              inputValue: parentInputValue
-            })
-          )
+                  parentInputRef.current?.focus();
+                  setParentInputValue(inputValue2);
+                },
+                onSelect: (item2, { dismiss }) => {
+                  if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
+                    setSubMenuOpen(true);
+                  } else {
+                    onSelect(item2, { dismiss });
+                  }
+                },
+                options,
+                children: [
+                  /* @__PURE__ */ jsx(VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsx(MenuSubInput, { placeholder: "Filter...", ref: inputRef }) }),
+                  /* @__PURE__ */ jsx(
+                    MenuSubProvider,
+                    {
+                      contentRef,
+                      inputRef,
+                      itemRef,
+                      open: subMenuOpen,
+                      setOpen: setSubMenuOpen,
+                      children: /* @__PURE__ */ jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+                    }
+                  )
+                ]
+              },
+              item.key ?? resolveItemProperty(item.label, {
+                inputValue: parentInputValue
+              })
+            )
+          ]
         }
       )
     ] });

package/dist/esm/packages/react/src/menu/MenuSubTrigger.js

@@ -21,7 +21,7 @@ const MenuSubTrigger = forwardRef(
   }, outerRef) => {
     const { downshift, enabled, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
     const { open } = usePopoverContext("@optiaxiom/react/MenuSubTrigger");
-    const { contentRef, triggerRef } = useMenuSubContext(
+    const { contentRef, itemRef } = useMenuSubContext(
       "@optiaxiom/react/MenuSubTrigger"
     );
     const pointerEnterRef = useRef(false);
@@ -29,9 +29,9 @@ const MenuSubTrigger = forwardRef(
     const ref = useComposedRefs(innerRef, outerRef);
     useEffect(() => {
       if (open && highlightedItem === item && innerRef.current) {
-        triggerRef.current = innerRef.current;
+        itemRef.current = innerRef.current;
       }
-    }, [highlightedItem, item, open, triggerRef]);
+    }, [highlightedItem, item, open, itemRef]);
     return /* @__PURE__ */ jsx(
       MenuItem,
       {

package/dist/esm/packages/react/src/menu/MenuTrigger.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useRef } from 'react';
+import { useId } from '@radix-ui/react-id';
+import { forwardRef } from 'react';
 import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
 import '../dialog/Dialog.js';
 import '../dialog/DialogBody.js';
@@ -28,16 +29,19 @@ const MenuTrigger = forwardRef(
     onKeyDown,
     ...props
   }, outerRef) => {
-    const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
+    const { setOpen, size, triggerRef } = useMenuContext(
+      "@optiaxiom/react/MenuTrigger"
+    );
     const Comp = size === "sm" ? PopoverTrigger : DialogTrigger;
-    const buttonRef = useRef(null);
-    const ref = useComposedRefs(outerRef, buttonRef);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    const ref = useComposedRefs(outerRef, triggerRef);
+    const id = useId();
+    const labelId = useFieldLabelTrigger(triggerRef, ariaLabelledBy);
     return /* @__PURE__ */ jsx(
       Comp,
       {
         "aria-labelledby": labelId,
         asChild: true,
+        id,
         onKeyDown: (event) => {
           onKeyDown?.(event);
           if (event.defaultPrevented) {

package/dist/esm/packages/react/src/modal/ModalListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-CwrW5T_8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-ZzU49MIC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'sovhuw'],variants:{maxH:{xs:'iaa75f',sm:'t5g4uj',md:'_1oc5ymv',lg:'_1xvfpwl',full:{}},minW:{'0':{},trigger:'urnjxj'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'tvd8j'],variants:{maxH:{xs:'ggr4ky',sm:'_1qx8u0l',md:'_1chtpka',lg:'_1sma6k0',full:{}},minW:{'0':{},trigger:'yq4p0l'}}});
 
 export { listbox };

package/dist/esm/packages/react/src/modal/ModalListbox.js

@@ -4,7 +4,6 @@ import { forwardRef } from 'react';
 import { Listbox } from '../listbox/Listbox.js';
 import '../listbox/ListboxCheckboxItem.js';
 import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxFooter.js';
 import '../listbox/ListboxGroup.js';
 import '../listbox/ListboxItem.js';
 import '../listbox/ListboxItemIndicator.js';

package/dist/esm/packages/react/src/nav/Nav-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-zeWE_kzB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-GBXf6G0D.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'n54q9q']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_147yypj']});
 
 export { nav };

package/dist/esm/packages/react/src/nav/NavAccountItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-BhVbRAeR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-kvmw9WM9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_1bpbt30',true:'yn9qmy'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_1f86836',true:'fr1t5k'}}});
 
 export { item };

package/dist/esm/packages/react/src/nav/NavBody-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'flex-start',overflowX:'hidden',py:'8',w:'full'}],variants:{expanded:{false:{overflowY:'hidden'},true:{overflowY:'auto'}}}});

package/dist/esm/packages/react/src/nav/NavItem-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-CKV8XYmU.css';
-import './../../../../assets/src/nav/NavItem.css.ts.vanilla-ChnzoLtS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-Dd4mtFDn.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-B6en78yi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1oxl9yj']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1t6phut'],variants:{expanded:{false:'_18ohup2',true:'_18mso2d'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_5scrfs']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'oocssu'],variants:{expanded:{false:'z2lom6',true:'_127koqr'}}});
 
 export { item, label };

package/dist/esm/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-z6LwupeP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CADK5dA-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'_13pgrb2']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_154y10p'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'i1gw7j']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'vreown']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1fyal0p'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'n6owh4']});
 
 export { button, cursor, list };

package/dist/esm/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'},screen:{}}}});

package/dist/esm/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-C6rS48Ul.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-CtZnQgDv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1yd1mvw'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_10jr6bf'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-CKT_MGSU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-CqzQ4gnm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'wdv9tz']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'d4o23a']});
 
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BCilgzn2.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-CZfwX7sK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-SpZDsPH1.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-D0Nfm2Aw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1nvqrvf'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'v07sx3']});
-var input = recipeRuntime({base:'rmvxez'});
-var radio = recipeRuntime({base:'_3ahpd0'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_13tj24e'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1wu3jpw']});
+var input = recipeRuntime({base:'k21kvl'});
+var radio = recipeRuntime({base:'_13c6hvs'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/search-input/SearchInput-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-C56hMF5N.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DUSHD_wh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'fw5vrt']});
-var input = recipeRuntime({base:'kn1z9o'});
-var search = recipeRuntime({base:'_1uwkq90'});
+var clear = recipeRuntime({base:[{size:'sm'},'yzkg31']});
+var input = recipeRuntime({base:'_4scn26'});
+var search = recipeRuntime({base:'_48hxqb'});
 
 export { clear, input, search };

package/dist/esm/packages/react/src/select/Select.js

@@ -5,7 +5,7 @@ import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useSelect } from 'downshift';
 import { forwardRef, useRef, useMemo } from 'react';
-import { usePortalPatch } from '../downshift/usePortalPatch.js';
+import { useHighlightedIndex } from '../downshift/useHighlightedIndex.js';
 import '../field/FieldContext.js';
 import { useObserveValue } from '../hooks/useObserveValue.js';
 import '../utils/conditions.js';
@@ -51,16 +51,17 @@ const Select = forwardRef(
       onChange: onOpenChange,
       prop: open
     });
-    const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
+    const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex(
       isOpen,
       () => selectedItem ? items.findIndex(
         (item) => !item.disabledReason && selectedItem.value === item.value
       ) : -1
     );
+    const highlightedItemRef = useRef(null);
     const downshift = useSelect({
-      highlightedIndex: highlightedIndex === -1 && placed ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
+      highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
       isItemDisabled: (item) => !!item.disabledReason,
-      isOpen: placed,
+      isOpen,
       // @ts-expect-error -- no harm in supporting read only arrays
       items,
       itemToKey: (item) => item !== null ? item.value : item,
@@ -105,6 +106,7 @@ const Select = forwardRef(
         disabled,
         downshift,
         highlightedItem: items[downshift.highlightedIndex],
+        highlightedItemRef,
         isOpen,
         items,
         loading,

package/dist/esm/packages/react/src/select/SelectContent.js

@@ -1,11 +1,13 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 import { PopperContent } from '@radix-ui/react-popper';
+import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
+import { useFieldContext } from '../field/FieldContext.js';
 import '../listbox/Listbox.js';
 import '../listbox/ListboxCheckboxItem.js';
 import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxFooter.js';
 import '../listbox/ListboxGroup.js';
 import '../listbox/ListboxItem.js';
 import '../listbox/ListboxItemIndicator.js';
@@ -32,17 +34,30 @@ import { SelectRadioItem } from './SelectRadioItem.js';
 const SelectContent = forwardRef(
   ({
     align = "start",
+    "aria-label": ariaLabel,
     children,
     onPointerDown,
     side = "bottom",
     size,
     ...props
   }, ref) => {
-    const { downshift, highlightedItem, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
+    const { labelId: fieldLabelId } = useFieldContext(
+      "@optiaxiom/react/SelectContent"
+    );
+    const {
+      downshift,
+      highlightedItem,
+      highlightedItemRef,
+      isOpen,
+      items,
+      loading
+    } = useSelectContext("@optiaxiom/react/SelectContent");
+    const labelId = useId();
     const [placed, setPlaced] = useState(false);
     return /* @__PURE__ */ jsx(TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
       ModalListbox,
       {
+        "aria-label": ariaLabel || "Menu",
         asChild: true,
         maxH: "sm",
         minW: "trigger",
@@ -60,36 +75,57 @@ const SelectContent = forwardRef(
         role: "dialog",
         size,
         ...props,
-        children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset: 4, children: /* @__PURE__ */ jsx(
-          ListboxItemized,
+        children: /* @__PURE__ */ jsx(
+          PopperContent,
           {
-            highlightedItem,
-            items,
-            itemToKey: (item) => item.value,
-            loading,
-            onPlacedChange: setPlaced,
-            ...downshift.getMenuProps({}, { suppressRefError: !placed }),
-            children: children ?? ((item, index, prevItem) => {
-              const group = item.group;
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
-                shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
-                /* @__PURE__ */ jsx(Tooltip, { content: item.disabledReason, children: /* @__PURE__ */ jsx(
-                  SelectRadioItem,
+            align,
+            "aria-labelledby": clsx(fieldLabelId, labelId),
+            side,
+            sideOffset: 4,
+            children: /* @__PURE__ */ jsx(
+              ListboxItemized,
+              {
+                highlightedItem,
+                items,
+                itemToKey: (item) => item.value,
+                loading,
+                onPlacedChange: (placed2) => {
+                  setPlaced(placed2);
+                  if (placed2 && highlightedItemRef.current) {
+                    highlightedItemRef.current.scrollIntoView({
+                      block: "nearest"
+                    });
+                  }
+                },
+                ...downshift.getMenuProps(
                   {
-                    addonBefore: item.addon,
-                    "aria-label": item["aria-label"],
-                    description: item.description,
-                    index,
-                    item,
-                    children: item.label
+                    "aria-labelledby": fieldLabelId
                   },
-                  item.value
-                ) })
-              ] });
-            })
+                  { suppressRefError: !placed }
+                ),
+                children: children ?? ((item, index, prevItem) => {
+                  const group = item.group;
+                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                    shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
+                    shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
+                    /* @__PURE__ */ jsx(Tooltip, { content: item.disabledReason, children: /* @__PURE__ */ jsx(
+                      SelectRadioItem,
+                      {
+                        addonBefore: item.addon,
+                        "aria-label": item["aria-label"],
+                        description: item.description,
+                        index,
+                        item,
+                        children: item.label
+                      },
+                      item.value
+                    ) })
+                  ] });
+                })
+              }
+            )
           }
-        ) })
+        )
       }
     ) }) }) });
   }

package/dist/esm/packages/react/src/select/SelectItem.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
@@ -7,8 +8,19 @@ import '../sprinkles/sprinklesMerge.js';
 import { useSelectContext } from './SelectContext.js';
 
 const SelectItem = forwardRef(
-  ({ children, index, item, onMouseMove, size, ...props }, ref) => {
-    const { downshift, highlightedItem, isOpen, items, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
+  ({ children, index, item, onMouseMove, size, ...props }, outerRef) => {
+    const {
+      downshift,
+      highlightedItem,
+      highlightedItemRef,
+      isOpen,
+      items,
+      selectedItem
+    } = useSelectContext("@optiaxiom/react/SelectItem");
+    const ref = useComposedRefs(
+      highlightedItem === item ? highlightedItemRef : void 0,
+      outerRef
+    );
     const itemProps = downshift.getItemProps({
       "aria-posinset": index + 1,
       "aria-setsize": items.length,

package/dist/esm/packages/react/src/select/SelectRadioItem.js

@@ -4,7 +4,6 @@ import { forwardRef } from 'react';
 import '../listbox/Listbox.js';
 import '../listbox/ListboxCheckboxItem.js';
 import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxFooter.js';
 import '../listbox/ListboxGroup.js';
 import '../listbox/ListboxItem.js';
 import '../listbox/ListboxItemIndicator.js';

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-DGE7X2K0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-2m7n0NDy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.4_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_asf7eqp3jdj5gfnzqmvududbgm/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1i6ufrr',md:'_14ozoew',base:'_4f2eh2'},defaultClass:'_4f2eh2'},vertical:{conditions:{sm:'wmrbxp',md:'_174xw1p',base:'_11gs0we'},defaultClass:'_11gs0we'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'wpx49g',md:'ezniu3',base:'_1twahtx'},defaultClass:'_1twahtx'},vertical:{conditions:{sm:'_18igik1',md:'_1iood5r',base:'_1tgpry0'},defaultClass:'_1tgpry0'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-BabUUhln.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CHqwUT0f.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'q0xx1g']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'csqo7j']});
 
 export { skeleton };