vectis-ui 0.12.0 → 0.14.0

package/dist/components/VLink/VLink.d.ts

@@ -0,0 +1,53 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of
+ * the parent and turns to the accent on hover.
+ */
+export type LinkTone = 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'inherit';
+/** When the link is underlined: always, on hover and focus only, or never. */
+export type LinkUnderline = 'always' | 'hover' | 'none';
+interface LinkProps {
+    /** Where the link goes. */
+    href: string;
+    /**
+     * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of
+     * the parent, muted text for instance, and turns to the accent on hover.
+     */
+    tone?: LinkTone;
+    /**
+     * When the link is underlined. Keep `always` inside running text, where colour alone does not
+     * tell a link apart; `hover` and `none` suit menus and lists of links.
+     */
+    underline?: LinkUnderline;
+    /**
+     * Opens the link in a new tab, with `rel="noopener noreferrer"`, and says so: an icon, and
+     * words for screen readers. A `target="_blank"` passed as an attribute says so too.
+     */
+    external?: boolean;
+    /** The icon marking an external link: an icon name, or an explicit render. */
+    externalIcon?: IconSource;
+    /** Removes the icon of an external link. Screen readers still hear that it opens a new tab. */
+    hideExternalIcon?: boolean;
+    /** Makes the link unusable: its address is removed and it is marked `aria-disabled`. */
+    disabled?: boolean;
+}
+type __VLS_Slots = {
+    /** The text of the link. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<LinkProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    tone: LinkTone;
+    disabled: boolean;
+    underline: LinkUnderline;
+    external: boolean;
+    externalIcon: IconSource;
+    hideExternalIcon: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VLink/VLink.js

@@ -0,0 +1,9 @@
+import './VLink.css';
+import e from "./VLink.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                      */
+//#region src/components/VLink/VLink.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VLink.js.map

package/dist/components/VLink/VLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VLink.js","names":[],"sources":["../../../src/components/VLink/VLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A native link painted in a tone. It takes its size from the text around it. An external link\n * opens in a new tab and says so, with an icon and words for assistive technology.\n */\nimport { computed, useAttrs } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { open_in_new as openInNewIcon } from '../VIcon/icons/open_in_new'\nimport type { IconSource } from '../VIcon/types'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useMessages } from '../../i18n/state'\n\n/**\n * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n * the parent and turns to the accent on hover.\n */\nexport type LinkTone = 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'inherit'\n\n/** When the link is underlined: always, on hover and focus only, or never. */\nexport type LinkUnderline = 'always' | 'hover' | 'none'\n\ninterface LinkProps {\n  /** Where the link goes. */\n  href: string\n  /**\n   * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n   * the parent, muted text for instance, and turns to the accent on hover.\n   */\n  tone?: LinkTone\n  /**\n   * When the link is underlined. Keep `always` inside running text, where colour alone does not\n   * tell a link apart; `hover` and `none` suit menus and lists of links.\n   */\n  underline?: LinkUnderline\n  /**\n   * Opens the link in a new tab, with `rel=\"noopener noreferrer\"`, and says so: an icon, and\n   * words for screen readers. A `target=\"_blank\"` passed as an attribute says so too.\n   */\n  external?: boolean\n  /** The icon marking an external link: an icon name, or an explicit render. */\n  externalIcon?: IconSource\n  /** Removes the icon of an external link. Screen readers still hear that it opens a new tab. */\n  hideExternalIcon?: boolean\n  /** Makes the link unusable: its address is removed and it is marked `aria-disabled`. */\n  disabled?: boolean\n}\n\n// The attributes are bound by hand: on a disabled link, useInertLink drops the click listeners.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<LinkProps>(), {\n  tone: 'accent',\n  underline: 'always',\n  external: false,\n  externalIcon: () => openInNewIcon,\n  hideExternalIcon: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The text of the link. */\n  default(): unknown\n}>()\n\nconst attrs = useAttrs()\nconst m = useMessages()\n\nconst link = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => attrs,\n})\n\nconst newTab = computed(() => props.external || attrs.target === '_blank')\n</script>\n\n<template>\n  <!-- `target` and `rel` come before the forwarded attributes, which may replace them. -->\n  <a\n    class=\"v-link v-tone\"\n    :data-tone=\"tone\"\n    :data-underline=\"underline\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n    :aria-disabled=\"link.isInertLink.value ? 'true' : undefined\"\n    v-bind=\"link.attrs.value\"\n    :href=\"link.linkHref.value\"\n    ><slot /><template v-if=\"newTab\"\n      ><VIcon\n        v-if=\"!hideExternalIcon\"\n        class=\"v-link-external\"\n        v-bind=\"iconProps(externalIcon)\"\n        mirrored\n      /><span class=\"v-visually-hidden\">{{ m.link.newTab }}</span></template\n    ></a\n  >\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The size, weight and line height are the surrounding text's. The icon follows that size too,\n   * whatever icon size an ancestor sets.\n   */\n  .v-link {\n    --vectis-icon-size: 1em;\n\n    border-radius: var(--vectis-radius-xs);\n    color: var(--tone-text-tinted);\n    text-decoration-line: none;\n    text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);\n    cursor: pointer;\n    transition: text-decoration-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-link[data-underline='always'],\n  .v-link[data-underline='hover']:is(:hover, :focus-visible) {\n    text-decoration-line: underline;\n  }\n\n  .v-link:hover {\n    text-decoration-color: currentcolor;\n  }\n\n  /* No tone table: the link blends into its sentence, and only the hover singles it out. */\n  .v-link[data-tone='inherit'] {\n    color: inherit;\n  }\n\n  /* A disabled link keeps its subtle colour: the rule further down would lose to this one. */\n  .v-link[data-tone='inherit']:hover:not([aria-disabled='true']) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-link:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-link-external {\n    margin-inline-start: var(--vectis-space-1);\n    vertical-align: middle;\n  }\n\n  .v-link[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration-color: currentcolor;\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-link[aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VLink/VLink.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIcon/VIcon.js";
+import { useInertLink as r } from "../../composables/useInertLink.js";
+import { open_in_new as i } from "../VIcon/icons/open_in_new.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeProps as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, useAttrs as _ } from "vue";
+//#region src/components/VLink/VLink.vue?vue&type=script&setup=true&lang.ts
+var v = [
+	"data-tone",
+	"data-underline",
+	"target",
+	"rel",
+	"aria-disabled",
+	"href"
+], y = { class: "v-visually-hidden" }, b = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "VLink",
+	props: {
+		href: {},
+		tone: { default: "accent" },
+		underline: { default: "always" },
+		external: {
+			type: Boolean,
+			default: !1
+		},
+		externalIcon: { default: () => i },
+		hideExternalIcon: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(i) {
+		let d = i, b = _(), x = e(), S = r({
+			href: () => d.href,
+			inert: () => d.disabled,
+			attrs: () => b
+		}), C = o(() => d.external || b.target === "_blank");
+		return (e, r) => (p(), l("a", f({
+			class: "v-link v-tone",
+			"data-tone": i.tone,
+			"data-underline": i.underline,
+			target: i.external ? "_blank" : void 0,
+			rel: i.external ? "noopener noreferrer" : void 0,
+			"aria-disabled": g(S).isInertLink.value ? "true" : void 0
+		}, g(S).attrs.value, { href: g(S).linkHref.value }), [m(e.$slots, "default"), C.value ? (p(), l(a, { key: 0 }, [i.hideExternalIcon ? c("", !0) : (p(), s(n, f({
+			key: 0,
+			class: "v-link-external"
+		}, g(t)(i.externalIcon), { mirrored: "" }), null, 16)), u("span", y, h(g(x).link.newTab), 1)], 64)) : c("", !0)], 16, v));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=VLink.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VLink/VLink.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VLink.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VLink/VLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A native link painted in a tone. It takes its size from the text around it. An external link\n * opens in a new tab and says so, with an icon and words for assistive technology.\n */\nimport { computed, useAttrs } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { open_in_new as openInNewIcon } from '../VIcon/icons/open_in_new'\nimport type { IconSource } from '../VIcon/types'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useMessages } from '../../i18n/state'\n\n/**\n * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n * the parent and turns to the accent on hover.\n */\nexport type LinkTone = 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'inherit'\n\n/** When the link is underlined: always, on hover and focus only, or never. */\nexport type LinkUnderline = 'always' | 'hover' | 'none'\n\ninterface LinkProps {\n  /** Where the link goes. */\n  href: string\n  /**\n   * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n   * the parent, muted text for instance, and turns to the accent on hover.\n   */\n  tone?: LinkTone\n  /**\n   * When the link is underlined. Keep `always` inside running text, where colour alone does not\n   * tell a link apart; `hover` and `none` suit menus and lists of links.\n   */\n  underline?: LinkUnderline\n  /**\n   * Opens the link in a new tab, with `rel=\"noopener noreferrer\"`, and says so: an icon, and\n   * words for screen readers. A `target=\"_blank\"` passed as an attribute says so too.\n   */\n  external?: boolean\n  /** The icon marking an external link: an icon name, or an explicit render. */\n  externalIcon?: IconSource\n  /** Removes the icon of an external link. Screen readers still hear that it opens a new tab. */\n  hideExternalIcon?: boolean\n  /** Makes the link unusable: its address is removed and it is marked `aria-disabled`. */\n  disabled?: boolean\n}\n\n// The attributes are bound by hand: on a disabled link, useInertLink drops the click listeners.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<LinkProps>(), {\n  tone: 'accent',\n  underline: 'always',\n  external: false,\n  externalIcon: () => openInNewIcon,\n  hideExternalIcon: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The text of the link. */\n  default(): unknown\n}>()\n\nconst attrs = useAttrs()\nconst m = useMessages()\n\nconst link = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => attrs,\n})\n\nconst newTab = computed(() => props.external || attrs.target === '_blank')\n</script>\n\n<template>\n  <!-- `target` and `rel` come before the forwarded attributes, which may replace them. -->\n  <a\n    class=\"v-link v-tone\"\n    :data-tone=\"tone\"\n    :data-underline=\"underline\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n    :aria-disabled=\"link.isInertLink.value ? 'true' : undefined\"\n    v-bind=\"link.attrs.value\"\n    :href=\"link.linkHref.value\"\n    ><slot /><template v-if=\"newTab\"\n      ><VIcon\n        v-if=\"!hideExternalIcon\"\n        class=\"v-link-external\"\n        v-bind=\"iconProps(externalIcon)\"\n        mirrored\n      /><span class=\"v-visually-hidden\">{{ m.link.newTab }}</span></template\n    ></a\n  >\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The size, weight and line height are the surrounding text's. The icon follows that size too,\n   * whatever icon size an ancestor sets.\n   */\n  .v-link {\n    --vectis-icon-size: 1em;\n\n    border-radius: var(--vectis-radius-xs);\n    color: var(--tone-text-tinted);\n    text-decoration-line: none;\n    text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);\n    cursor: pointer;\n    transition: text-decoration-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-link[data-underline='always'],\n  .v-link[data-underline='hover']:is(:hover, :focus-visible) {\n    text-decoration-line: underline;\n  }\n\n  .v-link:hover {\n    text-decoration-color: currentcolor;\n  }\n\n  /* No tone table: the link blends into its sentence, and only the hover singles it out. */\n  .v-link[data-tone='inherit'] {\n    color: inherit;\n  }\n\n  /* A disabled link keeps its subtle colour: the rule further down would lose to this one. */\n  .v-link[data-tone='inherit']:hover:not([aria-disabled='true']) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-link:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-link-external {\n    margin-inline-start: var(--vectis-space-1);\n    vertical-align: middle;\n  }\n\n  .v-link[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration-color: currentcolor;\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-link[aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAcR,IAAQ,EAAS,GACjB,IAAI,EAAY,GAEhB,IAAO,EAAa;GACxB,YAAY,EAAM;GAClB,aAAa,EAAM;GACnB,aAAa;EACf,CAAC,GAEK,IAAS,QAAe,EAAM,YAAY,EAAM,WAAW,QAAQ;yBAKvE,EAiBC,KAjBD,EAiBC;GAhBC,OAAM;GACL,aAAW,EAAA;GACX,kBAAgB,EAAA;GAChB,QAAQ,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAK,EAAA,WAAQ,wBAA2B,KAAA;GACxC,iBAAe,EAAA,CAAA,CAAI,CAAC,YAAY,QAAK,SAAY,KAAA;KAC1C,EAAA,CAAA,CAAI,CAAC,MAAM,OAAK,EACvB,MAAM,EAAA,CAAA,CAAI,CAAC,SAAS,MAAA,CAAA,GAAA,CACpB,EAAQ,EAAA,QAAA,SAAA,GAAgB,EAAA,SAAA,EAAA,GAAhB,EAOR,GAAA,EAAA,KAAA,EAAA,GAAA,CALU,EAAA,mBAGC,EAAA,IAAA,EAAA,KAHD,EAAA,GADR,EAKC,GALD,EAKC;;GAHA,OAAM;KACE,EAAA,CAAA,CAAS,CAAC,EAAA,YAAY,GAAA,EAC9B,UAAA,GAAQ,CAAA,GAAA,MAAA,EAAA,IACR,EAA0D,QAA1D,GAA0D,EAAvB,EAAA,CAAA,CAAC,CAAC,KAAK,MAAM,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VListbox/VListboxChevron.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-listbox-chevron{color:var(--vectis-color-text-muted);transition:rotate var(--vectis-duration-fast) var(--vectis-ease-default)}.v-listbox-chevron[data-open]{rotate:180deg}@media (prefers-reduced-motion:reduce){.v-listbox-chevron{transition:none}}}

package/dist/components/VListbox/VListboxChevron.d.ts

@@ -0,0 +1,12 @@
+import { IconSource } from '../VIcon/types.js';
+interface ListboxChevronProps {
+    /** The icon to draw. */
+    icon: IconSource;
+    /** Whether the list is open. */
+    open?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<ListboxChevronProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListboxChevronProps> & Readonly<{}>, {
+    open: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VListbox/VListboxChevron.js

@@ -0,0 +1,9 @@
+import './VListboxChevron.css';
+import e from "./VListboxChevron.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                */
+//#region src/components/VListbox/VListboxChevron.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VListboxChevron.js.map

package/dist/components/VListbox/VListboxChevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxChevron.js","names":[],"sources":["../../../src/components/VListbox/VListboxChevron.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Draw the chevron at the end of a field owning a listbox, turned while the list is open. It is\n * decorative: the field itself says whether the list is expanded.\n */\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxChevronProps {\n  /** The icon to draw. */\n  icon: IconSource\n  /** Whether the list is open. */\n  open?: boolean\n}\n\nwithDefaults(defineProps<ListboxChevronProps>(), { open: false })\n</script>\n\n<template>\n  <!-- `.v-input-icon-end` lets VInput pin it to the end of the field and reserve its room. -->\n  <VIcon\n    v-bind=\"iconProps(icon)\"\n    class=\"v-listbox-chevron v-input-icon-end\"\n    :data-open=\"open ? '' : undefined\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-chevron {\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-listbox-chevron[data-open] {\n    rotate: 180deg;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-listbox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxChevron.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { iconProps as e } from "../VIcon/iconProps.js";
+import t from "../VIcon/VIcon.js";
+import { createBlock as n, defineComponent as r, mergeProps as i, openBlock as a, unref as o } from "vue";
+//#region src/components/VListbox/VListboxChevron.vue?vue&type=script&setup=true&lang.ts
+var s = /*@__PURE__*/ r({
+	__name: "VListboxChevron",
+	props: {
+		icon: {},
+		open: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(r) {
+		return (s, c) => (a(), n(t, i(o(e)(r.icon), {
+			class: "v-listbox-chevron v-input-icon-end",
+			"data-open": r.open ? "" : void 0,
+			"aria-hidden": "true"
+		}), null, 16, ["data-open"]));
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=VListboxChevron.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VListbox/VListboxChevron.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxChevron.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxChevron.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Draw the chevron at the end of a field owning a listbox, turned while the list is open. It is\n * decorative: the field itself says whether the list is expanded.\n */\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxChevronProps {\n  /** The icon to draw. */\n  icon: IconSource\n  /** Whether the list is open. */\n  open?: boolean\n}\n\nwithDefaults(defineProps<ListboxChevronProps>(), { open: false })\n</script>\n\n<template>\n  <!-- `.v-input-icon-end` lets VInput pin it to the end of the field and reserve its room. -->\n  <VIcon\n    v-bind=\"iconProps(icon)\"\n    class=\"v-listbox-chevron v-input-icon-end\"\n    :data-open=\"open ? '' : undefined\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-chevron {\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-listbox-chevron[data-open] {\n    rotate: 180deg;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-listbox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;yBAqBE,EAKE,GALF,EACU,EAIR,CAAA,CAJiB,CAAC,EAAA,IAAI,GAAA;GACtB,OAAM;GACL,aAAW,EAAA,OAAI,KAAQ,KAAA;GACxB,eAAY"}

package/dist/components/VListbox/VListboxGroup.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-listbox-group{gap:var(--vectis-space-1);flex-direction:column;flex:none;display:flex}.v-listbox-group-label{min-block-size:var(--control-height);padding-block:var(--vectis-space-1);padding-inline:var(--control-padding-inline);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);color:var(--vectis-color-text-muted);flex:none;align-items:center;display:flex}}

package/dist/components/VListbox/VListboxGroup.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Group generated options under their accessible label; groups and options are the listbox's
+ * permitted children. The panel renders the heading among the group's rows, so the virtual mode
+ * can measure it and leave it out like any other row.
+ */
+interface ListboxGroupProps {
+    /** The name of the block. */
+    label: string;
+    /**
+     * The id of the heading rendered inside the group, which then names it. Without one, the
+     * heading is out of the rendered window and the name is given as `aria-label`.
+     */
+    labelId?: string;
+}
+type __VLS_Slots = {
+    /** The heading and the options belonging to this block. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<ListboxGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListboxGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VListbox/VListboxGroup.js

@@ -0,0 +1,9 @@
+import './VListboxGroup.css';
+import e from "./VListboxGroup.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                              */
+//#region src/components/VListbox/VListboxGroup.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VListboxGroup.js.map

package/dist/components/VListbox/VListboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxGroup.js","names":[],"sources":["../../../src/components/VListbox/VListboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Group generated options under their accessible label; groups and options are the listbox's\n * permitted children. The panel renders the heading among the group's rows, so the virtual mode\n * can measure it and leave it out like any other row.\n */\n\ninterface ListboxGroupProps {\n  /** The name of the block. */\n  label: string\n  /**\n   * The id of the heading rendered inside the group, which then names it. Without one, the\n   * heading is out of the rendered window and the name is given as `aria-label`.\n   */\n  labelId?: string\n}\n\ndefineProps<ListboxGroupProps>()\n\ndefineSlots<{\n  /** The heading and the options belonging to this block. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    class=\"v-listbox-group\"\n    :aria-labelledby=\"labelId\"\n    :aria-label=\"labelId ? undefined : label\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * It refuses to shrink, where a menu group has no need to: this panel is a column of bounded\n   * height that scrolls, and a block left free to shrink would be squashed to make its content\n   * fit; the same reason the state rows and the foot of the list refuse it too. Its gap matches\n   * the panel's, which the virtual mode relies on to size the space standing for hidden rows.\n   */\n  .v-listbox-group {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The heading is a row of the panel: it is not something that can be chosen. */\n  .v-listbox-group-label {\n    display: flex;\n    flex: none;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,21 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/components/VListbox/VListboxGroup.vue?vue&type=script&setup=true&lang.ts
+var i = ["aria-labelledby", "aria-label"], a = /*@__PURE__*/ t({
+	__name: "VListboxGroup",
+	props: {
+		label: {},
+		labelId: {}
+	},
+	setup(t) {
+		return (a, o) => (n(), e("div", {
+			role: "group",
+			class: "v-listbox-group",
+			"aria-labelledby": t.labelId,
+			"aria-label": t.labelId ? void 0 : t.label
+		}, [r(a.$slots, "default")], 8, i));
+	}
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=VListboxGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VListbox/VListboxGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Group generated options under their accessible label; groups and options are the listbox's\n * permitted children. The panel renders the heading among the group's rows, so the virtual mode\n * can measure it and leave it out like any other row.\n */\n\ninterface ListboxGroupProps {\n  /** The name of the block. */\n  label: string\n  /**\n   * The id of the heading rendered inside the group, which then names it. Without one, the\n   * heading is out of the rendered window and the name is given as `aria-label`.\n   */\n  labelId?: string\n}\n\ndefineProps<ListboxGroupProps>()\n\ndefineSlots<{\n  /** The heading and the options belonging to this block. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    class=\"v-listbox-group\"\n    :aria-labelledby=\"labelId\"\n    :aria-label=\"labelId ? undefined : label\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * It refuses to shrink, where a menu group has no need to: this panel is a column of bounded\n   * height that scrolls, and a block left free to shrink would be squashed to make its content\n   * fit; the same reason the state rows and the foot of the list refuse it too. Its gap matches\n   * the panel's, which the virtual mode relies on to size the space standing for hidden rows.\n   */\n  .v-listbox-group {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The heading is a row of the panel: it is not something that can be chosen. */\n  .v-listbox-group-label {\n    display: flex;\n    flex: none;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;yBA0BE,EAOM,OAAA;GANJ,MAAK;GACL,OAAM;GACL,mBAAiB,EAAA;GACjB,cAAY,EAAA,UAAU,KAAA,IAAY,EAAA;MAEnC,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VListbox/VListboxOption.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-listbox-option{align-items:center;gap:var(--control-gap);width:100%;min-height:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);color:var(--vectis-color-text);border-radius:min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));font-family:inherit;font-size:var(--control-font-size);line-height:var(--vectis-text-body-md-leading);text-align:start;cursor:pointer;background:0 0;border:none;display:flex}.v-listbox-option-label{flex:1;min-inline-size:0}.v-listbox-option:hover:not([aria-disabled=true]),.v-listbox-option[data-active]{background:var(--vectis-color-surface-muted);outline:none}.v-listbox-option[aria-selected=true]{color:var(--vectis-color-accent-text)}.v-listbox-option[aria-disabled=true]{color:var(--vectis-color-text-subtle);cursor:not-allowed;background:0 0}}

package/dist/components/{VCombobox/VComboboxOption.d.ts → VListbox/VListboxOption.d.ts}

@@ -1,5 +1,5 @@
 import { IconSource } from '../VIcon/types.js';
-interface ComboboxOptionProps {
+interface ListboxOptionProps {
     /** An icon before the label: an icon name, or an explicit render. */
     icon?: IconSource;
     /** Marks the option as one of the chosen ones, which also draws the tick. */
@@ -13,14 +13,14 @@ type __VLS_Slots = {
     /** What the row shows. */
     default?(): unknown;
 };
-declare const __VLS_base: import('vue').DefineComponent<ComboboxOptionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<ListboxOptionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: () => any;
-}, string, import('vue').PublicProps, Readonly<ComboboxOptionProps> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<ListboxOptionProps> & Readonly<{
     onSelect?: (() => any) | undefined;
 }>, {
     disabled: boolean;
-    icon: IconSource;
     selected: boolean;
+    icon: IconSource;
     active: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/VListbox/VListboxOption.js

@@ -0,0 +1,9 @@
+import './VListboxOption.css';
+import e from "./VListboxOption.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                               */
+//#region src/components/VListbox/VListboxOption.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VListboxOption.js.map

package/dist/components/VListbox/VListboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxOption.js","names":[],"sources":["../../../src/components/VListbox/VListboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Options use aria-disabled while field focus stays on aria-activedescendant; do not apply\n * native disabling to the active-descendant target.\n */\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ListboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-listbox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-listbox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-listbox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-option {\n    /*\n     * Every dimension is inherited from the panel, which carries the shared size class, and the\n     * icons follow through the same inheritance. The type is composite, exactly as in a menu\n     * row: the SIZE comes from the scale, the line height stays that of body text; a unitless\n     * ratio, so it follows the size; and the weight stays regular, since a row may wrap.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-listbox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-listbox-option:hover:not([aria-disabled='true']),\n  .v-listbox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-listbox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /*\n   * Matched on the ARIA state and not on the native one, which this component deliberately\n   * never sets; see the introduction.\n   */\n  .v-listbox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/{VCombobox/VComboboxOption.vue_vue_type_script_setup_true_lang.js → VListbox/VListboxOption.vue_vue_type_script_setup_true_lang.js}

@@ -2,13 +2,13 @@ import { iconProps as e } from "../VIcon/iconProps.js";
 import t from "../VIcon/VIcon.js";
 import { check as n } from "../VIcon/icons/check.js";
 import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, normalizeProps as l, openBlock as u, renderSlot as d, unref as f } from "vue";
-//#region src/components/VCombobox/VComboboxOption.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/VListbox/VListboxOption.vue?vue&type=script&setup=true&lang.ts
 var p = [
 	"aria-selected",
 	"aria-disabled",
 	"data-active"
-], m = { class: "v-combobox-option-label" }, h = /*@__PURE__*/ s({
-	__name: "VComboboxOption",
+], m = { class: "v-listbox-option-label" }, h = /*@__PURE__*/ s({
+	__name: "VListboxOption",
 	props: {
 		icon: { default: void 0 },
 		selected: {
@@ -34,7 +34,7 @@ var p = [
 			type: "button",
 			role: "option",
 			tabindex: "-1",
-			class: "v-combobox-option",
+			class: "v-listbox-option",
 			"aria-selected": s.selected,
 			"aria-disabled": s.disabled ? "true" : void 0,
 			"data-active": s.active ? "" : void 0,
@@ -45,7 +45,7 @@ var p = [
 			s.selected ? (u(), r(t, {
 				key: 1,
 				name: f(n),
-				class: "v-combobox-option-check"
+				class: "v-listbox-option-check"
 			}, null, 8, ["name"])) : i("", !0)
 		], 8, p));
 	}
@@ -53,4 +53,4 @@ var p = [
 //#endregion
 export { h as default };
 
-//# sourceMappingURL=VComboboxOption.vue_vue_type_script_setup_true_lang.js.map
+//# sourceMappingURL=VListboxOption.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VListbox/VListboxOption.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxOption.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Options use aria-disabled while field focus stays on aria-activedescendant; do not apply\n * native disabling to the active-descendant target.\n */\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ListboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-listbox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-listbox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-listbox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-option {\n    /*\n     * Every dimension is inherited from the panel, which carries the shared size class, and the\n     * icons follow through the same inheritance. The type is composite, exactly as in a menu\n     * row: the SIZE comes from the scale, the line height stays that of body text; a unitless\n     * ratio, so it follows the size; and the weight stays regular, since a row may wrap.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-listbox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-listbox-option:hover:not([aria-disabled='true']),\n  .v-listbox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-listbox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /*\n   * Matched on the ARIA state and not on the native one, which this component deliberately\n   * never sets; see the introduction.\n   */\n  .v-listbox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAM,IAAQ,GAOR,IAAO;EAUb,SAAS,IAAU;GACb,EAAM,YACV,EAAK,QAAQ;EACf;yBAIE,EAaS,UAAA;GAZP,MAAK;GACL,MAAK;GACL,UAAS;GACT,OAAM;GACL,iBAAe,EAAA;GACf,iBAAe,EAAA,WAAQ,SAAY,KAAA;GACnC,eAAa,EAAA,SAAM,KAAQ,KAAA;GACpB;;GAEK,EAAA,QAAA,EAAA,GAAb,EAA8C,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GACzC,EAAoD,QAApD,GAAoD,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;GAChC,EAAA,YAAA,EAAA,GAAb,EAA0E,GAAA;;IAAlD,MAAM,EAAA,CAAA;IAAW,OAAM"}

package/dist/components/VListbox/VListboxPanel.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-listbox-panel{overflow:auto}.v-listbox-panel[data-virtual]{overflow-anchor:none}.v-listbox-spacer{flex:none}}

package/dist/components/VListbox/VListboxPanel.d.ts

@@ -0,0 +1,59 @@
+import { Listbox, ListboxBlock, ListboxRenderedOption } from '../../composables/useListbox.js';
+import { ListboxOption, ListboxOptionSlotProps } from '../../types.js';
+import { PopoverPlacement } from '../VPopover/VPopover.js';
+interface ListboxPanelProps {
+    /** The panel's id, which the field points at through `aria-controls`. */
+    id: string;
+    /** The CSS anchor name the owner sets on its field, which the panel opens against. */
+    anchor: string;
+    /** Where the panel opens relative to the field. */
+    placement: PopoverPlacement;
+    /** The size the options take, the field's own. */
+    size: 'sm' | 'md' | 'lg';
+    /** The field's reduced density. */
+    compact?: boolean;
+    /** Several options can be chosen. */
+    multiple?: boolean;
+    /** Only the rows near the visible part of the panel are rendered. */
+    virtual?: boolean;
+    /** The rows to render. */
+    blocks: ListboxBlock[];
+    /** Measures a rendered row, in the virtual mode. */
+    measure: Listbox['measureRow'];
+}
+type __VLS_Props = ListboxPanelProps;
+type __VLS_Slots = {
+    /** What a row shows, in place of the plain label. */
+    option?(props: ListboxOptionSlotProps): unknown;
+    /** Rows of the owner's own after the options: an empty state, a loading foot. */
+    default?(): unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the panel is showing. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** The panel element, which scrolls. */
+    el: import('vue').ComputedRef<HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (option: ListboxOption) => any;
+    "update:open": (value: boolean) => any;
+    highlight: (row: ListboxRenderedOption) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((option: ListboxOption) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onHighlight?: ((row: ListboxRenderedOption) => any) | undefined;
+}>, {
+    compact: boolean;
+    multiple: boolean;
+    virtual: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VListbox/VListboxPanel.js

@@ -0,0 +1,9 @@
+import './VListboxPanel.css';
+import e from "./VListboxPanel.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                              */
+//#region src/components/VListbox/VListboxPanel.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VListboxPanel.js.map

package/dist/components/VListbox/VListboxPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxPanel.js","names":[],"sources":["../../../src/components/VListbox/VListboxPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Render the floating listbox of VCombobox and VSelect from the rows `useListbox` works out. The\n * panel carries both the listbox role and the scrolling: the virtual window, the scrolling of the\n * highlighted option and the observer watching for the end of the list all rely on it, so no\n * wrapper may come between them.\n */\nimport { computed, ref } from 'vue'\n\nimport type { Listbox, ListboxBlock, ListboxRenderedOption } from '../../composables/useListbox'\nimport type { ListboxOption, ListboxOptionSlotProps } from '../../types'\nimport VPopover, { type PopoverPlacement } from '../VPopover/VPopover.vue'\nimport VListboxGroup from './VListboxGroup.vue'\nimport VListboxOption from './VListboxOption.vue'\nimport VListboxSeparator from './VListboxSeparator.vue'\n\ninterface ListboxPanelProps {\n  /** The panel's id, which the field points at through `aria-controls`. */\n  id: string\n  /** The CSS anchor name the owner sets on its field, which the panel opens against. */\n  anchor: string\n  /** Where the panel opens relative to the field. */\n  placement: PopoverPlacement\n  /** The size the options take, the field's own. */\n  size: 'sm' | 'md' | 'lg'\n  /** The field's reduced density. */\n  compact?: boolean\n  /** Several options can be chosen. */\n  multiple?: boolean\n  /** Only the rows near the visible part of the panel are rendered. */\n  virtual?: boolean\n  /** The rows to render. */\n  blocks: ListboxBlock[]\n  /** Measures a rendered row, in the virtual mode. */\n  measure: Listbox['measureRow']\n}\n\nwithDefaults(defineProps<ListboxPanelProps>(), {\n  compact: false,\n  multiple: false,\n  virtual: false,\n})\n\n/** Whether the panel is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst emit = defineEmits<{\n  /** An option was clicked. What that does to the selection is the field's business. */\n  select: [option: ListboxOption]\n  /** The pointer moved over an option, which should become the highlighted one. */\n  highlight: [row: ListboxRenderedOption]\n}>()\n\ndefineSlots<{\n  /** What a row shows, in place of the plain label. */\n  option?(props: ListboxOptionSlotProps): unknown\n  /** Rows of the owner's own after the options: an empty state, a loading foot. */\n  default?(): unknown\n}>()\n\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// @a11y\n/*\n * The focus must never leave the field. Without cancelling the press, clicking an option takes\n * the focus off the field, the field's focusout closes the panel before the click is turned into\n * a selection, and choosing with the mouse stops working entirely.\n */\nfunction onMousedown(event: MouseEvent) {\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** The panel element, which scrolls. */\n  el: computed(() => popoverRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VPopover\n    :id=\"id\"\n    ref=\"popoverRef\"\n    v-model:open=\"open\"\n    mode=\"manual\"\n    :anchor=\"anchor\"\n    match-trigger\n    :placement=\"placement\"\n    role=\"listbox\"\n    class=\"v-listbox-panel v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-multiselectable=\"multiple ? 'true' : undefined\"\n    :data-virtual=\"virtual ? '' : undefined\"\n    @mousedown=\"onMousedown\"\n  >\n    <template v-for=\"block in blocks\" :key=\"block.key\">\n      <div\n        v-if=\"block.kind === 'spacer'\"\n        class=\"v-listbox-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${block.size}px` }\"\n      />\n\n      <VListboxSeparator\n        v-else-if=\"block.kind === 'separator'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n      />\n\n      <VListboxGroup\n        v-else-if=\"block.kind === 'group'\"\n        :label=\"block.label\"\n        :label-id=\"block.labelId\"\n      >\n        <template v-for=\"child in block.children\" :key=\"child.key\">\n          <div\n            v-if=\"child.kind === 'spacer'\"\n            class=\"v-listbox-spacer\"\n            aria-hidden=\"true\"\n            :style=\"{ blockSize: `${child.size}px` }\"\n          />\n          <span\n            v-else-if=\"child.kind === 'heading'\"\n            :id=\"child.id\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            class=\"v-listbox-group-label\"\n            >{{ child.label }}</span\n          >\n          <VListboxOption\n            v-else-if=\"child.kind === 'option'\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            v-bind=\"child.row\"\n            @select=\"emit('select', child.option)\"\n            @pointermove=\"emit('highlight', child)\"\n          >\n            <slot name=\"option\" v-bind=\"child.slot\">{{ child.option.label }}</slot>\n          </VListboxOption>\n        </template>\n      </VListboxGroup>\n\n      <VListboxOption\n        v-else-if=\"block.kind === 'option'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n        v-bind=\"block.row\"\n        @select=\"emit('select', block.option)\"\n        @pointermove=\"emit('highlight', block)\"\n      >\n        <slot name=\"option\" v-bind=\"block.slot\">{{ block.option.label }}</slot>\n      </VListboxOption>\n    </template>\n\n    <slot />\n  </VPopover>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * VPopover brings the floating element, its open state, its anchoring, its placement and its\n   * surface. The shared size class lets the options and the owner's state rows read their\n   * dimensions from the panel with no size table here; the owner sets the maximum height.\n   */\n  .v-listbox-panel {\n    overflow: auto;\n  }\n\n  /* The virtual mode corrects the scroll itself when a row above the view changes height. */\n  .v-listbox-panel[data-virtual] {\n    overflow-anchor: none;\n  }\n\n  .v-listbox-spacer {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,123 @@
+import e from "../VPopover/VPopover.js";
+import t from "./VListboxGroup.js";
+import n from "./VListboxOption.js";
+import r from "./VListboxSeparator.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, useModel as y, withCtx as b } from "vue";
+//#region src/components/VListbox/VListboxPanel.vue?vue&type=script&setup=true&lang.ts
+var x = ["id"], S = /*@__PURE__*/ u({
+	__name: "VListboxPanel",
+	props: /*@__PURE__*/ d({
+		id: {},
+		anchor: {},
+		placement: {},
+		size: {},
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		virtual: {
+			type: Boolean,
+			default: !1
+		},
+		blocks: {},
+		measure: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ d(["select", "highlight"], ["update:open"]),
+	setup(u, { expose: d, emit: S }) {
+		let C = y(u, "open"), w = S, T = h(null);
+		function E(e) {
+			e.preventDefault();
+		}
+		return d({ el: a(() => T.value?.el ?? null) }), (a, d) => (m(), o(e, {
+			id: u.id,
+			ref_key: "popoverRef",
+			ref: T,
+			open: C.value,
+			"onUpdate:open": d[0] ||= (e) => C.value = e,
+			mode: "manual",
+			anchor: u.anchor,
+			"match-trigger": "",
+			placement: u.placement,
+			role: "listbox",
+			class: "v-listbox-panel v-control",
+			"data-size": u.size,
+			"data-compact": u.compact ? "" : void 0,
+			"aria-multiselectable": u.multiple ? "true" : void 0,
+			"data-virtual": u.virtual ? "" : void 0,
+			onMousedown: E
+		}, {
+			default: b(() => [(m(!0), c(i, null, g(u.blocks, (e) => (m(), c(i, { key: e.key }, [e.kind === "spacer" ? (m(), c("div", {
+				key: 0,
+				class: "v-listbox-spacer",
+				"aria-hidden": "true",
+				style: p({ blockSize: `${e.size}px` })
+			}, null, 4)) : e.kind === "separator" ? (m(), o(r, {
+				key: 1,
+				ref_for: !0,
+				ref: u.virtual ? (t) => u.measure(t, e.at) : void 0
+			}, null, 512)) : e.kind === "group" ? (m(), o(t, {
+				key: 2,
+				label: e.label,
+				"label-id": e.labelId
+			}, {
+				default: b(() => [(m(!0), c(i, null, g(e.children, (e) => (m(), c(i, { key: e.key }, [e.kind === "spacer" ? (m(), c("div", {
+					key: 0,
+					class: "v-listbox-spacer",
+					"aria-hidden": "true",
+					style: p({ blockSize: `${e.size}px` })
+				}, null, 4)) : e.kind === "heading" ? (m(), c("span", {
+					key: 1,
+					id: e.id,
+					ref_for: !0,
+					ref: u.virtual ? (t) => u.measure(t, e.at) : void 0,
+					class: "v-listbox-group-label"
+				}, v(e.label), 9, x)) : e.kind === "option" ? (m(), o(n, f({
+					key: 2,
+					ref_for: !0,
+					ref: u.virtual ? (t) => u.measure(t, e.at) : void 0
+				}, { ref_for: !0 }, e.row, {
+					onSelect: (t) => w("select", e.option),
+					onPointermove: (t) => w("highlight", e)
+				}), {
+					default: b(() => [_(a.$slots, "option", f({ ref_for: !0 }, e.slot), () => [l(v(e.option.label), 1)])]),
+					_: 2
+				}, 1040, ["onSelect", "onPointermove"])) : s("", !0)], 64))), 128))]),
+				_: 2
+			}, 1032, ["label", "label-id"])) : e.kind === "option" ? (m(), o(n, f({
+				key: 3,
+				ref_for: !0,
+				ref: u.virtual ? (t) => u.measure(t, e.at) : void 0
+			}, { ref_for: !0 }, e.row, {
+				onSelect: (t) => w("select", e.option),
+				onPointermove: (t) => w("highlight", e)
+			}), {
+				default: b(() => [_(a.$slots, "option", f({ ref_for: !0 }, e.slot), () => [l(v(e.option.label), 1)])]),
+				_: 2
+			}, 1040, ["onSelect", "onPointermove"])) : s("", !0)], 64))), 128)), _(a.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"id",
+			"open",
+			"anchor",
+			"placement",
+			"data-size",
+			"data-compact",
+			"aria-multiselectable",
+			"data-virtual"
+		]));
+	}
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=VListboxPanel.vue_vue_type_script_setup_true_lang.js.map