@skdx/react 0.26.0 → 0.28.0

package/dist/list/ListItem.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ListItemProps } from './types.js';
+/**
+ * Renders `<li>`. An `icon` — its own or inherited from the parent {@link
+ * List} — renders as an `indicator` part and switches the native marker off.
+ *
+ * @example
+ * ```tsx
+ * <ListItem icon={<CheckIcon />}>Done</ListItem>
+ * ```
+ */
+export declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/list/index.d.cts

@@ -0,0 +1,3 @@
+export { List } from './List.cjs';
+export { ListItem } from './ListItem.cjs';
+export type { ListItemProps, ListProps, Space } from './types.cjs';

package/dist/list/index.d.ts

@@ -0,0 +1,3 @@
+export { List } from './List.js';
+export { ListItem } from './ListItem.js';
+export type { ListItemProps, ListProps, Space } from './types.js';

package/dist/list/types.d.cts

@@ -0,0 +1,56 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { Space } from '../utils/resolveSpace.cjs';
+export type { Space };
+/** Tag names {@link List} accepts via `as`. `dl` is for styling only — `<li>` children are still expected. */
+export type ListTag = 'ul' | 'ol' | 'dl';
+/** @internal The default marker icon, distributed from {@link List} to every {@link ListItem}. Not part of the public API. */
+export interface ListContextValue {
+    icon: React.ReactNode;
+}
+/** Props for the {@link List} container root element. */
+export interface ListProps extends PrimitivePropsWithRef<'ul'> {
+    /**
+     * Element name to render, from the list's own tag allowlist.
+     * @default 'ul'
+     */
+    as?: ListTag;
+    /**
+     * `false` removes the marker and sets `role="list"` on the container, since Safari/VoiceOver otherwise drops list semantics.
+     * @default true
+     */
+    markers?: boolean;
+    /**
+     * Gap between items, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    spacing?: Space;
+    /**
+     * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
+     * @default undefined — browser default numbering.
+     */
+    start?: number;
+    /**
+     * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed?: boolean;
+    /**
+     * Default marker icon for every item, overridable per {@link ListItem}.
+     * @default undefined — the native marker is used.
+     */
+    icon?: React.ReactNode;
+}
+/** Props for a single {@link ListItem} within a list. */
+export interface ListItemProps extends PrimitivePropsWithRef<'li'> {
+    /**
+     * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
+     * @default undefined — sequential numbering.
+     */
+    value?: number;
+    /**
+     * Marker icon for this item, overriding the List's own `icon`.
+     * @default undefined — the List's `icon` is used, if any.
+     */
+    icon?: React.ReactNode;
+}

package/dist/list/types.d.ts

@@ -0,0 +1,56 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { Space } from '../utils/resolveSpace.js';
+export type { Space };
+/** Tag names {@link List} accepts via `as`. `dl` is for styling only — `<li>` children are still expected. */
+export type ListTag = 'ul' | 'ol' | 'dl';
+/** @internal The default marker icon, distributed from {@link List} to every {@link ListItem}. Not part of the public API. */
+export interface ListContextValue {
+    icon: React.ReactNode;
+}
+/** Props for the {@link List} container root element. */
+export interface ListProps extends PrimitivePropsWithRef<'ul'> {
+    /**
+     * Element name to render, from the list's own tag allowlist.
+     * @default 'ul'
+     */
+    as?: ListTag;
+    /**
+     * `false` removes the marker and sets `role="list"` on the container, since Safari/VoiceOver otherwise drops list semantics.
+     * @default true
+     */
+    markers?: boolean;
+    /**
+     * Gap between items, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    spacing?: Space;
+    /**
+     * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
+     * @default undefined — browser default numbering.
+     */
+    start?: number;
+    /**
+     * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed?: boolean;
+    /**
+     * Default marker icon for every item, overridable per {@link ListItem}.
+     * @default undefined — the native marker is used.
+     */
+    icon?: React.ReactNode;
+}
+/** Props for a single {@link ListItem} within a list. */
+export interface ListItemProps extends PrimitivePropsWithRef<'li'> {
+    /**
+     * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
+     * @default undefined — sequential numbering.
+     */
+    value?: number;
+    /**
+     * Marker icon for this item, overriding the List's own `icon`.
+     * @default undefined — the List's `icon` is used, if any.
+     */
+    icon?: React.ReactNode;
+}

package/dist/listbox/Listbox.cjs

