@skdx/vue 0.27.0 → 0.29.0

package/dist/listbox/ListboxItem.vue.d.ts

@@ -1,19 +1,9 @@
 /**
- * A single selectable option in an `SkdxListbox`. Renders a
- * `<div role="option">` with `aria-selected`, `data-value`, `data-state`
- * (`"checked"` | `"unchecked"`), `data-disabled`, an optional
- * `data-text-value`, and the roving `tabindex` that makes the whole list one
- * tab stop. Click, Enter, or Space selects it — replacing the selection, or
- * toggling it while the root is `multiple`. Focusing it moves the list's tab
- * stop onto it. Must be used inside `SkdxListbox`.
- *
- * A disabled option is skipped by the arrows and by typeahead, and cannot be
- * selected; it stays in the DOM and keeps `aria-selected`, so it is still
- * announced as part of the list.
+ * Renders a selectable option in SkdxListbox with `role="option"` and roving tabindex.
  *
  * @example
  * ```vue
- * <SkdxListboxItem value="react" text-value="React">
+ * <SkdxListboxItem value="ruby" text-value="Ruby">
  *   <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
  *   React
  * </SkdxListboxItem>
@@ -26,23 +16,29 @@ type __VLS_Props = {
      * Excludes this option from selection and from arrow/typeahead navigation.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    /**
+     * Text typeahead matches against, published as `data-text-value`.
+     * @default undefined
+     */
+    textValue?: string | undefined;
     /**
-     * Text typeahead matches this option against, published as
-     * `data-text-value`. Needed whenever the option renders more than its
-     * label — an `SkdxListboxItemIndicator` glyph, an icon, a secondary line —
-     * since the fallback is the option's whole rendered text content.
-     * @default undefined — falls back to the option's rendered text content.
+     * 1-based position in the full option set, published as `aria-posinset`.
+     * @default undefined
      */
-    textValue?: string;
+    posInSet?: number | undefined;
+    /** Size of the full option set this option belongs to. See `posInSet`. */
+    setSize?: number | undefined;
 };
 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<{}>, {
-    disabled: boolean;
-    textValue: string;
+    disabled: boolean | undefined;
+    textValue: string | undefined;
+    posInSet: number | undefined;
+    setSize: number | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/listbox/ListboxItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("./context.cjs");let e=require("vue");var b=["aria-selected","aria-disabled","data-value","data-text-value","data-state","data-disabled","tabindex"],x=(0,e.defineComponent)({__name:"ListboxItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(u){const t=u,n=(0,e.inject)(s.LISTBOX_CONTEXT);if(!n)throw new Error("SkdxListboxItem must be used within SkdxListbox.");const a=n,l=(0,e.computed)(()=>t.disabled||a.disabled),i=(0,e.computed)(()=>a.isSelected(t.value)),c=(0,e.computed)(()=>l.value?-1:a.activeValue.value===t.value?0:-1);function o(){l.value||a.selectItem(t.value)}function r(){l.value||a.setActiveValue(t.value)}function v(d){d.key!==" "&&d.key!=="Enter"||(d.preventDefault(),o())}return(0,e.provide)(s.LISTBOX_ITEM_CONTEXT,{get selected(){return i.value}}),(d,f)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-listbox__item","data-part":"item",role:"option","aria-selected":i.value,"aria-disabled":l.value||void 0,"data-value":u.value,"data-text-value":u.textValue,"data-state":i.value?"checked":"unchecked","data-disabled":l.value?"":void 0,tabindex:c.value,onClick:o,onFocus:r,onKeydown:v},[(0,e.renderSlot)(d.$slots,"default")],40,b))}});exports.default=x;
+const b=require("../utils/injectRequired.cjs"),s=require("./context.cjs");let t=require("vue");var x=["aria-selected","aria-disabled","data-value","data-text-value","aria-posinset","aria-setsize","data-state","data-disabled","tabindex"],p=(0,t.defineComponent)({__name:"ListboxItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0},posInSet:{default:void 0},setSize:{default:void 0}},setup(u){const l=u,a=b.injectRequired(s.LISTBOX_CONTEXT,"SkdxListboxItem must be used within SkdxListbox."),i=(0,t.computed)(()=>l.disabled||a.disabled),d=(0,t.computed)(()=>a.isSelected(l.value)),r=(0,t.computed)(()=>i.value?-1:a.activeValue.value===l.value?0:-1);function n(e){i.value||a.selectItem(l.value,e)}function c(){i.value||a.setActiveValue(l.value)}function v(e){e.key!==" "&&e.key!=="Enter"||e.key===" "&&e.shiftKey&&a.multiple||(e.preventDefault(),n("keyboard"))}function f(e){a.focusOnHover&&!i.value&&e.currentTarget.focus()}return(0,t.provide)(s.LISTBOX_ITEM_CONTEXT,{get selected(){return d.value}}),(e,o)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-listbox__item","data-part":"item",role:"option","aria-selected":d.value,"aria-disabled":i.value||void 0,"data-value":u.value,"data-text-value":u.textValue,"aria-posinset":u.posInSet,"aria-setsize":u.setSize,"data-state":d.value?"checked":"unchecked","data-disabled":i.value?"":void 0,tabindex:r.value,onClick:o[0]||(o[0]=m=>n("pointer")),onFocus:c,onPointerenter:f,onKeydown:v},[(0,t.renderSlot)(e.$slots,"default")],40,x))}});exports.default=p;

