@skdx/vue 0.26.0 → 0.28.0

package/dist/select/SelectItem.vue.cjs

@@ -0,0 +1 @@
+const e=require("./SelectItem.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/select/SelectItem.vue.d.cts

@@ -0,0 +1,32 @@
+/**
+ * One selectable option within SelectContent (role="option"). Captures its slotted
+ * text for SelectValue. Click selects and closes (or toggles in multiple mode). Uses
+ * aria-disabled and data-disabled, not native disabled (inert on role="option").
+ * Not focusable — real DOM focus stays on trigger; this element only publishes virtual focus via data-highlighted.
+ */
+type __VLS_Props = {
+    /** Identifier committed to the root's value when chosen. */
+    value: string;
+    /**
+     * Excludes from selection and keyboard navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text for Trigger label and typeahead, published as data-text-value; falls back to rendered text.
+     * @default undefined — falls back to the option's rendered text content.
+     */
+    textValue?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectItem.vue.d.ts

@@ -0,0 +1,32 @@
+/**
+ * One selectable option within SelectContent (role="option"). Captures its slotted
+ * text for SelectValue. Click selects and closes (or toggles in multiple mode). Uses
+ * aria-disabled and data-disabled, not native disabled (inert on role="option").
+ * Not focusable — real DOM focus stays on trigger; this element only publishes virtual focus via data-highlighted.
+ */
+type __VLS_Props = {
+    /** Identifier committed to the root's value when chosen. */
+    value: string;
+    /**
+     * Excludes from selection and keyboard navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text for Trigger label and typeahead, published as data-text-value; falls back to rendered text.
+     * @default undefined — falls back to the option's rendered text content.
+     */
+    textValue?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/select/SelectItem.vue.js

@@ -0,0 +1 @@
+import e from"./SelectItem.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/select/SelectItem.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const n=require("./context.cjs");let e=require("vue");var f=["id","data-value","aria-selected","data-state","data-highlighted","data-text-value","aria-disabled","data-disabled"],h=(0,e.defineComponent)({__name:"SelectItem",props:{value:{},disabled:{type:Boolean},textValue:{}},setup(d){const a=d,t=(0,e.inject)(n.SELECT_CONTEXT);if(!t)throw new Error("[skdx] SkdxSelectItem must be used within SkdxSelect.");const l=n.nextSelectItemId(),o=(0,e.ref)(null),i=(0,e.computed)(()=>t.isSelected(a.value)),r=(0,e.computed)(()=>t.activeId===l);(0,e.provide)(n.SELECT_ITEM_CONTEXT,{selected:i,disabled:(0,e.computed)(()=>a.disabled??!1)});function c(){t.registerOptionLabel(a.value,a.textValue??o.value?.textContent?.trim()??"")}(0,e.onMounted)(c),(0,e.onUpdated)(c);function s(){a.disabled||(t.selectItem(a.value),t.closeOnSelect&&(t.setOpen(!1),t.focusTrigger()))}function u(){a.disabled||t.setActiveId(l)}return(v,m)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{ref_key:"optionRef",ref:o,class:"skdx-select__item","data-part":"item",role:"option",id:(0,e.unref)(l),"data-value":d.value,"aria-selected":i.value,"data-state":i.value?"checked":"unchecked","data-highlighted":r.value?"":void 0,"data-text-value":d.textValue,"aria-disabled":d.disabled||void 0,"data-disabled":d.disabled?"":void 0,onClick:s,onPointerenter:u},[(0,e.renderSlot)(v.$slots,"default")],40,f))}});exports.default=h;

package/dist/select/SelectItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{SELECT_CONTEXT as e,SELECT_ITEM_CONTEXT as t,nextSelectItemId as a}from"./context.js";import{computed as d,createElementBlock as l,defineComponent as s,inject as i,onMounted as o,onUpdated as n,openBlock as r,provide as c,ref as u,renderSlot as v,unref as p}from"vue";var m=["id","data-value","aria-selected","data-state","data-highlighted","data-text-value","aria-disabled","data-disabled"],f=/* @__PURE__ */s({__name:"SelectItem",props:{value:{},disabled:{type:Boolean},textValue:{}},setup(s){const f=s,b=i(e);if(!b)throw new Error("[skdx] SkdxSelectItem must be used within SkdxSelect.");const x=a(),S=u(null),h=d(()=>b.isSelected(f.value)),k=d(()=>b.activeId===x);function E(){b.registerOptionLabel(f.value,f.textValue??S.value?.textContent?.trim()??"")}function I(){f.disabled||(b.selectItem(f.value),b.closeOnSelect&&(b.setOpen(!1),b.focusTrigger()))}function T(){f.disabled||b.setActiveId(x)}return c(t,{selected:h,disabled:d(()=>f.disabled??!1)}),o(E),n(E),(e,t)=>(r(),l("div",{ref_key:"optionRef",ref:S,class:"skdx-select__item","data-part":"item",role:"option",id:p(x),"data-value":s.value,"aria-selected":h.value,"data-state":h.value?"checked":"unchecked","data-highlighted":k.value?"":void 0,"data-text-value":s.textValue,"aria-disabled":s.disabled||void 0,"data-disabled":s.disabled?"":void 0,onClick:I,onPointerenter:T},[v(e.$slots,"default")],40,m))}});export{f as default};

package/dist/select/SelectItemIndicator.vue.d.cts

@@ -1,16 +1,9 @@
 /**
- * The marker shown inside a `<SkdxSelectOption>` while it is the selected one —
- * a checkmark, typically. Renders an `aria-hidden` `<span>` (the selection is
- * already announced by the option's `aria-selected`), and renders nothing at
- * all while its option is unselected unless `forceMount` is set.
- *
- * Optional: `data-state="checked"` on the option is still the styling hook for
- * consumers who would rather draw the mark in CSS. This part exists for the
- * ones who want a real glyph, and it is what the skin aligns to the end of the
- * row (`margin-inline-start: auto`).
+ * Selected-state glyph inside an Item, rendered only while selected (role="option").
+ * Renders aria-hidden (selection already announced by aria-selected).
  */
 type __VLS_Props = {
-    /** Keeps the marker mounted while unselected, so it can be animated in and out. */
+    /** Mount this indicator even while its item isn't selected, for animation exit transitions. */
     forceMount?: boolean;
 };
 declare var __VLS_1: {};

package/dist/select/SelectItemIndicator.vue.d.ts

@@ -1,16 +1,9 @@
 /**
- * The marker shown inside a `<SkdxSelectOption>` while it is the selected one —
- * a checkmark, typically. Renders an `aria-hidden` `<span>` (the selection is
- * already announced by the option's `aria-selected`), and renders nothing at
- * all while its option is unselected unless `forceMount` is set.
- *
- * Optional: `data-state="checked"` on the option is still the styling hook for
- * consumers who would rather draw the mark in CSS. This part exists for the
- * ones who want a real glyph, and it is what the skin aligns to the end of the
- * row (`margin-inline-start: auto`).
+ * Selected-state glyph inside an Item, rendered only while selected (role="option").
+ * Renders aria-hidden (selection already announced by aria-selected).
  */
 type __VLS_Props = {
-    /** Keeps the marker mounted while unselected, so it can be animated in and out. */
+    /** Mount this indicator even while its item isn't selected, for animation exit transitions. */
     forceMount?: boolean;
 };
 declare var __VLS_1: {};

package/dist/select/SelectItemIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const a=require("./context.cjs");let e=require("vue");var u={key:0,class:"skdx-select__item-indicator","data-part":"item-indicator","aria-hidden":"true"},d=(0,e.defineComponent)({__name:"SelectItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(r){const o=r,t=(0,e.inject)(a.SELECT_OPTION_CONTEXT);if(!t)throw new Error("<SkdxSelectItemIndicator> must be used inside <SkdxSelectOption>.");const n=(0,e.computed)(()=>o.forceMount||t.selected.value);return(c,s)=>n.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",u,[(0,e.renderSlot)(c.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=d;
+const a=require("./context.cjs");let e=require("vue");var u={key:0,class:"skdx-select__item-indicator","data-part":"item-indicator","aria-hidden":"true"},d=(0,e.defineComponent)({__name:"SelectItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(r){const o=r,t=(0,e.inject)(a.SELECT_ITEM_CONTEXT);if(!t)throw new Error("<SkdxSelectItemIndicator> must be used inside <SkdxSelectItem>.");const n=(0,e.computed)(()=>o.forceMount||t.selected.value);return(c,s)=>n.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",u,[(0,e.renderSlot)(c.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=d;

package/dist/select/SelectItemIndicator.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{SELECT_OPTION_CONTEXT as e}from"./context.js";import{computed as t,createCommentVNode as o,createElementBlock as a,defineComponent as r,inject as n,openBlock as s,renderSlot as c}from"vue";var d={key:0,class:"skdx-select__item-indicator","data-part":"item-indicator","aria-hidden":"true"},i=/* @__PURE__ */r({__name:"SelectItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(r){const i=r,l=n(e);if(!l)throw new Error("<SkdxSelectItemIndicator> must be used inside <SkdxSelectOption>.");const m=t(()=>i.forceMount||l.selected.value);return(e,t)=>m.value?(s(),a("span",d,[c(e.$slots,"default")])):o("",!0)}});export{i as default};
+import{SELECT_ITEM_CONTEXT as e}from"./context.js";import{computed as t,createCommentVNode as o,createElementBlock as a,defineComponent as r,inject as s,openBlock as n,renderSlot as c}from"vue";var d={key:0,class:"skdx-select__item-indicator","data-part":"item-indicator","aria-hidden":"true"},i=/* @__PURE__ */r({__name:"SelectItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(r){const i=r,l=s(e);if(!l)throw new Error("<SkdxSelectItemIndicator> must be used inside <SkdxSelectItem>.");const m=t(()=>i.forceMount||l.selected.value);return(e,t)=>m.value?(n(),a("span",d,[c(e.$slots,"default")])):o("",!0)}});export{i as default};

package/dist/select/SelectItemText.vue.d.cts

@@ -1,12 +1,5 @@
 /**
- * The label of a `<SkdxSelectOption>`, as a part of its own.
- *
- * Optional. Slotted text alone is still the option's label — `SelectOption`
- * reads its own `textContent` either way, so wrapping changes nothing about
- * what the trigger displays. What it changes is styling: the skin gives this
- * part the ellipsis treatment (`overflow: hidden; text-overflow: ellipsis`),
- * so an option whose label is longer than the popup truncates instead of
- * forcing the popup wider.
+ * An Item's label content, captured so Value can render it inside Trigger.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/SelectItemText.vue.d.ts

@@ -1,12 +1,5 @@
 /**
- * The label of a `<SkdxSelectOption>`, as a part of its own.
- *
- * Optional. Slotted text alone is still the option's label — `SelectOption`
- * reads its own `textContent` either way, so wrapping changes nothing about
- * what the trigger displays. What it changes is styling: the skin gives this
- * part the ellipsis treatment (`overflow: hidden; text-overflow: ellipsis`),
- * so an option whose label is longer than the popup truncates instead of
- * forcing the popup wider.
+ * An Item's label content, captured so Value can render it inside Trigger.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/SelectLabel.vue.d.cts

@@ -1,6 +1,5 @@
 /**
- * Heading for a {@link SelectGroup}. Purely presentational, with no
- * implicit `aria-labelledby` wiring to the group.
+ * Non-interactive heading for Group, providing its accessible name. Outside a Group it renders but does not name anything.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/SelectLabel.vue.d.ts

@@ -1,6 +1,5 @@
 /**
- * Heading for a {@link SelectGroup}. Purely presentational, with no
- * implicit `aria-labelledby` wiring to the group.
+ * Non-interactive heading for Group, providing its accessible name. Outside a Group it renders but does not name anything.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/SelectLabel.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var l={class:"skdx-select__label","data-part":"label"},a=(0,e.defineComponent)({__name:"SelectLabel",setup(_){return(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",l,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=a;
+const r=require("./context.cjs");let e=require("vue");var _=["id"],a=(0,e.defineComponent)({__name:"SelectLabel",setup(u){const t=(0,e.inject)(r.SELECT_GROUP_CONTEXT,null);return(l,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-select__label","data-part":"label",id:(0,e.unref)(t)?.labelId},[(0,e.renderSlot)(l.$slots,"default")],8,_))}});exports.default=a;

package/dist/select/SelectLabel.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as e,defineComponent as a,openBlock as l,renderSlot as t}from"vue";var s={class:"skdx-select__label","data-part":"label"},o=/* @__PURE__ */a({__name:"SelectLabel",setup:a=>(a,o)=>(l(),e("div",s,[t(a.$slots,"default")]))});export{o as default};
+import{SELECT_GROUP_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as t,inject as l,openBlock as s,renderSlot as o,unref as n}from"vue";var r=["id"],d=/* @__PURE__ */t({__name:"SelectLabel",setup(t){const d=l(e,null);return(e,t)=>(s(),a("div",{class:"skdx-select__label","data-part":"label",id:n(d)?.labelId},[o(e.$slots,"default")],8,r))}});export{d as default};

package/dist/select/SelectSeparator.vue.d.cts

@@ -1,5 +1,5 @@
 /**
- * Visual divider between `SkdxSelectOption`s or `SkdxSelectGroup`s inside
+ * Visual divider between `SkdxSelectItem`s or `SkdxSelectGroup`s inside
  * {@link SelectContent}. Renders an `aria-hidden` `<div>`.
  */
 type __VLS_Props = {};

package/dist/select/SelectSeparator.vue.d.ts

@@ -1,5 +1,5 @@
 /**
- * Visual divider between `SkdxSelectOption`s or `SkdxSelectGroup`s inside
+ * Visual divider between `SkdxSelectItem`s or `SkdxSelectGroup`s inside
  * {@link SelectContent}. Renders an `aria-hidden` `<div>`.
  */
 type __VLS_Props = {};

package/dist/select/SelectTrigger.vue.d.cts

@@ -1,18 +1,8 @@
 /**
- * Opens the {@link SelectContext}'s listbox and displays the current value;
- * also registers itself as the anchor `SkdxSelectContent` positions against.
- * Renders `<button type="button" role="combobox">` with
- * `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`,
- * `aria-required`, `data-state`, `data-disabled`, `data-invalid`,
- * `data-placeholder`, and `data-multiple`. Click, Enter, Space, or Arrow
- * Up/Down opens the listbox.
- *
- * Printable characters run typeahead against the root's option collection
- * *without* opening the listbox, the way a native closed `<select>` behaves —
- * which needs labels the root already knows, so pass `items` on the root if
- * the listbox has never been opened. A `multiple` select opens the listbox
- * instead: changing an unseen selection blind would silently toggle an option
- * the user cannot check.
+ * Combobox trigger; keeps DOM focus throughout interaction. Opens listbox
+ * (unless readOnly), owns keyboard navigation (arrows, Home/End, typeahead,
+ * Enter/Space/Tab to commit). Multiple select: Tab adds, never removes.
+ * Requires `aria-label` or explicit label via `aria-labelledby`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/SelectTrigger.vue.d.ts

@@ -1,18 +1,8 @@
 /**
- * Opens the {@link SelectContext}'s listbox and displays the current value;
- * also registers itself as the anchor `SkdxSelectContent` positions against.
- * Renders `<button type="button" role="combobox">` with
- * `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`,
- * `aria-required`, `data-state`, `data-disabled`, `data-invalid`,
- * `data-placeholder`, and `data-multiple`. Click, Enter, Space, or Arrow
- * Up/Down opens the listbox.
- *
- * Printable characters run typeahead against the root's option collection
- * *without* opening the listbox, the way a native closed `<select>` behaves —
- * which needs labels the root already knows, so pass `items` on the root if
- * the listbox has never been opened. A `multiple` select opens the listbox
- * instead: changing an unseen selection blind would silently toggle an option
- * the user cannot check.
+ * Combobox trigger; keeps DOM focus throughout interaction. Opens listbox
+ * (unless readOnly), owns keyboard navigation (arrows, Home/End, typeahead,
+ * Enter/Space/Tab to commit). Multiple select: Tab adds, never removes.
+ * Requires `aria-label` or explicit label via `aria-labelledby`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/SelectTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("../utils/useTypeahead.cjs"),c=require("./context.cjs");let t=require("vue");var p=["aria-expanded","aria-controls","aria-required","aria-invalid","data-state","data-disabled","data-invalid","data-placeholder","data-multiple","disabled"],f=(0,t.defineComponent)({__name:"SelectTrigger",setup(v){const e=(0,t.inject)(c.SELECT_CONTEXT);if(!e)throw new Error("[skdx] SkdxSelectTrigger must be used within SkdxSelect.");const d=(0,t.ref)(null);(0,t.onMounted)(()=>{e.triggerEl=d.value});const u=o.useTypeahead();function s(r){if(["ArrowDown","ArrowUp"," ","Enter"].includes(r.key)){r.preventDefault(),e.setOpen(!0);return}if(e.open||!o.isTypeaheadKey(r))return;if(r.preventDefault(),e.multiple){e.setOpen(!0);return}const a=e.collection.filter(n=>!n.disabled),i=a.findIndex(n=>e.isSelected(n.value)),l=u(r.key,a.map(n=>n.label??n.value),i);l!==-1&&e.selectItem(a[l].value)}return(r,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("button",{class:"skdx-select__trigger","data-part":"trigger",ref_key:"buttonRef",ref:d,type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":(0,t.unref)(e).open,"aria-controls":(0,t.unref)(e).contentId,"aria-required":(0,t.unref)(e).required||void 0,"aria-invalid":(0,t.unref)(e).invalid?!0:void 0,"data-state":(0,t.unref)(e).open?"open":"closed","data-disabled":(0,t.unref)(e).disabled?"":void 0,"data-invalid":(0,t.unref)(e).invalid?"":void 0,"data-placeholder":(0,t.unref)(e).selectedValues.length===0?"":void 0,"data-multiple":(0,t.unref)(e).multiple?"":void 0,disabled:(0,t.unref)(e).disabled,onClick:a[0]||(a[0]=i=>(0,t.unref)(e).setOpen(!(0,t.unref)(e).open)),onKeydown:s},[(0,t.renderSlot)(r.$slots,"default")],40,p))}});exports.default=f;
+const _=require("../utils/useRovingFocus.cjs"),u=require("../utils/useTypeahead.cjs"),v=require("./context.cjs");let a=require("vue");var x=["aria-expanded","aria-controls","aria-activedescendant","aria-required","aria-invalid","aria-readonly","data-state","data-disabled","data-readonly","data-invalid","data-placeholder","data-multiple","disabled","aria-labelledby"],A=10,D=(0,a.defineComponent)({inheritAttrs:!1,__name:"SelectTrigger",setup(E){const p={ArrowDown:"first",Home:"first",ArrowUp:"last",End:"last",Enter:"selected"," ":"selected"},t=(0,a.inject)(v.SELECT_CONTEXT);if(!t)throw new Error("[skdx] SkdxSelectTrigger must be used within SkdxSelect.");const s=(0,a.useAttrs)(),c=(0,a.ref)(null);(0,a.onMounted)(()=>{t.triggerEl=c.value});const y=u.useTypeahead(),m=u.useTypeahead(),b=(0,a.computed)(()=>{const e=s["aria-labelledby"];return s["aria-label"]!==void 0||!t.hasValuePart?e:[e,t.valueId].filter(Boolean).join(" ")});function k(){return Array.from(t.contentEl?.querySelectorAll('[role="option"]:not([data-disabled])')??[])}function o(e){e&&(t.setActiveId(e.id),e.scrollIntoView?.({block:"nearest"}))}function f(e){const r=e?.getAttribute("data-value");r!=null&&(t.selectItem(r),t.closeOnSelect&&t.setOpen(!1))}function h(e){const r=e?.getAttribute("data-value");r!=null&&(t.multiple&&t.isSelected(r)||t.selectItem(r))}function g(e){const r=k(),n=r.findIndex(i=>i.id===t.activeId);if(e.altKey&&(e.key==="ArrowUp"||e.key==="ArrowDown")){e.preventDefault(),e.key==="ArrowUp"&&(f(r[n]),t.setOpen(!1));return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),r.length===0)return;const i=e.key==="ArrowDown"?1:-1;o(r[Math.min(r.length-1,Math.max(0,n+i))]);return}if(e.key==="PageDown"||e.key==="PageUp"){if(e.preventDefault(),r.length===0)return;const i=e.key==="PageDown"?A:-10;o(r[Math.min(r.length-1,Math.max(0,n+i))]);return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),o(e.key==="Home"?r[0]:r[r.length-1]);return}if(e.key==="Enter"||e.key===" "){e.preventDefault(),f(r[n]);return}if(e.key==="Tab"){h(r[n]),t.setOpen(!1);return}if(!u.isTypeaheadKey(e))return;e.preventDefault();const d=m(e.key,r.map(i=>_.itemText(i)),n);d!==-1&&o(r[d])}function w(e){if(t.open){g(e);return}const r=p[e.key];if(e.altKey&&e.key==="ArrowUp")return;if(r!==void 0){e.preventDefault(),t.openIntent=e.altKey&&e.key==="ArrowDown"?"selected":r,t.setOpen(!0);return}if(!u.isTypeaheadKey(e))return;if(e.preventDefault(),t.multiple){t.setOpen(!0);return}const n=t.collection.filter(l=>!l.disabled),d=n.findIndex(l=>t.isSelected(l.value)),i=y(e.key,n.map(l=>l.label??l.value),d);i!==-1&&t.selectItem(n[i].value)}return(e,r)=>((0,a.openBlock)(),(0,a.createElementBlock)("button",(0,a.mergeProps)({class:"skdx-select__trigger","data-part":"trigger",ref_key:"buttonRef",ref:c,type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":(0,a.unref)(t).open,"aria-controls":(0,a.unref)(t).contentId,"aria-activedescendant":(0,a.unref)(t).activeId??void 0,"aria-required":(0,a.unref)(t).required||void 0,"aria-invalid":(0,a.unref)(t).invalid?!0:void 0,"aria-readonly":(0,a.unref)(t).readOnly?!0:void 0,"data-state":(0,a.unref)(t).open?"open":"closed","data-disabled":(0,a.unref)(t).disabled?"":void 0,"data-readonly":(0,a.unref)(t).readOnly?"":void 0,"data-invalid":(0,a.unref)(t).invalid?"":void 0,"data-placeholder":(0,a.unref)(t).selectedValues.length===0?"":void 0,"data-multiple":(0,a.unref)(t).multiple?"":void 0,disabled:(0,a.unref)(t).disabled},e.$attrs,{"aria-labelledby":b.value,onClick:r[0]||(r[0]=n=>(0,a.unref)(t).setOpen(!(0,a.unref)(t).open)),onKeydown:w}),[(0,a.renderSlot)(e.$slots,"default")],16,x))}});exports.default=D;

package/dist/select/SelectTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{isTypeaheadKey as e,useTypeahead as a}from"../utils/useTypeahead.js";import{SELECT_CONTEXT as t}from"./context.js";import{createElementBlock as d,defineComponent as i,inject as r,onMounted as l,openBlock as o,ref as n,renderSlot as s,unref as u}from"vue";var p=["aria-expanded","aria-controls","aria-required","aria-invalid","data-state","data-disabled","data-invalid","data-placeholder","data-multiple","disabled"],c=/* @__PURE__ */i({__name:"SelectTrigger",setup(i){const c=r(t);if(!c)throw new Error("[skdx] SkdxSelectTrigger must be used within SkdxSelect.");const v=n(null);l(()=>{c.triggerEl=v.value});const f=a();function m(a){if(["ArrowDown","ArrowUp"," ","Enter"].includes(a.key))return a.preventDefault(),void c.setOpen(!0);if(c.open||!e(a))return;if(a.preventDefault(),c.multiple)return void c.setOpen(!0);const t=c.collection.filter(e=>!e.disabled),d=t.findIndex(e=>c.isSelected(e.value)),i=f(a.key,t.map(e=>e.label??e.value),d);-1!==i&&c.selectItem(t[i].value)}return(e,a)=>(o(),d("button",{class:"skdx-select__trigger","data-part":"trigger",ref_key:"buttonRef",ref:v,type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":u(c).open,"aria-controls":u(c).contentId,"aria-required":u(c).required||void 0,"aria-invalid":!!u(c).invalid||void 0,"data-state":u(c).open?"open":"closed","data-disabled":u(c).disabled?"":void 0,"data-invalid":u(c).invalid?"":void 0,"data-placeholder":0===u(c).selectedValues.length?"":void 0,"data-multiple":u(c).multiple?"":void 0,disabled:u(c).disabled,onClick:a[0]||(a[0]=e=>u(c).setOpen(!u(c).open)),onKeydown:m},[s(e.$slots,"default")],40,p))}});export{c as default};
+import{itemText as e}from"../utils/useRovingFocus.js";import{isTypeaheadKey as t,useTypeahead as a}from"../utils/useTypeahead.js";import{SELECT_CONTEXT as r}from"./context.js";import{computed as n,createElementBlock as i,defineComponent as o,inject as l,mergeProps as d,onMounted as s,openBlock as u,ref as c,renderSlot as p,unref as v,useAttrs as f}from"vue";var y=["aria-expanded","aria-controls","aria-activedescendant","aria-required","aria-invalid","aria-readonly","data-state","data-disabled","data-readonly","data-invalid","data-placeholder","data-multiple","disabled","aria-labelledby"],m=/* @__PURE__ */o({inheritAttrs:!1,__name:"SelectTrigger",setup(o){const m={ArrowDown:"first",Home:"first",ArrowUp:"last",End:"last",Enter:"selected"," ":"selected"},k=l(r);if(!k)throw new Error("[skdx] SkdxSelectTrigger must be used within SkdxSelect.");const b=f(),g=c(null);s(()=>{k.triggerEl=g.value});const w=a(),h=a(),A=n(()=>{const e=b["aria-labelledby"];return void 0===b["aria-label"]&&k.hasValuePart?[e,k.valueId].filter(Boolean).join(" "):e});function x(e){e&&(k.setActiveId(e.id),e.scrollIntoView?.({block:"nearest"}))}function D(e){const t=e?.getAttribute("data-value");null!=t&&(k.selectItem(t),k.closeOnSelect&&k.setOpen(!1))}function I(a){if(k.open)return void function(a){const r=Array.from(k.contentEl?.querySelectorAll('[role="option"]:not([data-disabled])')??[]),n=r.findIndex(e=>e.id===k.activeId);if(a.altKey&&("ArrowUp"===a.key||"ArrowDown"===a.key))return a.preventDefault(),void("ArrowUp"===a.key&&(D(r[n]),k.setOpen(!1)));if("ArrowDown"===a.key||"ArrowUp"===a.key){if(a.preventDefault(),0===r.length)return;const e="ArrowDown"===a.key?1:-1;return void x(r[Math.min(r.length-1,Math.max(0,n+e))])}if("PageDown"===a.key||"PageUp"===a.key){if(a.preventDefault(),0===r.length)return;const e="PageDown"===a.key?10:-10;return void x(r[Math.min(r.length-1,Math.max(0,n+e))])}if("Home"===a.key||"End"===a.key)return a.preventDefault(),void x("Home"===a.key?r[0]:r[r.length-1]);if("Enter"===a.key||" "===a.key)return a.preventDefault(),void D(r[n]);if("Tab"===a.key)return function(e){const t=e?.getAttribute("data-value");null!=t&&(k.multiple&&k.isSelected(t)||k.selectItem(t))}(r[n]),void k.setOpen(!1);if(!t(a))return;a.preventDefault();const i=h(a.key,r.map(t=>e(t)),n);-1!==i&&x(r[i])}(a);const r=m[a.key];if(a.altKey&&"ArrowUp"===a.key)return;if(void 0!==r)return a.preventDefault(),k.openIntent=a.altKey&&"ArrowDown"===a.key?"selected":r,void k.setOpen(!0);if(!t(a))return;if(a.preventDefault(),k.multiple)return void k.setOpen(!0);const n=k.collection.filter(e=>!e.disabled),i=n.findIndex(e=>k.isSelected(e.value)),o=w(a.key,n.map(e=>e.label??e.value),i);-1!==o&&k.selectItem(n[o].value)}return(e,t)=>(u(),i("button",d({class:"skdx-select__trigger","data-part":"trigger",ref_key:"buttonRef",ref:g,type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":v(k).open,"aria-controls":v(k).contentId,"aria-activedescendant":v(k).activeId??void 0,"aria-required":v(k).required||void 0,"aria-invalid":!!v(k).invalid||void 0,"aria-readonly":!!v(k).readOnly||void 0,"data-state":v(k).open?"open":"closed","data-disabled":v(k).disabled?"":void 0,"data-readonly":v(k).readOnly?"":void 0,"data-invalid":v(k).invalid?"":void 0,"data-placeholder":0===v(k).selectedValues.length?"":void 0,"data-multiple":v(k).multiple?"":void 0,disabled:v(k).disabled},e.$attrs,{"aria-labelledby":A.value,onClick:t[0]||(t[0]=e=>v(k).setOpen(!v(k).open)),onKeydown:I}),[p(e.$slots,"default")],16,y))}});export{m as default};

package/dist/select/SelectValue.vue.d.cts

@@ -1,15 +1,8 @@
 /**
- * Displays the selected {@link SelectContext} option's label (as registered
- * by its `SkdxSelectOption`, or declared in the root's `items`), or
- * `placeholder` when nothing is selected. Renders a `<span>` with
- * `pointer-events: none` so clicks pass through to the trigger. Provide
- * default slot content to override the auto-derived label entirely.
- *
- * While the root is `multiple`, renders one chip per selected option instead —
- * a `data-chip` span carrying `data-value`, to be styled like a TagsInput tag.
- * The chips are deliberately inert: the trigger is a `<button>`, so a remove
- * button nested inside one would be invalid HTML and unreachable by keyboard.
- * Deselecting happens in the listbox.
+ * Renders the selected option's label or placeholder. Carries the id the trigger's
+ * aria-labelledby points at — role="combobox" takes no accessible name from content,
+ * so an external `<label>` or aria-label is still needed. In multiple mode, renders one
+ * chip per selection; chips are inert, deselecting happens in the listbox.
  */
 type __VLS_Props = {
     /**

package/dist/select/SelectValue.vue.d.ts

@@ -1,15 +1,8 @@
 /**
- * Displays the selected {@link SelectContext} option's label (as registered
- * by its `SkdxSelectOption`, or declared in the root's `items`), or
- * `placeholder` when nothing is selected. Renders a `<span>` with
- * `pointer-events: none` so clicks pass through to the trigger. Provide
- * default slot content to override the auto-derived label entirely.
- *
- * While the root is `multiple`, renders one chip per selected option instead —
- * a `data-chip` span carrying `data-value`, to be styled like a TagsInput tag.
- * The chips are deliberately inert: the trigger is a `<button>`, so a remove
- * button nested inside one would be invalid HTML and unreachable by keyboard.
- * Deselecting happens in the listbox.
+ * Renders the selected option's label or placeholder. Carries the id the trigger's
+ * aria-labelledby points at — role="combobox" takes no accessible name from content,
+ * so an external `<label>` or aria-label is still needed. In multiple mode, renders one
+ * chip per selection; chips are inert, deselecting happens in the listbox.
  */
 type __VLS_Props = {
     /**

package/dist/select/SelectValue.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const u=require("./context.cjs");let e=require("vue");var d=["data-multiple","data-placeholder"],p=["data-value"],i=(0,e.defineComponent)({__name:"SelectValue",props:{placeholder:{}},setup(r){const n=r,t=(0,e.inject)(u.SELECT_CONTEXT);if(!t)throw new Error("[skdx] SkdxSelectValue must be used within SkdxSelect.");const o=(0,e.computed)(()=>{const[l]=t.selectedValues;return l===void 0?n.placeholder:t.getOptionLabel(l)}),c=(0,e.useSlots)(),s=(0,e.computed)(()=>!c.default&&t.selectedValues.length===0);return(l,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-select__value","data-part":"value",style:{"pointer-events":"none"},"data-multiple":(0,e.unref)(t).multiple?"":void 0,"data-placeholder":s.value?"":void 0},[(0,e.renderSlot)(l.$slots,"default",{},()=>[(0,e.unref)(t).multiple&&(0,e.unref)(t).selectedValues.length>0?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)((0,e.unref)(t).selectedValues,a=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:a,"data-chip":"","data-value":a},(0,e.toDisplayString)((0,e.unref)(t).getOptionLabel(a)),9,p))),128)):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:1},[(0,e.createTextVNode)((0,e.toDisplayString)(o.value),1)],64))])],8,d))}});exports.default=i;
+const c=require("./context.cjs");let e=require("vue");var d=["id","data-multiple","data-placeholder"],i=["data-value"],p=(0,e.defineComponent)({__name:"SelectValue",props:{placeholder:{}},setup(r){const n=r,t=(0,e.inject)(c.SELECT_CONTEXT);if(!t)throw new Error("[skdx] SkdxSelectValue must be used within SkdxSelect.");(0,e.onMounted)(()=>t.setHasValuePart(!0)),(0,e.onBeforeUnmount)(()=>t.setHasValuePart(!1));const o=(0,e.computed)(()=>{const[l]=t.selectedValues;return l===void 0?n.placeholder:t.getOptionLabel(l)}),u=(0,e.useSlots)(),s=(0,e.computed)(()=>!u.default&&t.selectedValues.length===0);return(l,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-select__value","data-part":"value",style:{"pointer-events":"none"},id:(0,e.unref)(t).valueId,"data-multiple":(0,e.unref)(t).multiple?"":void 0,"data-placeholder":s.value?"":void 0},[(0,e.renderSlot)(l.$slots,"default",{},()=>[(0,e.unref)(t).multiple&&(0,e.unref)(t).selectedValues.length>0?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)((0,e.unref)(t).selectedValues,a=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:a,"data-chip":"","data-value":a},(0,e.toDisplayString)((0,e.unref)(t).getOptionLabel(a)),9,i))),128)):((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:1},[(0,e.createTextVNode)((0,e.toDisplayString)(o.value),1)],64))])],8,d))}});exports.default=p;

package/dist/select/SelectValue.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{SELECT_CONTEXT as e}from"./context.js";import{Fragment as a,computed as t,createElementBlock as l,createTextVNode as s,defineComponent as o,inject as d,openBlock as n,renderList as r,renderSlot as u,toDisplayString as p,unref as c,useSlots as i}from"vue";var m=["data-multiple","data-placeholder"],v=["data-value"],h=/* @__PURE__ */o({__name:"SelectValue",props:{placeholder:{}},setup(o){const h=o,k=d(e);if(!k)throw new Error("[skdx] SkdxSelectValue must be used within SkdxSelect.");const S=t(()=>{const[e]=k.selectedValues;return void 0===e?h.placeholder:k.getOptionLabel(e)}),f=i(),x=t(()=>!f.default&&0===k.selectedValues.length);return(e,t)=>(n(),l("span",{class:"skdx-select__value","data-part":"value",style:{"pointer-events":"none"},"data-multiple":c(k).multiple?"":void 0,"data-placeholder":x.value?"":void 0},[u(e.$slots,"default",{},()=>[c(k).multiple&&c(k).selectedValues.length>0?(n(!0),l(a,{key:0},r(c(k).selectedValues,e=>(n(),l("span",{key:e,"data-chip":"","data-value":e},p(c(k).getOptionLabel(e)),9,v))),128)):(n(),l(a,{key:1},[s(p(S.value),1)],64))])],8,m))}});export{h as default};
+import{SELECT_CONTEXT as e}from"./context.js";import{Fragment as a,computed as t,createElementBlock as l,createTextVNode as s,defineComponent as o,inject as d,onBeforeUnmount as n,onMounted as r,openBlock as u,renderList as p,renderSlot as c,toDisplayString as i,unref as m,useSlots as v}from"vue";var f=["id","data-multiple","data-placeholder"],h=["data-value"],k=/* @__PURE__ */o({__name:"SelectValue",props:{placeholder:{}},setup(o){const k=o,S=d(e);if(!S)throw new Error("[skdx] SkdxSelectValue must be used within SkdxSelect.");r(()=>S.setHasValuePart(!0)),n(()=>S.setHasValuePart(!1));const V=t(()=>{const[e]=S.selectedValues;return void 0===e?k.placeholder:S.getOptionLabel(e)}),x=v(),g=t(()=>!x.default&&0===S.selectedValues.length);return(e,t)=>(u(),l("span",{class:"skdx-select__value","data-part":"value",style:{"pointer-events":"none"},id:m(S).valueId,"data-multiple":m(S).multiple?"":void 0,"data-placeholder":g.value?"":void 0},[c(e.$slots,"default",{},()=>[m(S).multiple&&m(S).selectedValues.length>0?(u(!0),l(a,{key:0},p(m(S).selectedValues,e=>(u(),l("span",{key:e,"data-chip":"","data-value":e},i(m(S).getOptionLabel(e)),9,h))),128)):(u(),l(a,{key:1},[s(i(V.value),1)],64))])],8,f))}});export{k as default};

package/dist/select/SelectViewport.vue.d.cts

@@ -1,11 +1,5 @@
 /**
- * Scrollable container for the options inside `<SkdxSelectContent>`. Renders a
- * plain `<div>` with `overflow: auto`.
- *
- * Optional — a `<SkdxSelectContent>` with options directly inside it works, and
- * `SelectContent` scrolls on its own. It exists because the skin gives the
- * viewport its own inset (`.skdx-select__viewport`), so a listbox without one
- * sits a step tighter against its border than the same listbox in React.
+ * Scrollable container for Items inside Content.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/SelectViewport.vue.d.ts

@@ -1,11 +1,5 @@
 /**
- * Scrollable container for the options inside `<SkdxSelectContent>`. Renders a
- * plain `<div>` with `overflow: auto`.
- *
- * Optional — a `<SkdxSelectContent>` with options directly inside it works, and
- * `SelectContent` scrolls on its own. It exists because the skin gives the
- * viewport its own inset (`.skdx-select__viewport`), so a listbox without one
- * sits a step tighter against its border than the same listbox in React.
+ * Scrollable container for Items inside Content.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/select/context.cjs

@@ -1 +1 @@
-const e=require("../utils/id.cjs");var t=Symbol("skdx-select-context");function n(){return e.nextId("select-content")}var T=Symbol("skdx-select-option-context");exports.SELECT_CONTEXT=t;exports.SELECT_OPTION_CONTEXT=T;exports.nextSelectContentId=n;
+const e=require("../utils/id.cjs");var l='[role="option"]:not([data-disabled])';function o(n){if(n)return n.flatMap(t=>"options"in t?t.options:[t])}var c=Symbol("skdx-select-context");function E(){return e.nextId("select-content")}function T(){return e.nextId("select-value")}function r(){return e.nextId("select-item")}function S(){return e.nextId("select-group-label")}var d=Symbol("skdx-select-group-context"),u=Symbol("skdx-select-item-context");exports.OPTION_SELECTOR=l;exports.SELECT_CONTEXT=c;exports.SELECT_GROUP_CONTEXT=d;exports.SELECT_ITEM_CONTEXT=u;exports.flattenSelectOptions=o;exports.nextSelectContentId=E;exports.nextSelectGroupLabelId=S;exports.nextSelectItemId=r;exports.nextSelectValueId=T;

package/dist/select/context.d.cts

@@ -1,61 +1,107 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/**
- * One entry of a Select's `items` collection: everything the root needs to
- * know about an option *before* that option has ever been rendered.
- */
+import type { AutoFocusEvent } from '../utils/useFocusTrap.cjs';
+/** @internal Selector for enabled options, needed by trigger and content. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** One option in the select collection, available before render. */
 export interface SelectItemDescriptor {
-    /** Identifier committed to the root's value when this option is chosen. */
+    /** The value committed when this option is chosen. */
     value: string;
     /**
-     * Text shown by `SkdxSelectValue` and matched by trigger typeahead. A mounted
-     * `SkdxSelectOption` overrides it.
+     * Typeahead and default label text.
      * @default undefined — falls back to `value`.
      */
     label?: string;
     /**
-     * Excludes this option from trigger typeahead. The rendered option's own
-     * `disabled` is what excludes it from selection.
+     * Hides from typeahead only; rendered disabled options are unselectable.
      * @default false
      */
     disabled?: boolean;
 }
-/** @internal Injection key a Select provides so its parts can read/drive shared state. */
+/** Group of options under a `SkdxSelectLabel` heading. */
+export interface SelectOptionGroup {
+    /** Rendered as the group's `SkdxSelectLabel`. */
+    label: string;
+    /** Options in this group. */
+    options: SelectItemDescriptor[];
+}
+/** Flattens grouped options to flat shape for root fallback. */
+export declare function flattenSelectOptions(options: SelectItemDescriptor[] | SelectOptionGroup[] | undefined): SelectItemDescriptor[] | undefined;
+/**
+ * @internal Where to place active option on open: selected, first, or last.
+ */
+export type SelectOpenIntent = 'selected' | 'first' | 'last';
+/** @internal Shared state for a Select and its parts. */
 export interface SelectContext {
     open: boolean;
-    /** The raw selected value — a `string[]` when `multiple`, a `string` otherwise. */
-    value: string | string[] | undefined;
-    /** Whether more than one option can be selected. */
+    /** Multi-select mode. */
     multiple: boolean;
-    /** Every selected value, normalised to an array whether or not `multiple`. */
+    /** Whether selecting an option closes the listbox. */
+    closeOnSelect: boolean;
+    /** All selected values. */
     selectedValues: string[];
-    /** Every option the root knows about without opening the listbox — the trigger-typeahead pool. */
+    /** Options known before listbox renders (trigger typeahead pool). */
     collection: SelectItemDescriptor[];
     disabled: boolean;
+    /**
+     * Selection is readonly: trigger stays focusable and submits, but neither
+     * `setOpen(true)` nor `selectItem` has effect.
+     */
+    readOnly: boolean;
     required: boolean;
     invalid: boolean;
     contentId: string;
+    /** Id of the `SkdxSelectValue` part, named by trigger's `aria-labelledby`. */
+    valueId: string;
+    /** Whether a `SkdxSelectValue` is mounted (for aria-labelledby wiring). */
+    hasValuePart: boolean;
+    /** Virtual focus id, published as aria-activedescendant. */
+    activeId: string | null;
+    /** Next open intent: selected, first, or last. */
+    openIntent: SelectOpenIntent;
     triggerEl: HTMLElement | null;
-    /** Set by `SkdxSelectContent` once its listbox mounts — the element whose motion times `open-change-complete`. */
+    /** Mounted listbox element for close-change-complete timing. */
     contentEl: HTMLElement | null;
     setOpen(open: boolean): void;
-    /** Whether one option value is currently selected. */
+    /** Move virtual focus or clear with null. */
+    setActiveId(id: string | null): void;
+    /** Report whether SkdxSelectValue is mounted. */
+    setHasValuePart(present: boolean): void;
+    /** Check if a value is selected. */
     isSelected(value: string): boolean;
-    /** Commits an option: replaces the selection, or toggles it within it when `multiple`. */
+    /** Replace or toggle selection. */
     selectItem(value: string): void;
     registerOptionLabel(value: string, label: string): void;
-    /** Label for a value: a registered option's text wins, then `items`, then the value itself. */
+    /** Get label: registered text, items entry, or value itself. */
     getOptionLabel(value: string): string;
+    /** Return focus to trigger (Escape, commit). */
     focusTrigger(): void;
+    /** Close-auto-focus emitter for trigger restoration. */
+    closeAutoFocus: {
+        current: ((event: AutoFocusEvent) => void) | undefined;
+    };
 }
-/** @internal Injection key a Select provides so its Trigger/Content/Option parts share open and value state. */
+/** @internal Injection key for Select shared state. */
 export declare const SELECT_CONTEXT: InjectionKey<SelectContext>;
-/** @internal Generates a unique id for a Select's listbox content. */
+/** @internal Unique id for listbox content element. */
 export declare function nextSelectContentId(): string;
-/** @internal What an option provides so its text/indicator parts can read its own state. */
-export interface SelectOptionContext {
-    /** Whether this option is the (or one of the) selected value(s). */
+/** @internal Unique id for Value part (named by trigger aria-labelledby). */
+export declare function nextSelectValueId(): string;
+/** @internal Unique, stable id for SkdxSelectItem (named by aria-activedescendant). */
+export declare function nextSelectItemId(): string;
+/** @internal Unique id for group label (claimed by SkdxSelectLabel). */
+export declare function nextSelectGroupLabelId(): string;
+/** @internal Group context for label id wiring. */
+export interface SelectGroupContext {
+    /** Id that group's aria-labelledby names. */
+    labelId: string;
+}
+/** @internal Injection key for group label id. */
+export declare const SELECT_GROUP_CONTEXT: InjectionKey<SelectGroupContext>;
+/** @internal Option state for indicator rendering. */
+export interface SelectItemContext {
+    /** Whether this option is selected. */
     selected: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
 }
-/** @internal Injection key an option provides so `<SkdxSelectItemIndicator>` knows when to render. */
-export declare const SELECT_OPTION_CONTEXT: InjectionKey<SelectOptionContext>;
+/** @internal Injection key for option state. */
+export declare const SELECT_ITEM_CONTEXT: InjectionKey<SelectItemContext>;