@@ -1 +1 @@
-"use strict";var nt=Object.create;var f=Object.defineProperty;var lt=Object.getOwnPropertyDescriptor;var mt=Object.getOwnPropertyNames;var ct=Object.getPrototypeOf,dt=Object.prototype.hasOwnProperty;var ut=(t,e)=>{for(var o in e)f(t,o,{get:e[o],enumerable:!0})},H=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of mt(e))!dt.call(t,s)&&s!==o&&f(t,s,{get:()=>e[s],enumerable:!(r=lt(e,s))||r.enumerable});return t};var p=(t,e,o)=>(o=t!=null?nt(ct(t)):{},H(e||!t||!t.__esModule?f(o,"default",{value:t,enumerable:!0}):o,t)),xt=t=>H(f({},"__esModule",{value:!0}),t);var Lt={};ut(Lt,{Listbox:()=>K,ListboxGroup:()=>D,ListboxItem:()=>k,ListboxItemIndicator:()=>V,ListboxLabel:()=>G,ListboxProvider:()=>A,OPTION_SELECTOR:()=>h,useListboxContext:()=>E});module.exports=xt(Lt);var l=p(require("react"),1),S=require("../utils/createContext.cjs"),M=require("../utils/part.cjs"),L=require("../utils/primitive.cjs"),N=require("../utils/useRovingFocus.cjs"),w=require("../utils/useSelection.cjs"),I=require("../utils/useTypeahead.cjs"),C=require("react/jsx-runtime"),h='[role="option"]:not([data-disabled])',[A,E]=(0,S.createSafeContext)("Listbox");function R(t){return Array.from(t.querySelectorAll(h))}function bt(t){return t.getAttribute("data-text-value")??t.textContent??""}var K=l.forwardRef(({value:t,defaultValue:e,onValueChange:o,multiple:r=!1,disabled:s=!1,...n},a)=>{let m=l.useRef(null),[c,d]=l.useState(null),{selectedValues:ot,isSelected:P,selectItem:rt}=(0,w.useSelection)({value:t,defaultValue:e,onValueChange:o,multiple:r}),it=(0,N.useRovingFocus)({orientation:"vertical",loop:!1,itemSelector:h,typeahead:!1}),st=(0,I.useTypeahead)(l.useCallback(()=>m.current?R(m.current).map(bt):[],[]));return l.useLayoutEffect(()=>{if(c!==null)return;let i=m.current;if(!i)return;let x=R(i),b=(x.find(at=>P(at.getAttribute("data-value")??""))??x[0])?.getAttribute("data-value");b&&d(b)},[c,P]),(0,C.jsx)(A,{multiple:r,selectedValues:ot,isSelected:P,selectItem:rt,disabled:s,activeValue:c,setActiveValue:d,children:(0,C.jsx)(L.Primitive.div,{role:"listbox","aria-multiselectable":r?!0:void 0,"aria-disabled":s||void 0,"data-multiple":r?"":void 0,"data-disabled":s?"":void 0,...n,...(0,M.skdxPart)("listbox","root",n.className),ref:i=>{m.current=i,typeof a=="function"?a(i):a&&(a.current=i)},onKeyDown:(0,L.composeEventHandlers)(n.onKeyDown,i=>{if(it(i),i.defaultPrevented||!(0,I.isTypeaheadKey)(i))return;let x=m.current;if(!x)return;let v=R(x),b=st(i.key,v.indexOf(i.target));b!==-1&&(i.preventDefault(),v[b].focus())})})})});K.displayName="Listbox";var O=p(require("react"),1),F=require("../utils/createContext.cjs"),q=require("../utils/part.cjs"),u=require("../utils/primitive.cjs"),_=require("../utils/useRovingFocus.cjs");var T=require("react/jsx-runtime"),[pt,z]=(0,F.createSafeContext)("ListboxItem"),k=O.forwardRef(({value:t,disabled:e=!1,textValue:o,...r},s)=>{let n=E("ListboxItem"),a=e||n.disabled,m=n.isSelected(t),c=()=>{a||n.selectItem(t)};return(0,T.jsx)(pt,{value:t,selected:m,disabled:a,children:(0,T.jsx)(u.Primitive.div,{role:"option","aria-selected":m,"aria-disabled":a||void 0,"data-value":t,"data-text-value":o,"data-state":m?"checked":"unchecked","data-disabled":a?"":void 0,tabIndex:(0,_.rovingTabIndex)(n.activeValue!==null,n.activeValue===t,a),...r,...(0,q.skdxPart)("listbox","item",r.className),ref:s,onClick:(0,u.composeEventHandlers)(r.onClick,c),onFocus:(0,u.composeEventHandlers)(r.onFocus,()=>{a||n.setActiveValue(t)}),onKeyDown:(0,u.composeEventHandlers)(r.onKeyDown,d=>{d.key!==" "&&d.key!=="Enter"||(d.preventDefault(),c())})})})});k.displayName="ListboxItem";var B=p(require("react"),1),J=require("../utils/part.cjs"),Q=require("../utils/primitive.cjs");var U=require("react/jsx-runtime"),V=B.forwardRef(({forceMount:t,...e},o)=>{let r=z("ListboxItemIndicator");return t||r.selected?(0,U.jsx)(Q.Primitive.span,{"aria-hidden":!0,...e,...(0,J.skdxPart)("listbox","item-indicator",e.className),ref:o}):null});V.displayName="ListboxItemIndicator";var y=p(require("react"),1),W=require("../utils/createContext.cjs"),X=require("../utils/part.cjs"),Y=require("../utils/primitive.cjs"),g=require("react/jsx-runtime"),[ft,Z]=(0,W.createSafeContext)("ListboxGroup"),D=y.forwardRef((t,e)=>{let o=y.useId();return(0,g.jsx)(ft,{labelId:o,children:(0,g.jsx)(Y.Primitive.div,{role:"group","aria-labelledby":o,...t,...(0,X.skdxPart)("listbox","group",t.className),ref:e})})});D.displayName="ListboxGroup";var $=p(require("react"),1),j=require("../utils/part.cjs"),tt=require("../utils/primitive.cjs");var et=require("react/jsx-runtime"),G=$.forwardRef((t,e)=>{let o=Z("ListboxLabel");return(0,et.jsx)(tt.Primitive.div,{id:o.labelId,...t,...(0,j.skdxPart)("listbox","label",t.className),ref:e})});G.displayName="ListboxLabel";0&&(module.exports={Listbox,ListboxGroup,ListboxItem,ListboxItemIndicator,ListboxLabel,ListboxProvider,OPTION_SELECTOR,useListboxContext});
+"use strict";var ze=Object.create;var T=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var Ue=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,qe=Object.prototype.hasOwnProperty;var Ze=(t,o)=>{for(var a in o)T(t,a,{get:o[a],enumerable:!0})},ae=(t,o,a,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of Ue(o))!qe.call(t,s)&&s!==a&&T(t,s,{get:()=>o[s],enumerable:!(r=Fe(o,s))||r.enumerable});return t};var P=(t,o,a)=>(a=t!=null?ze(_e(t)):{},ae(o||!t||!t.__esModule?T(a,"default",{value:t,enumerable:!0}):a,t)),Be=t=>ae(T({},"__esModule",{value:!0}),t);var Xe={};Ze(Xe,{Listbox:()=>Ee,ListboxGroup:()=>M,ListboxGroupProvider:()=>ce,ListboxItem:()=>G,ListboxItemIndicator:()=>S,ListboxItemProvider:()=>be,ListboxLabel:()=>A,ListboxProvider:()=>Oe,OPTION_SELECTOR:()=>Y,useListboxContext:()=>v,useListboxGroupContext:()=>Q,useListboxItemContext:()=>X});module.exports=Be(Xe);var n=P(require("react"),1),Pe=require("../utils/createContext.cjs"),ve=require("../utils/part.cjs"),N=require("../utils/primitive.cjs"),Ve=require("../utils/useControllableState.cjs"),De=require("../utils/useRovingFocus.cjs"),y=require("../utils/useSelection.cjs"),z=require("../utils/useTypeahead.cjs");var H=P(require("react"),1),ie=require("../utils/createContext.cjs"),ne=require("../utils/part.cjs"),le=require("../utils/primitive.cjs"),J=require("react/jsx-runtime"),[ce,Q]=(0,ie.createSafeContext)("ListboxGroup"),M=H.forwardRef((t,o)=>{let a=H.useId();return(0,J.jsx)(ce,{labelId:a,children:(0,J.jsx)(le.Primitive.div,{role:"group","aria-labelledby":a,...t,...(0,ne.skdxPart)("listbox","group",t.className),ref:o})})});M.displayName="ListboxGroup";var ue=P(require("react"),1),fe=require("../utils/createContext.cjs"),me=require("../utils/part.cjs"),I=require("../utils/primitive.cjs"),de=require("../utils/useRovingFocus.cjs");var W=require("react/jsx-runtime"),[be,X]=(0,fe.createSafeContext)("ListboxItem"),G=ue.forwardRef(({value:t,disabled:o=!1,textValue:a,posInSet:r,setSize:s,...p},g)=>{let b=v("ListboxItem"),m=o||b.disabled,k=b.isSelected(t),D=d=>{m||b.selectItem(t,d)};return(0,W.jsx)(be,{value:t,selected:k,disabled:m,children:(0,W.jsx)(I.Primitive.div,{role:"option","aria-selected":k,"aria-disabled":m||void 0,"data-value":t,"data-text-value":a,"data-state":k?"checked":"unchecked","data-disabled":m?"":void 0,"aria-posinset":r,"aria-setsize":s,tabIndex:(0,de.rovingTabIndex)(b.activeValue!==null,b.activeValue===t,m),...p,...(0,me.skdxPart)("listbox","item",p.className),ref:g,onClick:(0,I.composeEventHandlers)(p.onClick,()=>D("pointer")),onFocus:(0,I.composeEventHandlers)(p.onFocus,()=>{m||b.setActiveValue(t)}),onPointerEnter:(0,I.composeEventHandlers)(p.onPointerEnter,d=>{b.focusOnHover&&!m&&d.currentTarget.focus()}),onKeyDown:(0,I.composeEventHandlers)(p.onKeyDown,d=>{d.key!==" "&&d.key!=="Enter"||d.key===" "&&d.shiftKey&&b.multiple||(d.preventDefault(),D("keyboard"))})})})});G.displayName="ListboxItem";var xe=P(require("react"),1),pe=require("../utils/part.cjs"),Le=require("../utils/primitive.cjs");var ye=require("react/jsx-runtime"),S=xe.forwardRef(({forceMount:t,...o},a)=>{let r=X("ListboxItemIndicator");return t||r.selected?(0,ye.jsx)(Le.Primitive.span,{"aria-hidden":!0,...o,...(0,pe.skdxPart)("listbox","item-indicator",o.className),ref:a}):null});S.displayName="ListboxItemIndicator";var ge=P(require("react"),1),he=require("../utils/part.cjs"),Re=require("../utils/primitive.cjs");var Ie=require("react/jsx-runtime"),A=ge.forwardRef((t,o)=>{let a=Q("ListboxLabel");return(0,Ie.jsx)(Re.Primitive.div,{id:a.labelId,...t,...(0,he.skdxPart)("listbox","label",t.className),ref:o})});A.displayName="ListboxLabel";var x=require("react/jsx-runtime"),Je=t=>"options"in t,ke=({options:t,renderOption:o})=>{let a=v("Listbox"),r=s=>(0,x.jsxs)(G,{value:s.value,disabled:s.disabled,textValue:s.label,children:[(0,x.jsx)(S,{children:"\u2713"}),o?o(s,{selected:a.isSelected(s.value)}):s.label??s.value]},s.value);return(0,x.jsx)(x.Fragment,{children:t.map(s=>Je(s)?(0,x.jsxs)(M,{children:[(0,x.jsx)(A,{children:s.label}),s.options.map(r)]},s.label):r(s))})};var w=require("react/jsx-runtime");function Qe(t,o){return t.length===o.length&&t.every((a,r)=>a===o[r])}var Y='[role="option"]:not([data-disabled])',Ce=10,[Oe,v]=(0,Pe.createSafeContext)("Listbox");function V(t){return Array.from(t.querySelectorAll(Y))}function We(t){return t.getAttribute("data-text-value")??t.textContent??""}function K(t){return t.getAttribute("data-value")??""}var Ee=n.forwardRef(({value:t,defaultValue:o,onValueChange:a,multiple:r=!1,disabled:s=!1,allowSelectAll:p=!0,orientation:g="vertical",focusOnHover:b=!1,disallowEmptySelection:m=!1,options:k,renderOption:D,children:d,...F},O)=>{let Te=d??(0,w.jsx)(ke,{options:k??[],renderOption:D}),h=n.useRef(null),[U,$]=n.useState(null),j=n.useRef("programmatic"),ee=n.useRef(null),He=n.useMemo(()=>t===void 0?void 0:(0,y.toSelectionValues)(t,{multiple:r,label:"Listbox value"}),[t,r]),[u=[],te]=(0,Ve.useControllableState)({prop:He,defaultProp:(0,y.toSelectionValues)(o,{multiple:r,label:"Listbox defaultValue"}),onChange:e=>a?.({value:e,previousValue:ee.current,reason:j.current,selectedValue:(0,y.selectedValueOf)(e)})}),C=n.useRef(u);C.current=u;let _=n.useCallback(e=>u.includes(e),[u]),E=n.useCallback((e,i)=>{Qe(e,C.current)||(j.current=i,ee.current=C.current.length===0?null:C.current,te(e))},[te]),oe=n.useCallback((e,i)=>E((0,y.nextSelection)(C.current,e,r),i),[r,E]),q=n.useCallback((e,i)=>E((0,y.toSelectionValues)(e,{multiple:r,label:"Listbox value"}),i),[r,E]),Z=n.useRef(null),Me=(0,De.useRovingFocus)({orientation:g,loop:!1,itemSelector:Y,typeahead:!1}),Ge=(0,z.useTypeahead)(n.useCallback(()=>h.current?V(h.current).map(We):[],[]));n.useLayoutEffect(()=>{if(U!==null)return;let e=h.current;if(!e)return;let i=V(e),l=(i.find(L=>_(L.getAttribute("data-value")??""))??i[0])?.getAttribute("data-value");l&&$(l)},[U,_]);let re=n.useCallback((e,i)=>{r&&m&&u.length===1&&u[0]===e||(Z.current=e,oe(e,i))},[oe,r,m,u]),Se=()=>(u.length===0&&(Z.current=null),Z.current),B=(e,i,c)=>{let l=e.slice(i,c+1).map(K);q([...u,...l.filter(L=>!u.includes(L))],"keyboard")},Ae=e=>{if(!r)return!1;let i=h.current;if(!i)return!1;let c=V(i),l=c.indexOf(e.target);if(l===-1)return!1;let L=g==="horizontal"?"ArrowRight":"ArrowDown",we=g==="horizontal"?"ArrowLeft":"ArrowUp";if((e.key===L||e.key===we)&&e.shiftKey){e.preventDefault();let f=c[l+(e.key===L?1:-1)];return f&&(f.focus(),re(K(f),"keyboard")),!0}if(e.key===" "&&e.shiftKey){e.preventDefault();let f=c.findIndex(Ne=>K(Ne)===Se()),se=Math.min(f===-1?l:f,l),R=Math.max(f===-1?l:f,l);return B(c,se,R),!0}if(e.ctrlKey&&e.shiftKey&&(e.key==="Home"||e.key==="End"))return e.preventDefault(),e.key==="Home"?B(c,0,l):B(c,l,c.length-1),!0;if(p&&(e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();let f=c.map(K);return f.every(R=>u.includes(R))?r&&m||q(u.filter(R=>!f.includes(R)),"keyboard"):q([...u,...f.filter(R=>!u.includes(R))],"keyboard"),!0}return!1},Ke=e=>{if(e.key!=="PageUp"&&e.key!=="PageDown")return!1;let i=h.current;if(!i)return!1;let c=V(i),l=c.indexOf(e.target);if(l===-1)return!1;e.preventDefault();let L=e.key==="PageDown"?Ce:-Ce;return c[Math.min(c.length-1,Math.max(0,l+L))]?.focus(),!0};return(0,w.jsx)(Oe,{multiple:r,selectedValues:u,isSelected:_,selectItem:re,disabled:s,activeValue:U,setActiveValue:$,focusOnHover:b,children:(0,w.jsx)(N.Primitive.div,{role:"listbox","aria-multiselectable":r?!0:void 0,"aria-disabled":s||void 0,"aria-orientation":g,"data-multiple":r?"":void 0,"data-disabled":s?"":void 0,"data-orientation":g,...F,...(0,ve.skdxPart)("listbox","root",F.className),ref:e=>{h.current=e,typeof O=="function"?O(e):O&&(O.current=e)},onKeyDown:(0,N.composeEventHandlers)(F.onKeyDown,e=>{if(Ae(e)||Ke(e)||(Me(e),e.defaultPrevented||!(0,z.isTypeaheadKey)(e)))return;let i=h.current;if(!i)return;let c=V(i),l=Ge(e.key,c.indexOf(e.target));l!==-1&&(e.preventDefault(),c[l].focus())}),children:Te})})});Ee.displayName="Listbox";0&&(module.exports={Listbox,ListboxGroup,ListboxGroupProvider,ListboxItem,ListboxItemIndicator,ListboxItemProvider,ListboxLabel,ListboxProvider,OPTION_SELECTOR,useListboxContext,useListboxGroupContext,useListboxItemContext});

package/dist/listbox/Listbox.d.cts

@@ -9,41 +9,29 @@ export declare const ListboxProvider: {
     displayName: string;
 }, useListboxContext: (consumerName: string) => ListboxContextValue;
 /**
- * A standalone WAI-ARIA listbox: an always-visible list of options with one
- * tab stop, arrow-key roving focus, typeahead, and single or multiple
- * selection. Renders a `<div role="listbox">` carrying
- * `aria-multiselectable="true"` while `multiple`, plus `data-multiple` and
- * `data-disabled`.
+ * WAI-ARIA listbox: always-visible list with one tab stop, arrow-key roving
+ * focus, typeahead, and single/multiple selection. Use when options should
+ * always be on screen (transfer lists, settings panels, detail pane lists).
  *
- * This is the selection list without the popup: `Select` is this plus a
- * trigger and a floating layer, `Combobox` is this plus a text filter and
- * virtual focus. Reach for `Listbox` when the options should always be on
- * screen — a transfer/pick-list, a settings panel, a master list beside a
- * detail pane.
+ * Focus is real (one option has `tabIndex={0}`, arrows move it). With `multiple`,
+ * Shift+Arrow toggles, Shift+Space range-selects, Ctrl+Shift+Home/End extends,
+ * Ctrl+A selects all (or clears if all selected). APG's modifier-key model.
  *
- * Focus is real, not virtual: exactly one option carries `tabIndex={0}` (the
- * selected one, else the first enabled one) and the arrows move it, so the
- * list is one Tab stop from the outside and `document.activeElement` is always
- * the option a screen reader is announcing.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Works controlled or uncontrolled.
  *
  * @example
  * ```tsx
  * <Listbox aria-label="Framework" defaultValue="react">
  *   <ListboxItem value="react">React</ListboxItem>
  *   <ListboxItem value="vue">Vue</ListboxItem>
- *   <ListboxItem value="svelte">Svelte</ListboxItem>
  * </Listbox>
  * ```
  *
- * @example Multi-select, with an indicator — note `textValue`, because the
- * checkmark would otherwise be part of what typeahead matches:
+ * @example Multi-select with indicator—use `textValue` so checkmark doesn't match typeahead.
  * ```tsx
  * <Listbox multiple aria-label="Frameworks" defaultValue={['react']}>
  *   <ListboxItem value="react" textValue="React">
  *     <ListboxItemIndicator>✓</ListboxItemIndicator>
- *     React
  *   </ListboxItem>
  * </Listbox>
  * ```

package/dist/listbox/Listbox.d.ts

@@ -9,41 +9,29 @@ export declare const ListboxProvider: {
     displayName: string;
 }, useListboxContext: (consumerName: string) => ListboxContextValue;
 /**
- * A standalone WAI-ARIA listbox: an always-visible list of options with one
- * tab stop, arrow-key roving focus, typeahead, and single or multiple
- * selection. Renders a `<div role="listbox">` carrying
- * `aria-multiselectable="true"` while `multiple`, plus `data-multiple` and
- * `data-disabled`.
+ * WAI-ARIA listbox: always-visible list with one tab stop, arrow-key roving
+ * focus, typeahead, and single/multiple selection. Use when options should
+ * always be on screen (transfer lists, settings panels, detail pane lists).
  *
- * This is the selection list without the popup: `Select` is this plus a
- * trigger and a floating layer, `Combobox` is this plus a text filter and
- * virtual focus. Reach for `Listbox` when the options should always be on
- * screen — a transfer/pick-list, a settings panel, a master list beside a
- * detail pane.
+ * Focus is real (one option has `tabIndex={0}`, arrows move it). With `multiple`,
+ * Shift+Arrow toggles, Shift+Space range-selects, Ctrl+Shift+Home/End extends,
+ * Ctrl+A selects all (or clears if all selected). APG's modifier-key model.
  *
- * Focus is real, not virtual: exactly one option carries `tabIndex={0}` (the
- * selected one, else the first enabled one) and the arrows move it, so the
- * list is one Tab stop from the outside and `document.activeElement` is always
- * the option a screen reader is announcing.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Works controlled or uncontrolled.
  *
  * @example
  * ```tsx
  * <Listbox aria-label="Framework" defaultValue="react">
  *   <ListboxItem value="react">React</ListboxItem>
  *   <ListboxItem value="vue">Vue</ListboxItem>
- *   <ListboxItem value="svelte">Svelte</ListboxItem>
  * </Listbox>
  * ```
  *
- * @example Multi-select, with an indicator — note `textValue`, because the
- * checkmark would otherwise be part of what typeahead matches:
+ * @example Multi-select with indicator—use `textValue` so checkmark doesn't match typeahead.
  * ```tsx
  * <Listbox multiple aria-label="Frameworks" defaultValue={['react']}>
  *   <ListboxItem value="react" textValue="React">
  *     <ListboxItemIndicator>✓</ListboxItemIndicator>
- *     React
  *   </ListboxItem>
  * </Listbox>
  * ```

package/dist/listbox/Listbox.js

@@ -1 +1 @@
-import*as n from"react";import{createSafeContext as K}from"../utils/createContext.js";import{skdxPart as O}from"../utils/part.js";import{composeEventHandlers as F,Primitive as q}from"../utils/primitive.js";import{useRovingFocus as _}from"../utils/useRovingFocus.js";import{useSelection as z}from"../utils/useSelection.js";import{isTypeaheadKey as B,useTypeahead as J}from"../utils/useTypeahead.js";import{jsx as y}from"react/jsx-runtime";var P='[role="option"]:not([data-disabled])',[Q,v]=K("Listbox");function L(t){return Array.from(t.querySelectorAll(P))}function U(t){return t.getAttribute("data-text-value")??t.textContent??""}var W=n.forwardRef(({value:t,defaultValue:i,onValueChange:s,multiple:o=!1,disabled:d=!1,...a},r)=>{let l=n.useRef(null),[m,c]=n.useState(null),{selectedValues:S,isSelected:p,selectItem:M}=z({value:t,defaultValue:i,onValueChange:s,multiple:o}),N=_({orientation:"vertical",loop:!1,itemSelector:P,typeahead:!1}),w=J(n.useCallback(()=>l.current?L(l.current).map(U):[],[]));return n.useLayoutEffect(()=>{if(m!==null)return;let e=l.current;if(!e)return;let u=L(e),x=(u.find(A=>p(A.getAttribute("data-value")??""))??u[0])?.getAttribute("data-value");x&&c(x)},[m,p]),y(Q,{multiple:o,selectedValues:S,isSelected:p,selectItem:M,disabled:d,activeValue:m,setActiveValue:c,children:y(q.div,{role:"listbox","aria-multiselectable":o?!0:void 0,"aria-disabled":d||void 0,"data-multiple":o?"":void 0,"data-disabled":d?"":void 0,...a,...O("listbox","root",a.className),ref:e=>{l.current=e,typeof r=="function"?r(e):r&&(r.current=e)},onKeyDown:F(a.onKeyDown,e=>{if(N(e),e.defaultPrevented||!B(e))return;let u=l.current;if(!u)return;let f=L(u),x=w(e.key,f.indexOf(e.target));x!==-1&&(e.preventDefault(),f[x].focus())})})})});W.displayName="Listbox";import*as C from"react";import{createSafeContext as X}from"../utils/createContext.js";import{skdxPart as Y}from"../utils/part.js";import{composeEventHandlers as I,Primitive as Z}from"../utils/primitive.js";import{rovingTabIndex as $}from"../utils/useRovingFocus.js";import{jsx as R}from"react/jsx-runtime";var[j,h]=X("ListboxItem"),E=C.forwardRef(({value:t,disabled:i=!1,textValue:s,...o},d)=>{let a=v("ListboxItem"),r=i||a.disabled,l=a.isSelected(t),m=()=>{r||a.selectItem(t)};return R(j,{value:t,selected:l,disabled:r,children:R(Z.div,{role:"option","aria-selected":l,"aria-disabled":r||void 0,"data-value":t,"data-text-value":s,"data-state":l?"checked":"unchecked","data-disabled":r?"":void 0,tabIndex:$(a.activeValue!==null,a.activeValue===t,r),...o,...Y("listbox","item",o.className),ref:d,onClick:I(o.onClick,m),onFocus:I(o.onFocus,()=>{r||a.setActiveValue(t)}),onKeyDown:I(o.onKeyDown,c=>{c.key!==" "&&c.key!=="Enter"||(c.preventDefault(),m())})})})});E.displayName="ListboxItem";import*as T from"react";import{skdxPart as tt}from"../utils/part.js";import{Primitive as et}from"../utils/primitive.js";import{jsx as ot}from"react/jsx-runtime";var k=T.forwardRef(({forceMount:t,...i},s)=>{let o=h("ListboxItemIndicator");return t||o.selected?ot(et.span,{"aria-hidden":!0,...i,...tt("listbox","item-indicator",i.className),ref:s}):null});k.displayName="ListboxItemIndicator";import*as b from"react";import{createSafeContext as rt}from"../utils/createContext.js";import{skdxPart as it}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var[at,g]=rt("ListboxGroup"),D=b.forwardRef((t,i)=>{let s=b.useId();return V(at,{labelId:s,children:V(st.div,{role:"group","aria-labelledby":s,...t,...it("listbox","group",t.className),ref:i})})});D.displayName="ListboxGroup";import*as G from"react";import{skdxPart as nt}from"../utils/part.js";import{Primitive as lt}from"../utils/primitive.js";import{jsx as mt}from"react/jsx-runtime";var H=G.forwardRef((t,i)=>{let s=g("ListboxLabel");return mt(lt.div,{id:s.labelId,...t,...nt("listbox","label",t.className),ref:i})});H.displayName="ListboxLabel";export{W as Listbox,D as ListboxGroup,E as ListboxItem,k as ListboxItemIndicator,H as ListboxLabel,Q as ListboxProvider,P as OPTION_SELECTOR,v as useListboxContext};
+import*as s from"react";import{createSafeContext as Me}from"../utils/createContext.js";import{skdxPart as Ge}from"../utils/part.js";import{composeEventHandlers as Se,Primitive as Ae}from"../utils/primitive.js";import{useControllableState as Ke}from"../utils/useControllableState.js";import{useRovingFocus as we}from"../utils/useRovingFocus.js";import{nextSelection as Ne,selectedValueOf as ze,toSelectionValues as F}from"../utils/useSelection.js";import{isTypeaheadKey as Fe,useTypeahead as Ue}from"../utils/useTypeahead.js";import*as v from"react";import{createSafeContext as pe}from"../utils/createContext.js";import{skdxPart as Le}from"../utils/part.js";import{Primitive as ye}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var[ge,Y]=pe("ListboxGroup"),A=v.forwardRef((t,l)=>{let u=v.useId();return X(ge,{labelId:u,children:X(ye.div,{role:"group","aria-labelledby":u,...t,...Le("listbox","group",t.className),ref:l})})});A.displayName="ListboxGroup";import*as j from"react";import{createSafeContext as he}from"../utils/createContext.js";import{skdxPart as Re}from"../utils/part.js";import{composeEventHandlers as V,Primitive as Ie}from"../utils/primitive.js";import{rovingTabIndex as ke}from"../utils/useRovingFocus.js";import{jsx as $}from"react/jsx-runtime";var[Ce,ee]=he("ListboxItem"),K=j.forwardRef(({value:t,disabled:l=!1,textValue:u,posInSet:o,setSize:a,...x},L)=>{let b=D("ListboxItem"),m=l||b.disabled,h=b.isSelected(t),k=d=>{m||b.selectItem(t,d)};return $(Ce,{value:t,selected:h,disabled:m,children:$(Ie.div,{role:"option","aria-selected":h,"aria-disabled":m||void 0,"data-value":t,"data-text-value":u,"data-state":h?"checked":"unchecked","data-disabled":m?"":void 0,"aria-posinset":o,"aria-setsize":a,tabIndex:ke(b.activeValue!==null,b.activeValue===t,m),...x,...Re("listbox","item",x.className),ref:L,onClick:V(x.onClick,()=>k("pointer")),onFocus:V(x.onFocus,()=>{m||b.setActiveValue(t)}),onPointerEnter:V(x.onPointerEnter,d=>{b.focusOnHover&&!m&&d.currentTarget.focus()}),onKeyDown:V(x.onKeyDown,d=>{d.key!==" "&&d.key!=="Enter"||d.key===" "&&d.shiftKey&&b.multiple||(d.preventDefault(),k("keyboard"))})})})});K.displayName="ListboxItem";import*as te from"react";import{skdxPart as Pe}from"../utils/part.js";import{Primitive as ve}from"../utils/primitive.js";import{jsx as Ve}from"react/jsx-runtime";var w=te.forwardRef(({forceMount:t,...l},u)=>{let o=ee("ListboxItemIndicator");return t||o.selected?Ve(ve.span,{"aria-hidden":!0,...l,...Pe("listbox","item-indicator",l.className),ref:u}):null});w.displayName="ListboxItemIndicator";import*as oe from"react";import{skdxPart as De}from"../utils/part.js";import{Primitive as Oe}from"../utils/primitive.js";import{jsx as Ee}from"react/jsx-runtime";var N=oe.forwardRef((t,l)=>{let u=Y("ListboxLabel");return Ee(Oe.div,{id:u.labelId,...t,...De("listbox","label",t.className),ref:l})});N.displayName="ListboxLabel";import{Fragment as He,jsx as z,jsxs as re}from"react/jsx-runtime";var Te=t=>"options"in t,se=({options:t,renderOption:l})=>{let u=D("Listbox"),o=a=>re(K,{value:a.value,disabled:a.disabled,textValue:a.label,children:[z(w,{children:"\u2713"}),l?l(a,{selected:u.isSelected(a.value)}):a.label??a.value]},a.value);return z(He,{children:t.map(a=>Te(a)?re(A,{children:[z(N,{children:a.label}),a.options.map(o)]},a.label):o(a))})};import{jsx as U}from"react/jsx-runtime";function _e(t,l){return t.length===l.length&&t.every((u,o)=>u===l[o])}var ie='[role="option"]:not([data-disabled])',ae=10,[qe,D]=Me("Listbox");function I(t){return Array.from(t.querySelectorAll(ie))}function Ze(t){return t.getAttribute("data-text-value")??t.textContent??""}function O(t){return t.getAttribute("data-value")??""}var Be=s.forwardRef(({value:t,defaultValue:l,onValueChange:u,multiple:o=!1,disabled:a=!1,allowSelectAll:x=!0,orientation:L="vertical",focusOnHover:b=!1,disallowEmptySelection:m=!1,options:h,renderOption:k,children:d,...E},C)=>{let ne=d??U(se,{options:h??[],renderOption:k}),y=s.useRef(null),[T,_]=s.useState(null),q=s.useRef("programmatic"),Z=s.useRef(null),le=s.useMemo(()=>t===void 0?void 0:F(t,{multiple:o,label:"Listbox value"}),[t,o]),[c=[],B]=Ke({prop:le,defaultProp:F(l,{multiple:o,label:"Listbox defaultValue"}),onChange:e=>u?.({value:e,previousValue:Z.current,reason:q.current,selectedValue:ze(e)})}),R=s.useRef(c);R.current=c;let H=s.useCallback(e=>c.includes(e),[c]),P=s.useCallback((e,r)=>{_e(e,R.current)||(q.current=r,Z.current=R.current.length===0?null:R.current,B(e))},[B]),J=s.useCallback((e,r)=>P(Ne(R.current,e,o),r),[o,P]),M=s.useCallback((e,r)=>P(F(e,{multiple:o,label:"Listbox value"}),r),[o,P]),G=s.useRef(null),ce=we({orientation:L,loop:!1,itemSelector:ie,typeahead:!1}),ue=Ue(s.useCallback(()=>y.current?I(y.current).map(Ze):[],[]));s.useLayoutEffect(()=>{if(T!==null)return;let e=y.current;if(!e)return;let r=I(e),i=(r.find(p=>H(p.getAttribute("data-value")??""))??r[0])?.getAttribute("data-value");i&&_(i)},[T,H]);let Q=s.useCallback((e,r)=>{o&&m&&c.length===1&&c[0]===e||(G.current=e,J(e,r))},[J,o,m,c]),fe=()=>(c.length===0&&(G.current=null),G.current),S=(e,r,n)=>{let i=e.slice(r,n+1).map(O);M([...c,...i.filter(p=>!c.includes(p))],"keyboard")},me=e=>{if(!o)return!1;let r=y.current;if(!r)return!1;let n=I(r),i=n.indexOf(e.target);if(i===-1)return!1;let p=L==="horizontal"?"ArrowRight":"ArrowDown",be=L==="horizontal"?"ArrowLeft":"ArrowUp";if((e.key===p||e.key===be)&&e.shiftKey){e.preventDefault();let f=n[i+(e.key===p?1:-1)];return f&&(f.focus(),Q(O(f),"keyboard")),!0}if(e.key===" "&&e.shiftKey){e.preventDefault();let f=n.findIndex(xe=>O(xe)===fe()),W=Math.min(f===-1?i:f,i),g=Math.max(f===-1?i:f,i);return S(n,W,g),!0}if(e.ctrlKey&&e.shiftKey&&(e.key==="Home"||e.key==="End"))return e.preventDefault(),e.key==="Home"?S(n,0,i):S(n,i,n.length-1),!0;if(x&&(e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();let f=n.map(O);return f.every(g=>c.includes(g))?o&&m||M(c.filter(g=>!f.includes(g)),"keyboard"):M([...c,...f.filter(g=>!c.includes(g))],"keyboard"),!0}return!1},de=e=>{if(e.key!=="PageUp"&&e.key!=="PageDown")return!1;let r=y.current;if(!r)return!1;let n=I(r),i=n.indexOf(e.target);if(i===-1)return!1;e.preventDefault();let p=e.key==="PageDown"?ae:-ae;return n[Math.min(n.length-1,Math.max(0,i+p))]?.focus(),!0};return U(qe,{multiple:o,selectedValues:c,isSelected:H,selectItem:Q,disabled:a,activeValue:T,setActiveValue:_,focusOnHover:b,children:U(Ae.div,{role:"listbox","aria-multiselectable":o?!0:void 0,"aria-disabled":a||void 0,"aria-orientation":L,"data-multiple":o?"":void 0,"data-disabled":a?"":void 0,"data-orientation":L,...E,...Ge("listbox","root",E.className),ref:e=>{y.current=e,typeof C=="function"?C(e):C&&(C.current=e)},onKeyDown:Se(E.onKeyDown,e=>{if(me(e)||de(e)||(ce(e),e.defaultPrevented||!Fe(e)))return;let r=y.current;if(!r)return;let n=I(r),i=ue(e.key,n.indexOf(e.target));i!==-1&&(e.preventDefault(),n[i].focus())}),children:ne})})});Be.displayName="Listbox";export{Be as Listbox,A as ListboxGroup,ge as ListboxGroupProvider,K as ListboxItem,w as ListboxItemIndicator,Ce as ListboxItemProvider,N as ListboxLabel,qe as ListboxProvider,ie as OPTION_SELECTOR,D as useListboxContext,Y as useListboxGroupContext,ee as useListboxItemContext};

package/dist/listbox/ListboxAnatomy.d.cts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import type { ListboxOption, ListboxOptionOrGroup } from './types.cjs';
+/**
+ * The anatomy a {@link Listbox} draws from `options`: one `ListboxItem` per
+ * option, grouped under a `ListboxGroup`/`ListboxLabel` where `options` nests
+ * a group.
+ *
+ * @internal
+ */
+export declare const ListboxAnatomy: ({ options, renderOption, }: {
+    options: ListboxOptionOrGroup[];
+    renderOption?: (option: ListboxOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/listbox/ListboxAnatomy.d.ts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import type { ListboxOption, ListboxOptionOrGroup } from './types.js';
+/**
+ * The anatomy a {@link Listbox} draws from `options`: one `ListboxItem` per
+ * option, grouped under a `ListboxGroup`/`ListboxLabel` where `options` nests
+ * a group.
+ *
+ * @internal
+ */
+export declare const ListboxAnatomy: ({ options, renderOption, }: {
+    options: ListboxOptionOrGroup[];
+    renderOption?: (option: ListboxOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/listbox/ListboxGroup.d.cts

@@ -8,13 +8,8 @@ export declare const ListboxGroupProvider: {
 }, useListboxGroupContext: (consumerName: string) => ListboxGroupContextValue;
 /**
  * Groups related `ListboxItem`s under a {@link ListboxLabel}. Renders a
- * `<div role="group">` whose `aria-labelledby` points at that label.
- *
- * The wiring is automatic here, unlike `SelectGroup`/`SelectLabel`, which are
- * purely presentational: a `Select`'s groups sit inside a popup the user
- * opened deliberately, whereas a standalone listbox is often one of several on
- * a page, so an unnamed group leaves a screen reader announcing "group" with
- * nothing to distinguish it.
+ * `<div role="group">` with `aria-labelledby` wired automatically to avoid
+ * unnamed groups in screen reader announcements.
  *
  * @example
  * ```tsx

package/dist/listbox/ListboxGroup.d.ts

@@ -8,13 +8,8 @@ export declare const ListboxGroupProvider: {
 }, useListboxGroupContext: (consumerName: string) => ListboxGroupContextValue;
 /**
  * Groups related `ListboxItem`s under a {@link ListboxLabel}. Renders a
- * `<div role="group">` whose `aria-labelledby` points at that label.
- *
- * The wiring is automatic here, unlike `SelectGroup`/`SelectLabel`, which are
- * purely presentational: a `Select`'s groups sit inside a popup the user
- * opened deliberately, whereas a standalone listbox is often one of several on
- * a page, so an unnamed group leaves a screen reader announcing "group" with
- * nothing to distinguish it.
+ * `<div role="group">` with `aria-labelledby` wired automatically to avoid
+ * unnamed groups in screen reader announcements.
  *
  * @example
  * ```tsx

package/dist/listbox/ListboxItem.d.cts

@@ -15,6 +15,11 @@ export declare const ListboxItemProvider: {
  * toggling it while the root is `multiple`. Focusing it moves the list's tab
  * stop onto it.
  *
+ * Shift+Space is the one selection key an option does *not* claim: while the
+ * root is `multiple` it selects a contiguous range, which needs the whole
+ * option list and the root's selection anchor, so it is left to bubble to
+ * {@link Listbox}.
+ *
  * A disabled option is skipped by the arrows and by typeahead, and cannot be
  * selected; it stays in the DOM and keeps `aria-selected`, so it is still
  * announced as part of the list.

package/dist/listbox/ListboxItem.d.ts

@@ -15,6 +15,11 @@ export declare const ListboxItemProvider: {
  * toggling it while the root is `multiple`. Focusing it moves the list's tab
  * stop onto it.
  *
+ * Shift+Space is the one selection key an option does *not* claim: while the
+ * root is `multiple` it selects a contiguous range, which needs the whole
+ * option list and the root's selection anchor, so it is left to bubble to
+ * {@link Listbox}.
+ *
  * A disabled option is skipped by the arrows and by typeahead, and cannot be
  * selected; it stays in the DOM and keeps `aria-selected`, so it is still
  * announced as part of the list.

package/dist/listbox/ListboxItemIndicator.d.cts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import type { ListboxItemIndicatorProps } from './types.cjs';
 /**
- * Marker shown inside a {@link ListboxItem} while that option is selected
- * (typically a checkmark). Renders an `aria-hidden` `<span>` — the option's
- * `aria-selected` already carries the state, so announcing the glyph too would
- * say it twice; renders nothing while its option isn't selected unless
- * `forceMount` is set.
- *
- * Give the option a `textValue` whenever you render an indicator: typeahead
- * otherwise matches against the option's whole text content, glyph included.
+ * Marker shown while an option is selected, hidden from accessibility to
+ * avoid duplicate announcements of `aria-selected`. Renders nothing while
+ * unselected unless `forceMount` is set. Give the option a `textValue` to
+ * avoid matching the glyph in typeahead.
  *
  * @example
  * ```tsx

package/dist/listbox/ListboxItemIndicator.d.ts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import type { ListboxItemIndicatorProps } from './types.js';
 /**
- * Marker shown inside a {@link ListboxItem} while that option is selected
- * (typically a checkmark). Renders an `aria-hidden` `<span>` — the option's
- * `aria-selected` already carries the state, so announcing the glyph too would
- * say it twice; renders nothing while its option isn't selected unless
- * `forceMount` is set.
- *
- * Give the option a `textValue` whenever you render an indicator: typeahead
- * otherwise matches against the option's whole text content, glyph included.
+ * Marker shown while an option is selected, hidden from accessibility to
+ * avoid duplicate announcements of `aria-selected`. Renders nothing while
+ * unselected unless `forceMount` is set. Give the option a `textValue` to
+ * avoid matching the glyph in typeahead.
  *
  * @example
  * ```tsx

package/dist/listbox/ListboxLabel.d.cts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { ListboxLabelProps } from './types.cjs';
 /**
- * The heading naming a {@link ListboxGroup}. Renders a plain `<div>` carrying
- * the id its group points `aria-labelledby` at, so the group is named without
- * the label itself becoming an option.
- *
- * Must be rendered inside a `ListboxGroup` — a label with no group to name has
- * nothing to attach to.
+ * The heading naming a {@link ListboxGroup}. Renders a plain `<div>` with an
+ * id for the group's `aria-labelledby`. Must be inside a `ListboxGroup`.
  *
  * @example
  * ```tsx

package/dist/listbox/ListboxLabel.d.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { ListboxLabelProps } from './types.js';
 /**
- * The heading naming a {@link ListboxGroup}. Renders a plain `<div>` carrying
- * the id its group points `aria-labelledby` at, so the group is named without
- * the label itself becoming an option.
- *
- * Must be rendered inside a `ListboxGroup` — a label with no group to name has
- * nothing to attach to.
+ * The heading naming a {@link ListboxGroup}. Renders a plain `<div>` with an
+ * id for the group's `aria-labelledby`. Must be inside a `ListboxGroup`.
  *
  * @example
  * ```tsx

package/dist/listbox/index.d.cts

@@ -1,6 +1,2 @@
 export * from './Listbox.cjs';
-export { ListboxItem } from './ListboxItem.cjs';
-export { ListboxItemIndicator } from './ListboxItemIndicator.cjs';
-export { ListboxGroup } from './ListboxGroup.cjs';
-export { ListboxLabel } from './ListboxLabel.cjs';
-export type { ListboxProps, ListboxItemProps, ListboxItemIndicatorProps, ListboxGroupProps, ListboxLabelProps, } from './types.cjs';
+export type { ListboxValueChangeDetail, ListboxOption, ListboxOptionGroup, ListboxOptionOrGroup, ListboxProps, } from './types.cjs';

package/dist/listbox/index.d.ts

@@ -1,6 +1,2 @@
 export * from './Listbox.js';
-export { ListboxItem } from './ListboxItem.js';
-export { ListboxItemIndicator } from './ListboxItemIndicator.js';
-export { ListboxGroup } from './ListboxGroup.js';
-export { ListboxLabel } from './ListboxLabel.js';
-export type { ListboxProps, ListboxItemProps, ListboxItemIndicatorProps, ListboxGroupProps, ListboxLabelProps, } from './types.js';
+export type { ListboxValueChangeDetail, ListboxOption, ListboxOptionGroup, ListboxOptionOrGroup, ListboxProps, } from './types.js';

package/dist/listbox/primitives.d.cts

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `Listbox` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Listbox, ListboxItem, ListboxItemIndicator } from '@skdx/react/primitives/listbox';
+ *
+ * <Listbox aria-label="Framework" defaultValue="react">
+ *   <ListboxItem value="react">
+ *     <ListboxItemIndicator>✓</ListboxItemIndicator>
+ *     React
+ *   </ListboxItem>
+ * </Listbox>
+ * ```
+ */
+export { Listbox } from './Listbox.cjs';
+export { ListboxItem } from './ListboxItem.cjs';
+export { ListboxItemIndicator } from './ListboxItemIndicator.cjs';
+export { ListboxGroup } from './ListboxGroup.cjs';
+export { ListboxLabel } from './ListboxLabel.cjs';
+export type { ListboxProps, ListboxItemProps, ListboxItemIndicatorProps, ListboxGroupProps, ListboxLabelProps, } from './types.cjs';

package/dist/listbox/primitives.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `Listbox` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Listbox, ListboxItem, ListboxItemIndicator } from '@skdx/react/primitives/listbox';
+ *
+ * <Listbox aria-label="Framework" defaultValue="react">
+ *   <ListboxItem value="react">
+ *     <ListboxItemIndicator>✓</ListboxItemIndicator>
+ *     React
+ *   </ListboxItem>
+ * </Listbox>
+ * ```
+ */
+export { Listbox } from './Listbox.js';
+export { ListboxItem } from './ListboxItem.js';
+export { ListboxItemIndicator } from './ListboxItemIndicator.js';
+export { ListboxGroup } from './ListboxGroup.js';
+export { ListboxLabel } from './ListboxLabel.js';
+export type { ListboxProps, ListboxItemProps, ListboxItemIndicatorProps, ListboxGroupProps, ListboxLabelProps, } from './types.js';