@skdx/react 0.26.0 → 0.28.0

package/dist/autocomplete/Autocomplete.d.cts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import type { AutocompleteContextValue, AutocompleteProps } from './types.cjs';
 /**
- * WAI-ARIA 1.2 "combobox with list autocomplete", with one deliberate
- * difference from {@link Combobox}: the committed value does not have to come
- * from the list. Type "foo", blur, and "foo" is the answer.
+ * Free-text autocomplete: suggests values but accepts any text (unlike {@link Combobox}).
+ * Type "foo", blur, and "foo" commits as the value, whether or not it's in the list.
+ */
+/**
+ * Default `getResultCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`.
+ * Exported separately because its wording differs from `defaultGetResultCountLabel` (Combobox).
  */
-/** Default `getSuggestionCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`. */
 export declare function defaultGetSuggestionCountLabel(count: number): string;
 export declare const AutocompleteProvider: {
     (props: AutocompleteContextValue & {
@@ -14,27 +16,19 @@ export declare const AutocompleteProvider: {
     displayName: string;
 }, useAutocompleteContext: (consumerName: string) => AutocompleteContextValue;
 /**
- * Root of a free-text field with suggestions. Owns **two separate** pieces of
- * state — the draft text in the input (`inputValue`) and the committed value
- * (`value`) — plus the popup's open state, and hands all three down to every
- * other `Autocomplete*` part via context. Renders no DOM of its own.
+ * Free-text field with suggestions. Owns draft text (`inputValue`), committed
+ * value (`value`), and popup state; distributes via context. Renders no DOM itself.
  *
- * The distinction from [`Combobox`](../combobox/Combobox.md) is `allowCustomValue`,
- * which defaults to `true` here and `false` there. A combobox constrains the
- * answer to its list; an autocomplete only *suggests* one. Typing "foo" and
- * tabbing away commits "foo", whether or not "foo" was ever an option — which
- * is what a city field, a tag field, or a search box actually needs, and what
- * a closed-set select must never do.
+ * Accepts any text on blur (unlike {@link Combobox} which constrains to the list).
+ * Filter suggestions yourself with `inputValue`, or pass a `filter` predicate.
  *
- * Filtering is the consumer's job by default: you filter your data by
- * `inputValue` and render only the `AutocompleteItem`s that match, which is
- * what an async or server-side search needs. Pass a `filter` predicate instead
- * and the component filters its own children.
+ * Keyboard: Arrow Down/Up highlight (via `aria-activedescendant`, not DOM focus).
+ * Home/End jump to first/last (only open; closed, they're text-caret keys).
+ * Enter commits highlight, Escape closes and restores committed text, Tab commits draft.
  *
- * Keyboard: Arrow Down/Up move the highlight **without moving DOM focus**
- * (real focus never leaves the input; the highlight is virtual, via
- * `aria-activedescendant`). Enter commits the highlighted suggestion. Escape
- * closes and puts the last committed text back. Tab commits the raw draft.
+ * Set `name` for submission, `form` for external form association, use
+ * {@link AutocompleteHandle} for validation. Set `loading` during fetches to silence
+ * result-count announcements.
  *
  * @example Consumer-side (default) filtering:
  * ```tsx
@@ -75,7 +69,4 @@ export declare const AutocompleteProvider: {
  * </Autocomplete>
  * ```
  */
-export declare function Autocomplete({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, allowCustomValue, openOnFocus, filter, disabled, readOnly, invalid, getSuggestionCountLabel, }: AutocompleteProps): React.JSX.Element;
-export declare namespace Autocomplete {
-    var displayName: string;
-}
+export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<import("../index.cjs").FormValidityHandle>>;

package/dist/autocomplete/Autocomplete.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import type { AutocompleteContextValue, AutocompleteProps } from './types.js';
 /**
- * WAI-ARIA 1.2 "combobox with list autocomplete", with one deliberate
- * difference from {@link Combobox}: the committed value does not have to come
- * from the list. Type "foo", blur, and "foo" is the answer.
+ * Free-text autocomplete: suggests values but accepts any text (unlike {@link Combobox}).
+ * Type "foo", blur, and "foo" commits as the value, whether or not it's in the list.
+ */
+/**
+ * Default `getResultCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`.
+ * Exported separately because its wording differs from `defaultGetResultCountLabel` (Combobox).
  */
-/** Default `getSuggestionCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`. */
 export declare function defaultGetSuggestionCountLabel(count: number): string;
 export declare const AutocompleteProvider: {
     (props: AutocompleteContextValue & {
@@ -14,27 +16,19 @@ export declare const AutocompleteProvider: {
     displayName: string;
 }, useAutocompleteContext: (consumerName: string) => AutocompleteContextValue;
 /**
- * Root of a free-text field with suggestions. Owns **two separate** pieces of
- * state — the draft text in the input (`inputValue`) and the committed value
- * (`value`) — plus the popup's open state, and hands all three down to every
- * other `Autocomplete*` part via context. Renders no DOM of its own.
+ * Free-text field with suggestions. Owns draft text (`inputValue`), committed
+ * value (`value`), and popup state; distributes via context. Renders no DOM itself.
  *
- * The distinction from [`Combobox`](../combobox/Combobox.md) is `allowCustomValue`,
- * which defaults to `true` here and `false` there. A combobox constrains the
- * answer to its list; an autocomplete only *suggests* one. Typing "foo" and
- * tabbing away commits "foo", whether or not "foo" was ever an option — which
- * is what a city field, a tag field, or a search box actually needs, and what
- * a closed-set select must never do.
+ * Accepts any text on blur (unlike {@link Combobox} which constrains to the list).
+ * Filter suggestions yourself with `inputValue`, or pass a `filter` predicate.
  *
- * Filtering is the consumer's job by default: you filter your data by
- * `inputValue` and render only the `AutocompleteItem`s that match, which is
- * what an async or server-side search needs. Pass a `filter` predicate instead
- * and the component filters its own children.
+ * Keyboard: Arrow Down/Up highlight (via `aria-activedescendant`, not DOM focus).
+ * Home/End jump to first/last (only open; closed, they're text-caret keys).
+ * Enter commits highlight, Escape closes and restores committed text, Tab commits draft.
  *
- * Keyboard: Arrow Down/Up move the highlight **without moving DOM focus**
- * (real focus never leaves the input; the highlight is virtual, via
- * `aria-activedescendant`). Enter commits the highlighted suggestion. Escape
- * closes and puts the last committed text back. Tab commits the raw draft.
+ * Set `name` for submission, `form` for external form association, use
+ * {@link AutocompleteHandle} for validation. Set `loading` during fetches to silence
+ * result-count announcements.
  *
  * @example Consumer-side (default) filtering:
  * ```tsx
@@ -75,7 +69,4 @@ export declare const AutocompleteProvider: {
  * </Autocomplete>
  * ```
  */
-export declare function Autocomplete({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, allowCustomValue, openOnFocus, filter, disabled, readOnly, invalid, getSuggestionCountLabel, }: AutocompleteProps): React.JSX.Element;
-export declare namespace Autocomplete {
-    var displayName: string;
-}
+export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<import("../index.js").FormValidityHandle>>;

package/dist/autocomplete/Autocomplete.js

@@ -1 +1 @@
-import*as r from"react";import{createSafeContext as pe}from"../utils/createContext.js";import{announce as ie}from"../utils/liveAnnouncer.js";import{PopperRoot as me}from"../utils/popper.js";import{useControllableState as T}from"../utils/useControllableState.js";import{useOpenChangeComplete as le}from"../utils/useOpenChangeComplete.js";import{useOptionCollection as ae}from"../utils/useOptionCollection.js";import{jsx as M}from"react/jsx-runtime";function se(t){return`${t} suggestion${t===1?"":"s"} available`}var[ue,l]=pe("Autocomplete");function ce({children:t,value:n,defaultValue:e="",onValueChange:p,inputValue:a,defaultInputValue:o,onInputValueChange:u,open:P,defaultOpen:A=!1,onOpenChange:y,onOpenChangeComplete:i,allowCustomValue:c=!0,openOnFocus:m=!1,filter:f,disabled:C=!1,readOnly:x=!1,invalid:Y=!1,getSuggestionCountLabel:H=se}){let Z=r.useRef(null),_=r.useRef(null),D=r.useRef(null),j=r.useId(),[w="",b]=T({prop:n,defaultProp:e,onChange:p}),[g="",R]=T({prop:a,defaultProp:o??e,onChange:u}),[h=!1,s]=T({prop:P,defaultProp:A,onChange:y});le(h,D,i);let d=ae({open:h,setOpen:s,contentRef:D}),{itemCount:O}=d,E=r.useRef(g);r.useEffect(()=>{h&&ie(H(O))},[h,O,H]);let ee=r.useCallback((v,L)=>{C||x||(b(v),R(L),E.current=L,s(!1))},[C,x,b,R,s]),te=r.useCallback(()=>{if(!(C||x)){if(!c){R(E.current),s(!1);return}b(g),E.current=g,s(!1)}},[C,x,c,g,b,R,s]),oe=r.useCallback(()=>{R(E.current),s(!1)},[R,s]),ne=r.useCallback(v=>f===void 0||f(v,g),[f,g]),re=r.useCallback(v=>v!==""&&v===w,[w]);return M(me,{children:M(ue,{inputRef:Z,triggerRef:_,contentRef:D,listId:j,value:w,isSelected:re,inputValue:g,onInputValueChange:R,open:h,onOpenChange:s,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:O,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:ne,commitItem:ee,commitInputValue:te,revert:oe,allowCustomValue:c,openOnFocus:m,disabled:C,readOnly:x,invalid:Y,children:t})})}ce.displayName="Autocomplete";import*as V from"react";import{useComposedRefs as fe}from"../utils/composeRefs.js";import{skdxPart as de}from"../utils/part.js";import{PopperAnchor as Ae}from"../utils/popper.js";import{composeEventHandlers as k,Primitive as ge}from"../utils/primitive.js";import{jsx as N}from"react/jsx-runtime";var F=V.forwardRef((t,n)=>{let e=l("AutocompleteInput"),p=fe(n,e.inputRef),a=()=>{let o=e.activeId?e.getItem(e.activeId):void 0;return o?(e.commitItem(o.value,o.text||o.value),!0):!1};return N(Ae,{asChild:!0,children:N(ge.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...de("autocomplete","input",t.className),ref:p,value:e.inputValue,onChange:k(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onFocus:k(t.onFocus,()=>{e.openOnFocus&&!e.readOnly&&!e.open&&e.onOpenChange(!0)}),onBlur:k(t.onBlur,()=>{e.commitInputValue()}),onKeyDown:k(t.onKeyDown,o=>{o.key==="ArrowDown"?(o.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first")):o.key==="ArrowUp"?(o.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last")):o.key==="Enter"?a()?o.preventDefault():e.allowCustomValue&&e.inputValue!==""&&(o.preventDefault(),e.commitInputValue()):o.key==="Escape"?e.open&&!e.contentRef.current&&(o.preventDefault(),e.revert()):o.key==="Tab"&&e.commitInputValue()})})})});F.displayName="AutocompleteInput";import*as B from"react";import{useComposedRefs as Re}from"../utils/composeRefs.js";import{skdxPart as Pe}from"../utils/part.js";import{composeEventHandlers as S,Primitive as ve}from"../utils/primitive.js";import{jsx as Ie}from"react/jsx-runtime";var W=B.forwardRef((t,n)=>{let e=l("AutocompleteTrigger"),p=Re(n,e.triggerRef);return Ie(ve.button,{type:"button",tabIndex:-1,"aria-expanded":e.open,"aria-controls":e.listId,disabled:e.disabled,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-state":e.open?"open":"closed",...t,...Pe("autocomplete","trigger",t.className),ref:p,onMouseDown:S(t.onMouseDown,a=>a.preventDefault()),onClick:S(t.onClick,()=>{e.readOnly||(e.onOpenChange(!e.open),e.inputRef.current?.focus())})})});W.displayName="AutocompleteTrigger";import{Portal as ye}from"../utils/portal.js";import{jsx as Ce}from"react/jsx-runtime";var K=({forceMount:t,children:n,...e})=>{let p=l("AutocompletePortal");return t||p.open?Ce(ye,{...e,children:n}):null};K.displayName="AutocompletePortal";import*as $ from"react";import{useComposedRefs as xe}from"../utils/composeRefs.js";import{skdxPart as he}from"../utils/part.js";import{PopperContent as be}from"../utils/popper.js";import{composeEventHandlers as Ee}from"../utils/primitive.js";import{useDismiss as ke}from"../utils/useDismiss.js";import{jsx as De}from"react/jsx-runtime";var G=$.forwardRef(({forceMount:t,side:n="bottom",align:e="start",sideOffset:p=4,onEscapeKeyDown:a,onPointerDownOutside:o,onFocusOutside:u,onInteractOutside:P,...A},y)=>{let i=l("AutocompleteContent"),c=xe(y,i.contentRef);return ke({enabled:i.open,onEscapeKeyDown:m=>{a?.(m),m.defaultPrevented||i.revert()},onInteractOutside:P,onPointerDownOutside:m=>{o?.(m),m.defaultPrevented||i.onOpenChange(!1)},onFocusOutside:m=>{u?.(m),m.defaultPrevented||i.onOpenChange(!1)}},[i.contentRef,i.inputRef,i.triggerRef]),!t&&!i.open?null:De(be,{component:"autocomplete","data-state":i.open?"open":"closed",side:n,align:e,sideOffset:p,...A,...he("autocomplete","content",A.className),ref:c,onMouseDown:Ee(A.onMouseDown,m=>m.preventDefault())})});G.displayName="AutocompleteContent";import*as U from"react";import{skdxPart as we}from"../utils/part.js";import{Primitive as Oe}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";var q=U.forwardRef((t,n)=>{let e=l("AutocompleteList");return Te(Oe.div,{role:"listbox",id:e.listId,...t,...we("autocomplete","list",t.className),ref:n})});q.displayName="AutocompleteList";import*as I from"react";import{useComposedRefs as He}from"../utils/composeRefs.js";import{skdxPart as Le}from"../utils/part.js";import{composeEventHandlers as z,Primitive as Me}from"../utils/primitive.js";import{useOptionEntry as Ne}from"../utils/useOptionCollection.js";import{jsx as Ve}from"react/jsx-runtime";var J=I.forwardRef(({value:t,disabled:n,textValue:e,...p},a)=>{let o=l("AutocompleteItem"),u=I.useId(),P=I.useRef(null),A=He(a,P),{text:y,visible:i}=Ne({id:u,value:t,textValue:e,itemRef:P,matchesFilter:o.matchesFilter,registerItem:o.registerItem,unregisterItem:o.unregisterItem});if(!i)return null;let c=o.isSelected(t),m=o.activeId===u,f=n||o.disabled||o.readOnly;return Ve(Me.div,{role:"option",id:u,"data-value":t,"aria-selected":c,"aria-disabled":f?!0:void 0,"data-state":c?"checked":"unchecked","data-highlighted":m?"":void 0,"data-disabled":f?"":void 0,...p,...Le("autocomplete","item",p.className),ref:A,onClick:z(p.onClick,()=>{f||(o.commitItem(t,y??t),o.inputRef.current?.focus())}),onPointerEnter:z(p.onPointerEnter,()=>{f||o.setActiveId(u)})})});J.displayName="AutocompleteItem";import*as Q from"react";import{skdxPart as Fe}from"../utils/part.js";import{Primitive as Se}from"../utils/primitive.js";import{jsx as Be}from"react/jsx-runtime";var X=Q.forwardRef((t,n)=>l("AutocompleteEmpty").itemCount===0?Be(Se.div,{role:"presentation",...t,...Fe("autocomplete","empty",t.className),ref:n}):null);X.displayName="AutocompleteEmpty";export{ce as Autocomplete,G as AutocompleteContent,X as AutocompleteEmpty,F as AutocompleteInput,J as AutocompleteItem,q as AutocompleteList,K as AutocompletePortal,ue as AutocompleteProvider,W as AutocompleteTrigger,se as defaultGetSuggestionCountLabel,l as useAutocompleteContext};
+import*as r from"react";import{createSafeContext as yt}from"../utils/createContext.js";import{formValidityHandle as Ct}from"../utils/formControl.js";import{announce as vt}from"../utils/liveAnnouncer.js";import{PopperRoot as bt}from"../utils/popper.js";import{filterKeeps as Pt,sortByOrder as xt}from"../utils/scoredFilter.js";import{useControllableState as X}from"../utils/useControllableState.js";import{useOpenChangeComplete as It}from"../utils/useOpenChangeComplete.js";import{OPTION_SELECTOR as ht,useOptionCollection as Ot}from"../utils/useOptionCollection.js";import*as pe from"react";import{useComposedRefs as Be}from"../utils/composeRefs.js";import{skdxPart as Ke}from"../utils/part.js";import{PopperContent as We}from"../utils/popper.js";import{composeEventHandlers as qe}from"../utils/primitive.js";import{useDismiss as Ue}from"../utils/useDismiss.js";import{jsx as $e}from"react/jsx-runtime";var B=pe.forwardRef(({forceMount:t,side:n="bottom",align:e="start",sideOffset:a=4,onEscapeKeyDown:c,onPointerDownOutside:o,onFocusOutside:s,onInteractOutside:A,...l},k)=>{let m=p("AutocompleteContent"),v=Be(k,m.contentRef);return Ue({enabled:m.open,onEscapeKeyDown:u=>{c?.(u),u.defaultPrevented||m.revert()},onInteractOutside:A,onPointerDownOutside:u=>{o?.(u),u.defaultPrevented||m.onOpenChange(!1)},onFocusOutside:u=>{s?.(u),u.defaultPrevented||m.onOpenChange(!1)}},[m.contentRef,m.inputRef,m.triggerRef]),!t&&!m.open?null:$e(We,{component:"autocomplete","aria-busy":m.loading?!0:void 0,"data-loading":m.loading?"":void 0,"data-state":m.open?"open":"closed",side:n,align:e,sideOffset:a,...l,...Ke("autocomplete","content",l.className),ref:v,onMouseDown:qe(l.onMouseDown,u=>u.preventDefault())})});B.displayName="AutocompleteContent";import*as me from"react";import{skdxPart as _e}from"../utils/part.js";import{Primitive as ze}from"../utils/primitive.js";import{jsx as Je}from"react/jsx-runtime";var K=me.forwardRef((t,n)=>p("AutocompleteEmpty").itemCount===0?Je(ze.div,{role:"presentation",...t,..._e("autocomplete","empty",t.className),ref:n}):null);K.displayName="AutocompleteEmpty";import*as G from"react";import{createSafeContext as Qe}from"../utils/createContext.js";import{skdxPart as Xe}from"../utils/part.js";import{Primitive as Ye}from"../utils/primitive.js";import{jsx as ue}from"react/jsx-runtime";var[Ze,ie]=Qe("AutocompleteGroup"),W=G.forwardRef((t,n)=>{let e=G.useId();return ue(Ze,{labelId:e,children:ue(Ye.div,{role:"group","aria-labelledby":e,...t,...Xe("autocomplete","group",t.className),ref:n})})});W.displayName="AutocompleteGroup";import*as ce from"react";import{skdxPart as je}from"../utils/part.js";import{Primitive as et}from"../utils/primitive.js";import{jsx as tt}from"react/jsx-runtime";var q=ce.forwardRef((t,n)=>{let e=ie("AutocompleteGroupLabel");return tt(et.div,{id:e.labelId,...t,...je("autocomplete","label",t.className),ref:n})});q.displayName="AutocompleteGroupLabel";import*as fe from"react";import{useComposedRefs as ot}from"../utils/composeRefs.js";import{skdxPart as rt}from"../utils/part.js";import{PopperAnchor as nt}from"../utils/popper.js";import{composeEventHandlers as N,Primitive as lt}from"../utils/primitive.js";import{jsx as se}from"react/jsx-runtime";var U=fe.forwardRef((t,n)=>{let e=p("AutocompleteInput"),a=ot(n,e.inputRef),c=()=>{let o=e.activeId?e.getItem(e.activeId):void 0;return o?(e.commitItem(o.value,o.text||o.value,"keyboard"),!0):!1};return se(nt,{asChild:!0,children:se(lt.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",name:e.name,form:e.form,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-busy":e.loading?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-loading":e.loading?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...rt("autocomplete","input",t.className),ref:a,value:e.inputValue,onChange:N(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onFocus:N(t.onFocus,()=>{e.openOnFocus&&!e.readOnly&&!e.open&&e.onOpenChange(!0)}),onBlur:N(t.onBlur,()=>{e.commitInputValue("pointer")}),onKeyDown:N(t.onKeyDown,o=>{if(o.altKey&&o.key==="ArrowDown")o.preventDefault(),e.open||e.onOpenChange(!0);else if(o.altKey&&o.key==="ArrowUp")o.preventDefault(),!c()&&e.open&&e.onOpenChange(!1);else if(o.key==="ArrowDown")o.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first");else if(o.key==="ArrowUp")o.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last");else if(o.key==="Home"||o.key==="End"){if(!e.open)return;o.preventDefault(),e.moveActiveToEdge(o.key==="Home"?"first":"last")}else o.key==="Enter"?c()?o.preventDefault():e.allowCustomValue&&e.inputValue!==""?(o.preventDefault(),e.commitInputValue("keyboard")):e.open&&e.onOpenChange(!1):o.key==="Escape"?e.open&&!e.contentRef.current&&(o.preventDefault(),e.revert()):o.key==="Tab"&&e.commitInputValue("keyboard")})})})});U.displayName="AutocompleteInput";import*as h from"react";import{useComposedRefs as at}from"../utils/composeRefs.js";import{skdxPart as pt}from"../utils/part.js";import{composeEventHandlers as de,Primitive as mt}from"../utils/primitive.js";import{useOptionEntry as ut}from"../utils/useOptionCollection.js";import{jsx as it}from"react/jsx-runtime";var $=h.forwardRef(({value:t,disabled:n,textValue:e,...a},c)=>{let o=p("AutocompleteItem"),s=h.useId(),A=h.useRef(null),l=at(c,A),{text:k,visible:m}=ut({id:s,value:t,textValue:e,itemRef:A,matchesFilter:o.matchesFilter,registerItem:o.registerItem,unregisterItem:o.unregisterItem});if(!m)return null;let v=o.isSelected(t),u=o.activeId===s,b=n||o.disabled||o.readOnly,E=o.itemOrder?.get(s);return it(mt.div,{role:"option",id:s,"data-value":t,"aria-selected":v,"aria-disabled":b?!0:void 0,"data-state":v?"checked":"unchecked","data-highlighted":u?"":void 0,"data-disabled":b?"":void 0,...a,...pt("autocomplete","item",a.className),ref:l,onClick:de(a.onClick,()=>{b||(o.commitItem(t,k??t,"pointer"),o.inputRef.current?.focus())}),onPointerEnter:de(a.onPointerEnter,()=>{b||o.setActiveId(s)}),style:E!==void 0?{order:E,...a.style}:a.style})});$.displayName="AutocompleteItem";import*as Ae from"react";import{skdxPart as ct}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as ft}from"react/jsx-runtime";var _=Ae.forwardRef((t,n)=>{let e=p("AutocompleteList");return ft(st.div,{role:"listbox",id:e.listId,...t,...ct("autocomplete","list",t.className),ref:n})});_.displayName="AutocompleteList";import{Portal as dt}from"../utils/portal.js";import{jsx as At}from"react/jsx-runtime";var z=({forceMount:t,children:n,...e})=>{let a=p("AutocompletePortal");return t||a.open?At(dt,{...e,children:n}):null};z.displayName="AutocompletePortal";import{defaultOptionsFilter as Q}from"../combobox/Combobox.js";import{Fragment as Rt,jsx as O,jsxs as J}from"react/jsx-runtime";var gt=t=>"options"in t,ge=({options:t,renderOption:n,placeholder:e,ariaLabel:a,passThrough:c})=>{let o=p("Autocomplete"),s=a??e,A=l=>O($,{value:l.value,disabled:l.disabled,textValue:l.label,children:n?n(l,{selected:o.isSelected(l.value)}):l.label??l.value},l.value);return J(Rt,{children:[O(U,{...c,"aria-label":s,placeholder:e}),O(z,{children:J(B,{children:[O(_,{"aria-label":s,children:t.map(l=>gt(l)?J(W,{children:[O(q,{children:l.label}),l.options.map(A)]},l.label):A(l))}),O(K,{children:"No suggestions"})]})})]})};import{jsx as Y}from"react/jsx-runtime";function kt(t){return`${t} suggestion${t===1?"":"s"} available`}var[Et,p]=yt("Autocomplete"),Dt=r.forwardRef(function({children:n,value:e,defaultValue:a="",onValueChange:c,inputValue:o,defaultInputValue:s,onInputValueChange:A,open:l,defaultOpen:k=!1,onOpenChange:m,onOpenChangeComplete:v,allowCustomValue:u=!0,openOnFocus:b=!1,autoHighlight:E=!1,loop:be=!0,filter:Pe,disabled:D=!1,readOnly:L=!1,invalid:xe=!1,loading:M=!1,name:Ie,form:he,getResultCountLabel:Z=kt,options:j,renderOption:Oe,placeholder:ke,"aria-label":Ee,...De},Le){let P=Pe??(j?Q:void 0),ee=r.useRef(null),Te=r.useRef(null),H=r.useRef(null),we=r.useId(),te=r.useRef("programmatic"),oe=r.useRef(!1),re=r.useRef(null),[T="",ne]=X({prop:e,defaultProp:a,onChange:i=>c?.({value:i,previousValue:re.current,reason:te.current,created:oe.current})}),F=r.useRef(T);F.current=T;let x=r.useCallback((i,y,I)=>{te.current=y,oe.current=I,re.current=F.current===""?null:F.current,ne(i)},[ne]),[g="",R]=X({prop:o,defaultProp:s??a,onChange:A}),[C=!1,f]=X({prop:l,defaultProp:k,onChange:m});It(C,H,v);let He=r.useCallback(i=>typeof P!="function"||Pt(P(i,g)),[P,g]),Ve=r.useCallback(i=>{if(typeof P!="function")return null;let y=P(i.text,g);return typeof y=="number"?y:null},[P,g]),d=Ot({open:C,setOpen:f,contentRef:H,loop:be,scoreItem:Ve}),{itemCount:V,itemOrder:S}=d,{activeId:le,setActiveId:ae}=d;r.useEffect(()=>{if(!E||!C||le!==null)return;let i=requestAnimationFrame(()=>{let y=Array.from(H.current?.querySelectorAll(ht)??[]),I=xt(y,S)[0];I&&ae(I.id)});return()=>cancelAnimationFrame(i)},[E,C,le,V,ae,S]);let w=r.useRef(g);r.useEffect(()=>{!C||M||vt(Z(V))},[C,M,V,Z]),r.useImperativeHandle(Le,()=>Ct(ee),[]);let Ge=r.useCallback((i,y,I)=>{D||L||(x(i,I,!1),R(y),w.current=y,f(!1))},[D,L,x,R,f]),Ne=r.useCallback(i=>{if(!(D||L)){if(!u){R(w.current),f(!1);return}x(g,i,!0),w.current=g,f(!1)}},[D,L,u,g,x,R,f]),Me=r.useCallback(()=>{x("","pointer",!0),R(""),w.current="",f(!1)},[x,R,f]),Fe=r.useCallback(()=>{R(w.current),f(!1)},[R,f]),Se=r.useCallback(i=>i!==""&&i===T,[T]);return Y(bt,{children:Y(Et,{inputRef:ee,triggerRef:Te,contentRef:H,listId:we,value:T,isSelected:Se,inputValue:g,onInputValueChange:R,open:C,onOpenChange:f,activeId:d.activeId,itemOrder:S,setActiveId:d.setActiveId,moveActive:d.moveActive,moveActiveToEdge:d.moveActiveToEdge,openWithHighlight:d.openWithHighlight,itemCount:V,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:He,commitItem:Ge,commitInputValue:Ne,revert:Fe,clear:Me,allowCustomValue:u,openOnFocus:b,disabled:D,readOnly:L,invalid:xe,loading:M,name:Ie,form:he,children:n??Y(ge,{options:j??[],renderOption:Oe,placeholder:ke,ariaLabel:Ee,passThrough:De})})})});Dt.displayName="Autocomplete";import*as ye from"react";import{useComposedRefs as Lt}from"../utils/composeRefs.js";import{skdxPart as Tt}from"../utils/part.js";import{composeEventHandlers as Re,Primitive as wt}from"../utils/primitive.js";import{jsx as Vt}from"react/jsx-runtime";var Ht=ye.forwardRef((t,n)=>{let e=p("AutocompleteTrigger"),a=Lt(n,e.triggerRef);return Vt(wt.button,{type:"button",tabIndex:-1,"aria-expanded":e.open,"aria-controls":e.listId,disabled:e.disabled,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-state":e.open?"open":"closed",...t,...Tt("autocomplete","trigger",t.className),ref:a,onMouseDown:Re(t.onMouseDown,c=>c.preventDefault()),onClick:Re(t.onClick,()=>{e.readOnly||(e.onOpenChange(!e.open),e.inputRef.current?.focus())})})});Ht.displayName="AutocompleteTrigger";import*as ve from"react";import{skdxPart as Gt}from"../utils/part.js";import{composeEventHandlers as Ce,Primitive as Nt}from"../utils/primitive.js";import{jsx as Ft}from"react/jsx-runtime";var Mt=ve.forwardRef((t,n)=>{let e=p("AutocompleteClear"),a=e.value===""&&e.inputValue==="";return Ft(Nt.button,{type:"button",tabIndex:-1,disabled:e.disabled||e.readOnly||a,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...Gt("autocomplete","clear",t.className),ref:n,onMouseDown:Ce(t.onMouseDown,c=>c.preventDefault()),onClick:Ce(t.onClick,()=>{e.clear(),e.inputRef.current?.focus()})})});Mt.displayName="AutocompleteClear";export{Dt as Autocomplete,Mt as AutocompleteClear,B as AutocompleteContent,K as AutocompleteEmpty,W as AutocompleteGroup,q as AutocompleteGroupLabel,Ze as AutocompleteGroupProvider,U as AutocompleteInput,$ as AutocompleteItem,_ as AutocompleteList,z as AutocompletePortal,Et as AutocompleteProvider,Ht as AutocompleteTrigger,kt as defaultGetSuggestionCountLabel,Q as defaultOptionsFilter,p as useAutocompleteContext,ie as useAutocompleteGroupContext};

package/dist/autocomplete/AutocompleteAnatomy.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { AutocompleteOption, AutocompleteOptionOrGroup } from './types.cjs';
+export { defaultOptionsFilter } from '../combobox/ComboboxAnatomy.cjs';
+/**
+ * Renders Autocomplete anatomy from `options`: input, portal, and listbox.
+ * @internal
+ */
+export declare const AutocompleteAnatomy: ({ options, renderOption, placeholder, ariaLabel, passThrough, }: {
+    options: AutocompleteOptionOrGroup[];
+    renderOption?: (option: AutocompleteOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    placeholder?: string;
+    ariaLabel?: string;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/autocomplete/AutocompleteAnatomy.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { AutocompleteOption, AutocompleteOptionOrGroup } from './types.js';
+export { defaultOptionsFilter } from '../combobox/ComboboxAnatomy.js';
+/**
+ * Renders Autocomplete anatomy from `options`: input, portal, and listbox.
+ * @internal
+ */
+export declare const AutocompleteAnatomy: ({ options, renderOption, placeholder, ariaLabel, passThrough, }: {
+    options: AutocompleteOptionOrGroup[];
+    renderOption?: (option: AutocompleteOption, state: {
+        selected: boolean;
+    }) => React.ReactNode;
+    placeholder?: string;
+    ariaLabel?: string;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/autocomplete/AutocompleteClear.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { AutocompleteClearProps } from './types.cjs';
+/**
+ * Optional button that empties an {@link Autocomplete} in one action — the
+ * draft text *and* the committed value — and hands focus back to
+ * {@link AutocompleteInput}.
+ *
+ * Disabled while there is nothing to clear, and while the root is `disabled`
+ * or `readOnly` — the same three conditions `FileUploadClear` answers to. A
+ * clear that stays live over an empty field is a control that does nothing,
+ * which a screen-reader user cannot tell from one that is broken.
+ *
+ * `tabIndex={-1}` for the same reason {@link AutocompleteTrigger} carries it:
+ * the input is the widget, and a second tab stop per affordance is what makes
+ * a form of autocompletes expensive to skip. Give it an `aria-label` — a "✕"
+ * glyph is not an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteClear aria-label="Clear">✕</AutocompleteClear>
+ * ```
+ */
+export declare const AutocompleteClear: React.ForwardRefExoticComponent<Omit<AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/autocomplete/AutocompleteClear.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { AutocompleteClearProps } from './types.js';
+/**
+ * Optional button that empties an {@link Autocomplete} in one action — the
+ * draft text *and* the committed value — and hands focus back to
+ * {@link AutocompleteInput}.
+ *
+ * Disabled while there is nothing to clear, and while the root is `disabled`
+ * or `readOnly` — the same three conditions `FileUploadClear` answers to. A
+ * clear that stays live over an empty field is a control that does nothing,
+ * which a screen-reader user cannot tell from one that is broken.
+ *
+ * `tabIndex={-1}` for the same reason {@link AutocompleteTrigger} carries it:
+ * the input is the widget, and a second tab stop per affordance is what makes
+ * a form of autocompletes expensive to skip. Give it an `aria-label` — a "✕"
+ * glyph is not an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteClear aria-label="Clear">✕</AutocompleteClear>
+ * ```
+ */
+export declare const AutocompleteClear: React.ForwardRefExoticComponent<Omit<AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/autocomplete/AutocompleteContent.d.cts

@@ -8,14 +8,15 @@ import type { AutocompleteContentProps } from './types.cjs';
  * `--skdx-autocomplete-available-width`, `--skdx-autocomplete-available-height`,
  * `--skdx-autocomplete-trigger-width` and `--skdx-autocomplete-transform-origin`
  * onto itself after each reposition, so the panel can be sized and animated
- * from CSS alone rather than measured again in JavaScript.
+ * from CSS alone rather than measured again in JavaScript. Carries
+ * `aria-busy`/`data-loading` while the root is `loading`, so a spinner can be
+ * painted from the popup's own state.
  *
- * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, one
- * level in, so a header, a footer or an {@link AutocompleteEmpty} can sit
- * inside the popup without becoming a bogus `role="option"`-less child of a
- * listbox. Prevents `mousedown` from stealing focus off the input — real DOM
- * focus must never leave `AutocompleteInput`, or the blur would commit and
- * close before the click landed. Unmounts when closed unless `forceMount`.
+ * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, so
+ * other elements can be direct popup children. Prevents `mousedown` from
+ * stealing focus off the input — real DOM focus must never leave
+ * `AutocompleteInput`, or the blur closes first. Unmounts when closed unless
+ * `forceMount`.
  *
  * Escape reverts the draft text to the last committed value and closes; an
  * outside interaction — pointer-down outside or focus moving outside — closes

package/dist/autocomplete/AutocompleteContent.d.ts

@@ -8,14 +8,15 @@ import type { AutocompleteContentProps } from './types.js';
  * `--skdx-autocomplete-available-width`, `--skdx-autocomplete-available-height`,
  * `--skdx-autocomplete-trigger-width` and `--skdx-autocomplete-transform-origin`
  * onto itself after each reposition, so the panel can be sized and animated
- * from CSS alone rather than measured again in JavaScript.
+ * from CSS alone rather than measured again in JavaScript. Carries
+ * `aria-busy`/`data-loading` while the root is `loading`, so a spinner can be
+ * painted from the popup's own state.
  *
- * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, one
- * level in, so a header, a footer or an {@link AutocompleteEmpty} can sit
- * inside the popup without becoming a bogus `role="option"`-less child of a
- * listbox. Prevents `mousedown` from stealing focus off the input — real DOM
- * focus must never leave `AutocompleteInput`, or the blur would commit and
- * close before the click landed. Unmounts when closed unless `forceMount`.
+ * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, so
+ * other elements can be direct popup children. Prevents `mousedown` from
+ * stealing focus off the input — real DOM focus must never leave
+ * `AutocompleteInput`, or the blur closes first. Unmounts when closed unless
+ * `forceMount`.
  *
  * Escape reverts the draft text to the last committed value and closes; an
  * outside interaction — pointer-down outside or focus moving outside — closes

package/dist/autocomplete/AutocompleteEmpty.d.cts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { AutocompleteEmptyProps } from './types.cjs';
 /**
- * Fallback shown in place of the suggestion list when no `AutocompleteItem`s
- * are currently rendered — because the consumer's filtered results are empty,
- * or because the root's `filter` predicate rejected every one. Renders a
- * `<div role="presentation">`; renders nothing while at least one suggestion
- * is registered.
+ * Fallback when no suggestions are rendered. Word as "no matches", not "invalid" — with `allowCustomValue`, empty list means user's text is accepted.
  *
- * Word it as "no matches", not "invalid": with the default
- * `allowCustomValue`, an empty list does **not** mean the user's text is
- * rejected — it means nothing was suggested and their own text is the answer.
- *
- * Belongs inside {@link AutocompleteContent} and *outside*
- * {@link AutocompleteList} — a non-option child of a listbox is a broken
- * listbox.
+ * Must be inside `AutocompleteContent` but outside `AutocompleteList` (non-option children break listbox).
  *
  * @example
  * ```tsx

package/dist/autocomplete/AutocompleteEmpty.d.ts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { AutocompleteEmptyProps } from './types.js';
 /**
- * Fallback shown in place of the suggestion list when no `AutocompleteItem`s
- * are currently rendered — because the consumer's filtered results are empty,
- * or because the root's `filter` predicate rejected every one. Renders a
- * `<div role="presentation">`; renders nothing while at least one suggestion
- * is registered.
+ * Fallback when no suggestions are rendered. Word as "no matches", not "invalid" — with `allowCustomValue`, empty list means user's text is accepted.
  *
- * Word it as "no matches", not "invalid": with the default
- * `allowCustomValue`, an empty list does **not** mean the user's text is
- * rejected — it means nothing was suggested and their own text is the answer.
- *
- * Belongs inside {@link AutocompleteContent} and *outside*
- * {@link AutocompleteList} — a non-option child of a listbox is a broken
- * listbox.
+ * Must be inside `AutocompleteContent` but outside `AutocompleteList` (non-option children break listbox).
  *
  * @example
  * ```tsx

package/dist/autocomplete/AutocompleteGroup.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { AutocompleteGroupContextValue, AutocompleteGroupProps } from './types.cjs';
+export declare const AutocompleteGroupProvider: {
+    (props: AutocompleteGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAutocompleteGroupContext: (consumerName: string) => AutocompleteGroupContextValue;
+/**
+ * Groups related {@link AutocompleteItem}s under an
+ * {@link AutocompleteGroupLabel}. Renders `<div role="group">` labeled via
+ * `aria-labelledby`.
+ *
+ * Automatic wiring (like ListboxGroup/ComboboxGroup, unlike SelectGroup):
+ * suggestion lists reshuffle on every keystroke, so labeled groups clarify
+ * structure better than bare groups.
+ *
+ * Purely structural: doesn't register suggestions or affect highlighting.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroup: React.ForwardRefExoticComponent<Omit<AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/autocomplete/AutocompleteGroup.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { AutocompleteGroupContextValue, AutocompleteGroupProps } from './types.js';
+export declare const AutocompleteGroupProvider: {
+    (props: AutocompleteGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAutocompleteGroupContext: (consumerName: string) => AutocompleteGroupContextValue;
+/**
+ * Groups related {@link AutocompleteItem}s under an
+ * {@link AutocompleteGroupLabel}. Renders `<div role="group">` labeled via
+ * `aria-labelledby`.
+ *
+ * Automatic wiring (like ListboxGroup/ComboboxGroup, unlike SelectGroup):
+ * suggestion lists reshuffle on every keystroke, so labeled groups clarify
+ * structure better than bare groups.
+ *
+ * Purely structural: doesn't register suggestions or affect highlighting.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroup: React.ForwardRefExoticComponent<Omit<AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/autocomplete/AutocompleteGroupLabel.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AutocompleteGroupLabelProps } from './types.cjs';
+/**
+ * The heading naming an {@link AutocompleteGroup}, wired via `aria-labelledby`.
+ * Must be rendered inside an `AutocompleteGroup`.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroupLabel: React.ForwardRefExoticComponent<Omit<AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/autocomplete/AutocompleteGroupLabel.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AutocompleteGroupLabelProps } from './types.js';
+/**
+ * The heading naming an {@link AutocompleteGroup}, wired via `aria-labelledby`.
+ * Must be rendered inside an `AutocompleteGroup`.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroupLabel: React.ForwardRefExoticComponent<Omit<AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/autocomplete/AutocompleteInput.d.cts

@@ -1,27 +1,24 @@
 import * as React from 'react';
 import type { AutocompleteInputProps } from './types.cjs';
 /**
- * The free-text field an {@link Autocomplete} is built around. Keeps real DOM
- * focus for the whole interaction and doubles as the popper anchor the popup
- * positions against. Renders an `<input type="text" role="combobox">` with
- * `aria-expanded`, `aria-controls` pointing at `AutocompleteList`,
- * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
- * virtually-focused suggestion, `autoComplete="off"`, and
- * `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
+ * The free-text field an {@link Autocomplete} is built around. Keeps real DOM focus for the whole interaction
+ * and doubles as the popper anchor the popup positions against. Renders an `<input type="text" role="combobox">`
+ * with `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, `aria-activedescendant`, `autoComplete="off"`.
  *
  * Keyboard, in full:
  *
  * | Key | Effect |
  * | --- | --- |
  * | Arrow Down / Up | opens the popup, or moves the highlight — **DOM focus never moves** |
- * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`) |
+ * | Alt + Arrow Down | opens the popup **without** highlighting anything |
+ * | Alt + Arrow Up | commits the highlighted suggestion and closes |
+ * | Home / End | **while open only**, moves the highlight to the first / last suggestion |
+ * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`), else just closes |
  * | Escape | closes and puts the last committed text back |
  * | Tab | commits the raw text and moves on — the free-text escape hatch |
  *
- * Blur commits the raw text too, which is the behaviour that separates this
- * family from `Combobox`: typing "foo" and clicking elsewhere keeps "foo".
- * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`
- * pointing at it.
+ * Blur commits the raw text too — the behaviour that separates this family from `Combobox`: typing "foo" and
+ * clicking elsewhere keeps "foo". Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
  *
  * @example
  * ```tsx

package/dist/autocomplete/AutocompleteInput.d.ts

@@ -1,27 +1,24 @@
 import * as React from 'react';
 import type { AutocompleteInputProps } from './types.js';
 /**
- * The free-text field an {@link Autocomplete} is built around. Keeps real DOM
- * focus for the whole interaction and doubles as the popper anchor the popup
- * positions against. Renders an `<input type="text" role="combobox">` with
- * `aria-expanded`, `aria-controls` pointing at `AutocompleteList`,
- * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
- * virtually-focused suggestion, `autoComplete="off"`, and
- * `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
+ * The free-text field an {@link Autocomplete} is built around. Keeps real DOM focus for the whole interaction
+ * and doubles as the popper anchor the popup positions against. Renders an `<input type="text" role="combobox">`
+ * with `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, `aria-activedescendant`, `autoComplete="off"`.
  *
  * Keyboard, in full:
  *
  * | Key | Effect |
  * | --- | --- |
  * | Arrow Down / Up | opens the popup, or moves the highlight — **DOM focus never moves** |
- * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`) |
+ * | Alt + Arrow Down | opens the popup **without** highlighting anything |
+ * | Alt + Arrow Up | commits the highlighted suggestion and closes |
+ * | Home / End | **while open only**, moves the highlight to the first / last suggestion |
+ * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`), else just closes |
  * | Escape | closes and puts the last committed text back |
  * | Tab | commits the raw text and moves on — the free-text escape hatch |
  *
- * Blur commits the raw text too, which is the behaviour that separates this
- * family from `Combobox`: typing "foo" and clicking elsewhere keeps "foo".
- * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`
- * pointing at it.
+ * Blur commits the raw text too — the behaviour that separates this family from `Combobox`: typing "foo" and
+ * clicking elsewhere keeps "foo". Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
  *
  * @example
  * ```tsx

package/dist/autocomplete/AutocompleteItem.d.cts

@@ -1,25 +1,7 @@
 import * as React from 'react';
 import type { AutocompleteItemProps } from './types.cjs';
 /**
- * One suggestion inside {@link AutocompleteList}. Renders a
- * `<div role="option">` with `data-value`, `aria-selected` (true only for the
- * suggestion matching the *committed* value), `data-state`
- * (`"checked" | "unchecked"`), `data-highlighted` for virtual focus — the
- * attribute the brand layer styles the "keyboard cursor" from, since real DOM
- * focus stays on the input — and `data-disabled`.
- *
- * Registers itself, and its text, with the root: that is how
- * {@link AutocompleteEmpty} knows the list is empty, how the suggestion-count
- * announcement gets its number, and how Enter knows what the highlighted
- * option commits to. Click commits the suggestion, writes its text into the
- * input, closes the popup and returns focus to the input. Pointer hover moves
- * the highlight onto it.
- *
- * With a `filter` predicate on the root, a rejected item renders **nothing at
- * all** and unregisters itself — it is absent from the DOM rather than hidden,
- * because a hidden option is still reachable through `aria-activedescendant`
- * and would still be counted as a suggestion.
- *
+ * Suggestion inside {@link AutocompleteList} that commits to the input on click.
  * @example
  * ```tsx
  * <AutocompleteItem value="Oslo">Oslo</AutocompleteItem>

package/dist/autocomplete/AutocompleteItem.d.ts

@@ -1,25 +1,7 @@
 import * as React from 'react';
 import type { AutocompleteItemProps } from './types.js';
 /**
- * One suggestion inside {@link AutocompleteList}. Renders a
- * `<div role="option">` with `data-value`, `aria-selected` (true only for the
- * suggestion matching the *committed* value), `data-state`
- * (`"checked" | "unchecked"`), `data-highlighted` for virtual focus — the
- * attribute the brand layer styles the "keyboard cursor" from, since real DOM
- * focus stays on the input — and `data-disabled`.
- *
- * Registers itself, and its text, with the root: that is how
- * {@link AutocompleteEmpty} knows the list is empty, how the suggestion-count
- * announcement gets its number, and how Enter knows what the highlighted
- * option commits to. Click commits the suggestion, writes its text into the
- * input, closes the popup and returns focus to the input. Pointer hover moves
- * the highlight onto it.
- *
- * With a `filter` predicate on the root, a rejected item renders **nothing at
- * all** and unregisters itself — it is absent from the DOM rather than hidden,
- * because a hidden option is still reachable through `aria-activedescendant`
- * and would still be counted as a suggestion.
- *
+ * Suggestion inside {@link AutocompleteList} that commits to the input on click.
  * @example
  * ```tsx
  * <AutocompleteItem value="Oslo">Oslo</AutocompleteItem>