@skdx/vue 0.28.0 → 0.29.0

package/dist/list/ListTerm.vue.d.ts

@@ -0,0 +1,14 @@
+/** The term half of a pair, rendered as a `<dt>` the following `<dd>` describes. */
+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/list/ListTerm.vue.js

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

package/dist/list/ListTerm.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var r={class:"skdx-list__term","data-part":"term"},_=(0,e.defineComponent)({__name:"ListTerm",setup(a){return(t,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("dt",r,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=_;

package/dist/list/ListTerm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as e,defineComponent as t,openBlock as a,renderSlot as s}from"vue";var r={class:"skdx-list__term","data-part":"term"},o=/* @__PURE__ */t({__name:"ListTerm",setup:t=>(t,o)=>(a(),e("dt",r,[s(t.$slots,"default")]))});export{o as default};

package/dist/list/context.d.cts

@@ -1,7 +1,18 @@
-import type { InjectionKey, Slots } from 'vue';
+import type { ComputedRef, InjectionKey, Slots } from 'vue';
+/** Layout axis a `dl` List reads its label/value pairs along. */
+export type ListOrientation = 'horizontal' | 'vertical';
+/** One label/value pair a `dl` List renders from `items`. */
+export interface ListEntry {
+    /** The term, rendered as the pair's `<dt>`. */
+    label: string;
+    /** The description, rendered as the `<dd>` that follows it. */
+    value: string;
+}
 /** @internal Injection key a List provides so its ListItems can inherit a default marker icon. */
 export interface ListContextValue {
     slots: Slots;
+    /** The element the root rendered, which decides whether an Item is an `<li>` or a pair wrapper. */
+    as: ComputedRef<'ul' | 'ol' | 'dl'>;
 }
-/** @internal Injection key a List provides so its parts can read its slots. Not part of the public API. */
+/** @internal Injection key a List provides so its parts can read its slots. */
 export declare const LIST_CONTEXT: InjectionKey<ListContextValue>;

package/dist/list/context.d.ts

@@ -1,7 +1,18 @@
-import type { InjectionKey, Slots } from 'vue';
+import type { ComputedRef, InjectionKey, Slots } from 'vue';
+/** Layout axis a `dl` List reads its label/value pairs along. */
+export type ListOrientation = 'horizontal' | 'vertical';
+/** One label/value pair a `dl` List renders from `items`. */
+export interface ListEntry {
+    /** The term, rendered as the pair's `<dt>`. */
+    label: string;
+    /** The description, rendered as the `<dd>` that follows it. */
+    value: string;
+}
 /** @internal Injection key a List provides so its ListItems can inherit a default marker icon. */
 export interface ListContextValue {
     slots: Slots;
+    /** The element the root rendered, which decides whether an Item is an `<li>` or a pair wrapper. */
+    as: ComputedRef<'ul' | 'ol' | 'dl'>;
 }
-/** @internal Injection key a List provides so its parts can read its slots. Not part of the public API. */
+/** @internal Injection key a List provides so its parts can read its slots. */
 export declare const LIST_CONTEXT: InjectionKey<ListContextValue>;

package/dist/list/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./List.vue.cjs"),t=require("./ListItem.vue.cjs");exports.SkdxList=e.default;exports.SkdxListItem=t.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ListDescription.vue.cjs"),t=require("./ListItem.vue.cjs"),r=require("./ListTerm.vue.cjs"),i=require("./List.vue.cjs");exports.SkdxList=i.default;exports.SkdxListDescription=e.default;exports.SkdxListItem=t.default;exports.SkdxListTerm=r.default;

package/dist/list/index.d.cts

@@ -1,2 +1,5 @@
 export { default as SkdxList } from './List.vue.cjs';
 export { default as SkdxListItem } from './ListItem.vue.cjs';
+export { default as SkdxListTerm } from './ListTerm.vue.cjs';
+export { default as SkdxListDescription } from './ListDescription.vue.cjs';
+export type { ListEntry, ListOrientation } from './context.cjs';

package/dist/list/index.d.ts

@@ -1,2 +1,5 @@
 export { default as SkdxList } from './List.vue.js';
 export { default as SkdxListItem } from './ListItem.vue.js';
+export { default as SkdxListTerm } from './ListTerm.vue.js';
+export { default as SkdxListDescription } from './ListDescription.vue.js';
+export type { ListEntry, ListOrientation } from './context.js';

package/dist/list/index.js

@@ -1 +1 @@
-import t from"./List.vue.js";import s from"./ListItem.vue.js";export{t as SkdxList,s as SkdxListItem};
+import s from"./ListDescription.vue.js";import t from"./ListItem.vue.js";import i from"./ListTerm.vue.js";import r from"./List.vue.js";export{r as SkdxList,s as SkdxListDescription,t as SkdxListItem,i as SkdxListTerm};

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

@@ -1,94 +1,74 @@
 import { type ListboxOption, type ListboxOptionGroup, type ListboxValueChangeDetail } from './context.cjs';
 /**
- * Selection list with roving focus, typeahead, and keyboard navigation.
- * Requires `aria-label` or `aria-labelledby`. Works controlled or uncontrolled.
+ * Renders a selection list with roving focus, typeahead, and keyboard navigation, controlled or uncontrolled.
  *
  * @example
  * ```vue
  * <SkdxListbox aria-label="Framework" default-value="react" :options="[{ value: 'react' }]" />
  * ```
- *
- * @example Primitive composition
- * ```vue
- * <SkdxListbox aria-label="Framework" default-value="react">
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
- *   <SkdxListboxItem value="vue">Vue</SkdxListboxItem>
- * </SkdxListbox>
- * ```
  */
 type __VLS_Props = {
-    /**
-     * Selected value (controlled); string or array. Single-select with multiple
-     * values errors in dev, takes first value otherwise.
-     */
-    value?: string | string[];
-    /** Initially selected value, for uncontrolled usage. Same lenient shape as `value`. */
-    defaultValue?: string | string[];
+    /** Selected value (controlled); a string, or a string array when `multiple`. */
+    value?: string | string[] | undefined;
+    /** Initially selected value, for uncontrolled usage, with the same lenient shape as `value`. */
+    defaultValue?: string | string[] | undefined;
     /**
      * The option collection to render — flat, or grouped via `{ label, options }`.
-     * Ignored once the default slot holds its own parts. Override one
-     * option's rendering with the `option` scoped slot.
      * @default undefined — the default slot must supply the options itself.
      */
-    options?: ListboxOption[] | ListboxOptionGroup[];
+    options?: ListboxOption[] | ListboxOptionGroup[] | undefined;
     /**
      * 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.
      */
     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.
-     */
+    /** Disables every option at once, exposed as `aria-disabled`/`data-disabled` on the list and on each option. */
     disabled?: boolean;
-    /**
-     * Whether Control+A (Command+A) selects every enabled option while
-     * `multiple`, clearing it once everything is already selected. On by
-     * default; turn off where Control+A should stay "select all text"
-     * instead. Inert while single-select.
-     */
+    /** Whether Control+A (Command+A) selects every enabled option while `multiple`, clearing it once all are selected. */
     allowSelectAll?: boolean;
+    /** Layout axis of the option list, reflected as `aria-orientation`/`data-orientation` and controlling the arrow-key pair. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether pointer movement moves roving focus; off by default since it would steal focus from other page elements. */
+    focusOnHover?: boolean;
+    /** Whether the last remaining selected option refuses to be deselected; only reachable while `multiple`. */
+    disallowEmptySelection?: boolean;
     /**
-     * Layout axis of the option list. Reflected as
-     * `aria-orientation`/`data-orientation`, and picks the arrow-key pair:
-     * `vertical` roves ArrowDown/ArrowUp, `horizontal` ArrowRight/ArrowLeft.
+     * How tightly the skin packs the listbox's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
      */
-    orientation?: 'horizontal' | 'vertical';
+    density?: 'compact' | (string & {}) | undefined;
     /**
-     * Whether pointer movement moves roving focus; off by default since real DOM
-     * focus would steal from other page elements. Never focuses disabled options.
+     * Outline the skin gives the listbox, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
      */
-    focusOnHover?: boolean;
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
     /**
-     * Whether the last remaining selected option refuses to be deselected.
-     * Only reachable while `multiple` — single-select has no deselect
-     * gesture, since choosing an option replaces the selection.
+     * Size rung the skin renders the listbox at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
      */
-    disallowEmptySelection?: boolean;
-};
-declare var __VLS_1: {}, __VLS_6: {
-    option: ListboxOption;
-    selected: boolean;
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    option?: (props: typeof __VLS_6) => any;
+type __VLS_Slots = {
+    /** Manual composition of groups and options, replacing the derived `options` anatomy. */
+    default?(): unknown;
+    /** Body of a derived option row, for markup its `label` string cannot express. */
+    option?(props: {
+        option: ListboxOption;
+        selected: boolean;
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string[]) => any;
     "value-change": (detail: ListboxValueChangeDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((detail: ListboxValueChangeDetail) => any) | undefined;
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (detail: ListboxValueChangeDetail) => any;
 }>, {
     disabled: boolean;
-    value: string | string[];
-    defaultValue: string | string[];
+    defaultValue: string | string[] | undefined;
     multiple: boolean;
-    options: ListboxOption[] | ListboxOptionGroup[];
+    value: string | string[] | undefined;
     orientation: "horizontal" | "vertical";
     allowSelectAll: boolean;
     focusOnHover: boolean;

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

@@ -1,94 +1,74 @@
 import { type ListboxOption, type ListboxOptionGroup, type ListboxValueChangeDetail } from './context.js';
 /**
- * Selection list with roving focus, typeahead, and keyboard navigation.
- * Requires `aria-label` or `aria-labelledby`. Works controlled or uncontrolled.
+ * Renders a selection list with roving focus, typeahead, and keyboard navigation, controlled or uncontrolled.
  *
  * @example
  * ```vue
  * <SkdxListbox aria-label="Framework" default-value="react" :options="[{ value: 'react' }]" />
  * ```
- *
- * @example Primitive composition
- * ```vue
- * <SkdxListbox aria-label="Framework" default-value="react">
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
- *   <SkdxListboxItem value="vue">Vue</SkdxListboxItem>
- * </SkdxListbox>
- * ```
  */
 type __VLS_Props = {
-    /**
-     * Selected value (controlled); string or array. Single-select with multiple
-     * values errors in dev, takes first value otherwise.
-     */
-    value?: string | string[];
-    /** Initially selected value, for uncontrolled usage. Same lenient shape as `value`. */
-    defaultValue?: string | string[];
+    /** Selected value (controlled); a string, or a string array when `multiple`. */
+    value?: string | string[] | undefined;
+    /** Initially selected value, for uncontrolled usage, with the same lenient shape as `value`. */
+    defaultValue?: string | string[] | undefined;
     /**
      * The option collection to render — flat, or grouped via `{ label, options }`.
-     * Ignored once the default slot holds its own parts. Override one
-     * option's rendering with the `option` scoped slot.
      * @default undefined — the default slot must supply the options itself.
      */
-    options?: ListboxOption[] | ListboxOptionGroup[];
+    options?: ListboxOption[] | ListboxOptionGroup[] | undefined;
     /**
      * 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.
      */
     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.
-     */
+    /** Disables every option at once, exposed as `aria-disabled`/`data-disabled` on the list and on each option. */
     disabled?: boolean;
-    /**
-     * Whether Control+A (Command+A) selects every enabled option while
-     * `multiple`, clearing it once everything is already selected. On by
-     * default; turn off where Control+A should stay "select all text"
-     * instead. Inert while single-select.
-     */
+    /** Whether Control+A (Command+A) selects every enabled option while `multiple`, clearing it once all are selected. */
     allowSelectAll?: boolean;
+    /** Layout axis of the option list, reflected as `aria-orientation`/`data-orientation` and controlling the arrow-key pair. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether pointer movement moves roving focus; off by default since it would steal focus from other page elements. */
+    focusOnHover?: boolean;
+    /** Whether the last remaining selected option refuses to be deselected; only reachable while `multiple`. */
+    disallowEmptySelection?: boolean;
     /**
-     * Layout axis of the option list. Reflected as
-     * `aria-orientation`/`data-orientation`, and picks the arrow-key pair:
-     * `vertical` roves ArrowDown/ArrowUp, `horizontal` ArrowRight/ArrowLeft.
+     * How tightly the skin packs the listbox's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
      */
-    orientation?: 'horizontal' | 'vertical';
+    density?: 'compact' | (string & {}) | undefined;
     /**
-     * Whether pointer movement moves roving focus; off by default since real DOM
-     * focus would steal from other page elements. Never focuses disabled options.
+     * Outline the skin gives the listbox, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
      */
-    focusOnHover?: boolean;
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
     /**
-     * Whether the last remaining selected option refuses to be deselected.
-     * Only reachable while `multiple` — single-select has no deselect
-     * gesture, since choosing an option replaces the selection.
+     * Size rung the skin renders the listbox at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
      */
-    disallowEmptySelection?: boolean;
-};
-declare var __VLS_1: {}, __VLS_6: {
-    option: ListboxOption;
-    selected: boolean;
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    option?: (props: typeof __VLS_6) => any;
+type __VLS_Slots = {
+    /** Manual composition of groups and options, replacing the derived `options` anatomy. */
+    default?(): unknown;
+    /** Body of a derived option row, for markup its `label` string cannot express. */
+    option?(props: {
+        option: ListboxOption;
+        selected: boolean;
+    }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string[]) => any;
     "value-change": (detail: ListboxValueChangeDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((detail: ListboxValueChangeDetail) => any) | undefined;
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (detail: ListboxValueChangeDetail) => any;
 }>, {
     disabled: boolean;
-    value: string | string[];
-    defaultValue: string | string[];
+    defaultValue: string | string[] | undefined;
     multiple: boolean;
-    options: ListboxOption[] | ListboxOptionGroup[];
+    value: string | string[] | undefined;
     orientation: "horizontal" | "vertical";
     allowSelectAll: boolean;
     focusOnHover: boolean;

package/dist/listbox/Listbox.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const w=require("../utils/useRovingFocus.cjs"),p=require("../utils/useSelection.cjs"),A=require("../utils/useTypeahead.cjs"),v=require("./context.cjs"),C=require("./ListboxAnatomy.vue.cjs");let a=require("vue");var H=["aria-multiselectable","aria-disabled","aria-orientation","data-multiple","data-disabled","data-orientation"],N=10,M=(0,a.defineComponent)({__name:"Listbox",props:{value:{default:void 0},defaultValue:{default:void 0},options:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowSelectAll:{type:Boolean,default:!0},orientation:{default:"vertical"},focusOnHover:{type:Boolean,default:!1},disallowEmptySelection:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(s,{emit:E}){const l=s,S=E,d=(0,a.ref)(null),k=(0,a.ref)(p.toSelectionValues(l.defaultValue,{multiple:l.multiple,label:"Listbox defaultValue"})),u=(0,a.computed)(()=>l.value!==void 0?p.toSelectionValues(l.value,{multiple:l.multiple,label:"Listbox value"}):k.value),h=(0,a.ref)(u.value[0]??null);let b=null;function K(e){return u.value.includes(e)}function m(e,o){const t=u.value;p.sameSelection(e,t)||(l.value===void 0&&(k.value=e),S("update:value",e),S("value-change",{value:e,previousValue:t.length===0?null:t,reason:o,selectedValue:p.selectedValueOf(e)}))}function x(e,o){l.multiple&&l.disallowEmptySelection&&u.value.length===1&&u.value[0]===e||(b=e,m(p.nextSelection(u.value,e,l.multiple),o))}function O(e){const o=u.value;m([...o,...e.filter(t=>!o.includes(t))],"keyboard")}function T(){return u.value.length===0&&(b=null),b}function g(e){return Array.from(e.querySelectorAll(v.OPTION_SELECTOR))}function f(e){return e.getAttribute("data-value")??""}function q(e){return e.getAttribute("data-text-value")??e.textContent??""}const R=(0,a.computed)(()=>w.useRovingFocus({orientation:l.orientation,loop:!1,itemSelector:v.OPTION_SELECTOR,typeahead:!1})),D=A.useTypeahead();function I(e){if(!l.multiple)return!1;const o=d.value;if(!o)return!1;const t=g(o),r=t.indexOf(e.target);if(r===-1)return!1;const y=l.orientation==="horizontal"?"ArrowRight":"ArrowDown",V=l.orientation==="horizontal"?"ArrowLeft":"ArrowUp";if((e.key===y||e.key===V)&&e.shiftKey){e.preventDefault();const n=t[r+(e.key===y?1:-1)];return n&&(n.focus(),x(f(n),"keyboard")),!0}if(e.key===" "&&e.shiftKey){e.preventDefault();const n=T(),i=t.findIndex(B=>f(B)===n),c=Math.min(i===-1?r:i,r),_=Math.max(i===-1?r:i,r);return O(t.slice(c,_+1).map(f)),!0}if(e.ctrlKey&&e.shiftKey&&(e.key==="Home"||e.key==="End")){e.preventDefault();const[n,i]=e.key==="Home"?[0,r]:[r,t.length-1];return O(t.slice(n,i+1).map(f)),!0}if(l.allowSelectAll&&(e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();const n=t.map(f),i=u.value;return n.every(c=>i.includes(c))?l.multiple&&l.disallowEmptySelection||m(i.filter(c=>!n.includes(c)),"keyboard"):m([...i,...n.filter(c=>!i.includes(c))],"keyboard"),!0}return!1}function L(e){if(e.key!=="PageUp"&&e.key!=="PageDown")return!1;const o=d.value;if(!o)return!1;const t=g(o),r=t.indexOf(e.target);if(r===-1)return!1;e.preventDefault();const y=e.key==="PageDown"?N:-10;return t[Math.min(t.length-1,Math.max(0,r+y))]?.focus(),!0}function P(e){if(I(e)||L(e)||(R.value(e),e.defaultPrevented||!A.isTypeaheadKey(e)))return;const o=d.value;if(!o)return;const t=g(o),r=D(e.key,t.map(q),t.indexOf(e.target));r!==-1&&(e.preventDefault(),t[r].focus())}return w.useRovingTabStop(d,v.OPTION_SELECTOR,"data-value",h),(0,a.provide)(v.LISTBOX_CONTEXT,{isSelected:K,selectItem:x,get multiple(){return l.multiple},get disabled(){return l.disabled},get focusOnHover(){return l.focusOnHover},activeValue:h,setActiveValue:e=>{h.value=e}}),(e,o)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",ref_key:"rootRef",ref:d,role:"listbox","aria-multiselectable":s.multiple?!0:void 0,"aria-disabled":s.disabled||void 0,"aria-orientation":s.orientation,"data-multiple":s.multiple?"":void 0,"data-disabled":s.disabled?"":void 0,"data-orientation":s.orientation,onKeydown:P},[(0,a.renderSlot)(e.$slots,"default",{},()=>[(0,a.createVNode)(C.default,{options:s.options??[]},(0,a.createSlots)({_:2},[e.$slots.option?{name:"option",fn:(0,a.withCtx)(t=>[(0,a.renderSlot)(e.$slots,"option",(0,a.normalizeProps)((0,a.guardReactiveProps)(t)))]),key:"0"}:void 0]),1032,["options"])])],40,H))}});exports.default=M;
+const z=require("../utils/appearance.cjs"),H=require("../utils/direction.cjs"),N=require("../utils/typeahead.cjs"),q=require("../utils/useRovingFocus.cjs"),p=require("../utils/selection.cjs"),$=require("../utils/useTypeahead.cjs"),y=require("./context.cjs"),M=require("./ListboxAnatomy.vue.cjs");let r=require("vue");var _=["aria-multiselectable","aria-disabled","aria-orientation","data-multiple","data-disabled","data-orientation"],F=10,U=(0,r.defineComponent)({inheritAttrs:!1,__name:"Listbox",props:{value:{default:void 0},defaultValue:{default:void 0},options:{},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowSelectAll:{type:Boolean,default:!0},orientation:{default:"vertical"},focusOnHover:{type:Boolean,default:!1},disallowEmptySelection:{type:Boolean,default:!1},density:{},shape:{},size:{}},emits:["update:value","value-change"],setup(i,{emit:w}){const o=i,S=w,s=(0,r.ref)(null),k=(0,r.ref)(p.toSelectionValues(o.defaultValue,{multiple:o.multiple,label:"Listbox defaultValue"})),u=(0,r.computed)(()=>o.value!==void 0?p.toSelectionValues(o.value,{multiple:o.multiple,label:"Listbox value"}):k.value),v=(0,r.ref)(u.value[0]??null);let h=null;function x(e){return u.value.includes(e)}function m(e,a){const t=u.value;p.sameSelection(e,t)||(o.value===void 0&&(k.value=e),S("update:value",e),S("value-change",{value:e,previousValue:t,reason:a,selectedValue:p.selectedValueOf(e)}))}function A(e,a){o.multiple&&o.disallowEmptySelection&&u.value.length===1&&u.value[0]===e||(h=e,m(p.nextSelection(u.value,e,o.multiple),a))}function O(e){const a=u.value;m([...a,...e.filter(t=>!a.includes(t))],"keyboard")}function E(){return u.value.length===0&&(h=null),h}function g(e){return Array.from(e.querySelectorAll(y.OPTION_SELECTOR))}function c(e){return e.getAttribute("data-value")??""}function K(e){return e.getAttribute("data-text-value")??e.textContent??""}const T=(0,r.computed)(()=>q.useRovingFocus({orientation:o.orientation,loop:!1,itemSelector:y.OPTION_SELECTOR,typeahead:!1})),R=$.useTypeahead();function P(e,a,t,l){const n=o.orientation==="horizontal"?"ArrowRight":"ArrowDown",b=o.orientation==="horizontal"?"ArrowLeft":"ArrowUp",d=H.directionalKey(e.key,a);if(d!==n&&d!==b||!e.shiftKey)return!1;e.preventDefault();const f=t[l+(d===n?1:-1)];return f&&(f.focus(),A(c(f),"keyboard")),!0}function D(e,a,t){if(e.key!==" "||!e.shiftKey)return!1;e.preventDefault();const l=E(),n=a.findIndex(f=>c(f)===l),b=Math.min(n===-1?t:n,t),d=Math.max(n===-1?t:n,t);return O(a.slice(b,d+1).map(c)),!0}function L(e,a,t){if(!e.ctrlKey||!e.shiftKey||e.key!=="Home"&&e.key!=="End")return!1;e.preventDefault();const[l,n]=e.key==="Home"?[0,t]:[t,a.length-1];return O(a.slice(l,n+1).map(c)),!0}function V(e,a){if(!o.allowSelectAll||!e.ctrlKey&&!e.metaKey||e.key.toLowerCase()!=="a")return!1;e.preventDefault();const t=a.map(c),l=u.value;return t.every(n=>l.includes(n))?o.multiple&&o.disallowEmptySelection||m(l.filter(n=>!t.includes(n)),"keyboard"):m([...l,...t.filter(n=>!l.includes(n))],"keyboard"),!0}function B(e){if(!o.multiple)return!1;const a=s.value;if(!a)return!1;const t=g(a),l=t.indexOf(e.target);return l===-1?!1:P(e,a,t,l)||D(e,t,l)||L(e,t,l)||V(e,t)}function C(e){if(e.key!=="PageUp"&&e.key!=="PageDown")return!1;const a=s.value;if(!a)return!1;const t=g(a),l=t.indexOf(e.target);if(l===-1)return!1;e.preventDefault();const n=e.key==="PageDown"?F:-10;return t[Math.min(t.length-1,Math.max(0,l+n))]?.focus(),!0}function I(e){if(B(e)||C(e)||(T.value(e),e.defaultPrevented||!N.isTypeaheadKey(e)))return;const a=s.value;if(!a)return;const t=g(a),l=R(e.key,t.map(K),t.indexOf(e.target));l!==-1&&(e.preventDefault(),t[l].focus())}return q.useRovingTabStop(s,y.OPTION_SELECTOR,"data-value",v,{activeIds:()=>u.value}),(0,r.provide)(y.LISTBOX_CONTEXT,{isSelected:x,selectItem:A,get multiple(){return o.multiple},get disabled(){return o.disabled},get focusOnHover(){return o.focusOnHover},activeValue:v,setActiveValue:e=>{v.value=e}}),(e,a)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",(0,r.mergeProps)({ref_key:"rootRef",ref:s,class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",role:"listbox","aria-multiselectable":i.multiple?!0:void 0,"aria-disabled":i.disabled||void 0,"aria-orientation":i.orientation,"data-multiple":i.multiple?"":void 0,"data-disabled":i.disabled?"":void 0,"data-orientation":i.orientation},{...e.$attrs,...(0,r.unref)(z.appearanceAttrs)({density:i.density,shape:i.shape,size:i.size},e.$attrs)},{onKeydown:I}),[(0,r.renderSlot)(e.$slots,"default",{},()=>[(0,r.createVNode)(M.default,{options:i.options??[]},(0,r.createSlots)({_:2},[e.$slots.option?{name:"option",fn:(0,r.withCtx)(t=>[(0,r.renderSlot)(e.$slots,"option",(0,r.normalizeProps)((0,r.guardReactiveProps)(t)))]),key:"0"}:void 0]),1032,["options"])])],16,_))}});exports.default=U;

package/dist/listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useRovingFocus as e,useRovingTabStop as t}from"../utils/useRovingFocus.js";import{nextSelection as a,sameSelection as l,selectedValueOf as o,toSelectionValues as n}from"../utils/useSelection.js";import{isTypeaheadKey as i,useTypeahead as u}from"../utils/useTypeahead.js";import{LISTBOX_CONTEXT as r,OPTION_SELECTOR as s}from"./context.js";import d from"./ListboxAnatomy.vue.js";import{computed as c,createElementBlock as f,createSlots as p,createVNode as v,defineComponent as m,guardReactiveProps as y,normalizeProps as b,openBlock as g,provide as h,ref as k,renderSlot as x,withCtx as S}from"vue";var w=["aria-multiselectable","aria-disabled","aria-orientation","data-multiple","data-disabled","data-orientation"],A=/* @__PURE__ */m({__name:"Listbox",props:{value:{default:void 0},defaultValue:{default:void 0},options:{default:void 0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowSelectAll:{type:Boolean,default:!0},orientation:{default:"vertical"},focusOnHover:{type:Boolean,default:!1},disallowEmptySelection:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(m,{emit:A}){const O=m,V=A,D=k(null),T=k(n(O.defaultValue,{multiple:O.multiple,label:"Listbox defaultValue"})),B=c(()=>void 0!==O.value?n(O.value,{multiple:O.multiple,label:"Listbox value"}):T.value),E=k(B.value[0]??null);let K=null;function L(e,t){const a=B.value;l(e,a)||(void 0===O.value&&(T.value=e),V("update:value",e),V("value-change",{value:e,previousValue:0===a.length?null:a,reason:t,selectedValue:o(e)}))}function P(e,t){O.multiple&&O.disallowEmptySelection&&1===B.value.length&&B.value[0]===e||(K=e,L(a(B.value,e,O.multiple),t))}function R(e){const t=B.value;L([...t,...e.filter(e=>!t.includes(e))],"keyboard")}function C(e){return Array.from(e.querySelectorAll(s))}function _(e){return e.getAttribute("data-value")??""}function j(e){return e.getAttribute("data-text-value")??e.textContent??""}const H=c(()=>e({orientation:O.orientation,loop:!1,itemSelector:s,typeahead:!1})),I=u();function M(e){if(function(e){if(!O.multiple)return!1;const t=D.value;if(!t)return!1;const a=C(t),l=a.indexOf(e.target);if(-1===l)return!1;const o="horizontal"===O.orientation?"ArrowRight":"ArrowDown",n="horizontal"===O.orientation?"ArrowLeft":"ArrowUp";if((e.key===o||e.key===n)&&e.shiftKey){e.preventDefault();const t=a[l+(e.key===o?1:-1)];return t&&(t.focus(),P(_(t),"keyboard")),!0}if(" "===e.key&&e.shiftKey){e.preventDefault();const t=(0===B.value.length&&(K=null),K),o=a.findIndex(e=>_(e)===t),n=Math.min(-1===o?l:o,l),i=Math.max(-1===o?l:o,l);return R(a.slice(n,i+1).map(_)),!0}if(e.ctrlKey&&e.shiftKey&&("Home"===e.key||"End"===e.key)){e.preventDefault();const[t,o]="Home"===e.key?[0,l]:[l,a.length-1];return R(a.slice(t,o+1).map(_)),!0}if(O.allowSelectAll&&(e.ctrlKey||e.metaKey)&&"a"===e.key.toLowerCase()){e.preventDefault();const t=a.map(_),l=B.value;return t.every(e=>l.includes(e))?O.multiple&&O.disallowEmptySelection||L(l.filter(e=>!t.includes(e)),"keyboard"):L([...l,...t.filter(e=>!l.includes(e))],"keyboard"),!0}return!1}(e)||function(e){if("PageUp"!==e.key&&"PageDown"!==e.key)return!1;const t=D.value;if(!t)return!1;const a=C(t),l=a.indexOf(e.target);if(-1===l)return!1;e.preventDefault();const o="PageDown"===e.key?10:-10;return a[Math.min(a.length-1,Math.max(0,l+o))]?.focus(),!0}(e)||(H.value(e),e.defaultPrevented||!i(e)))return;const t=D.value;if(!t)return;const a=C(t),l=I(e.key,a.map(j),a.indexOf(e.target));-1!==l&&(e.preventDefault(),a[l].focus())}return t(D,s,"data-value",E),h(r,{isSelected:function(e){return B.value.includes(e)},selectItem:P,get multiple(){return O.multiple},get disabled(){return O.disabled},get focusOnHover(){return O.focusOnHover},activeValue:E,setActiveValue:e=>{E.value=e}}),(e,t)=>(g(),f("div",{class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",ref_key:"rootRef",ref:D,role:"listbox","aria-multiselectable":!!m.multiple||void 0,"aria-disabled":m.disabled||void 0,"aria-orientation":m.orientation,"data-multiple":m.multiple?"":void 0,"data-disabled":m.disabled?"":void 0,"data-orientation":m.orientation,onKeydown:M},[x(e.$slots,"default",{},()=>[v(d,{options:m.options??[]},p({_:2},[e.$slots.option?{name:"option",fn:S(t=>[x(e.$slots,"option",b(y(t)))]),key:"0"}:void 0]),1032,["options"])])],40,w))}});export{A as default};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{directionalKey as t}from"../utils/direction.js";import{isTypeaheadKey as a}from"../utils/typeahead.js";import{useRovingFocus as o,useRovingTabStop as l}from"../utils/useRovingFocus.js";import{nextSelection as i,sameSelection as n,selectedValueOf as r,toSelectionValues as u}from"../utils/selection.js";import{useTypeahead as s}from"../utils/useTypeahead.js";import{LISTBOX_CONTEXT as d,OPTION_SELECTOR as c}from"./context.js";import p from"./ListboxAnatomy.vue.js";import{computed as f,createElementBlock as m,createSlots as v,createVNode as y,defineComponent as b,guardReactiveProps as h,mergeProps as g,normalizeProps as x,openBlock as k,provide as S,ref as w,renderSlot as A,unref as O,withCtx as V}from"vue";var D=["aria-multiselectable","aria-disabled","aria-orientation","data-multiple","data-disabled","data-orientation"],K=/* @__PURE__ */b({inheritAttrs:!1,__name:"Listbox",props:{value:{default:void 0},defaultValue:{default:void 0},options:{},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowSelectAll:{type:Boolean,default:!0},orientation:{default:"vertical"},focusOnHover:{type:Boolean,default:!1},disallowEmptySelection:{type:Boolean,default:!1},density:{},shape:{},size:{}},emits:["update:value","value-change"],setup(b,{emit:K}){const T=b,j=K,B=w(null),E=w(u(T.defaultValue,{multiple:T.multiple,label:"Listbox defaultValue"})),L=f(()=>void 0!==T.value?u(T.value,{multiple:T.multiple,label:"Listbox value"}):E.value),P=w(L.value[0]??null);let R=null;function z(e,t){const a=L.value;n(e,a)||(void 0===T.value&&(E.value=e),j("update:value",e),j("value-change",{value:e,previousValue:a,reason:t,selectedValue:r(e)}))}function C(e,t){T.multiple&&T.disallowEmptySelection&&1===L.value.length&&L.value[0]===e||(R=e,z(i(L.value,e,T.multiple),t))}function _(e){const t=L.value;z([...t,...e.filter(e=>!t.includes(e))],"keyboard")}function H(e){return Array.from(e.querySelectorAll(c))}function I(e){return e.getAttribute("data-value")??""}function $(e){return e.getAttribute("data-text-value")??e.textContent??""}const M=f(()=>o({orientation:T.orientation,loop:!1,itemSelector:c,typeahead:!1})),N=s();function F(e){if(!T.multiple)return!1;const a=B.value;if(!a)return!1;const o=H(a),l=o.indexOf(e.target);return-1!==l&&(function(e,a,o,l){const i="horizontal"===T.orientation?"ArrowRight":"ArrowDown",n="horizontal"===T.orientation?"ArrowLeft":"ArrowUp",r=t(e.key,a);if(r!==i&&r!==n||!e.shiftKey)return!1;e.preventDefault();const u=o[l+(r===i?1:-1)];return u&&(u.focus(),C(I(u),"keyboard")),!0}(e,a,o,l)||function(e,t,a){if(" "!==e.key||!e.shiftKey)return!1;e.preventDefault();const o=(0===L.value.length&&(R=null),R),l=t.findIndex(e=>I(e)===o),i=Math.min(-1===l?a:l,a),n=Math.max(-1===l?a:l,a);return _(t.slice(i,n+1).map(I)),!0}(e,o,l)||function(e,t,a){if(!e.ctrlKey||!e.shiftKey||"Home"!==e.key&&"End"!==e.key)return!1;e.preventDefault();const[o,l]="Home"===e.key?[0,a]:[a,t.length-1];return _(t.slice(o,l+1).map(I)),!0}(e,o,l)||function(e,t){if(!T.allowSelectAll||!e.ctrlKey&&!e.metaKey||"a"!==e.key.toLowerCase())return!1;e.preventDefault();const a=t.map(I),o=L.value;return a.every(e=>o.includes(e))?T.multiple&&T.disallowEmptySelection||z(o.filter(e=>!a.includes(e)),"keyboard"):z([...o,...a.filter(e=>!o.includes(e))],"keyboard"),!0}(e,o))}function U(e){if(F(e)||function(e){if("PageUp"!==e.key&&"PageDown"!==e.key)return!1;const t=B.value;if(!t)return!1;const a=H(t),o=a.indexOf(e.target);if(-1===o)return!1;e.preventDefault();const l="PageDown"===e.key?10:-10;return a[Math.min(a.length-1,Math.max(0,o+l))]?.focus(),!0}(e)||(M.value(e),e.defaultPrevented||!a(e)))return;const t=B.value;if(!t)return;const o=H(t),l=N(e.key,o.map($),o.indexOf(e.target));-1!==l&&(e.preventDefault(),o[l].focus())}return l(B,c,"data-value",P,{activeIds:()=>L.value}),S(d,{isSelected:function(e){return L.value.includes(e)},selectItem:C,get multiple(){return T.multiple},get disabled(){return T.disabled},get focusOnHover(){return T.focusOnHover},activeValue:P,setActiveValue:e=>{P.value=e}}),(t,a)=>(k(),m("div",g({ref_key:"rootRef",ref:B,class:"skdx-listbox","data-part":"root","data-skdx-component":"listbox",role:"listbox","aria-multiselectable":!!b.multiple||void 0,"aria-disabled":b.disabled||void 0,"aria-orientation":b.orientation,"data-multiple":b.multiple?"":void 0,"data-disabled":b.disabled?"":void 0,"data-orientation":b.orientation},{...t.$attrs,...O(e)({density:b.density,shape:b.shape,size:b.size},t.$attrs)},{onKeydown:U}),[A(t.$slots,"default",{},()=>[y(p,{options:b.options??[]},v({_:2},[t.$slots.option?{name:"option",fn:V(e=>[A(t.$slots,"option",x(h(e)))]),key:"0"}:void 0]),1032,["options"])])],16,D))}});export{K as default};

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

@@ -1,23 +1,13 @@
 import { type ListboxOption, type ListboxOptionGroup } from './context.cjs';
-/**
- * Anatomy when default slot empty: options (grouped or flat per data structure).
- * React port's `ListboxAnatomy.tsx` must stay synchronized.
- * @internal
- */
+/** @internal Renders the recipe's default anatomy: options rendered flat or grouped, based on the `options` data shape. */
 type __VLS_Props = {
     options: ListboxOption[] | ListboxOptionGroup[];
 };
-declare var __VLS_10: {
-    option: ListboxOption;
-    selected: boolean;
-}, __VLS_18: {
-    option: ListboxOption;
-    selected: boolean;
-};
-type __VLS_Slots = {} & {
-    option?: (props: typeof __VLS_10) => any;
-} & {
-    option?: (props: typeof __VLS_18) => any;
+type __VLS_Slots = {
+    option?(props: {
+        option: ListboxOption;
+        selected: boolean;
+    }): unknown;
 };
 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>;

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

@@ -1,23 +1,13 @@
 import { type ListboxOption, type ListboxOptionGroup } from './context.js';
-/**
- * Anatomy when default slot empty: options (grouped or flat per data structure).
- * React port's `ListboxAnatomy.tsx` must stay synchronized.
- * @internal
- */
+/** @internal Renders the recipe's default anatomy: options rendered flat or grouped, based on the `options` data shape. */
 type __VLS_Props = {
     options: ListboxOption[] | ListboxOptionGroup[];
 };
-declare var __VLS_10: {
-    option: ListboxOption;
-    selected: boolean;
-}, __VLS_18: {
-    option: ListboxOption;
-    selected: boolean;
-};
-type __VLS_Slots = {} & {
-    option?: (props: typeof __VLS_10) => any;
-} & {
-    option?: (props: typeof __VLS_18) => any;
+type __VLS_Slots = {
+    option?(props: {
+        option: ListboxOption;
+        selected: boolean;
+    }): unknown;
 };
 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>;

package/dist/listbox/ListboxAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const c=require("./context.cjs"),x=require("./ListboxGroup.vue.cjs"),n=require("./ListboxItem.vue.cjs"),d=require("./ListboxItemIndicator.vue.cjs"),k=require("./ListboxLabel.vue.cjs");let e=require("vue");var v=(0,e.defineComponent)({__name:"ListboxAnatomy",props:{options:{}},setup(s){const a=(0,e.inject)(c.LISTBOX_CONTEXT);if(!a)throw new Error("SkdxListboxAnatomy must be used within SkdxListbox.");const u=a;function i(o){return"options"in o}return(o,r)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(s.options,t=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:i(t)?t.label:t.value},[i(t)?((0,e.openBlock)(),(0,e.createBlock)(x.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(k.default,null,{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label),1)]),_:2},1024),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.options,l=>((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:l.value,value:l.value,disabled:l.disabled,"text-value":l.label},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"option",{option:l,selected:(0,e.unref)(u).isSelected(l.value)},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.label??l.value)+" ",1),(0,e.createVNode)(d.default,null,{default:(0,e.withCtx)(()=>[...r[0]||(r[0]=[(0,e.createElementVNode)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em","aria-hidden":"true"},[(0,e.createElementVNode)("path",{d:"M3 8.5 6.5 12 13 4.5",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:1,value:t.value,disabled:t.disabled,"text-value":t.label},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"option",{option:t,selected:(0,e.unref)(u).isSelected(t.value)},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label??t.value)+" ",1),(0,e.createVNode)(d.default,null,{default:(0,e.withCtx)(()=>[...r[1]||(r[1]=[(0,e.createElementVNode)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em","aria-hidden":"true"},[(0,e.createElementVNode)("path",{d:"M3 8.5 6.5 12 13 4.5",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})])]),_:2},1032,["value","disabled","text-value"]))],64))),128))}});exports.default=v;
+const o=require("../utils/Glyph.vue.cjs"),s=require("../utils/injectRequired.cjs"),n=require("./context.cjs"),x=require("./ListboxLabel.vue.cjs"),_=require("./ListboxGroup.vue.cjs"),i=require("./ListboxItem.vue.cjs"),d=require("./ListboxItemIndicator.vue.cjs");let e=require("vue");var b=(0,e.defineComponent)({__name:"ListboxAnatomy",props:{options:{}},setup(c){const u=s.injectRequired(n.LISTBOX_CONTEXT,"SkdxListboxAnatomy must be used within SkdxListbox.");function r(a){return"options"in a}return(a,f)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(c.options,t=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:r(t)?t.label:t.value},[r(t)?((0,e.openBlock)(),(0,e.createBlock)(_.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(x.default,null,{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label),1)]),_:2},1024),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.options,l=>((0,e.openBlock)(),(0,e.createBlock)(i.default,{key:l.value,value:l.value,disabled:l.disabled,"text-value":l.label},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(d.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(o.default,{name:"check"})]),_:1}),(0,e.renderSlot)(a.$slots,"option",{option:l,selected:(0,e.unref)(u).isSelected(l.value)},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.label??l.value),1)])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):((0,e.openBlock)(),(0,e.createBlock)(i.default,{key:1,value:t.value,disabled:t.disabled,"text-value":t.label},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(d.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(o.default,{name:"check"})]),_:1}),(0,e.renderSlot)(a.$slots,"option",{option:t,selected:(0,e.unref)(u).isSelected(t.value)},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label??t.value),1)])]),_:2},1032,["value","disabled","text-value"]))],64))),128))}});exports.default=b;

