@skdx/vue 0.26.0

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

@@ -0,0 +1,75 @@
+/**
+ * The Vue implementation of the shared Listbox contract (see `@skdx/shared`'s
+ * `listboxContract`): an always-visible list of options with one tab stop,
+ * arrow-key roving focus, typeahead, and single or multiple selection. Renders
+ * a `<div role="listbox">` carrying `aria-multiselectable="true"` while
+ * `multiple`, plus `aria-disabled`, `data-multiple`, and `data-disabled`, and
+ * hands selection down to `SkdxListboxItem` via context.
+ *
+ * This is the selection list without the popup: `SkdxSelect` is this plus a
+ * trigger and a floating layer, `SkdxCombobox` is this plus a text filter and
+ * virtual focus. Reach for `SkdxListbox` when the options should always be on
+ * screen — a transfer/pick-list, a settings panel, a master list beside a
+ * detail pane.
+ *
+ * Focus is real, not virtual: exactly one option carries `tabindex="0"` (the
+ * selected one, else the first enabled one) and the arrows move it, so the list
+ * is one Tab stop from the outside and `document.activeElement` is always the
+ * option a screen reader is announcing.
+ *
+ * `role="listbox"` takes no accessible name from its content and has no trigger
+ * to be named by, so pass `aria-label` or `aria-labelledby` yourself.
+ *
+ * Works controlled (`v-model:value` or `value` + `@value-change`) or
+ * uncontrolled (`default-value`).
+ *
+ * @example
+ * ```vue
+ * <SkdxListbox aria-label="Framework" default-value="react">
+ *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ *   <SkdxListboxItem value="vue">Vue</SkdxListboxItem>
+ * </SkdxListbox>
+ * ```
+ */
+type __VLS_Props = {
+    /** Selected option's value, for controlled usage via `v-model:value`. A `string[]` when `multiple`. */
+    value?: string | string[];
+    /** Initially selected value, for uncontrolled usage. Same shape as `value`. */
+    defaultValue?: string | string[];
+    /**
+     * Allows more than one option to be selected: `value` becomes a `string[]`,
+     * the list gets `aria-multiselectable`, and choosing an option toggles it
+     * instead of replacing the selection. Unlike Select there is nothing to
+     * keep open, so `multiple` changes no focus behaviour.
+     */
+    multiple?: boolean;
+    /**
+     * Disables every option at once, exposed as `aria-disabled`/`data-disabled`
+     * on the list and on each option. An individual `SkdxListboxItem` can still
+     * be disabled on its own; the two OR together.
+     */
+    disabled?: boolean;
+};
+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, {
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string | string[];
+    defaultValue: string | string[];
+    multiple: boolean;
+}, {}, {}, {}, 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/listbox/Listbox.vue.d.ts

@@ -0,0 +1,75 @@
+/**
+ * The Vue implementation of the shared Listbox contract (see `@skdx/shared`'s
+ * `listboxContract`): an always-visible list of options with one tab stop,
+ * arrow-key roving focus, typeahead, and single or multiple selection. Renders
+ * a `<div role="listbox">` carrying `aria-multiselectable="true"` while
+ * `multiple`, plus `aria-disabled`, `data-multiple`, and `data-disabled`, and
+ * hands selection down to `SkdxListboxItem` via context.
+ *
+ * This is the selection list without the popup: `SkdxSelect` is this plus a
+ * trigger and a floating layer, `SkdxCombobox` is this plus a text filter and
+ * virtual focus. Reach for `SkdxListbox` when the options should always be on
+ * screen — a transfer/pick-list, a settings panel, a master list beside a
+ * detail pane.
+ *
+ * Focus is real, not virtual: exactly one option carries `tabindex="0"` (the
+ * selected one, else the first enabled one) and the arrows move it, so the list
+ * is one Tab stop from the outside and `document.activeElement` is always the
+ * option a screen reader is announcing.
+ *
+ * `role="listbox"` takes no accessible name from its content and has no trigger
+ * to be named by, so pass `aria-label` or `aria-labelledby` yourself.
+ *
+ * Works controlled (`v-model:value` or `value` + `@value-change`) or
+ * uncontrolled (`default-value`).
+ *
+ * @example
+ * ```vue
+ * <SkdxListbox aria-label="Framework" default-value="react">
+ *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ *   <SkdxListboxItem value="vue">Vue</SkdxListboxItem>
+ * </SkdxListbox>
+ * ```
+ */
+type __VLS_Props = {
+    /** Selected option's value, for controlled usage via `v-model:value`. A `string[]` when `multiple`. */
+    value?: string | string[];
+    /** Initially selected value, for uncontrolled usage. Same shape as `value`. */
+    defaultValue?: string | string[];
+    /**
+     * Allows more than one option to be selected: `value` becomes a `string[]`,
+     * the list gets `aria-multiselectable`, and choosing an option toggles it
+     * instead of replacing the selection. Unlike Select there is nothing to
+     * keep open, so `multiple` changes no focus behaviour.
+     */
+    multiple?: boolean;
+    /**
+     * Disables every option at once, exposed as `aria-disabled`/`data-disabled`
+     * on the list and on each option. An individual `SkdxListboxItem` can still
+     * be disabled on its own; the two OR together.
+     */
+    disabled?: boolean;
+};
+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, {
+    "update:value": (value: string | string[]) => any;
+    "value-change": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
+    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: string | string[];
+    defaultValue: string | string[];
+    multiple: boolean;
+}, {}, {}, {}, 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/listbox/Listbox.vue.js

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