package/dist/listbox/ListboxItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{LISTBOX_CONTEXT as e,LISTBOX_ITEM_CONTEXT as a}from"./context.js";import{computed as t,createElementBlock as l,defineComponent as d,inject as s,openBlock as u,provide as o,renderSlot as i}from"vue";var n=["aria-selected","aria-disabled","data-value","data-text-value","data-state","data-disabled","tabindex"],v=/* @__PURE__ */d({__name:"ListboxItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(d){const v=d,r=s(e);if(!r)throw new Error("SkdxListboxItem must be used within SkdxListbox.");const c=r,x=t(()=>v.disabled||c.disabled),b=t(()=>c.isSelected(v.value)),m=t(()=>x.value?-1:c.activeValue.value===v.value?0:-1);function p(){x.value||c.selectItem(v.value)}function f(){x.value||c.setActiveValue(v.value)}function k(e){" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),p())}return o(a,{get selected(){return b.value}}),(e,a)=>(u(),l("div",{class:"skdx-listbox__item","data-part":"item",role:"option","aria-selected":b.value,"aria-disabled":x.value||void 0,"data-value":d.value,"data-text-value":d.textValue,"data-state":b.value?"checked":"unchecked","data-disabled":x.value?"":void 0,tabindex:m.value,onClick:p,onFocus:f,onKeydown:k},[i(e.$slots,"default")],40,n))}});export{v as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{LISTBOX_CONTEXT as a,LISTBOX_ITEM_CONTEXT as t}from"./context.js";import{computed as i,createElementBlock as s,defineComponent as l,openBlock as d,provide as o,renderSlot as u}from"vue";var n=["aria-selected","aria-disabled","data-value","data-text-value","aria-posinset","aria-setsize","data-state","data-disabled","tabindex"],r=/* @__PURE__ */l({__name:"ListboxItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0},posInSet:{default:void 0},setSize:{default:void 0}},setup(l){const r=l,v=e(a,"SkdxListboxItem must be used within SkdxListbox."),c=i(()=>r.disabled||v.disabled),p=i(()=>v.isSelected(r.value)),f=i(()=>c.value?-1:v.activeValue.value===r.value?0:-1);function m(e){c.value||v.selectItem(r.value,e)}function b(){c.value||v.setActiveValue(r.value)}function x(e){" "!==e.key&&"Enter"!==e.key||" "===e.key&&e.shiftKey&&v.multiple||(e.preventDefault(),m("keyboard"))}function k(e){v.focusOnHover&&!c.value&&e.currentTarget.focus()}return o(t,{get selected(){return p.value}}),(e,a)=>(d(),s("div",{class:"skdx-listbox__item","data-part":"item",role:"option","aria-selected":p.value,"aria-disabled":c.value||void 0,"data-value":l.value,"data-text-value":l.textValue,"aria-posinset":l.posInSet,"aria-setsize":l.setSize,"data-state":p.value?"checked":"unchecked","data-disabled":c.value?"":void 0,tabindex:f.value,onClick:a[0]||(a[0]=e=>m("pointer")),onFocus:b,onPointerenter:k,onKeydown:x},[u(e.$slots,"default")],40,n))}});export{r as default};

package/dist/listbox/ListboxItemIndicator.vue.d.cts

@@ -1,16 +1,9 @@
 /**
- * Marker shown inside an `SkdxListboxItem` while that option is selected
- * (typically a checkmark). Renders a `<span aria-hidden="true">` — the
- * option's `aria-selected` already carries the state, so announcing the glyph
- * too would say it twice; renders nothing while its option isn't selected
- * unless `forceMount` is set. Must be used inside `SkdxListboxItem`.
- *
- * Give the option a `textValue` whenever you render an indicator: typeahead
- * otherwise matches against the option's whole text content, glyph included.
+ * Renders `<span aria-hidden="true">` as a marker while the option is selected, hidden from a11y since `aria-selected` already carries the state.
  *
  * @example
  * ```vue
- * <SkdxListboxItem value="react" text-value="React">
+ * <SkdxListboxItem value="ruby" text-value="Ruby">
  *   <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
  *   React
  * </SkdxListboxItem>
@@ -18,9 +11,8 @@
  */
 type __VLS_Props = {
     /**
-     * Keep this indicator mounted even while its option isn't selected,
-     * instead of rendering nothing.
-     * @default false — renders only while the option is selected.
+     * Keep indicator mounted while option is unselected.
+     * @default false
      */
     forceMount?: boolean;
 };

package/dist/listbox/ListboxItemIndicator.vue.d.ts

@@ -1,16 +1,9 @@
 /**
- * Marker shown inside an `SkdxListboxItem` while that option is selected
- * (typically a checkmark). Renders a `<span aria-hidden="true">` — the
- * option's `aria-selected` already carries the state, so announcing the glyph
- * too would say it twice; renders nothing while its option isn't selected
- * unless `forceMount` is set. Must be used inside `SkdxListboxItem`.
- *
- * Give the option a `textValue` whenever you render an indicator: typeahead
- * otherwise matches against the option's whole text content, glyph included.
+ * Renders `<span aria-hidden="true">` as a marker while the option is selected, hidden from a11y since `aria-selected` already carries the state.
  *
  * @example
  * ```vue
- * <SkdxListboxItem value="react" text-value="React">
+ * <SkdxListboxItem value="ruby" text-value="Ruby">
  *   <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
  *   React
  * </SkdxListboxItem>
@@ -18,9 +11,8 @@
  */
 type __VLS_Props = {
     /**
-     * Keep this indicator mounted even while its option isn't selected,
-     * instead of rendering nothing.
-     * @default false — renders only while the option is selected.
+     * Keep indicator mounted while option is unselected.
+     * @default false
      */
     forceMount?: boolean;
 };

package/dist/listbox/ListboxItemIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const i=require("./context.cjs");let e=require("vue");var a={key:0,class:"skdx-listbox__item-indicator","data-part":"item-indicator","aria-hidden":"true"},s=(0,e.defineComponent)({__name:"ListboxItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(r){const t=(0,e.inject)(i.LISTBOX_ITEM_CONTEXT);if(!t)throw new Error("SkdxListboxItemIndicator must be used within SkdxListboxItem.");const o=t;return(n,c)=>r.forceMount||(0,e.unref)(o).selected?((0,e.openBlock)(),(0,e.createElementBlock)("span",a,[(0,e.renderSlot)(n.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=s;
+const o=require("../utils/injectRequired.cjs"),n=require("./context.cjs");let e=require("vue");var u={key:0,class:"skdx-listbox__item-indicator","data-part":"item-indicator","aria-hidden":"true"},a=(0,e.defineComponent)({__name:"ListboxItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(t){const r=o.injectRequired(n.LISTBOX_ITEM_CONTEXT,"SkdxListboxItemIndicator must be used within SkdxListboxItem.");return(i,d)=>t.forceMount||(0,e.unref)(r).selected?((0,e.openBlock)(),(0,e.createElementBlock)("span",u,[(0,e.renderSlot)(i.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=a;

package/dist/listbox/ListboxItemIndicator.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{LISTBOX_ITEM_CONTEXT as e}from"./context.js";import{createCommentVNode as t,createElementBlock as o,defineComponent as a,inject as r,openBlock as s,renderSlot as n,unref as i}from"vue";var d={key:0,class:"skdx-listbox__item-indicator","data-part":"item-indicator","aria-hidden":"true"},c=/* @__PURE__ */a({__name:"ListboxItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(a){const c=r(e);if(!c)throw new Error("SkdxListboxItemIndicator must be used within SkdxListboxItem.");const m=c;return(e,r)=>a.forceMount||i(m).selected?(s(),o("span",d,[n(e.$slots,"default")])):t("",!0)}});export{c as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{LISTBOX_ITEM_CONTEXT as t}from"./context.js";import{createCommentVNode as o,createElementBlock as a,defineComponent as s,openBlock as r,renderSlot as i,unref as n}from"vue";var d={key:0,class:"skdx-listbox__item-indicator","data-part":"item-indicator","aria-hidden":"true"},m=/* @__PURE__ */s({__name:"ListboxItemIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(s){const m=e(t,"SkdxListboxItemIndicator must be used within SkdxListboxItem.");return(e,t)=>s.forceMount||n(m).selected?(r(),a("span",d,[i(e.$slots,"default")])):o("",!0)}});export{m as default};

package/dist/listbox/ListboxLabel.vue.d.cts

@@ -1,16 +1,10 @@
 /**
- * The heading naming an `SkdxListboxGroup`. Renders a plain `<div>` carrying the
- * id its group points `aria-labelledby` at, so the group is named without the
- * label itself becoming an option.
- *
- * Must be used inside an `SkdxListboxGroup` — a label with no group to name has
- * nothing to attach to.
- *
+ * Renders `<div>` with an id the group references via `aria-labelledby`, naming a `SkdxListboxGroup`.
  * @example
  * ```vue
  * <SkdxListboxGroup>
  *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ *   <SkdxListboxItem value="ruby">Ruby</SkdxListboxItem>
  * </SkdxListboxGroup>
  * ```
  */

package/dist/listbox/ListboxLabel.vue.d.ts

@@ -1,16 +1,10 @@
 /**
- * The heading naming an `SkdxListboxGroup`. Renders a plain `<div>` carrying the
- * id its group points `aria-labelledby` at, so the group is named without the
- * label itself becoming an option.
- *
- * Must be used inside an `SkdxListboxGroup` — a label with no group to name has
- * nothing to attach to.
- *
+ * Renders `<div>` with an id the group references via `aria-labelledby`, naming a `SkdxListboxGroup`.
  * @example
  * ```vue
  * <SkdxListboxGroup>
  *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ *   <SkdxListboxItem value="ruby">Ruby</SkdxListboxItem>
  * </SkdxListboxGroup>
  * ```
  */

package/dist/listbox/ListboxLabel.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const l=require("./context.cjs");let e=require("vue");var s=["id"],_=(0,e.defineComponent)({__name:"ListboxLabel",setup(a){const t=(0,e.inject)(l.LISTBOX_GROUP_CONTEXT);if(!t)throw new Error("SkdxListboxLabel must be used within SkdxListboxGroup.");const r=t;return(o,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-listbox__label","data-part":"label",id:(0,e.unref)(r).labelId},[(0,e.renderSlot)(o.$slots,"default")],8,s))}});exports.default=_;
+const r=require("../utils/menuGroup.cjs");let e=require("vue");var a=["id"],u=(0,e.defineComponent)({__name:"ListboxLabel",setup(_){const t=r.useMenuLabelId();return(l,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{id:(0,e.unref)(t),class:"skdx-listbox__label","data-part":"label"},[(0,e.renderSlot)(l.$slots,"default")],8,a))}});exports.default=u;

package/dist/listbox/ListboxLabel.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{LISTBOX_GROUP_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as s,inject as a,openBlock as o,renderSlot as r,unref as l}from"vue";var n=["id"],i=/* @__PURE__ */s({__name:"ListboxLabel",setup(s){const i=a(e);if(!i)throw new Error("SkdxListboxLabel must be used within SkdxListboxGroup.");const d=i;return(e,s)=>(o(),t("div",{class:"skdx-listbox__label","data-part":"label",id:l(d).labelId},[r(e.$slots,"default")],8,n))}});export{i as default};
+import{useMenuLabelId as e}from"../utils/menuGroup.js";import{createElementBlock as a,defineComponent as s,openBlock as t,renderSlot as l,unref as o}from"vue";var r=["id"],n=/* @__PURE__ */s({__name:"ListboxLabel",setup(s){const n=e();return(e,s)=>(t(),a("div",{id:o(n),class:"skdx-listbox__label","data-part":"label"},[l(e.$slots,"default")],8,r))}});export{n as default};

package/dist/listbox/context.cjs

@@ -1 +1 @@
-const T=require("../utils/id.cjs");var t='[role="option"]:not([data-disabled])',O=Symbol("skdx-listbox-context"),o=Symbol("skdx-listbox-item-context"),e=Symbol("skdx-listbox-group-context");function x(){return T.nextId("listbox-label")}exports.LISTBOX_CONTEXT=O;exports.LISTBOX_GROUP_CONTEXT=e;exports.LISTBOX_ITEM_CONTEXT=o;exports.OPTION_SELECTOR=t;exports.nextListboxLabelId=x;
+var T='[role="option"]:not([data-disabled])',O=Symbol("skdx-listbox-context"),o=Symbol("skdx-listbox-item-context");exports.LISTBOX_CONTEXT=O;exports.LISTBOX_ITEM_CONTEXT=o;exports.OPTION_SELECTOR=T;

package/dist/listbox/context.d.cts

@@ -1,15 +1,42 @@
 import type { InjectionKey, Ref } from 'vue';
 /** @internal Every option that can hold focus. Disabled options are skipped, never focused. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** The payload the `value-change` event carries; `reason` disambiguates which interaction caused it. */
+export interface ListboxValueChangeDetail {
+    /** The whole selection after the change, not the single option that was toggled — see `selectedValue`. */
+    value: string[];
+    /** The selection held before this change, empty when there was none. */
+    previousValue: string[];
+    /** What drove the change. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+    /** The first selected value, or `null` when nothing is selected. */
+    selectedValue: string | null;
+}
+/** One option for the `options` recipe prop. */
+export interface ListboxOption {
+    /** Identifier committed to the listbox's value when this option is chosen. */
+    value: string;
+    /** Label shown for the option. @default undefined — falls back to `value`. */
+    label?: string;
+    /** Excludes this option from selection. @default false */
+    disabled?: boolean;
+}
+/** One labelled group of options for the `options` recipe prop, rendered as an `SkdxListboxGroup`. */
+export interface ListboxOptionGroup {
+    /** Group heading, rendered as the group's `SkdxListboxLabel`. */
+    label: string;
+    /** Options belonging to this group. */
+    options: ListboxOption[];
+}
 /** @internal Shared state a Listbox provides so its parts can read/drive selection and the roving tab stop. */
 export interface ListboxContext {
     /** Whether one option value is currently selected. */
     isSelected(value: string): boolean;
-    /** Commits an option: replaces the selection, or toggles it within it when `multiple`. */
-    selectItem(value: string): void;
-    /** Whether the whole list is disabled, which disables every option in it. */
+    /** `reason` travels with the write, so the emitted detail names the interaction that caused it. */
+    selectItem(value: string, reason: ListboxValueChangeDetail['reason']): void;
+    multiple: boolean;
     disabled: boolean;
-    /** The option value holding the list's single tab stop. */
+    focusOnHover: boolean;
     activeValue: Readonly<Ref<string | null>>;
     setActiveValue(value: string): void;
 }
@@ -21,12 +48,3 @@ export interface ListboxItemContext {
 }
 /** @internal Injection key a ListboxItem provides so its ItemIndicator can read its selected state. */
 export declare const LISTBOX_ITEM_CONTEXT: InjectionKey<ListboxItemContext>;
-/** @internal Wiring passed from a ListboxGroup to its ListboxLabel. */
-export interface ListboxGroupContext {
-    /** The id the group points `aria-labelledby` at, which its Label claims. */
-    labelId: string;
-}
-/** @internal Injection key a ListboxGroup provides so its Label claims the id the group is named by. */
-export declare const LISTBOX_GROUP_CONTEXT: InjectionKey<ListboxGroupContext>;
-/** @internal Generates a unique id for a ListboxGroup's label. */
-export declare function nextListboxLabelId(): string;

package/dist/listbox/context.d.ts

@@ -1,15 +1,42 @@
 import type { InjectionKey, Ref } from 'vue';
 /** @internal Every option that can hold focus. Disabled options are skipped, never focused. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** The payload the `value-change` event carries; `reason` disambiguates which interaction caused it. */
+export interface ListboxValueChangeDetail {
+    /** The whole selection after the change, not the single option that was toggled — see `selectedValue`. */
+    value: string[];
+    /** The selection held before this change, empty when there was none. */
+    previousValue: string[];
+    /** What drove the change. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+    /** The first selected value, or `null` when nothing is selected. */
+    selectedValue: string | null;
+}
+/** One option for the `options` recipe prop. */
+export interface ListboxOption {
+    /** Identifier committed to the listbox's value when this option is chosen. */
+    value: string;
+    /** Label shown for the option. @default undefined — falls back to `value`. */
+    label?: string;
+    /** Excludes this option from selection. @default false */
+    disabled?: boolean;
+}
+/** One labelled group of options for the `options` recipe prop, rendered as an `SkdxListboxGroup`. */
+export interface ListboxOptionGroup {
+    /** Group heading, rendered as the group's `SkdxListboxLabel`. */
+    label: string;
+    /** Options belonging to this group. */
+    options: ListboxOption[];
+}
 /** @internal Shared state a Listbox provides so its parts can read/drive selection and the roving tab stop. */
 export interface ListboxContext {
     /** Whether one option value is currently selected. */
     isSelected(value: string): boolean;
-    /** Commits an option: replaces the selection, or toggles it within it when `multiple`. */
-    selectItem(value: string): void;
-    /** Whether the whole list is disabled, which disables every option in it. */
+    /** `reason` travels with the write, so the emitted detail names the interaction that caused it. */
+    selectItem(value: string, reason: ListboxValueChangeDetail['reason']): void;
+    multiple: boolean;
     disabled: boolean;
-    /** The option value holding the list's single tab stop. */
+    focusOnHover: boolean;
     activeValue: Readonly<Ref<string | null>>;
     setActiveValue(value: string): void;
 }
@@ -21,12 +48,3 @@ export interface ListboxItemContext {
 }
 /** @internal Injection key a ListboxItem provides so its ItemIndicator can read its selected state. */
 export declare const LISTBOX_ITEM_CONTEXT: InjectionKey<ListboxItemContext>;
-/** @internal Wiring passed from a ListboxGroup to its ListboxLabel. */
-export interface ListboxGroupContext {
-    /** The id the group points `aria-labelledby` at, which its Label claims. */
-    labelId: string;
-}
-/** @internal Injection key a ListboxGroup provides so its Label claims the id the group is named by. */
-export declare const LISTBOX_GROUP_CONTEXT: InjectionKey<ListboxGroupContext>;
-/** @internal Generates a unique id for a ListboxGroup's label. */
-export declare function nextListboxLabelId(): string;

package/dist/listbox/context.js

@@ -1 +1 @@
-import{nextId as t}from"../utils/id.js";var o='[role="option"]:not([data-disabled])',s=/* @__PURE__ */Symbol("skdx-listbox-context"),x=/* @__PURE__ */Symbol("skdx-listbox-item-context"),l=/* @__PURE__ */Symbol("skdx-listbox-group-context");function a(){return t("listbox-label")}export{s as LISTBOX_CONTEXT,l as LISTBOX_GROUP_CONTEXT,x as LISTBOX_ITEM_CONTEXT,o as OPTION_SELECTOR,a as nextListboxLabelId};
+var o='[role="option"]:not([data-disabled])',t=/* @__PURE__ */Symbol("skdx-listbox-context"),T=/* @__PURE__ */Symbol("skdx-listbox-item-context");export{t as LISTBOX_CONTEXT,T as LISTBOX_ITEM_CONTEXT,o as OPTION_SELECTOR};

package/dist/listbox/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Listbox.vue.cjs"),t=require("./ListboxItem.vue.cjs"),r=require("./ListboxItemIndicator.vue.cjs"),i=require("./ListboxGroup.vue.cjs"),o=require("./ListboxLabel.vue.cjs");exports.SkdxListbox=e.default;exports.SkdxListboxGroup=i.default;exports.SkdxListboxItem=t.default;exports.SkdxListboxItemIndicator=r.default;exports.SkdxListboxLabel=o.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Listbox.vue.cjs");exports.SkdxListbox=e.default;

package/dist/listbox/index.d.cts

@@ -1,5 +1,2 @@
 export { default as SkdxListbox } from './Listbox.vue.cjs';
-export { default as SkdxListboxItem } from './ListboxItem.vue.cjs';
-export { default as SkdxListboxItemIndicator } from './ListboxItemIndicator.vue.cjs';
-export { default as SkdxListboxGroup } from './ListboxGroup.vue.cjs';
-export { default as SkdxListboxLabel } from './ListboxLabel.vue.cjs';
+export type { ListboxOption, ListboxOptionGroup } from './context.cjs';

package/dist/listbox/index.d.ts

@@ -1,5 +1,2 @@
 export { default as SkdxListbox } from './Listbox.vue.js';
-export { default as SkdxListboxItem } from './ListboxItem.vue.js';
-export { default as SkdxListboxItemIndicator } from './ListboxItemIndicator.vue.js';
-export { default as SkdxListboxGroup } from './ListboxGroup.vue.js';
-export { default as SkdxListboxLabel } from './ListboxLabel.vue.js';
+export type { ListboxOption, ListboxOptionGroup } from './context.js';

package/dist/listbox/index.js

@@ -1 +1 @@
-import o from"./Listbox.vue.js";import t from"./ListboxItem.vue.js";import s from"./ListboxItemIndicator.vue.js";import i from"./ListboxGroup.vue.js";import x from"./ListboxLabel.vue.js";export{o as SkdxListbox,i as SkdxListboxGroup,t as SkdxListboxItem,s as SkdxListboxItemIndicator,x as SkdxListboxLabel};
+import o from"./Listbox.vue.js";export{o as SkdxListbox};

package/dist/listbox/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ListboxLabel.vue.cjs"),t=require("./ListboxGroup.vue.cjs"),r=require("./ListboxItem.vue.cjs"),i=require("./ListboxItemIndicator.vue.cjs"),o=require("./Listbox.vue.cjs");exports.SkdxListbox=o.default;exports.SkdxListboxGroup=t.default;exports.SkdxListboxItem=r.default;exports.SkdxListboxItemIndicator=i.default;exports.SkdxListboxLabel=e.default;

package/dist/listbox/primitives.d.cts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `SkdxListbox` — the parts the recipe composes.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxListbox, SkdxListboxItem, SkdxListboxItemIndicator } from '@skdx/vue/primitives/listbox';
+ * </script>
+ *
+ * <template>
+ *   <SkdxListbox aria-label="Framework" v-model:value="value">
+ *     <SkdxListboxItem value="react">
+ *       React
+ *       <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
+ *     </SkdxListboxItem>
+ *   </SkdxListbox>
+ * </template>
+ * ```
+ */
+export { default as SkdxListbox } from './Listbox.vue.cjs';
+export { default as SkdxListboxGroup } from './ListboxGroup.vue.cjs';
+export { default as SkdxListboxItem } from './ListboxItem.vue.cjs';
+export { default as SkdxListboxItemIndicator } from './ListboxItemIndicator.vue.cjs';
+export { default as SkdxListboxLabel } from './ListboxLabel.vue.cjs';

package/dist/listbox/primitives.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `SkdxListbox` — the parts the recipe composes.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxListbox, SkdxListboxItem, SkdxListboxItemIndicator } from '@skdx/vue/primitives/listbox';
+ * </script>
+ *
+ * <template>
+ *   <SkdxListbox aria-label="Framework" v-model:value="value">
+ *     <SkdxListboxItem value="react">
+ *       React
+ *       <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
+ *     </SkdxListboxItem>
+ *   </SkdxListbox>
+ * </template>
+ * ```
+ */
+export { default as SkdxListbox } from './Listbox.vue.js';
+export { default as SkdxListboxGroup } from './ListboxGroup.vue.js';
+export { default as SkdxListboxItem } from './ListboxItem.vue.js';
+export { default as SkdxListboxItemIndicator } from './ListboxItemIndicator.vue.js';
+export { default as SkdxListboxLabel } from './ListboxLabel.vue.js';

package/dist/listbox/primitives.js

@@ -0,0 +1 @@
+import o from"./ListboxLabel.vue.js";import t from"./ListboxGroup.vue.js";import s from"./ListboxItem.vue.js";import i from"./ListboxItemIndicator.vue.js";import x from"./Listbox.vue.js";export{x as SkdxListbox,t as SkdxListboxGroup,s as SkdxListboxItem,i as SkdxListboxItemIndicator,o as SkdxListboxLabel};

package/dist/loading-overlay/LoadingOverlay.vue.d.cts

@@ -1,90 +1,60 @@
 /**
- * The Vue implementation of the shared LoadingOverlay contract (see
- * `@skdx/shared`'s `loadingOverlayContract`). Wraps the content being
- * covered, owns the visibility (`visible`/`defaultVisible`/`visible-change`)
- * and hands it to `<SkdxLoadingOverlayBackdrop>` and
- * `<SkdxLoadingOverlayContent>` through `provide`. Renders a plain `<div>` —
- * give it `position: relative` and the backdrop covers exactly this box; set
- * `fullScreen` and it covers the viewport instead.
- *
- * While visible the root is `aria-busy="true"` and carries the `inert`
- * attribute, so the pointer and the tab sequence both stop at the overlay
- * rather than walking into the controls it is hiding. Deliberately **not** a
- * focus trap: this is not a dialog, there is nothing inside to focus and
- * nothing to dismiss, so trapping would strand the keyboard on a spinner.
- * Because `inert` also takes the subtree out of the accessibility tree, the
- * announcement is made through the process-wide live region (see
- * `utils/liveAnnouncer`) rather than from the `<SkdxSpinner>` inside — a
- * `role="status"` in an inert subtree announces nothing.
- *
- * `delay` exists for the same reason `SkdxTooltip` has one: a request that
- * resolves in 80ms should never paint a spinner. The timer is cancelled when
- * `visible` flips back to false before it fires, and on unmount.
- *
- * `data-state` is `"visible"`/`"hidden"` and reflects the *effective*
- * visibility, i.e. after `delay`.
+ * Covers content in the default slot with a spinner while work is in flight.
  *
  * @example
  * ```vue
  * <SkdxLoadingOverlay :visible="isFetching" :delay="150" loading-label="Loading invoices">
  *   <InvoiceTable />
- *   <SkdxLoadingOverlayBackdrop />
- *   <SkdxLoadingOverlayContent />
  * </SkdxLoadingOverlay>
  * ```
  */
 type __VLS_Props = {
     /**
-     * Whether work is in flight, for controlled usage. Pair with
-     * `v-model:visible` or `@visible-change`.
-     * @default undefined — uncontrolled, tracks its own visibility internally.
+     * Whether work is in flight, for controlled usage via `v-model:visible`.
+     * @default undefined — uncontrolled, tracks internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
-     * Initial visibility, for uncontrolled usage, seeding the first render.
-     * @default false — the overlay starts hidden and the wrapped content is interactive.
-     */
-    defaultVisible?: boolean;
-    /**
-     * Cover the viewport instead of the root's own box. Emits
-     * `data-full-screen` (style it `position: fixed; inset: 0`) and locks body
-     * scroll while visible — an inline overlay never locks the body, because
-     * freezing the whole page for a spinner over one card is a bug, not a
-     * feature.
-     * @default false — the overlay covers only the root element's box, and never touches body scroll.
+     * Covers the viewport instead of the root's box, emitting `data-full-screen` and locking body scroll while visible.
+     * @default false — the overlay covers only the root element's box.
      */
     fullScreen?: boolean;
     /**
-     * Text announced politely when the overlay becomes visible, and the default
-     * `<SkdxSpinner>` label inside `<SkdxLoadingOverlayContent>`.
-     * @default 'Loading' — announced as "Loading"; name the work ("Loading invoices") when the page has more than one.
+     * Accessible name of the busy region, announced when the overlay becomes visible and used as the derived `SkdxSpinner`'s label.
+     * @default 'Loading' — name the work ("Loading invoices") when multiple overlays exist.
      */
     loadingLabel?: string;
     /**
-     * Milliseconds to wait after `visible` turns true before the overlay
-     * actually appears. A response that arrives inside the window never renders
-     * an overlay at all, which is what stops the flash-of-spinner on fast
-     * requests. The pending timer is cancelled if `visible` flips back to false
-     * first, and on unmount.
-     * @default 0 — shows immediately, so nothing is hidden from a slow connection by accident.
+     * Text announced when the overlay hides; omitted, it clears its own message instead.
+     * @default undefined — hiding announces nothing.
+     */
+    loadedLabel?: string | undefined;
+    /**
+     * Milliseconds to wait after `visible` turns true before the overlay renders, avoiding spinner flash on fast responses.
+     * @default 0 — shows immediately to avoid hiding slow connections.
      */
     delay?: number;
+    /**
+     * How strongly the skin tints the backdrop, applied to the derived Backdrop part.
+     * @default undefined — falls back to a `data-emphasis` attribute.
+     */
+    emphasis?: 'low' | 'medium' | 'high' | (string & {}) | undefined;
 };
-declare var __VLS_1: {};
+declare var __VLS_10: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:visible": (visible: boolean) => any;
     "visible-change": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
-    "onVisible-change"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:visible"?: (visible: boolean) => any;
+    "onVisible-change"?: (visible: boolean) => any;
 }>, {
-    visible: boolean;
-    defaultVisible: boolean;
-    fullScreen: boolean;
+    visible: boolean | undefined;
     loadingLabel: string;
+    emphasis: "low" | "medium" | "high" | (string & {}) | undefined;
+    fullScreen: boolean;
     delay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;