package/dist/listbox/ListboxAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{LISTBOX_CONTEXT as e}from"./context.js";import t from"./ListboxGroup.vue.js";import o from"./ListboxItem.vue.js";import l from"./ListboxItemIndicator.vue.js";import a from"./ListboxLabel.vue.js";import{Fragment as s,createBlock as i,createElementBlock as r,createElementVNode as n,createTextVNode as u,createVNode as d,defineComponent as m,inject as p,openBlock as v,renderList as c,renderSlot as b,toDisplayString as f,unref as x,withCtx as k}from"vue";var h=/* @__PURE__ */m({__name:"ListboxAnatomy",props:{options:{}},setup(m){const h=p(e);if(!h)throw new Error("SkdxListboxAnatomy must be used within SkdxListbox.");const w=h;function L(e){return"options"in e}return(e,p)=>(v(!0),r(s,null,c(m.options,m=>(v(),r(s,{key:L(m)?m.label:m.value},[L(m)?(v(),i(t,{key:0},{default:k(()=>[d(a,null,{default:k(()=>[u(f(m.label),1)]),_:2},1024),(v(!0),r(s,null,c(m.options,t=>(v(),i(o,{key:t.value,value:t.value,disabled:t.disabled,"text-value":t.label},{default:k(()=>[b(e.$slots,"option",{option:t,selected:x(w).isSelected(t.value)},()=>[u(f(t.label??t.value)+" ",1),d(l,null,{default:k(()=>[...p[0]||(p[0]=[n("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em","aria-hidden":"true"},[n("path",{d:"M3 8.5 6.5 12 13 4.5",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):(v(),i(o,{key:1,value:m.value,disabled:m.disabled,"text-value":m.label},{default:k(()=>[b(e.$slots,"option",{option:m,selected:x(w).isSelected(m.value)},()=>[u(f(m.label??m.value)+" ",1),d(l,null,{default:k(()=>[...p[1]||(p[1]=[n("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em","aria-hidden":"true"},[n("path",{d:"M3 8.5 6.5 12 13 4.5",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})])]),_:2},1032,["value","disabled","text-value"]))],64))),128))}});export{h as default};
+import e from"../utils/Glyph.vue.js";import{injectRequired as t}from"../utils/injectRequired.js";import{LISTBOX_CONTEXT as l}from"./context.js";import a from"./ListboxLabel.vue.js";import o from"./ListboxGroup.vue.js";import s from"./ListboxItem.vue.js";import i from"./ListboxItemIndicator.vue.js";import{Fragment as u,createBlock as n,createElementBlock as r,createTextVNode as d,createVNode as m,defineComponent as p,openBlock as v,renderList as b,renderSlot as c,toDisplayString as f,unref as x,withCtx as k}from"vue";var L=/* @__PURE__ */p({__name:"ListboxAnatomy",props:{options:{}},setup(p){const L=t(l,"SkdxListboxAnatomy must be used within SkdxListbox.");function j(e){return"options"in e}return(t,l)=>(v(!0),r(u,null,b(p.options,l=>(v(),r(u,{key:j(l)?l.label:l.value},[j(l)?(v(),n(o,{key:0},{default:k(()=>[m(a,null,{default:k(()=>[d(f(l.label),1)]),_:2},1024),(v(!0),r(u,null,b(l.options,l=>(v(),n(s,{key:l.value,value:l.value,disabled:l.disabled,"text-value":l.label},{default:k(()=>[m(i,null,{default:k(()=>[m(e,{name:"check"})]),_:1}),c(t.$slots,"option",{option:l,selected:x(L).isSelected(l.value)},()=>[d(f(l.label??l.value),1)])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):(v(),n(s,{key:1,value:l.value,disabled:l.disabled,"text-value":l.label},{default:k(()=>[m(i,null,{default:k(()=>[m(e,{name:"check"})]),_:1}),c(t.$slots,"option",{option:l,selected:x(L).isSelected(l.value)},()=>[d(f(l.label??l.value),1)])]),_:2},1032,["value","disabled","text-value"]))],64))),128))}});export{L as default};

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

@@ -5,7 +5,7 @@
  * ```vue
  * <SkdxListboxGroup>
  *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ *   <SkdxListboxItem value="ruby">Ruby</SkdxListboxItem>
  * </SkdxListboxGroup>
  * ```
  */

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

@@ -5,7 +5,7 @@
  * ```vue
  * <SkdxListboxGroup>
  *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ *   <SkdxListboxItem value="ruby">Ruby</SkdxListboxItem>
  * </SkdxListboxGroup>
  * ```
  */

package/dist/listbox/ListboxGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +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;
+const a=require("../utils/declaredChildren.cjs"),o=require("../utils/menuGroup.cjs"),s=require("./ListboxLabel.vue.cjs");let e=require("vue");var d=["aria-labelledby"],i=(0,e.defineComponent)({__name:"ListboxGroup",setup(_){const r=(0,e.useAttrs)(),t=o.useMenuGroupLabel(a.slotDeclares((0,e.useSlots)().default,s.default)),l=(0,e.computed)(()=>r["aria-label"]===void 0?t.value:void 0);return(u,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-listbox__group","data-part":"group",role:"group","aria-labelledby":l.value},[(0,e.renderSlot)(u.$slots,"default")],8,d))}});exports.default=i;

package/dist/listbox/ListboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -1 +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};
+import{slotDeclares as e}from"../utils/declaredChildren.js";import{useMenuGroupLabel as a}from"../utils/menuGroup.js";import o from"./ListboxLabel.vue.js";import{computed as s,createElementBlock as l,defineComponent as r,openBlock as t,renderSlot as u,useAttrs as i,useSlots as d}from"vue";var p=["aria-labelledby"],m=/* @__PURE__ */r({__name:"ListboxGroup",setup(r){const m=i(),n=a(e(d().default,o)),b=s(()=>void 0===m["aria-label"]?n.value:void 0);return(e,a)=>(t(),l("div",{class:"skdx-listbox__group","data-part":"group",role:"group","aria-labelledby":b.value},[u(e.$slots,"default")],8,p))}});export{m as default};