package/dist/listbox/Listbox.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const f=require("../utils/useRovingFocus.cjs"),p=require("../utils/useSelection.cjs"),m=require("../utils/useTypeahead.cjs"),o=require("./context.cjs");let t=require("vue");var q=["aria-multiselectable","aria-disabled","data-multiple","data-disabled"],R=(0,t.defineComponent)({__name:"Listbox",props:{value:{default:void 0},defaultValue:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(u,{emit:b}){const l=u,s=b,i=(0,t.ref)(null),c=(0,t.ref)(l.defaultValue),y=(0,t.computed)(()=>l.value!==void 0?l.value:c.value),n=(0,t.computed)(()=>p.toValues(y.value)),r=(0,t.ref)(n.value[0]??null);function T(e){return n.value.includes(e)}function _(e){const a=p.nextSelection(n.value,e,l.multiple);l.value===void 0&&(c.value=a),s("update:value",a),s("value-change",a)}function x(e){return Array.from(e.querySelectorAll(o.OPTION_SELECTOR))}function O(e){return e.getAttribute("data-text-value")??e.textContent??""}const h=f.useRovingFocus({orientation:"vertical",loop:!1,itemSelector:o.OPTION_SELECTOR,typeahead:!1}),S=m.useTypeahead();function g(e){if(h(e),e.defaultPrevented||!m.isTypeaheadKey(e))return;const a=i.value;if(!a)return;const d=x(a),v=S(e.key,d.map(O),d.indexOf(e.target));v!==-1&&(e.preventDefault(),d[v].focus())}return f.useRovingTabStop(i,o.OPTION_SELECTOR,"data-value",r),(0,t.provide)(o.LISTBOX_CONTEXT,{isSelected:T,selectItem:_,get disabled(){return l.disabled},activeValue:r,setActiveValue:e=>{r.value=e}}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",ref_key:"rootRef",ref:i,role:"listbox","aria-multiselectable":u.multiple?!0:void 0,"aria-disabled":u.disabled||void 0,"data-multiple":u.multiple?"":void 0,"data-disabled":u.disabled?"":void 0,onKeydown:g},[(0,t.renderSlot)(e.$slots,"default")],40,q))}});exports.default=R;

package/dist/listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useRovingFocus as e,useRovingTabStop as a}from"../utils/useRovingFocus.js";import{nextSelection as t,toValues as l}from"../utils/useSelection.js";import{isTypeaheadKey as o,useTypeahead as u}from"../utils/useTypeahead.js";import{LISTBOX_CONTEXT as i,OPTION_SELECTOR as s}from"./context.js";import{computed as d,createElementBlock as n,defineComponent as r,openBlock as v,provide as c,ref as p,renderSlot as f}from"vue";var m=["aria-multiselectable","aria-disabled","data-multiple","data-disabled"],b=/* @__PURE__ */r({__name:"Listbox",props:{value:{default:void 0},defaultValue:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(r,{emit:b}){const x=r,y=b,S=p(null),T=p(x.defaultValue),g=d(()=>void 0!==x.value?x.value:T.value),h=d(()=>l(g.value)),k=p(h.value[0]??null);function O(e){return e.getAttribute("data-text-value")??e.textContent??""}const B=e({orientation:"vertical",loop:!1,itemSelector:s,typeahead:!1}),R=u();function V(e){if(B(e),e.defaultPrevented||!o(e))return;const a=S.value;if(!a)return;const t=function(e){return Array.from(e.querySelectorAll(s))}(a),l=R(e.key,t.map(O),t.indexOf(e.target));-1!==l&&(e.preventDefault(),t[l].focus())}return a(S,s,"data-value",k),c(i,{isSelected:function(e){return h.value.includes(e)},selectItem:function(e){const a=t(h.value,e,x.multiple);void 0===x.value&&(T.value=a),y("update:value",a),y("value-change",a)},get disabled(){return x.disabled},activeValue:k,setActiveValue:e=>{k.value=e}}),(e,a)=>(v(),n("div",{class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",ref_key:"rootRef",ref:S,role:"listbox","aria-multiselectable":!!r.multiple||void 0,"aria-disabled":r.disabled||void 0,"data-multiple":r.multiple?"":void 0,"data-disabled":r.disabled?"":void 0,onKeydown:V},[f(e.$slots,"default")],40,m))}});export{b as default};

package/dist/listbox/ListboxGroup.vue.cjs

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

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

@@ -0,0 +1,32 @@
+/**
+ * Groups related `SkdxListboxItem`s under an `SkdxListboxLabel`. Renders a
+ * `<div role="group">` whose `aria-labelledby` points at the id it generates
+ * for that label.
+ *
+ * The wiring is automatic here, unlike `SkdxSelectGroup`/`SkdxSelectLabel`, which
+ * are purely presentational: a Select's groups sit inside a popup the user
+ * opened deliberately, whereas a standalone listbox is often one of several on
+ * a page, so an unnamed group leaves a screen reader announcing "group" with
+ * nothing to distinguish it.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxGroup>
+ *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
+ *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ * </SkdxListboxGroup>
+ * ```
+ */
+type __VLS_Props = {};
+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/listbox/ListboxGroup.vue.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Groups related `SkdxListboxItem`s under an `SkdxListboxLabel`. Renders a
+ * `<div role="group">` whose `aria-labelledby` points at the id it generates
+ * for that label.
+ *
+ * The wiring is automatic here, unlike `SkdxSelectGroup`/`SkdxSelectLabel`, which
+ * are purely presentational: a Select's groups sit inside a popup the user
+ * opened deliberately, whereas a standalone listbox is often one of several on
+ * a page, so an unnamed group leaves a screen reader announcing "group" with
+ * nothing to distinguish it.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxGroup>
+ *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
+ *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ * </SkdxListboxGroup>
+ * ```
+ */
+type __VLS_Props = {};
+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/listbox/ListboxGroup.vue.js

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

package/dist/listbox/ListboxGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const t=require("./context.cjs");let e=require("vue");var l=["aria-labelledby"],a=(0,e.defineComponent)({__name:"ListboxGroup",setup(u){const r=t.nextListboxLabelId();return(0,e.provide)(t.LISTBOX_GROUP_CONTEXT,{labelId:r}),(o,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-listbox__group","data-part":"group",role:"group","aria-labelledby":(0,e.unref)(r)},[(0,e.renderSlot)(o.$slots,"default")],8,l))}});exports.default=a;

package/dist/listbox/ListboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{LISTBOX_GROUP_CONTEXT as e,nextListboxLabelId as a}from"./context.js";import{createElementBlock as o,defineComponent as r,openBlock as t,provide as s,renderSlot as l,unref as d}from"vue";var n=["aria-labelledby"],p=/* @__PURE__ */r({__name:"ListboxGroup",setup(r){const p=a();return s(e,{labelId:p}),(e,a)=>(t(),o("div",{class:"skdx-listbox__group","data-part":"group",role:"group","aria-labelledby":d(p)},[l(e.$slots,"default")],8,n))}});export{p as default};

package/dist/listbox/ListboxItem.vue.cjs

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

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

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxItem value="react" text-value="React">
+ *   <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
+ *   React
+ * </SkdxListboxItem>
+ * ```
+ */
+type __VLS_Props = {
+    /** Unique identifier committed to the listbox's value when this option is chosen. */
+    value: string;
+    /**
+     * Excludes this option from selection and from arrow/typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 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.
+     */
+    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<{}>, {
+    disabled: boolean;
+    textValue: string;
+}, {}, {}, {}, 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/listbox/ListboxItem.vue.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxItem value="react" text-value="React">
+ *   <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
+ *   React
+ * </SkdxListboxItem>
+ * ```
+ */
+type __VLS_Props = {
+    /** Unique identifier committed to the listbox's value when this option is chosen. */
+    value: string;
+    /**
+     * Excludes this option from selection and from arrow/typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 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.
+     */
+    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<{}>, {
+    disabled: boolean;
+    textValue: string;
+}, {}, {}, {}, 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/listbox/ListboxItem.vue.js

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

package/dist/listbox/ListboxItem.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +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;

package/dist/listbox/ListboxItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +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};

package/dist/listbox/ListboxItemIndicator.vue.cjs

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

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

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxItem value="react" text-value="React">
+ *   <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
+ *   React
+ * </SkdxListboxItem>
+ * ```
+ */
+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.
+     */
+    forceMount?: boolean;
+};
+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<{}>, {
+    forceMount: boolean;
+}, {}, {}, {}, 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/listbox/ListboxItemIndicator.vue.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxItem value="react" text-value="React">
+ *   <SkdxListboxItemIndicator>✓</SkdxListboxItemIndicator>
+ *   React
+ * </SkdxListboxItem>
+ * ```
+ */
+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.
+     */
+    forceMount?: boolean;
+};
+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<{}>, {
+    forceMount: boolean;
+}, {}, {}, {}, 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/listbox/ListboxItemIndicator.vue.js

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

package/dist/listbox/ListboxItemIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +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;

package/dist/listbox/ListboxItemIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +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};

package/dist/listbox/ListboxLabel.vue.cjs

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

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxGroup>
+ *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
+ *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ * </SkdxListboxGroup>
+ * ```
+ */
+type __VLS_Props = {};
+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/listbox/ListboxLabel.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * @example
+ * ```vue
+ * <SkdxListboxGroup>
+ *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
+ *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ * </SkdxListboxGroup>
+ * ```
+ */
+type __VLS_Props = {};
+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/listbox/ListboxLabel.vue.js

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

package/dist/listbox/ListboxLabel.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +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=_;

package/dist/listbox/ListboxLabel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +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};

package/dist/listbox/context.cjs

@@ -0,0 +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;

package/dist/listbox/context.d.cts

@@ -0,0 +1,32 @@
+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])";
+/** @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. */
+    disabled: boolean;
+    /** The option value holding the list's single tab stop. */
+    activeValue: Readonly<Ref<string | null>>;
+    setActiveValue(value: string): void;
+}
+/** @internal Injection key a Listbox provides so its Item/Group parts share selection and active-value state. */
+export declare const LISTBOX_CONTEXT: InjectionKey<ListboxContext>;
+/** @internal State a ListboxItem provides so its ItemIndicator knows whether to render. */
+export interface ListboxItemContext {
+    selected: boolean;
+}
+/** @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

@@ -0,0 +1,32 @@
+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])";
+/** @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. */
+    disabled: boolean;
+    /** The option value holding the list's single tab stop. */
+    activeValue: Readonly<Ref<string | null>>;
+    setActiveValue(value: string): void;
+}
+/** @internal Injection key a Listbox provides so its Item/Group parts share selection and active-value state. */
+export declare const LISTBOX_CONTEXT: InjectionKey<ListboxContext>;
+/** @internal State a ListboxItem provides so its ItemIndicator knows whether to render. */
+export interface ListboxItemContext {
+    selected: boolean;
+}
+/** @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

@@ -0,0 +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};

package/dist/listbox/index.cjs

@@ -0,0 +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;

package/dist/listbox/index.d.cts

@@ -0,0 +1,5 @@
+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';