@skdx/vue 0.27.0 → 0.29.0

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.cjs

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

package/dist/list/context.d.cts

@@ -0,0 +1,18 @@
+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. */
+export declare const LIST_CONTEXT: InjectionKey<ListContextValue>;

package/dist/list/context.d.ts

@@ -0,0 +1,18 @@
+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. */
+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("./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

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

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

@@ -0,0 +1 @@
+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,70 +1,78 @@
+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`).
+ * Renders a selection list with roving focus, typeahead, and keyboard navigation, controlled or uncontrolled.
  *
  * @example
  * ```vue
- * <SkdxListbox aria-label="Framework" default-value="react">
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
- *   <SkdxListboxItem value="vue">Vue</SkdxListboxItem>
- * </SkdxListbox>
+ * <SkdxListbox aria-label="Framework" default-value="react" :options="[{ value: 'react' }]" />
  * ```
  */
 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[];
+    /** 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;
     /**
-     * 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 }`.
+     * @default undefined — the default slot must supply the options itself.
      */
-    multiple?: boolean;
+    options?: ListboxOption[] | ListboxOptionGroup[] | undefined;
     /**
-     * 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.
+     * 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. */
     disabled?: boolean;
+    /** 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;
+    /**
+     * How tightly the skin packs the listbox's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives the listbox, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the listbox at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => 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 | 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;
+    "onValue-change"?: (detail: ListboxValueChangeDetail) => any;
 }>, {
     disabled: boolean;
-    value: string | string[];
-    defaultValue: string | string[];
+    defaultValue: string | string[] | undefined;
     multiple: boolean;
+    value: string | string[] | undefined;
+    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,70 +1,78 @@
+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`).
+ * Renders a selection list with roving focus, typeahead, and keyboard navigation, controlled or uncontrolled.
  *
  * @example
  * ```vue
- * <SkdxListbox aria-label="Framework" default-value="react">
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
- *   <SkdxListboxItem value="vue">Vue</SkdxListboxItem>
- * </SkdxListbox>
+ * <SkdxListbox aria-label="Framework" default-value="react" :options="[{ value: 'react' }]" />
  * ```
  */
 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[];
+    /** 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;
     /**
-     * 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 }`.
+     * @default undefined — the default slot must supply the options itself.
      */
-    multiple?: boolean;
+    options?: ListboxOption[] | ListboxOptionGroup[] | undefined;
     /**
-     * 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.
+     * 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. */
     disabled?: boolean;
+    /** 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;
+    /**
+     * How tightly the skin packs the listbox's contents, reflected as `data-density`.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives the listbox, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the listbox at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => 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 | 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;
+    "onValue-change"?: (detail: ListboxValueChangeDetail) => any;
 }>, {
     disabled: boolean;
-    value: string | string[];
-    defaultValue: string | string[];
+    defaultValue: string | string[] | undefined;
     multiple: boolean;
+    value: string | string[] | undefined;
+    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 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 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};
+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.cjs

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

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

@@ -0,0 +1,19 @@
+import { type ListboxOption, type ListboxOptionGroup } from './context.cjs';
+/** @internal Renders the recipe's default anatomy: options rendered flat or grouped, based on the `options` data shape. */
+type __VLS_Props = {
+    options: ListboxOption[] | ListboxOptionGroup[];
+};
+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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,19 @@
+import { type ListboxOption, type ListboxOptionGroup } from './context.js';
+/** @internal Renders the recipe's default anatomy: options rendered flat or grouped, based on the `options` data shape. */
+type __VLS_Props = {
+    options: ListboxOption[] | ListboxOptionGroup[];
+};
+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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/listbox/ListboxAnatomy.vue.js

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

package/dist/listbox/ListboxAnatomy.vue_vue_type_script_setup_true_lang.cjs

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

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

@@ -1,19 +1,11 @@
 /**
- * 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.
+ * Groups related items under a label, automatically wiring `aria-labelledby`.
  *
  * @example
  * ```vue
  * <SkdxListboxGroup>
  *   <SkdxListboxLabel>Frameworks</SkdxListboxLabel>
- *   <SkdxListboxItem value="react">React</SkdxListboxItem>
+ *   <SkdxListboxItem value="ruby">Ruby</SkdxListboxItem>
  * </SkdxListboxGroup>
  * ```
  */

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

@@ -1,19 +1,11 @@
 /**
- * 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.
+ * Groups related items under a label, automatically wiring `aria-labelledby`.
  *
  * @example
  * ```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};

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

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