@skdx/vue 0.26.0 → 0.28.0

package/dist/link/Link.vue.d.ts

@@ -0,0 +1,63 @@
+import type { PolymorphicTag } from '../utils/polymorphic.js';
+/**
+ * Renders `<a>` with a safe `rel` default on `target="_blank"`. `disabled`
+ * keeps `href` but blocks activation via `aria-disabled`/`tabindex="-1"`,
+ * since `disabled` is not valid on `<a>`.
+ */
+type __VLS_Props = {
+    /** The destination URL rendered as the anchor's `href` attribute. @default undefined */
+    href?: string;
+    /** Native `target` attribute value, passed straight through to the element. @default undefined */
+    target?: string;
+    /**
+     * Explicit `rel`. Omit to get the auto `noopener noreferrer` guard when
+     * `target="_blank"`; pass `rel=""` to explicitly opt out.
+     * @default undefined — auto-computed from `target`.
+     */
+    rel?: string;
+    /** Native `download` attribute value, passed straight through to the element. @default undefined */
+    download?: boolean | string;
+    /**
+     * Underline behavior, emitted as `data-underline` for the skin to style.
+     * @default 'auto'
+     */
+    underline?: 'auto' | 'always' | 'hover' | 'none';
+    /**
+     * Marks the link external, emitting `data-external`. Explicit value wins
+     * over the inferred one (a different origin than the document's).
+     * @default undefined — inferred from `href`.
+     */
+    external?: boolean;
+    /**
+     * Blocks activation while keeping `href` on the element: sets
+     * `aria-disabled="true"` and `tabindex="-1"`, and intercepts click/Enter.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Element name to render instead of the default `<a>`, from the library's
+     * tag allowlist.
+     * @default 'a'
+     */
+    as?: PolymorphicTag;
+};
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus onto the underlying rendered element. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    as: PolymorphicTag;
+    underline: "auto" | "always" | "hover" | "none";
+    external: 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/link/Link.vue.js

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

