@skdx/react 0.26.0 → 0.28.0

package/dist/select/Select.d.cts

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import type { SelectContextValue, SelectProps } from './types.cjs';
-/**
- * Listbox-style select. Options register their text label so the trigger's
- * `SelectValue` can display the selected option without extra wiring, and the
- * root merges those registrations with the optional declarative `items`
- * collection into the single ordered pool that drives labels and typeahead.
- */
+/** Listbox-style select using virtual focus (APG select-only combobox pattern). */
+/** Enabled options only — a disabled option is never a navigation or typeahead target. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 export declare const SelectProvider: {
     (props: SelectContextValue & {
         children: React.ReactNode;
@@ -28,11 +25,30 @@ export declare const SelectProvider: {
  * option toggles it, the listbox stays open, and `SelectValue` renders one
  * chip per selection.
  *
+ * Set `deselectable` to let a single-select be emptied by choosing the option
+ * it already holds, which is otherwise unreachable through the UI at all.
+ *
+ * Set `readOnly` to show a selection that cannot be changed while leaving the
+ * control otherwise live — focusable, in the tab order, and still submitted.
+ * That is the whole difference from `disabled`, which does all three of those
+ * things as well as refusing input.
+ *
  * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
  * uncontrolled (`defaultValue`, `defaultOpen`).
  *
+ * Given `options` and no children of its own, the whole anatomy is derived —
+ * see {@link SelectAnatomy}. Any children at all switch to full manual
+ * composition (below), for anything that needs, e.g. grouped separators or a
+ * custom icon — the switch is presence, not which part was composed, so
+ * composing any subset of the parts always renders exactly what was given.
+ *
  * @example
  * ```tsx
+ * <Select options={[{ value: 'react', label: 'React' }]} defaultValue="react" />
+ * ```
+ *
+ * @example Full manual composition:
+ * ```tsx
  * <Select defaultValue="react" name="framework">
  *   <SelectTrigger className="select-trigger">
  *     <SelectValue placeholder="Pick a framework" />

package/dist/select/Select.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import type { SelectContextValue, SelectProps } from './types.js';
-/**
- * Listbox-style select. Options register their text label so the trigger's
- * `SelectValue` can display the selected option without extra wiring, and the
- * root merges those registrations with the optional declarative `items`
- * collection into the single ordered pool that drives labels and typeahead.
- */
+/** Listbox-style select using virtual focus (APG select-only combobox pattern). */
+/** Enabled options only — a disabled option is never a navigation or typeahead target. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 export declare const SelectProvider: {
     (props: SelectContextValue & {
         children: React.ReactNode;
@@ -28,11 +25,30 @@ export declare const SelectProvider: {
  * option toggles it, the listbox stays open, and `SelectValue` renders one
  * chip per selection.
  *
+ * Set `deselectable` to let a single-select be emptied by choosing the option
+ * it already holds, which is otherwise unreachable through the UI at all.
+ *
+ * Set `readOnly` to show a selection that cannot be changed while leaving the
+ * control otherwise live — focusable, in the tab order, and still submitted.
+ * That is the whole difference from `disabled`, which does all three of those
+ * things as well as refusing input.
+ *
  * Works controlled (`value` + `onValueChange`, `open` + `onOpenChange`) or
  * uncontrolled (`defaultValue`, `defaultOpen`).
  *
+ * Given `options` and no children of its own, the whole anatomy is derived —
+ * see {@link SelectAnatomy}. Any children at all switch to full manual
+ * composition (below), for anything that needs, e.g. grouped separators or a
+ * custom icon — the switch is presence, not which part was composed, so
+ * composing any subset of the parts always renders exactly what was given.
+ *
  * @example
  * ```tsx
+ * <Select options={[{ value: 'react', label: 'React' }]} defaultValue="react" />
+ * ```
+ *
+ * @example Full manual composition:
+ * ```tsx
  * <Select defaultValue="react" name="framework">
  *   <SelectTrigger className="select-trigger">
  *     <SelectValue placeholder="Pick a framework" />

package/dist/select/Select.js

@@ -1 +1 @@
-import*as s from"react";import{createSafeContext as de}from"../utils/createContext.js";import{formValidityHandle as ue,useFormReset as Se}from"../utils/formControl.js";import{HiddenInput as Pe}from"../utils/hiddenInput.js";import{PopperRoot as Re}from"../utils/popper.js";import{useControllableState as ye}from"../utils/useControllableState.js";import{useOpenChangeComplete as ge}from"../utils/useOpenChangeComplete.js";import{useSelection as xe}from"../utils/useSelection.js";import{jsx as O,jsxs as Ce}from"react/jsx-runtime";var[Ie,u]=de("Select"),he=s.forwardRef(function({children:o,value:e,defaultValue:a,onValueChange:f,multiple:l=!1,items:i,open:n,defaultOpen:d=!1,onOpenChange:c,onOpenChangeComplete:r,disabled:x=!1,required:I=!1,invalid:p=!1,name:P},T){let h=s.useRef(null),E=s.useRef(null),H=s.useRef(null),{selectedValues:w,isSelected:ne,selectItem:ae,setSelection:ce}=xe({value:e,defaultValue:a,onValueChange:f,multiple:l}),[N=!1,se]=ye({prop:n,defaultProp:d,onChange:c});ge(N,E,r);let[g,ie]=s.useState(new Map),pe=s.useCallback((m,S)=>{ie(L=>{if(L.get(m)===S)return L;let D=new Map(L);return D.set(m,S),D})},[]),me=s.useMemo(()=>i?i.map(m=>({...m,label:g.get(m.value)??m.label??m.value})):[...g].map(([m,S])=>({value:m,label:S})),[i,g]),fe=s.useCallback(m=>g.get(m)??i?.find(S=>S.value===m)?.label??m,[g,i]);return s.useImperativeHandle(T,()=>ue(H),[]),Se(h,()=>{a!==void 0&&ce(a)}),O(Re,{children:Ce(Ie,{triggerRef:h,contentRef:E,contentId:s.useId(),multiple:l,selectedValues:w,isSelected:ne,selectItem:ae,open:N,onOpenChange:se,disabled:x,required:I,invalid:p,name:P,registerOptionLabel:pe,getOptionLabel:fe,collection:me,children:[o,P&&(w.length>0?w:[""]).map((m,S)=>O(Pe,{ref:S===0?H:void 0,type:"text",name:P,value:m,required:I,disabled:x},m||S))]})})});he.displayName="Select";import*as R from"react";import{useComposedRefs as ve}from"../utils/composeRefs.js";import{skdxPart as be}from"../utils/part.js";import{PopperAnchor as Te}from"../utils/popper.js";import{composeEventHandlers as M,Primitive as we}from"../utils/primitive.js";import{isTypeaheadKey as Le,useTypeahead as ke}from"../utils/useTypeahead.js";import{jsx as V}from"react/jsx-runtime";var K=R.forwardRef((t,o)=>{let e=u("SelectTrigger"),a=ve(o,e.triggerRef),f=e.disabled||t.disabled,l=R.useRef(e.collection);l.current=e.collection.filter(n=>!n.disabled);let i=ke(R.useCallback(()=>l.current.map(n=>n.label??n.value),[]));return V(Te,{asChild:!0,children:V(we.button,{type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-required":e.required||void 0,"aria-invalid":e.invalid?!0:void 0,"data-state":e.open?"open":"closed","data-disabled":f?"":void 0,"data-invalid":e.invalid?"":void 0,"data-placeholder":e.selectedValues.length===0?"":void 0,"data-multiple":e.multiple?"":void 0,disabled:f,...t,...be("select","trigger",t.className),ref:a,onClick:M(t.onClick,()=>e.onOpenChange(!e.open)),onKeyDown:M(t.onKeyDown,n=>{if(["ArrowDown","ArrowUp"," ","Enter"].includes(n.key)){n.preventDefault(),e.onOpenChange(!0);return}if(e.open||!Le(n))return;if(n.preventDefault(),e.multiple){e.onOpenChange(!0);return}let d=l.current.findIndex(r=>e.isSelected(r.value)),c=i(n.key,d);c!==-1&&e.selectItem(l.current[c].value)})})})});K.displayName="SelectTrigger";import*as A from"react";import{skdxPart as Ee}from"../utils/part.js";import{Primitive as He}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var G=A.forwardRef(({placeholder:t,children:o,...e},a)=>{let{selectedValues:f,multiple:l,getOptionLabel:i}=u("SelectValue"),n,d=!1;return o!==void 0?n=o:f.length===0?(n=t,d=!0):l?n=f.map(c=>q("span",{"data-chip":"","data-value":c,children:i(c)},c)):n=i(f[0]),q(He.span,{"data-multiple":l?"":void 0,"data-placeholder":d?"":void 0,...e,...Ee("select","value",e.className),ref:a,style:{pointerEvents:"none",...e.style},children:n})});G.displayName="SelectValue";import*as F from"react";import{skdxPart as Ne}from"../utils/part.js";import{Primitive as De}from"../utils/primitive.js";import{jsx as Oe}from"react/jsx-runtime";var B=F.forwardRef(({children:t,...o},e)=>Oe(De.span,{"aria-hidden":!0,...o,...Ne("select","icon",o.className),ref:e,children:t??"\u25BE"}));B.displayName="SelectIcon";import{Portal as Me}from"../utils/portal.js";import{jsx as Ve}from"react/jsx-runtime";var U=({forceMount:t,children:o,...e})=>{let a=u("SelectPortal");return t||a.open?Ve(Me,{...e,children:o}):null};U.displayName="SelectPortal";import*as C from"react";import{useComposedRefs as Ke}from"../utils/composeRefs.js";import{skdxPart as qe}from"../utils/part.js";import{PopperContent as Ae}from"../utils/popper.js";import{composeEventHandlers as Ge}from"../utils/primitive.js";import{useDismiss as Fe}from"../utils/useDismiss.js";import{useRovingFocus as Be}from"../utils/useRovingFocus.js";import{jsx as Ue}from"react/jsx-runtime";var W='[role="option"]:not([data-disabled])',_=C.forwardRef(({forceMount:t,side:o="bottom",align:e="start",sideOffset:a=4,onEscapeKeyDown:f,onPointerDownOutside:l,onFocusOutside:i,onInteractOutside:n,...d},c)=>{let r=u("SelectContent"),x=Ke(c,r.contentRef),I=Be({orientation:"vertical",loop:!1,itemSelector:W,typeahead:!0});return Fe({enabled:r.open,onEscapeKeyDown:p=>{f?.(p),!p.defaultPrevented&&(r.onOpenChange(!1),r.triggerRef.current?.focus())},onInteractOutside:n,onPointerDownOutside:p=>{l?.(p),p.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:p=>{i?.(p),p.defaultPrevented||r.onOpenChange(!1)}},[r.contentRef,r.triggerRef]),C.useEffect(()=>{if(!r.open)return;let p=requestAnimationFrame(()=>{let P=r.contentRef.current;if(!P)return;let T=P.querySelector('[role="option"][data-state="checked"]'),h=P.querySelector(W);(T??h??P).focus()});return()=>cancelAnimationFrame(p)},[r.open,r.contentRef]),t||r.open?Ue(Ae,{component:"select",role:"listbox",id:r.contentId,"aria-multiselectable":r.multiple?!0:void 0,"data-state":r.open?"open":"closed","data-multiple":r.multiple?"":void 0,tabIndex:-1,side:o,align:e,sideOffset:a,...d,...qe("select","content",d.className),ref:x,onKeyDown:Ge(d.onKeyDown,p=>{I(p),p.key==="Tab"&&(p.preventDefault(),r.onOpenChange(!1),r.triggerRef.current?.focus())})}):null});_.displayName="SelectContent";import*as z from"react";import{skdxPart as We}from"../utils/part.js";import{Primitive as _e}from"../utils/primitive.js";import{jsx as ze}from"react/jsx-runtime";var J=z.forwardRef((t,o)=>ze(_e.div,{...t,...We("select","viewport",t.className),ref:o,style:{overflow:"auto",...t.style}}));J.displayName="SelectViewport";import*as v from"react";import{createSafeContext as Je}from"../utils/createContext.js";import{skdxPart as Qe}from"../utils/part.js";import{composeEventHandlers as k,Primitive as Xe}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var[Ye,b]=Je("SelectItem"),X=v.forwardRef(({value:t,disabled:o,textValue:e,...a},f)=>{let l=u("SelectItem"),i=l.isSelected(t),n=v.useCallback(c=>l.registerOptionLabel(t,e??c),[l.registerOptionLabel,t,e]),d=()=>{o||(l.selectItem(t),!l.multiple&&(l.onOpenChange(!1),l.triggerRef.current?.focus()))};return Q(Ye,{value:t,selected:i,registerText:n,children:Q(Xe.div,{role:"option","aria-selected":i,"data-state":i?"checked":"unchecked","data-text-value":e,"data-disabled":o?"":void 0,tabIndex:o?void 0:-1,...a,...Qe("select","item",a.className),ref:f,onClick:k(a.onClick,d),onKeyDown:k(a.onKeyDown,c=>{[" ","Enter"].includes(c.key)&&(c.preventDefault(),d())}),onPointerEnter:k(a.onPointerEnter,c=>{o||c.currentTarget.focus()})})})});X.displayName="SelectItem";import*as y from"react";import{useComposedRefs as Ze}from"../utils/composeRefs.js";import{skdxPart as $e}from"../utils/part.js";import{Primitive as je}from"../utils/primitive.js";import{jsx as et}from"react/jsx-runtime";var Y=y.forwardRef(({children:t,...o},e)=>{let a=b("SelectItemText"),f=y.useRef(null),l=Ze(e,f);return y.useLayoutEffect(()=>{a.registerText(f.current?.textContent??"")}),et(je.span,{...o,...$e("select","item-text",o.className),ref:l,children:t})});Y.displayName="SelectItemText";import*as Z from"react";import{skdxPart as tt}from"../utils/part.js";import{Primitive as ot}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var $=Z.forwardRef(({forceMount:t,...o},e)=>{let a=b("SelectItemIndicator");return t||a.selected?rt(ot.span,{"aria-hidden":!0,...o,...tt("select","item-indicator",o.className),ref:e}):null});$.displayName="SelectItemIndicator";import*as j from"react";import{skdxPart as lt}from"../utils/part.js";import{Primitive as nt}from"../utils/primitive.js";import{jsx as at}from"react/jsx-runtime";var ee=j.forwardRef((t,o)=>at(nt.div,{role:"group",...t,...lt("select","group",t.className),ref:o}));ee.displayName="SelectGroup";import*as te from"react";import{skdxPart as ct}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as it}from"react/jsx-runtime";var oe=te.forwardRef((t,o)=>it(st.div,{...t,...ct("select","label",t.className),ref:o}));oe.displayName="SelectLabel";import*as re from"react";import{skdxPart as pt}from"../utils/part.js";import{Primitive as mt}from"../utils/primitive.js";import{jsx as ft}from"react/jsx-runtime";var le=re.forwardRef((t,o)=>ft(mt.div,{"aria-hidden":!0,...t,...pt("select","separator",t.className),ref:o}));le.displayName="SelectSeparator";export{he as Select,_ as SelectContent,ee as SelectGroup,B as SelectIcon,X as SelectItem,$ as SelectItemIndicator,Y as SelectItemText,oe as SelectLabel,U as SelectPortal,Ie as SelectProvider,le as SelectSeparator,K as SelectTrigger,G as SelectValue,J as SelectViewport,u as useSelectContext};
+import*as i from"react";import{createSafeContext as Ht}from"../utils/createContext.js";import{formValidityHandle as Dt,useFormReset as Vt}from"../utils/formControl.js";import{MirroredValues as At}from"../utils/hiddenInput.js";import{PopperRoot as Nt}from"../utils/popper.js";import{useControllableState as Gt}from"../utils/useControllableState.js";import{autoFocusEvent as Ft}from"../utils/useFocusTrap.js";import{useOpenChangeComplete as Kt}from"../utils/useOpenChangeComplete.js";import{useSelection as qt}from"../utils/useSelection.js";import*as xe from"react";import*as D from"react";import{useComposedRefs as We}from"../utils/composeRefs.js";import{skdxPart as Ye}from"../utils/part.js";import{PopperContent as Ze}from"../utils/popper.js";import{composeEventHandlers as ze}from"../utils/primitive.js";import{useDismiss as Je}from"../utils/useDismiss.js";import{jsx as Xe}from"react/jsx-runtime";function Qe(o,r){let e=o.querySelector('[data-part="viewport"]')??o;if(e===r||!e.contains(r))return;let s=e.getBoundingClientRect(),m=r.getBoundingClientRect();e.scrollTop+=m.top-s.top-(s.height-m.height)/2}var B=D.forwardRef(({forceMount:o,side:r="bottom",align:e="start",sideOffset:s=4,onEscapeKeyDown:m,onPointerDownOutside:a,onFocusOutside:R,onInteractOutside:S,onCloseAutoFocus:f,...n},d)=>{let c=g("SelectContent"),x=We(d,c.contentRef);c.closeAutoFocusRef.current=f,Je({enabled:c.open,onEscapeKeyDown:l=>{m?.(l),!l.defaultPrevented&&(c.onOpenChange(!1),c.focusTrigger())},onInteractOutside:S,onPointerDownOutside:l=>{a?.(l),l.defaultPrevented||c.onOpenChange(!1)},onFocusOutside:l=>{R?.(l),l.defaultPrevented||c.onOpenChange(!1)}},[c.contentRef,c.triggerRef]);let{setActiveId:v,openIntentRef:t}=c;return D.useEffect(()=>{if(!c.open)return;let l=requestAnimationFrame(()=>{let y=c.contentRef.current;if(!y)return;let h=t.current;t.current="selected";let u=Array.from(y.querySelectorAll(V)),E=u[0],F=u[u.length-1],H=y.querySelector('[role="option"][data-state="checked"]'),k=h==="first"?E:h==="last"?F:H??E;k&&(v(k.id),Qe(y,k))});return()=>cancelAnimationFrame(l)},[c.open,c.contentRef,v,t]),o||c.open?Xe(Ze,{component:"select",role:"listbox",id:c.contentId,"aria-multiselectable":c.multiple?!0:void 0,"data-state":c.open?"open":"closed","data-multiple":c.multiple?"":void 0,tabIndex:-1,side:r,align:e,sideOffset:s,...n,...Ye("select","content",n.className),ref:x,onMouseDown:ze(n.onMouseDown,l=>l.preventDefault())}):null});B.displayName="SelectContent";import*as A from"react";import{createSafeContext as $e}from"../utils/createContext.js";import{skdxPart as je}from"../utils/part.js";import{Primitive as et}from"../utils/primitive.js";import{jsx as se}from"react/jsx-runtime";var[tt,ie]=$e("SelectGroup",{labelId:null}),U=A.forwardRef((o,r)=>{let e=A.useId();return se(tt,{labelId:e,children:se(et.div,{role:"group","aria-labelledby":e,...o,...je("select","group",o.className),ref:r})})});U.displayName="SelectGroup";import*as me from"react";import{skdxPart as ot}from"../utils/part.js";import{Primitive as rt}from"../utils/primitive.js";import{jsx as lt}from"react/jsx-runtime";var _=me.forwardRef(({children:o,...r},e)=>lt(rt.span,{"aria-hidden":!0,...r,...ot("select","icon",r.className),ref:e,children:o??"\u25BE"}));_.displayName="SelectIcon";import*as T from"react";import{createSafeContext as nt}from"../utils/createContext.js";import{skdxPart as at}from"../utils/part.js";import{composeEventHandlers as de,Primitive as ct}from"../utils/primitive.js";import{jsx as pe}from"react/jsx-runtime";var[st,N]=nt("SelectItem"),W=T.forwardRef(({value:o,disabled:r,textValue:e,...s},m)=>{let a=g("SelectItem"),R=T.useId(),S=a.isSelected(o),f=a.activeId===R,{registerOptionLabel:n}=a,d=T.useCallback(x=>n(o,e??x),[n,o,e]),c=()=>{r||(a.selectItem(o),a.closeOnSelect&&(a.onOpenChange(!1),a.focusTrigger()))};return pe(st,{value:o,selected:S,registerText:d,children:pe(ct.div,{role:"option",id:R,"data-value":o,"aria-selected":S,"data-state":S?"checked":"unchecked","data-highlighted":f?"":void 0,"data-text-value":e,"aria-disabled":r||void 0,"data-disabled":r?"":void 0,...s,...at("select","item",s.className),ref:m,onClick:de(s.onClick,c),onPointerEnter:de(s.onPointerEnter,()=>{r||a.setActiveId(R)})})})});W.displayName="SelectItem";import*as fe from"react";import{skdxPart as it}from"../utils/part.js";import{Primitive as mt}from"../utils/primitive.js";import{jsx as dt}from"react/jsx-runtime";var Y=fe.forwardRef(({forceMount:o,...r},e)=>{let s=N("SelectItemIndicator");return o||s.selected?dt(mt.span,{"aria-hidden":!0,...r,...it("select","item-indicator",r.className),ref:e}):null});Y.displayName="SelectItemIndicator";import*as w from"react";import{useComposedRefs as pt}from"../utils/composeRefs.js";import{skdxPart as ft}from"../utils/part.js";import{Primitive as ut}from"../utils/primitive.js";import{jsx as St}from"react/jsx-runtime";var Z=w.forwardRef(({children:o,...r},e)=>{let s=N("SelectItemText"),m=w.useRef(null),a=pt(e,m);return w.useLayoutEffect(()=>{s.registerText(m.current?.textContent??"")}),St(ut.span,{...r,...ft("select","item-text",r.className),ref:a,children:o})});Z.displayName="SelectItemText";import*as ue from"react";import{skdxPart as Rt}from"../utils/part.js";import{Primitive as yt}from"../utils/primitive.js";import{jsx as gt}from"react/jsx-runtime";var z=ue.forwardRef((o,r)=>{let e=ie("SelectLabel");return gt(yt.div,{id:e.labelId??void 0,...o,...Rt("select","label",o.className),ref:r})});z.displayName="SelectLabel";import{Portal as ht}from"../utils/portal.js";import{jsx as It}from"react/jsx-runtime";var J=({forceMount:o,children:r,...e})=>{let s=g("SelectPortal");return o||s.open?It(ht,{...e,children:r}):null};J.displayName="SelectPortal";import*as I from"react";import{useComposedRefs as Pt}from"../utils/composeRefs.js";import{skdxPart as bt}from"../utils/part.js";import{PopperAnchor as xt}from"../utils/popper.js";import{composeEventHandlers as Se,Primitive as vt}from"../utils/primitive.js";import{itemText as Ct}from"../utils/useRovingFocus.js";import{isTypeaheadKey as Re,useTypeahead as ye}from"../utils/useTypeahead.js";import{jsx as he}from"react/jsx-runtime";var ge=10,Ot={ArrowDown:"first",Home:"first",ArrowUp:"last",End:"last",Enter:"selected"," ":"selected"},Q=I.forwardRef((o,r)=>{let e=g("SelectTrigger"),s=Pt(r,e.triggerRef),m=e.disabled||o.disabled,a=I.useRef(e.collection);a.current=e.collection.filter(t=>!t.disabled);let R=ye(I.useCallback(()=>a.current.map(t=>t.label??t.value),[])),S=I.useRef([]),f=ye(I.useCallback(()=>S.current.map(t=>Ct(t)),[])),n=t=>{t&&(e.setActiveId(t.id),t.scrollIntoView?.({block:"nearest"}))},d=t=>{let l=t?.getAttribute("data-value");l!=null&&(e.selectItem(l),e.closeOnSelect&&e.onOpenChange(!1))},c=t=>{let l=t?.getAttribute("data-value");l!=null&&(e.multiple&&e.isSelected(l)||e.selectItem(l))},x=t=>{let l=Array.from(e.contentRef.current?.querySelectorAll(V)??[]);S.current=l;let y=l.findIndex(u=>u.id===e.activeId);if(t.altKey&&(t.key==="ArrowUp"||t.key==="ArrowDown")){t.preventDefault(),t.key==="ArrowUp"&&(d(l[y]),e.onOpenChange(!1));return}if(t.key==="ArrowDown"||t.key==="ArrowUp"){if(t.preventDefault(),l.length===0)return;let u=t.key==="ArrowDown"?1:-1;n(l[Math.min(l.length-1,Math.max(0,y+u))]);return}if(t.key==="PageDown"||t.key==="PageUp"){if(t.preventDefault(),l.length===0)return;let u=t.key==="PageDown"?ge:-ge;n(l[Math.min(l.length-1,Math.max(0,y+u))]);return}if(t.key==="Home"||t.key==="End"){t.preventDefault(),n(t.key==="Home"?l[0]:l[l.length-1]);return}if(t.key==="Enter"||t.key===" "){t.preventDefault(),d(l[y]);return}if(t.key==="Tab"){c(l[y]),e.onOpenChange(!1);return}if(!Re(t))return;t.preventDefault();let h=f(t.key,y);h!==-1&&n(l[h])},v=o["aria-label"]===void 0&&e.hasValuePart?[o["aria-labelledby"],e.valueId].filter(Boolean).join(" "):o["aria-labelledby"];return he(xt,{asChild:!0,children:he(vt.button,{type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-activedescendant":e.activeId??void 0,"aria-required":e.required||void 0,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-state":e.open?"open":"closed","data-disabled":m?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-invalid":e.invalid?"":void 0,"data-placeholder":e.selectedValues.length===0?"":void 0,"data-multiple":e.multiple?"":void 0,disabled:m,...o,"aria-labelledby":v,...bt("select","trigger",o.className),ref:s,onClick:Se(o.onClick,()=>e.onOpenChange(!e.open)),onKeyDown:Se(o.onKeyDown,t=>{if(e.open){x(t);return}let l=Ot[t.key];if(t.altKey&&t.key==="ArrowUp")return;if(l!==void 0){t.preventDefault(),e.openIntentRef.current=t.altKey&&t.key==="ArrowDown"?"selected":l,e.onOpenChange(!0);return}if(!Re(t))return;if(t.preventDefault(),e.multiple){e.onOpenChange(!0);return}let y=a.current.findIndex(u=>e.isSelected(u.value)),h=R(t.key,y);h!==-1&&e.selectItem(a.current[h].value)})})})});Q.displayName="SelectTrigger";import*as P from"react";import{skdxPart as Tt}from"../utils/part.js";import{Primitive as wt}from"../utils/primitive.js";import{jsx as Ie}from"react/jsx-runtime";var X=P.forwardRef(({placeholder:o,children:r,...e},s)=>{let{selectedValues:m,multiple:a,getOptionLabel:R,valueId:S,setHasValuePart:f}=g("SelectValue");P.useEffect(()=>(f(!0),()=>f(!1)),[f]);let n,d=!1;return!e.asChild&&r!==void 0?n=r:m.length===0?(n=o,d=!0):a?n=m.map(c=>Ie("span",{"data-chip":"","data-value":c,children:R(c)},c)):n=R(m[0]),Ie(wt.span,{id:S,"data-multiple":a?"":void 0,"data-placeholder":d?"":void 0,...e,...Tt("select","value",e.className),ref:s,style:{pointerEvents:"none",...e.style},children:e.asChild&&P.isValidElement(r)?P.cloneElement(r,void 0,n):n})});X.displayName="SelectValue";import*as Pe from"react";import{skdxPart as Et}from"../utils/part.js";import{Primitive as kt}from"../utils/primitive.js";import{jsx as Lt}from"react/jsx-runtime";var $=Pe.forwardRef((o,r)=>Lt(kt.div,{...o,...Et("select","viewport",o.className),ref:r,style:{overflow:"auto",...o.style}}));$.displayName="SelectViewport";import{Fragment as Mt,jsx as b,jsxs as G}from"react/jsx-runtime";var be=o=>"options"in o,ve=({options:o,renderOption:r,renderValue:e,placeholder:s,passThrough:m})=>{let a=g("Select"),R=xe.useMemo(()=>{let n=new Map;for(let d of o)for(let c of be(d)?d.options:[d])n.set(c.value,c);return n},[o]),S=n=>G(W,{value:n.value,disabled:n.disabled,textValue:n.label,children:[b(Y,{children:"\u2713"}),b(Z,{children:r?r(n,{selected:a.isSelected(n.value)}):n.label??n.value})]},n.value),f;if(e){let n=a.multiple?a.selectedValues.map(d=>R.get(d)??{value:d}):R.get(a.selectedValues[0]??"")??(a.selectedValues[0]?{value:a.selectedValues[0]}:null);f=e(n)}return G(Mt,{children:[G(Q,{...m,children:[b(X,{placeholder:s,children:f}),b(_,{})]}),b(J,{children:b(B,{children:b($,{children:o.map(n=>be(n)?G(U,{children:[b(z,{children:n.label}),n.options.map(S)]},n.label):S(n))})})})]})};import{jsx as j,jsxs as Wt}from"react/jsx-runtime";function Bt(o){let r=[];for(let e of o)for(let s of"options"in e?e.options:[e])r.push(s);return r}var V='[role="option"]:not([data-disabled])',[Ut,g]=Ht("Select"),_t=i.forwardRef(function({children:r,value:e,defaultValue:s,onValueChange:m,multiple:a=!1,deselectable:R=!1,items:S,options:f,renderOption:n,renderValue:d,placeholder:c,closeOnSelect:x=!a,open:v,defaultOpen:t=!1,onOpenChange:l,onOpenChangeComplete:y,disabled:h=!1,readOnly:u=!1,required:E=!1,invalid:F=!1,name:H,form:k,autoComplete:Oe,...Te},we){let K=i.useRef(null),ee=i.useRef(null),te=i.useRef(null),{selectedValues:oe,isSelected:Ee,selectItem:re,setSelection:ke}=qt({value:e,defaultValue:s,onValueChange:m,multiple:a,deselectable:R,label:"Select"}),[C=!1,le]=Gt({prop:v,defaultProp:t,onChange:l}),Le=i.useCallback(p=>{u&&p||le(p)},[u,le]),Me=i.useCallback(p=>{u||re(p)},[u,re]);Kt(C,ee,y);let ne=i.useRef(void 0),He=i.useCallback(()=>{Ft("close-auto-focus",ne.current)&&K.current?.focus()},[]),[De,ae]=i.useState(null),[Ve,Ae]=i.useState(C);C!==Ve&&(Ae(C),C||ae(null));let Ne=i.useRef("selected"),Ge=i.useId(),[Fe,Ke]=i.useState(!1),[L,qe]=i.useState(new Map),Be=i.useCallback((p,O)=>{qe(q=>{if(q.get(p)===O)return q;let ce=new Map(q);return ce.set(p,O),ce})},[]),M=i.useMemo(()=>S??(f?Bt(f):void 0),[S,f]),Ue=i.useMemo(()=>M?M.map(p=>({...p,label:L.get(p.value)??p.label??p.value})):[...L].map(([p,O])=>({value:p,label:O})),[M,L]),_e=i.useCallback(p=>L.get(p)??M?.find(O=>O.value===p)?.label??p,[L,M]);return i.useImperativeHandle(we,()=>Dt(te),[]),Vt(K,()=>{s!==void 0&&ke(s)}),j(Nt,{children:Wt(Ut,{triggerRef:K,focusTrigger:He,closeAutoFocusRef:ne,contentRef:ee,contentId:i.useId(),valueId:Ge,hasValuePart:Fe,setHasValuePart:Ke,activeId:De,setActiveId:ae,openIntentRef:Ne,multiple:a,closeOnSelect:x,selectedValues:oe,isSelected:Ee,selectItem:Me,open:C,onOpenChange:Le,disabled:h,readOnly:u,required:E,invalid:F,name:H,registerOptionLabel:Be,getOptionLabel:_e,collection:Ue,children:[r??j(ve,{options:f??[],renderOption:n,renderValue:d,placeholder:c,passThrough:Te}),j(At,{name:H,values:oe,required:E,disabled:h,form:k,autoComplete:Oe,singleValued:!a,controlRef:te})]})})});_t.displayName="Select";import*as Ce from"react";import{skdxPart as Yt}from"../utils/part.js";import{Primitive as Zt}from"../utils/primitive.js";import{jsx as Jt}from"react/jsx-runtime";var zt=Ce.forwardRef((o,r)=>Jt(Zt.div,{"aria-hidden":!0,...o,...Yt("select","separator",o.className),ref:r}));zt.displayName="SelectSeparator";export{V as OPTION_SELECTOR,_t as Select,B as SelectContent,U as SelectGroup,tt as SelectGroupProvider,_ as SelectIcon,W as SelectItem,Y as SelectItemIndicator,st as SelectItemProvider,Z as SelectItemText,z as SelectLabel,J as SelectPortal,Ut as SelectProvider,zt as SelectSeparator,Q as SelectTrigger,X as SelectValue,$ as SelectViewport,g as useSelectContext,ie as useSelectGroupContext,N as useSelectItemContext};

package/dist/select/SelectAnatomy.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { SelectOption, SelectOptionOrGroup } from './types.cjs';
+/**
+ * The anatomy a {@link Select} draws from `options`: the trigger (with a
+ * default open/close icon), the portal, and the listbox with one `SelectItem`
+ * per option — grouped under a `SelectGroup`/`SelectLabel` where `options`
+ * nests a group.
+ *
+ * @internal
+ */
+export declare const SelectAnatomy: ({ options, renderOption, renderValue, placeholder, passThrough, }: {
+    options: SelectOptionOrGroup[];
+    renderOption?: (option: SelectOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    renderValue?: (selected: SelectOption | SelectOption[] | null) => React.ReactNode;
+    placeholder?: string;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/select/SelectAnatomy.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { SelectOption, SelectOptionOrGroup } from './types.js';
+/**
+ * The anatomy a {@link Select} draws from `options`: the trigger (with a
+ * default open/close icon), the portal, and the listbox with one `SelectItem`
+ * per option — grouped under a `SelectGroup`/`SelectLabel` where `options`
+ * nests a group.
+ *
+ * @internal
+ */
+export declare const SelectAnatomy: ({ options, renderOption, renderValue, placeholder, passThrough, }: {
+    options: SelectOptionOrGroup[];
+    renderOption?: (option: SelectOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    renderValue?: (selected: SelectOption | SelectOption[] | null) => React.ReactNode;
+    placeholder?: string;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/select/SelectContent.d.cts

@@ -1,20 +1,10 @@
 import * as React from 'react';
 import type { SelectContentProps } from './types.cjs';
 /**
- * The listbox popup for a {@link Select}, positioned relative to the trigger
- * via floating-ui (see {@link SelectContentProps}). Renders a
- * `<div role="listbox">` with `data-state` and `data-side`/`data-align` from
- * the popper. Owns roving-focus + typeahead keyboard navigation between
- * `SelectItem` options (Arrow Up/Down move focus, printable keys jump to a
- * matching label), focuses the selected (or first) option on open, and closes
- * on Tab. Carries `aria-multiselectable="true"` while the root is `multiple`.
- *
- * Closes on Escape (returning focus to the trigger) or on an outside
- * interaction — pointer-down outside or focus moving outside, each reported to
- * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
- * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
- * calling `event.preventDefault()` keeps the listbox open. Unmounts when
- * closed unless `forceMount` is set.
+ * Listbox popup for a {@link Select}, positioned via floating-ui.
+ * Renders `<div role="listbox">` with `data-state` and `data-side` / `data-align`.
+ * Focus stays on trigger; keyboard moves active option here.
+ * Closes on Escape or outside interaction unless prevented.
  *
  * @example
  * ```tsx

package/dist/select/SelectContent.d.ts

@@ -1,20 +1,10 @@
 import * as React from 'react';
 import type { SelectContentProps } from './types.js';
 /**
- * The listbox popup for a {@link Select}, positioned relative to the trigger
- * via floating-ui (see {@link SelectContentProps}). Renders a
- * `<div role="listbox">` with `data-state` and `data-side`/`data-align` from
- * the popper. Owns roving-focus + typeahead keyboard navigation between
- * `SelectItem` options (Arrow Up/Down move focus, printable keys jump to a
- * matching label), focuses the selected (or first) option on open, and closes
- * on Tab. Carries `aria-multiselectable="true"` while the root is `multiple`.
- *
- * Closes on Escape (returning focus to the trigger) or on an outside
- * interaction — pointer-down outside or focus moving outside, each reported to
- * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
- * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
- * calling `event.preventDefault()` keeps the listbox open. Unmounts when
- * closed unless `forceMount` is set.
+ * Listbox popup for a {@link Select}, positioned via floating-ui.
+ * Renders `<div role="listbox">` with `data-state` and `data-side` / `data-align`.
+ * Focus stays on trigger; keyboard moves active option here.
+ * Closes on Escape or outside interaction unless prevented.
  *
  * @example
  * ```tsx

package/dist/select/SelectGroup.d.cts

@@ -1,8 +1,16 @@
 import * as React from 'react';
-import type { SelectGroupProps } from './types.cjs';
+import type { SelectGroupContextValue, SelectGroupProps } from './types.cjs';
+export declare const SelectGroupProvider: {
+    (props: SelectGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSelectGroupContext: (consumerName: string) => SelectGroupContextValue;
 /**
- * Groups related `SelectItem`s together, typically preceded by a
- * {@link SelectLabel}. Renders a `<div role="group">`.
+ * Groups related `SelectItem`s under a required {@link SelectLabel}.
+ * Renders `<div role="group">` with `aria-labelledby` at that label.
+ * A group without a label names nothing (`role="group"` takes no name from
+ * content).
  *
  * @example
  * ```tsx

package/dist/select/SelectGroup.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
-import type { SelectGroupProps } from './types.js';
+import type { SelectGroupContextValue, SelectGroupProps } from './types.js';
+export declare const SelectGroupProvider: {
+    (props: SelectGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSelectGroupContext: (consumerName: string) => SelectGroupContextValue;
 /**
- * Groups related `SelectItem`s together, typically preceded by a
- * {@link SelectLabel}. Renders a `<div role="group">`.
+ * Groups related `SelectItem`s under a required {@link SelectLabel}.
+ * Renders `<div role="group">` with `aria-labelledby` at that label.
+ * A group without a label names nothing (`role="group"` takes no name from
+ * content).
  *
  * @example
  * ```tsx

package/dist/select/SelectItem.d.cts

@@ -8,14 +8,16 @@ export declare const SelectItemProvider: {
 }, useSelectItemContext: (consumerName: string) => SelectItemContextValue;
 /**
  * A single selectable option within {@link SelectContent}. Renders a
- * `<div role="option">` with `aria-selected`, `data-state`
- * (`"checked"` | `"unchecked"`), `data-disabled`, and a roving `tabIndex`.
- * Registers its text (from `SelectItemText`, or `textValue` if given) so the
- * trigger's `SelectValue` can render the label. Click, Enter, or Space
- * selects the item and closes the listbox, returning focus to the trigger —
- * or, while the root is `multiple`, toggles the item and leaves the listbox
- * open with focus on it, so several options can be picked in one pass.
- * Pointer hover moves roving focus onto it.
+ * `<div role="option">` with `data-value`, `aria-selected`, `data-state`
+ * (`"checked"` | `"unchecked"`), `data-highlighted` (virtual focus, mirrored
+ * by the trigger's `aria-activedescendant`), and `aria-disabled`/
+ * `data-disabled`. Registers its text (from `SelectItemText`, or `textValue`
+ * if given) so the trigger's `SelectValue` can render the label. Click
+ * selects the item and closes the listbox — or, while `multiple`, toggles it
+ * and leaves the listbox open. Pointer hover moves the virtual highlight.
+ *
+ * Deliberately not focusable; real DOM focus stays on the trigger while this
+ * element tracks the keyboard's current position.
  *
  * @example
  * ```tsx

package/dist/select/SelectItem.d.ts

@@ -8,14 +8,16 @@ export declare const SelectItemProvider: {
 }, useSelectItemContext: (consumerName: string) => SelectItemContextValue;
 /**
  * A single selectable option within {@link SelectContent}. Renders a
- * `<div role="option">` with `aria-selected`, `data-state`
- * (`"checked"` | `"unchecked"`), `data-disabled`, and a roving `tabIndex`.
- * Registers its text (from `SelectItemText`, or `textValue` if given) so the
- * trigger's `SelectValue` can render the label. Click, Enter, or Space
- * selects the item and closes the listbox, returning focus to the trigger —
- * or, while the root is `multiple`, toggles the item and leaves the listbox
- * open with focus on it, so several options can be picked in one pass.
- * Pointer hover moves roving focus onto it.
+ * `<div role="option">` with `data-value`, `aria-selected`, `data-state`
+ * (`"checked"` | `"unchecked"`), `data-highlighted` (virtual focus, mirrored
+ * by the trigger's `aria-activedescendant`), and `aria-disabled`/
+ * `data-disabled`. Registers its text (from `SelectItemText`, or `textValue`
+ * if given) so the trigger's `SelectValue` can render the label. Click
+ * selects the item and closes the listbox — or, while `multiple`, toggles it
+ * and leaves the listbox open. Pointer hover moves the virtual highlight.
+ *
+ * Deliberately not focusable; real DOM focus stays on the trigger while this
+ * element tracks the keyboard's current position.
  *
  * @example
  * ```tsx

package/dist/select/SelectItemIndicator.d.cts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { SelectItemIndicatorProps } from './types.cjs';
 /**
- * Marker shown inside a {@link SelectItem} when it's the selected option
- * (e.g. a checkmark). Renders an `aria-hidden` `<span>`; renders nothing
- * while its item isn't selected unless `forceMount` is set.
+ * Marker shown when {@link SelectItem} is selected. Renders an `aria-hidden`
+ * `<span>`, hidden unless selected or `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/select/SelectItemIndicator.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { SelectItemIndicatorProps } from './types.js';
 /**
- * Marker shown inside a {@link SelectItem} when it's the selected option
- * (e.g. a checkmark). Renders an `aria-hidden` `<span>`; renders nothing
- * while its item isn't selected unless `forceMount` is set.
+ * Marker shown when {@link SelectItem} is selected. Renders an `aria-hidden`
+ * `<span>`, hidden unless selected or `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/select/SelectLabel.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { SelectLabelProps } from './types.cjs';
 /**
- * Heading for a {@link SelectGroup}. Renders a plain `<div>` — purely
- * presentational, with no implicit `aria-labelledby` wiring to the group.
+ * Heading for a SelectGroup. Provides the id the group's `aria-labelledby` points to.
  *
  * @example
  * ```tsx

package/dist/select/SelectLabel.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { SelectLabelProps } from './types.js';
 /**
- * Heading for a {@link SelectGroup}. Renders a plain `<div>` — purely
- * presentational, with no implicit `aria-labelledby` wiring to the group.
+ * Heading for a SelectGroup. Provides the id the group's `aria-labelledby` points to.
  *
  * @example
  * ```tsx

package/dist/select/SelectPortal.d.cts

@@ -1,9 +1,6 @@
 import type { SelectPortalProps } from './types.cjs';
 /**
- * Teleports its children (typically {@link SelectContent}) to
- * `document.body` (or `container`, via `PortalProps`) while the
- * {@link Select}'s listbox is open, so it escapes clipping/overflow from
- * ancestors. Renders nothing while closed unless `forceMount` is set.
+ * Teleports children to `document.body` when listbox is open to escape clipping ancestors.
  *
  * @example
  * ```tsx

package/dist/select/SelectPortal.d.ts

@@ -1,9 +1,6 @@
 import type { SelectPortalProps } from './types.js';
 /**
- * Teleports its children (typically {@link SelectContent}) to
- * `document.body` (or `container`, via `PortalProps`) while the
- * {@link Select}'s listbox is open, so it escapes clipping/overflow from
- * ancestors. Renders nothing while closed unless `forceMount` is set.
+ * Teleports children to `document.body` when listbox is open to escape clipping ancestors.
  *
  * @example
  * ```tsx

package/dist/select/SelectSeparator.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { SelectSeparatorProps } from './types.cjs';
 /**
- * Visual divider between `SelectItem`s or `SelectGroup`s inside
+ * Visual divider between `SelectItem`s or `SelectGroup`s in
  * {@link SelectContent}. Renders an `aria-hidden` `<div>`.
  *
  * @example

package/dist/select/SelectSeparator.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { SelectSeparatorProps } from './types.js';
 /**
- * Visual divider between `SelectItem`s or `SelectGroup`s inside
+ * Visual divider between `SelectItem`s or `SelectGroup`s in
  * {@link SelectContent}. Renders an `aria-hidden` `<div>`.
  *
  * @example

package/dist/select/SelectTrigger.d.cts

@@ -1,20 +1,22 @@
 import * as React from 'react';
 import type { SelectTriggerProps } from './types.cjs';
 /**
- * Opens the {@link Select}'s listbox and displays the current value, and
- * doubles as the popper anchor the listbox positions against. Renders a
- * `<button type="button" role="combobox">` with `aria-haspopup="listbox"`,
- * `aria-expanded`, `aria-controls` pointing at the content, `aria-required`,
- * `data-state`, `data-disabled`, `data-placeholder`, and
- * `aria-invalid`/`data-invalid` when the select is `invalid`. Click, Enter,
- * Space, or Arrow Up/Down opens the listbox.
+ * Opens listbox, displays current value, and anchors its popper positioning.
+ * Renders `<button type="button" role="combobox">` with `aria-haspopup`,
+ * `aria-expanded`, `aria-controls`, `aria-activedescendant`, `data-state`,
+ * `data-disabled`, `data-placeholder`, `aria-readonly`/`data-readonly`,
+ * `aria-invalid`/`data-invalid`.
+ *
+ * Six opening keys, each leaving active option at different position: ArrowDown/Home
+ * at first, ArrowUp/End at last, Enter/Space/"without moving" (already selected).
+ * Click opens same as Enter. No opening while `readOnly`.
+ *
+ * Keeps real DOM focus for entire interaction (APG pattern). Owns all listbox keys:
+ * Arrow Up/Down moves active (no wrap), PageUp/PageDown moves 10, Home/End jumps
+ * ends, typeahead searches, Enter/Space/Alt+ArrowUp commits, Tab commits and exits.
+ * With `multiple`, commits only add, never remove. Typeahead works closed (like native
+ * `<select>`) unless `multiple` (then opens).
  *
- * Printable characters run typeahead against the root's option collection
- * *without* opening the listbox, the way a native closed `<select>` behaves —
- * which needs labels the root already knows, so pass `items` on the root if
- * the listbox has never been opened. A `multiple` select opens the listbox
- * instead: changing an unseen selection blind would silently toggle an option
- * the user cannot check.
  *
  * @example
  * ```tsx

package/dist/select/SelectTrigger.d.ts

@@ -1,20 +1,22 @@
 import * as React from 'react';
 import type { SelectTriggerProps } from './types.js';
 /**
- * Opens the {@link Select}'s listbox and displays the current value, and
- * doubles as the popper anchor the listbox positions against. Renders a
- * `<button type="button" role="combobox">` with `aria-haspopup="listbox"`,
- * `aria-expanded`, `aria-controls` pointing at the content, `aria-required`,
- * `data-state`, `data-disabled`, `data-placeholder`, and
- * `aria-invalid`/`data-invalid` when the select is `invalid`. Click, Enter,
- * Space, or Arrow Up/Down opens the listbox.
+ * Opens listbox, displays current value, and anchors its popper positioning.
+ * Renders `<button type="button" role="combobox">` with `aria-haspopup`,
+ * `aria-expanded`, `aria-controls`, `aria-activedescendant`, `data-state`,
+ * `data-disabled`, `data-placeholder`, `aria-readonly`/`data-readonly`,
+ * `aria-invalid`/`data-invalid`.
+ *
+ * Six opening keys, each leaving active option at different position: ArrowDown/Home
+ * at first, ArrowUp/End at last, Enter/Space/"without moving" (already selected).
+ * Click opens same as Enter. No opening while `readOnly`.
+ *
+ * Keeps real DOM focus for entire interaction (APG pattern). Owns all listbox keys:
+ * Arrow Up/Down moves active (no wrap), PageUp/PageDown moves 10, Home/End jumps
+ * ends, typeahead searches, Enter/Space/Alt+ArrowUp commits, Tab commits and exits.
+ * With `multiple`, commits only add, never remove. Typeahead works closed (like native
+ * `<select>`) unless `multiple` (then opens).
  *
- * Printable characters run typeahead against the root's option collection
- * *without* opening the listbox, the way a native closed `<select>` behaves —
- * which needs labels the root already knows, so pass `items` on the root if
- * the listbox has never been opened. A `multiple` select opens the listbox
- * instead: changing an unseen selection blind would silently toggle an option
- * the user cannot check.
  *
  * @example
  * ```tsx

package/dist/select/SelectValue.d.cts

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import type { SelectValueProps } from './types.cjs';
 /**
- * Displays the selected {@link Select} option's label (as registered by its
- * `SelectItemText`, or declared in the root's `items`), or `placeholder` when
+ * Displays the selected {@link Select} option's label or `placeholder` when
  * nothing is selected. Renders a `<span>` with `pointer-events: none` so
- * clicks pass through to the trigger. Pass explicit `children` to override the
- * auto-derived label entirely.
+ * clicks pass through to the trigger. Without `asChild`, pass explicit
+ * `children` to override the auto-derived label; under `asChild`, `children`
+ * is the element to clone and the derived label or chips render inside it.
+ *
+ * Carries the id the trigger's `aria-labelledby` points at, and registers
+ * itself with the root on mount so the trigger only points here while this
+ * part exists. That wiring is what gives the trigger an accessible name at
+ * all: `role="combobox"` does not take its name from content, so this text —
+ * visible as it is — named nothing before. The name it produces is the current
+ * *value*, so a consumer must still supply an external `<label>` or
+ * `aria-label` saying what the control is for.
  *
  * While the root is `multiple`, renders one chip per selected option instead —
  * a `data-chip` span carrying `data-value`, to be styled like a TagsInput tag.

package/dist/select/SelectValue.d.ts

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import type { SelectValueProps } from './types.js';
 /**
- * Displays the selected {@link Select} option's label (as registered by its
- * `SelectItemText`, or declared in the root's `items`), or `placeholder` when
+ * Displays the selected {@link Select} option's label or `placeholder` when
  * nothing is selected. Renders a `<span>` with `pointer-events: none` so
- * clicks pass through to the trigger. Pass explicit `children` to override the
- * auto-derived label entirely.
+ * clicks pass through to the trigger. Without `asChild`, pass explicit
+ * `children` to override the auto-derived label; under `asChild`, `children`
+ * is the element to clone and the derived label or chips render inside it.
+ *
+ * Carries the id the trigger's `aria-labelledby` points at, and registers
+ * itself with the root on mount so the trigger only points here while this
+ * part exists. That wiring is what gives the trigger an accessible name at
+ * all: `role="combobox"` does not take its name from content, so this text —
+ * visible as it is — named nothing before. The name it produces is the current
+ * *value*, so a consumer must still supply an external `<label>` or
+ * `aria-label` saying what the control is for.
  *
  * While the root is `multiple`, renders one chip per selected option instead —
  * a `data-chip` span carrying `data-value`, to be styled like a TagsInput tag.

package/dist/select/index.d.cts

@@ -1,14 +1,3 @@
 export * from './Select.cjs';
-export { SelectTrigger } from './SelectTrigger.cjs';
-export { SelectValue } from './SelectValue.cjs';
-export { SelectIcon } from './SelectIcon.cjs';
-export { SelectPortal } from './SelectPortal.cjs';
-export { SelectContent } from './SelectContent.cjs';
-export { SelectViewport } from './SelectViewport.cjs';
-export { SelectItem } from './SelectItem.cjs';
-export { SelectItemText } from './SelectItemText.cjs';
-export { SelectItemIndicator } from './SelectItemIndicator.cjs';
-export { SelectGroup } from './SelectGroup.cjs';
-export { SelectLabel } from './SelectLabel.cjs';
-export { SelectSeparator } from './SelectSeparator.cjs';
-export type { SelectItemDescriptor, SelectProps, SelectHandle, SelectTriggerProps, SelectValueProps, SelectIconProps, SelectPortalProps, SelectContentProps, SelectViewportProps, SelectItemProps, SelectItemTextProps, SelectItemIndicatorProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, } from './types.cjs';
+export type { SelectItemDescriptor, SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectHandle, } from './types.cjs';
+export type { SelectionChangeDetail } from '../utils/useSelection.cjs';

package/dist/select/index.d.ts

@@ -1,14 +1,3 @@
 export * from './Select.js';
-export { SelectTrigger } from './SelectTrigger.js';
-export { SelectValue } from './SelectValue.js';
-export { SelectIcon } from './SelectIcon.js';
-export { SelectPortal } from './SelectPortal.js';
-export { SelectContent } from './SelectContent.js';
-export { SelectViewport } from './SelectViewport.js';
-export { SelectItem } from './SelectItem.js';
-export { SelectItemText } from './SelectItemText.js';
-export { SelectItemIndicator } from './SelectItemIndicator.js';
-export { SelectGroup } from './SelectGroup.js';
-export { SelectLabel } from './SelectLabel.js';
-export { SelectSeparator } from './SelectSeparator.js';
-export type { SelectItemDescriptor, SelectProps, SelectHandle, SelectTriggerProps, SelectValueProps, SelectIconProps, SelectPortalProps, SelectContentProps, SelectViewportProps, SelectItemProps, SelectItemTextProps, SelectItemIndicatorProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, } from './types.js';
+export type { SelectItemDescriptor, SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectHandle, } from './types.js';
+export type { SelectionChangeDetail } from '../utils/useSelection.js';