package/dist/link/Link.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const f=require("../utils/resolveRel.cjs");let a=require("vue");var c=(0,a.defineComponent)({__name:"Link",props:{href:{},target:{},rel:{},download:{type:[Boolean,String]},underline:{default:"auto"},external:{type:Boolean,default:void 0},disabled:{type:Boolean,default:!1},as:{default:"a"}},setup(t,{expose:l}){const n=t;function r(e){if(!e)return!1;try{return typeof window<"u"&&typeof document<"u"?new URL(e,document.baseURI).origin!==window.location.origin:/^(https?:)?\/\//i.test(e)}catch{return!1}}const o=(0,a.computed)(()=>n.external??r(n.href)),i=(0,a.computed)(()=>f.resolveRel(n.target,n.rel));function u(e){n.disabled&&(e.preventDefault(),e.stopPropagation())}function s(e){n.disabled&&e.key==="Enter"&&e.preventDefault()}const d=(0,a.ref)(null);return l({focus:()=>d.value?.focus()}),(e,v)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(t.as),{ref_key:"el",ref:d,class:"skdx-link","data-part":"root","data-skdx-component":"link","data-underline":t.underline,"data-external":o.value?"":void 0,"data-disabled":t.disabled?"":void 0,href:t.href,target:t.target,rel:i.value,download:t.download,"aria-disabled":t.disabled?"true":void 0,tabindex:t.disabled?-1:void 0,onClick:u,onKeydown:s},{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,"default")]),_:3},40,["data-underline","data-external","data-disabled","href","target","rel","download","aria-disabled","tabindex"]))}});exports.default=c;

package/dist/link/Link.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{resolveRel as e}from"../utils/resolveRel.js";import{computed as a,createBlock as t,defineComponent as o,openBlock as d,ref as n,renderSlot as l,resolveDynamicComponent as r,withCtx as i}from"vue";var s=/* @__PURE__ */o({__name:"Link",props:{href:{},target:{},rel:{},download:{type:[Boolean,String]},underline:{default:"auto"},external:{type:Boolean,default:void 0},disabled:{type:Boolean,default:!1},as:{default:"a"}},setup(o,{expose:s}){const u=o,f=a(()=>u.external??function(e){if(!e)return!1;try{return typeof window<"u"&&typeof document<"u"?new URL(e,document.baseURI).origin!==window.location.origin:/^(https?:)?\/\//i.test(e)}catch{return!1}}(u.href)),p=a(()=>e(u.target,u.rel));function c(e){u.disabled&&(e.preventDefault(),e.stopPropagation())}function v(e){u.disabled&&"Enter"===e.key&&e.preventDefault()}const b=n(null);return s({focus:()=>b.value?.focus()}),(e,a)=>(d(),t(r(o.as),{ref_key:"el",ref:b,class:"skdx-link","data-part":"root","data-skdx-component":"link","data-underline":o.underline,"data-external":f.value?"":void 0,"data-disabled":o.disabled?"":void 0,href:o.href,target:o.target,rel:p.value,download:o.download,"aria-disabled":o.disabled?"true":void 0,tabindex:o.disabled?-1:void 0,onClick:c,onKeydown:v},{default:i(()=>[l(e.$slots,"default")]),_:3},40,["data-underline","data-external","data-disabled","href","target","rel","download","aria-disabled","tabindex"]))}});export{s as default};

package/dist/link/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Link.vue.cjs");exports.SkdxLink=e.default;

package/dist/link/index.d.cts

@@ -0,0 +1 @@
+export { default as SkdxLink } from './Link.vue.cjs';

package/dist/link/index.d.ts

@@ -0,0 +1 @@
+export { default as SkdxLink } from './Link.vue.js';

package/dist/link/index.js

@@ -0,0 +1 @@
+import i from"./Link.vue.js";export{i as SkdxLink};

package/dist/list/List.vue.cjs

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

package/dist/list/List.vue.d.cts

@@ -0,0 +1,50 @@
+import { type Space } from '../utils/space.cjs';
+/**
+ * Renders `<ul>` by default. `markers={false}` strips the marker and sets
+ * `role="list"` on the container only (WebKit 170179 drops list semantics otherwise).
+ */
+type __VLS_Props = {
+    /**
+     * Element name to render. `dl` is for styling only — `<li>` children are still expected.
+     * @default 'ul'
+     */
+    as?: 'ul' | 'ol' | 'dl';
+    /**
+     * When `false`, removes the marker and sets `role="list"` on the container.
+     * @default true
+     */
+    markers?: boolean;
+    /**
+     * Gap between items, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    spacing?: Space;
+    /**
+     * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
+     * @default undefined — browser default numbering.
+     */
+    start?: number;
+    /**
+     * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed?: boolean;
+};
+type __VLS_Slots = {
+    /** The list entries, normally `SkdxListItem` child components. */
+    default?(): unknown;
+    /** Default marker icon for every item, overridable per `SkdxListItem`. */
+    icon?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: "ul" | "ol" | "dl";
+    markers: boolean;
+    reversed: 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/list/List.vue.d.ts

@@ -0,0 +1,50 @@
+import { type Space } from '../utils/space.js';
+/**
+ * Renders `<ul>` by default. `markers={false}` strips the marker and sets
+ * `role="list"` on the container only (WebKit 170179 drops list semantics otherwise).
+ */
+type __VLS_Props = {
+    /**
+     * Element name to render. `dl` is for styling only — `<li>` children are still expected.
+     * @default 'ul'
+     */
+    as?: 'ul' | 'ol' | 'dl';
+    /**
+     * When `false`, removes the marker and sets `role="list"` on the container.
+     * @default true
+     */
+    markers?: boolean;
+    /**
+     * Gap between items, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    spacing?: Space;
+    /**
+     * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
+     * @default undefined — browser default numbering.
+     */
+    start?: number;
+    /**
+     * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed?: boolean;
+};
+type __VLS_Slots = {
+    /** The list entries, normally `SkdxListItem` child components. */
+    default?(): unknown;
+    /** Default marker icon for every item, overridable per `SkdxListItem`. */
+    icon?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: "ul" | "ol" | "dl";
+    markers: boolean;
+    reversed: 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/list/List.vue.js

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

package/dist/list/List.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("../utils/space.cjs"),s=require("./context.cjs");let e=require("vue");var l=(0,e.defineComponent)({__name:"List",props:{as:{default:"ul"},markers:{type:Boolean,default:!0},spacing:{},start:{},reversed:{type:Boolean,default:!1}},setup(t){return(0,e.provide)(s.LIST_CONTEXT,{slots:(0,e.useSlots)()}),(a,o)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.as),{class:"skdx-list","data-part":"root","data-skdx-component":"list","data-markers":t.markers?void 0:"false",role:t.markers?void 0:"list",start:t.as==="ol"?t.start:void 0,reversed:t.as==="ol"?t.reversed:void 0,style:(0,e.normalizeStyle)(t.spacing!==void 0?{gap:(0,e.unref)(r.resolveSpace)(t.spacing)}:void 0)},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"default")]),_:3},8,["data-markers","role","start","reversed","style"]))}});exports.default=l;

package/dist/list/List.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{resolveSpace as e}from"../utils/space.js";import{LIST_CONTEXT as s}from"./context.js";import{createBlock as a,defineComponent as t,normalizeStyle as r,openBlock as o,provide as l,renderSlot as d,resolveDynamicComponent as i,unref as p,useSlots as n,withCtx as m}from"vue";var v=/* @__PURE__ */t({__name:"List",props:{as:{default:"ul"},markers:{type:Boolean,default:!0},spacing:{},start:{},reversed:{type:Boolean,default:!1}},setup:t=>(l(s,{slots:n()}),(s,l)=>(o(),a(i(t.as),{class:"skdx-list","data-part":"root","data-skdx-component":"list","data-markers":t.markers?void 0:"false",role:t.markers?void 0:"list",start:"ol"===t.as?t.start:void 0,reversed:"ol"===t.as?t.reversed:void 0,style:r(void 0!==t.spacing?{gap:p(e)(t.spacing)}:void 0)},{default:m(()=>[d(s.$slots,"default")]),_:3},8,["data-markers","role","start","reversed","style"])))});export{v as default};

package/dist/list/ListItem.vue.cjs

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

package/dist/list/ListItem.vue.d.cts

@@ -0,0 +1,25 @@
+/**
+ * Renders `<li>`. An icon — its own or the List's — renders as an
+ * `indicator` part and suppresses the native marker.
+ */
+type __VLS_Props = {
+    /**
+     * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
+     * @default undefined — sequential numbering.
+     */
+    value?: number;
+};
+type __VLS_Slots = {
+    /** The item's content, rendered after the indicator, if any. */
+    default?(): unknown;
+    /** Marker icon for this item, overriding the List's own. */
+    icon?(): 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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+/**
+ * Renders `<li>`. An icon — its own or the List's — renders as an
+ * `indicator` part and suppresses the native marker.
+ */
+type __VLS_Props = {
+    /**
+     * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
+     * @default undefined — sequential numbering.
+     */
+    value?: number;
+};
+type __VLS_Slots = {
+    /** The item's content, rendered after the indicator, if any. */
+    default?(): unknown;
+    /** Marker icon for this item, overriding the List's own. */
+    icon?(): 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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/list/ListItem.vue.js

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

package/dist/list/ListItem.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const c=require("./context.cjs");let e=require("vue");var i=["value"],u={key:0,class:"skdx-list__indicator","data-part":"indicator"},_=(0,e.defineComponent)({name:"SkdxListItem",inheritAttrs:!1,__name:"ListItem",props:{value:{}},setup(l){const s=l,n=(0,e.useSlots)(),a=(0,e.inject)(c.LIST_CONTEXT,null),t=(0,e.computed)(()=>n.icon??a?.slots.icon),r=(0,e.computed)(()=>t.value?{listStyle:"none"}:void 0);return(o,p)=>((0,e.openBlock)(),(0,e.createElementBlock)("li",(0,e.mergeProps)({style:r.value},o.$attrs,{class:"skdx-list__item","data-part":"item",value:s.value}),[t.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",u,[((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.value)))])):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(o.$slots,"default")],16,i))}});exports.default=_;

package/dist/list/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{LIST_CONTEXT as e}from"./context.js";import{computed as t,createBlock as a,createCommentVNode as s,createElementBlock as o,defineComponent as l,inject as n,mergeProps as r,openBlock as i,renderSlot as m,resolveDynamicComponent as c,useSlots as u}from"vue";var d=["value"],p={key:0,class:"skdx-list__indicator","data-part":"indicator"},v=/* @__PURE__ */l({name:"SkdxListItem",inheritAttrs:!1,__name:"ListItem",props:{value:{}},setup(l){const v=l,k=u(),_=n(e,null),f=t(()=>k.icon??_?.slots.icon),x=t(()=>f.value?{listStyle:"none"}:void 0);return(e,t)=>(i(),o("li",r({style:x.value},e.$attrs,{class:"skdx-list__item","data-part":"item",value:v.value}),[f.value?(i(),o("span",p,[(i(),a(c(f.value)))])):s("",!0),m(e.$slots,"default")],16,d))}});export{v as default};

package/dist/list/context.cjs

@@ -0,0 +1 @@
+var T=Symbol("skdx-list-context");exports.LIST_CONTEXT=T;

package/dist/list/context.d.cts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Slots } from 'vue';
+/** @internal Injection key a List provides so its ListItems can inherit a default marker icon. */
+export interface ListContextValue {
+    slots: Slots;
+}
+/** @internal Injection key a List provides so its parts can read its slots. Not part of the public API. */
+export declare const LIST_CONTEXT: InjectionKey<ListContextValue>;

package/dist/list/context.d.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Slots } from 'vue';
+/** @internal Injection key a List provides so its ListItems can inherit a default marker icon. */
+export interface ListContextValue {
+    slots: Slots;
+}
+/** @internal Injection key a List provides so its parts can read its slots. Not part of the public API. */
+export declare const LIST_CONTEXT: InjectionKey<ListContextValue>;

package/dist/list/context.js

@@ -0,0 +1 @@
+var t=/* @__PURE__ */Symbol("skdx-list-context");export{t as LIST_CONTEXT};

package/dist/list/index.cjs

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

package/dist/list/index.d.cts

@@ -0,0 +1,2 @@
+export { default as SkdxList } from './List.vue.cjs';
+export { default as SkdxListItem } from './ListItem.vue.cjs';

package/dist/list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkdxList } from './List.vue.js';
+export { default as SkdxListItem } from './ListItem.vue.js';

package/dist/list/index.js

@@ -0,0 +1 @@
+import t from"./List.vue.js";import s from"./ListItem.vue.js";export{t as SkdxList,s as SkdxListItem};

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

@@ -1,30 +1,15 @@
+import { type ListboxOption, type ListboxOptionGroup, type ListboxValueChangeDetail } from './context.cjs';
 /**
- * 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`).
+ * Selection list with roving focus, typeahead, and keyboard navigation.
+ * Requires `aria-label` or `aria-labelledby`. Works 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>
@@ -32,39 +17,82 @@
  * ```
  */
 type __VLS_Props = {
-    /** Selected option's value, for controlled usage via `v-model:value`. A `string[]` when `multiple`. */
+    /**
+     * 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 shape as `value`. */
+    /** Initially selected value, for uncontrolled usage. Same lenient 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.
+     * 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[];
+    /**
+     * 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.
+     * on the list and on each option. An individual `SkdxListboxItem` can
+     * still be disabled on its own; the two OR together.
      */
     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.
+     */
+    allowSelectAll?: 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.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether pointer movement moves roving focus; off by default since real DOM
+     * focus would steal from other page elements. Never focuses disabled options.
+     */
+    focusOnHover?: boolean;
+    /**
+     * 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.
+     */
+    disallowEmptySelection?: boolean;
+};
+declare var __VLS_1: {}, __VLS_6: {
+    option: ListboxOption;
+    selected: boolean;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    option?: (props: typeof __VLS_6) => 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;
+    "update:value": (value: string[]) => any;
+    "value-change": (detail: ListboxValueChangeDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
-    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((detail: ListboxValueChangeDetail) => any) | undefined;
 }>, {
     disabled: boolean;
     value: string | string[];
     defaultValue: string | string[];
     multiple: boolean;
+    options: ListboxOption[] | ListboxOptionGroup[];
+    orientation: "horizontal" | "vertical";
+    allowSelectAll: boolean;
+    focusOnHover: boolean;
+    disallowEmptySelection: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,30 +1,15 @@
+import { type ListboxOption, type ListboxOptionGroup, type ListboxValueChangeDetail } from './context.js';
 /**
- * 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`).
+ * Selection list with roving focus, typeahead, and keyboard navigation.
+ * Requires `aria-label` or `aria-labelledby`. Works 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>
@@ -32,39 +17,82 @@
  * ```
  */
 type __VLS_Props = {
-    /** Selected option's value, for controlled usage via `v-model:value`. A `string[]` when `multiple`. */
+    /**
+     * 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 shape as `value`. */
+    /** Initially selected value, for uncontrolled usage. Same lenient 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.
+     * 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[];
+    /**
+     * 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.
+     * on the list and on each option. An individual `SkdxListboxItem` can
+     * still be disabled on its own; the two OR together.
      */
     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.
+     */
+    allowSelectAll?: 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.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether pointer movement moves roving focus; off by default since real DOM
+     * focus would steal from other page elements. Never focuses disabled options.
+     */
+    focusOnHover?: boolean;
+    /**
+     * 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.
+     */
+    disallowEmptySelection?: boolean;
+};
+declare var __VLS_1: {}, __VLS_6: {
+    option: ListboxOption;
+    selected: boolean;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    option?: (props: typeof __VLS_6) => 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;
+    "update:value": (value: string[]) => any;
+    "value-change": (detail: ListboxValueChangeDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string | string[]) => any) | undefined;
-    "onValue-change"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((detail: ListboxValueChangeDetail) => any) | undefined;
 }>, {
     disabled: boolean;
     value: string | string[];
     defaultValue: string | string[];
     multiple: boolean;
+    options: ListboxOption[] | ListboxOptionGroup[];
+    orientation: "horizontal" | "vertical";
+    allowSelectAll: boolean;
+    focusOnHover: boolean;
+    disallowEmptySelection: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/listbox/Listbox.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +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;
+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;