vectis-ui 0.12.0 → 0.13.0

package/dist/components/VSelect/VSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,424 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { useControlShape as t } from "../../composables/useControlShape.js";
+import n from "../VSpinner/VSpinner.js";
+import { useRootAttrs as r } from "../../composables/useRootAttrs.js";
+import { expand_more as i } from "../VIcon/icons/expand_more.js";
+import { useTimer as a } from "../../composables/useTimer.js";
+import { createNormalizedCache as ee, normalizeText as te } from "../../utils/text.js";
+import { toggleValue as ne } from "../../utils/array.js";
+import { iconStartListener as re } from "../../composables/useIconClickHandlers.js";
+import { canClear as ie } from "../../composables/useClearable.js";
+import { inputGroupKey as ae } from "../VInput/context.js";
+import oe from "../VInput/VInput.js";
+import { partitionAttrs as se } from "../../utils/attrs.js";
+import ce from "../VListbox/VListboxChevron.js";
+import le from "../VListbox/VListboxPanel.js";
+import ue from "../VListbox/VListboxValues.js";
+import { chipScaleFor as de } from "../../utils/chip.js";
+import { useFocusoutDismiss as fe } from "../../composables/useFocusoutDismiss.js";
+import { selectionOf as pe, useListbox as me } from "../../composables/useListbox.js";
+import { Fragment as he, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createVNode as ge, defineComponent as f, guardReactiveProps as p, inject as _e, mergeModels as m, mergeProps as h, normalizeClass as ve, normalizeProps as g, normalizeStyle as ye, onBeforeUnmount as be, onMounted as xe, openBlock as _, ref as v, renderList as Se, renderSlot as y, toDisplayString as b, unref as x, useId as Ce, useModel as we, watch as S, withCtx as C } from "vue";
+//#region src/components/VSelect/VSelect.vue?vue&type=script&setup=true&lang.ts
+var Te = [
+	"data-size",
+	"data-multiple",
+	"data-open"
+], Ee = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-required",
+	"aria-readonly"
+], De = {
+	key: 1,
+	class: "v-select-placeholder"
+}, Oe = [
+	"multiple",
+	"required",
+	"disabled"
+], ke = {
+	key: 0,
+	value: ""
+}, Ae = ["value", "disabled"], w = "a, button, input, select, textarea, [tabindex]", T = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "VSelect",
+	props: /*@__PURE__*/ m({
+		options: {},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		display: { default: "chip" },
+		max: { default: void 0 },
+		overflowText: {
+			type: Function,
+			default: void 0
+		},
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		iconStart: { default: void 0 },
+		iconStartLabel: { default: void 0 },
+		expandIcon: { default: () => i },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingText: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		clearLabel: { default: void 0 },
+		placement: { default: "bottom-start" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ m(["clear", "click:icon-start"], ["update:modelValue"]),
+	setup(i, { expose: f, emit: m }) {
+		let T = i, je = e(), Me = o(() => T.clearLabel ?? je.value.select.clear), Ne = m, { size: E, compact: D, disabled: O } = t(T, _e(ae, null)), Pe = o(() => de(E.value, D.value)), k = we(i, "modelValue"), { rootClass: Fe, rootStyle: Ie, forwardedAttrs: Le } = r(), Re = [
+			"name",
+			"form",
+			"autocomplete"
+		], ze = o(() => se(Le.value, Re)), Be = o(() => ze.value.picked), Ve = re((e) => Ne("click:icon-start", e)), He = o(() => ({
+			...ze.value.rest,
+			...Ve
+		})), Ue = v(null), A = v(null), j = v(null), We = v(null), M = Ce(), N = v(!1), P = v(!1), F = o(() => pe(k.value, T.multiple)), { allOptions: I, visible: L, optionOf: Ge, labelOf: R, remember: Ke, activeIndex: z, optionId: qe, highlightFirst: B, highlightLast: V, highlightSelected: Je, move: H, page: U, hover: Ye, blocks: Xe, measureRow: Ze } = me({
+			items: () => T.options,
+			selected: () => F.value,
+			open: () => N.value,
+			id: M,
+			panelEl: () => We.value?.el ?? null,
+			virtual: () => !1,
+			size: () => E.value,
+			compact: () => D.value
+		}), W = o(() => F.value.map(R).join(", ")), Qe = o(() => T.multiple && T.display === "text"), $e = o(() => T.multiple && !P.value && !N.value), et = o(() => ie(T, O.value, F.value.length > 0)), G = v(!1);
+		function K() {
+			O.value || T.readonly || N.value || (N.value = !0, Je());
+		}
+		function q() {
+			N.value && (N.value = !1, z.value = -1);
+		}
+		function tt() {
+			N.value ? q() : K();
+		}
+		let nt = fe(Ue, () => {
+			P.value = !1, q();
+		});
+		function rt(e) {
+			e.disabled || T.readonly || O.value || (Ke(e), T.multiple ? k.value = ne(F.value, e.value) : (k.value !== e.value && (k.value = e.value), q()));
+		}
+		function J() {
+			let e = L.value[z.value];
+			e && rt(e);
+		}
+		function it(e) {
+			!T.multiple || T.readonly || O.value || (k.value = F.value.filter((t) => t !== e), A.value?.focus());
+		}
+		function at() {
+			k.value = T.multiple ? [] : "", A.value?.focus(), Ne("clear");
+		}
+		let ot = ee(), Y = "", st = a();
+		function X(e) {
+			Y += te(e), st.start(() => Y = "", 500);
+			let t = L.value;
+			if (t.length === 0) return;
+			let n = [...Y].every((e) => e === Y[0]), r = n ? Y[0] : Y, i = z.value + (Y.length === 1 || n ? 1 : 0);
+			for (let e = 0; e < t.length; e++) {
+				let n = (Math.max(i, 0) + e) % t.length, a = t[n];
+				if (!a.disabled && ot(a, a.label).startsWith(r)) {
+					z.value = n;
+					return;
+				}
+			}
+		}
+		let ct = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+		function lt(e) {
+			if (!N.value) {
+				switch (e.key) {
+					case "ArrowDown":
+					case "ArrowUp":
+					case "Enter":
+					case " ":
+						e.preventDefault(), K();
+						return;
+					case "Home":
+						e.preventDefault(), K(), N.value && B();
+						return;
+					case "End":
+						e.preventDefault(), K(), N.value && V();
+						return;
+				}
+				ct(e) && (K(), N.value && X(e.key));
+				return;
+			}
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), H(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), e.altKey ? (J(), q()) : H(-1);
+					break;
+				case "Home":
+					e.preventDefault(), B();
+					break;
+				case "End":
+					e.preventDefault(), V();
+					break;
+				case "PageDown":
+					e.preventDefault(), U(10);
+					break;
+				case "PageUp":
+					e.preventDefault(), U(-10);
+					break;
+				case " ":
+					e.preventDefault(), Y ? X(" ") : J();
+					break;
+				case "Enter":
+					e.preventDefault(), J();
+					break;
+				case "Escape":
+					e.preventDefault(), q();
+					break;
+				case "Tab":
+					T.multiple || J(), q();
+					break;
+				default: ct(e) && X(e.key);
+			}
+		}
+		function ut(e) {
+			let t = e.target;
+			t.closest(".v-input-field") && !t.closest(w) && e.preventDefault();
+		}
+		function dt(e) {
+			let t = e.target;
+			O.value || !t.closest(".v-input-field") || t.closest(w) || (A.value?.focus(), tt());
+		}
+		function Z() {
+			let e = j.value;
+			if (e) {
+				for (let t of e.options) t.selected = t.value !== "" && ft.value.has(t.value);
+				!T.multiple && F.value.length === 0 && (e.value = "");
+			}
+		}
+		let ft = o(() => new Set(F.value.map(String)));
+		S([F, I], Z, { flush: "post" }), S(F, () => {
+			G.value &&= !j.value?.checkValidity();
+		}, { flush: "post" });
+		function pt() {
+			let e = j.value;
+			if (!e) return;
+			let t = [...e.selectedOptions].map((e) => I.value.find((t) => String(t.value) === e.value)).filter((e) => e !== void 0).map((e) => e.value);
+			k.value = T.multiple ? t : t[0] ?? "";
+		}
+		let Q = "", $ = null;
+		function mt() {
+			k.value = Array.isArray(Q) ? [...Q] : Q, G.value = !1, setTimeout(Z);
+		}
+		return xe(() => {
+			Q = Array.isArray(k.value) ? [...k.value] : k.value, Z(), $ = j.value?.form ?? null, $?.addEventListener("reset", mt);
+		}), be(() => $?.removeEventListener("reset", mt)), f({
+			focus: (e) => A.value?.focus(e),
+			el: A
+		}), (e, t) => (_(), l("div", {
+			ref_key: "rootEl",
+			ref: Ue,
+			class: ve(["v-select", x(Fe)]),
+			style: ye([{ "--chip-height": Pe.value.height }, x(Ie)]),
+			"data-size": x(E),
+			"data-multiple": i.multiple ? "" : void 0,
+			"data-open": N.value ? "" : void 0,
+			onFocusin: t[3] ||= (e) => P.value = !0,
+			onFocusout: t[4] ||= (...e) => x(nt) && x(nt)(...e)
+		}, [u("div", {
+			class: "v-select-control",
+			onMousedown: ut,
+			onClick: dt
+		}, [ge(oe, h({ class: ["v-input-end-pinned", { "v-input-chips": i.multiple && !Qe.value }] }, He.value, {
+			label: i.label,
+			hint: i.hint,
+			error: i.error,
+			required: i.required,
+			"hide-label": i.hideLabel,
+			"label-position": i.labelPosition,
+			size: x(E),
+			compact: x(D),
+			invalid: i.invalid || G.value,
+			disabled: x(O),
+			readonly: i.readonly,
+			"icon-start": i.iconStart,
+			"icon-start-label": i.iconStartLabel,
+			clearable: i.clearable,
+			"clear-visible": et.value,
+			"clear-label": Me.value,
+			onClear: at
+		}), d({
+			control: C(({ controlProps: e }) => [u("button", h({
+				ref_key: "triggerEl",
+				ref: A,
+				type: "button",
+				role: "combobox",
+				"aria-expanded": N.value,
+				"aria-controls": x(M),
+				"aria-activedescendant": N.value && x(z) >= 0 ? x(qe)(x(z)) : void 0,
+				"aria-required": i.required || void 0,
+				"aria-readonly": i.readonly || void 0
+			}, e, {
+				class: "v-select-trigger",
+				onClick: tt,
+				onKeydown: lt
+			}), [W.value ? (_(), l("span", {
+				key: 0,
+				class: ve(["v-select-value", { "v-visually-hidden": i.multiple }])
+			}, b(W.value), 3)) : i.placeholder ? (_(), l("span", De, b(i.placeholder), 1)) : c("", !0)], 16, Ee), u("select", h({
+				ref_key: "nativeEl",
+				ref: j
+			}, Be.value, {
+				class: "v-select-native v-hidden-input",
+				tabindex: "-1",
+				"aria-hidden": "true",
+				multiple: i.multiple || void 0,
+				required: i.required || void 0,
+				disabled: x(O) || void 0,
+				onChange: pt,
+				onFocus: t[0] ||= (e) => A.value?.focus(),
+				onInvalid: t[1] ||= (e) => G.value = !0
+			}), [i.multiple ? c("", !0) : (_(), l("option", ke)), (_(!0), l(he, null, Se(x(I), (e, t) => (_(), l("option", {
+				key: t,
+				value: String(e.value),
+				disabled: e.disabled
+			}, b(e.label), 9, Ae))), 128))], 16, Oe)]),
+			end: C(() => [i.loading ? (_(), s(n, {
+				key: 0,
+				class: "v-select-spinner v-input-icon-end",
+				label: i.loadingText
+			}, null, 8, ["label"])) : (_(), s(ce, {
+				key: 1,
+				icon: i.expandIcon,
+				open: N.value
+			}, null, 8, ["icon", "open"]))]),
+			_: 2
+		}, [i.multiple || e.$slots.start ? {
+			name: "start",
+			fn: C(() => [i.multiple ? (_(), s(ue, {
+				key: 0,
+				values: F.value,
+				display: i.display,
+				max: i.max,
+				collapsed: $e.value,
+				"overflow-text": i.overflowText,
+				scale: Pe.value,
+				removable: !i.readonly,
+				disabled: x(O),
+				"hide-text": "",
+				"label-of": x(R),
+				"option-of": x(Ge),
+				onRemove: it
+			}, d({ _: 2 }, [e.$slots.chip ? {
+				name: "chip",
+				fn: C((t) => [y(e.$slots, "chip", g(p(t)))]),
+				key: "0"
+			} : void 0, e.$slots.overflow ? {
+				name: "overflow",
+				fn: C((t) => [y(e.$slots, "overflow", g(p(t)))]),
+				key: "1"
+			} : void 0]), 1032, [
+				"values",
+				"display",
+				"max",
+				"collapsed",
+				"overflow-text",
+				"scale",
+				"removable",
+				"disabled",
+				"label-of",
+				"option-of"
+			])) : c("", !0), y(e.$slots, "start")]),
+			key: "0"
+		} : void 0, e.$slots["value-end"] ? {
+			name: "value-end",
+			fn: C(() => [y(e.$slots, "value-end")]),
+			key: "1"
+		} : void 0]), 1040, [
+			"class",
+			"label",
+			"hint",
+			"error",
+			"required",
+			"hide-label",
+			"label-position",
+			"size",
+			"compact",
+			"invalid",
+			"disabled",
+			"readonly",
+			"icon-start",
+			"icon-start-label",
+			"clearable",
+			"clear-visible",
+			"clear-label"
+		])], 32), ge(le, {
+			id: x(M),
+			ref_key: "panelRef",
+			ref: We,
+			open: N.value,
+			"onUpdate:open": t[2] ||= (e) => N.value = e,
+			anchor: "--select-anchor",
+			placement: i.placement,
+			class: "v-select-panel",
+			size: x(E),
+			compact: x(D),
+			multiple: i.multiple,
+			blocks: x(Xe),
+			measure: x(Ze),
+			onSelect: rt,
+			onHighlight: x(Ye)
+		}, d({ _: 2 }, [e.$slots.option ? {
+			name: "option",
+			fn: C((t) => [y(e.$slots, "option", g(p(t)))]),
+			key: "0"
+		} : void 0]), 1032, [
+			"id",
+			"open",
+			"placement",
+			"size",
+			"compact",
+			"multiple",
+			"blocks",
+			"measure",
+			"onHighlight"
+		])], 46, Te));
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=VSelect.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSelect.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VSelect/VSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A select-only combobox: a native button keeps DOM focus and moves aria-activedescendant through\n * the options, since a native `<select>` cannot draw its list with the design system on every\n * engine. A hidden native `<select>` carries the value into forms, with its constraint\n * validation, autofill and reset.\n */\n\nimport { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { toggleValue } from '../../utils/array'\nimport { partitionAttrs } from '../../utils/attrs'\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type SelectOption = ListboxOption\n\n/** A named block of options, the equivalent of a native `<optgroup>`. */\nexport type SelectGroup = ListboxGroup\n\n/** A rule drawn between two blocks of options, purely decorative. */\nexport type SelectSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type SelectItem = ListboxItem\n\n/** Where the list opens relative to the field. */\nexport type SelectPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type SelectSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type SelectDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type SelectOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type SelectChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type SelectOverflowSlotProps = ListboxOverflowSlotProps\n\ninterface SelectProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: SelectItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has been\n   * chosen inside the field, as chips or as text depending on `display`. The list then stays\n   * open while options are toggled.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: SelectDisplay\n  /**\n   * How many chosen values to show while the field is not focused, before the rest are summed\n   * up as \"+X\". Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the field for assistive technology,\n   * so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the field as required: an asterisk follows the label, the combobox is announced as\n   * required, and the hidden `<select>` a form reads is `required`.\n   */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: SelectSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /** What the field says while nothing is chosen. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. Its value is not submitted. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: the field stays focusable and its\n   * value is submitted, but the list never opens, the chips lose their crosses and no clear\n   * cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /**\n   * Says that the options are being loaded: a spinner takes the chevron's place. The list still\n   * opens.\n   */\n  loading?: boolean\n  /** What the spinner is announced as. It falls back to the design system dictionary. */\n  loadingText?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /** Where the list opens relative to the field. */\n  placement?: SelectPlacement\n}\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  compact: false,\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.select.clear)\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the selection. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: SelectOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: SelectChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: SelectOverflowSlotProps): unknown\n}>()\n\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, `''` while nothing is chosen, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper; the form attributes go to the hidden `<select>`, which\n// is what a form reads; everything else goes down to the button, the element assistive\n// technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst NATIVE_ONLY = ['name', 'form', 'autocomplete']\nconst split = computed(() => partitionAttrs(forwardedAttrs.value, NATIVE_ONLY))\nconst nativeAttrs = computed(() => split.value.picked)\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\nconst fieldAttrs = computed(() => ({ ...split.value.rest, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLButtonElement | null>(null)\nconst nativeEl = ref<HTMLSelectElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\nconst optionsId = useId()\n\nconst open = ref(false)\nconst focused = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\nconst {\n  allOptions,\n  visible,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightLast,\n  highlightSelected,\n  move,\n  page,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => false,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n// What the button says, which assistive technology reads as the combobox's value: the chosen\n// label, or every chosen label when the chips beside it show them.\nconst valueText = computed(() => selectedValues.value.map(labelOf).join(', '))\n\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// Folded, the values beyond `max` are summed up; under the focus, every value is there to be\n// seen and taken back.\nconst collapsed = computed(() => props.multiple && !focused.value && !open.value)\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, selectedValues.value.length > 0),\n)\n\n/** Whether the hidden `<select>` failed validation since the value last changed. */\nconst nativeInvalid = ref(false)\n\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  open.value = true\n  highlightSelected()\n}\n\nfunction closePanel() {\n  if (!open.value) return\n  open.value = false\n  activeIndex.value = -1\n}\n\nfunction togglePanel() {\n  if (open.value) closePanel()\n  else openPanel()\n}\n\nconst onFocusout = useFocusoutDismiss(rootEl, () => {\n  focused.value = false\n  closePanel()\n})\n\nfunction choose(option: SelectOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  remember(option)\n  if (props.multiple) {\n    model.value = toggleValue(selectedValues.value, option.value)\n  } else {\n    // Choosing the option already chosen (Tab without moving, for one) changes nothing.\n    if (model.value !== option.value) model.value = option.value\n    closePanel()\n  }\n}\n\nfunction chooseActive() {\n  const option = visible.value[activeIndex.value]\n  if (option) choose(option)\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  // The cross disappears along with its chip, so the focus would fall back to the page.\n  triggerEl.value?.focus()\n}\n\n/** The cross was pressed. It disappears with the selection, so the focus goes back to the button. */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  triggerEl.value?.focus()\n  emit('clear')\n}\n\nconst normalizedOf = createNormalizedCache<SelectOption>()\nlet typed = ''\nconst typeTimer = useTimer()\n\n// @keyboard\n/*\n * Typing a label's first letters highlights it, as a native list does: the letters typed within\n * half a second add up to a prefix, and the same letter repeated cycles through the options it\n * starts.\n */\nfunction typeahead(key: string) {\n  typed += normalizeText(key)\n  typeTimer.start(() => (typed = ''), 500)\n  const list = visible.value\n  if (list.length === 0) return\n  const cycling = [...typed].every((char) => char === typed[0])\n  const needle = cycling ? typed[0]! : typed\n  // A new prefix may match the highlighted option itself; a cycle moves on from it.\n  const from = activeIndex.value + (typed.length === 1 || cycling ? 1 : 0)\n  for (let step = 0; step < list.length; step++) {\n    const index = (Math.max(from, 0) + step) % list.length\n    const option = list[index]!\n    if (!option.disabled && normalizedOf(option, option.label).startsWith(needle)) {\n      activeIndex.value = index\n      return\n    }\n  }\n}\n\nconst printable = (event: KeyboardEvent) =>\n  event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey\n\n// @keyboard\n// The keys of the select-only combobox pattern. Enter and Space are consumed on the closed button\n// too, so the click they would synthesise does not toggle the list a second time.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!open.value) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        openPanel()\n        return\n      case 'Home':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightFirst()\n        return\n      case 'End':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightLast()\n        return\n    }\n    if (printable(event)) {\n      openPanel()\n      if (open.value) typeahead(event.key)\n    }\n    return\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      move(1)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (event.altKey) {\n        chooseActive()\n        closePanel()\n      } else move(-1)\n      break\n    case 'Home':\n      event.preventDefault()\n      highlightFirst()\n      break\n    case 'End':\n      event.preventDefault()\n      highlightLast()\n      break\n    case 'PageDown':\n      event.preventDefault()\n      page(10)\n      break\n    case 'PageUp':\n      event.preventDefault()\n      page(-10)\n      break\n    case ' ':\n      event.preventDefault()\n      // While letters are being typed, a space belongs to the prefix: \"New York\".\n      if (typed) typeahead(' ')\n      else chooseActive()\n      break\n    case 'Enter':\n      event.preventDefault()\n      chooseActive()\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open.\n      event.preventDefault()\n      closePanel()\n      break\n    case 'Tab':\n      // Leaving a single list takes the highlighted option, as the pattern prescribes.\n      if (!props.multiple) chooseActive()\n      closePanel()\n      break\n    default:\n      if (printable(event)) typeahead(event.key)\n  }\n}\n\nconst interactive = 'a, button, input, select, textarea, [tabindex]'\n\n// @core\n/*\n * The rest of the field is not focusable, so pressing it would hand the focus to the page: the\n * root's `focusout` then closes the list, and the click that follows reopens it.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  const target = event.target as Element\n  if (target.closest('.v-input-field') && !target.closest(interactive)) event.preventDefault()\n}\n\n/**\n * A click anywhere in the box of the field toggles the list, as one on the button does. The\n * field's own controls keep their clicks, and the label's reaches the button by itself.\n */\nfunction onControlClick(event: MouseEvent) {\n  const target = event.target as Element\n  if (resolvedDisabled.value || !target.closest('.v-input-field') || target.closest(interactive))\n    return\n  triggerEl.value?.focus()\n  togglePanel()\n}\n\n/*\n * The hidden `<select>` is written by hand rather than through `selected` bindings: a form reset\n * changes it behind the virtual DOM's back, which would then consider unchanged options already\n * in the right state.\n */\nfunction syncNative() {\n  const el = nativeEl.value\n  if (!el) return\n  for (const option of el.options) {\n    option.selected = option.value !== '' && wantedValues.value.has(option.value)\n  }\n  if (!props.multiple && selectedValues.value.length === 0) el.value = ''\n}\n\nconst wantedValues = computed(() => new Set(selectedValues.value.map(String)))\n\nwatch([selectedValues, allOptions], syncNative, { flush: 'post' })\n\n// A choice that satisfies the constraint clears the error the last submission raised; one that\n// does not raises it again, `checkValidity` firing `invalid`.\nwatch(\n  selectedValues,\n  () => {\n    if (nativeInvalid.value) nativeInvalid.value = !nativeEl.value?.checkValidity()\n  },\n  { flush: 'post' },\n)\n\n/** Autofill writes the hidden `<select>`; the strings it holds are read back as option values. */\nfunction onNativeChange() {\n  const el = nativeEl.value\n  if (!el) return\n  const values = [...el.selectedOptions]\n    .map((native) => allOptions.value.find((option) => String(option.value) === native.value))\n    .filter((option): option is SelectOption => option !== undefined)\n    .map((option) => option.value)\n  model.value = props.multiple ? values : (values[0] ?? '')\n}\n\n// @core\n// A form reset restores the value the field was created with. The browser resets the hidden\n// `<select>` after the event, so it is rewritten on the next task.\nlet initial: ItemValue | ItemValue[] = ''\nlet formEl: HTMLFormElement | null = null\n\nfunction onFormReset() {\n  model.value = Array.isArray(initial) ? [...initial] : initial\n  nativeInvalid.value = false\n  setTimeout(syncNative)\n}\n\nonMounted(() => {\n  initial = Array.isArray(model.value) ? [...model.value] : model.value\n  syncNative()\n  formEl = nativeEl.value?.form ?? null\n  formEl?.addEventListener('reset', onFormReset)\n})\n\nonBeforeUnmount(() => formEl?.removeEventListener('reset', onFormReset))\n\ndefineExpose({\n  /** Moves the focus to the field. */\n  focus: (options?: FocusOptions) => triggerEl.value?.focus(options),\n  /** The button that acts as the combobox. */\n  el: triggerEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-select\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusin=\"focused = true\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-select-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <VInput\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :invalid=\"invalid || nativeInvalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            hide-text\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template #control=\"{ controlProps }\">\n          <button\n            ref=\"triggerEl\"\n            type=\"button\"\n            role=\"combobox\"\n            :aria-expanded=\"open\"\n            :aria-controls=\"optionsId\"\n            :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-readonly=\"readonly || undefined\"\n            v-bind=\"controlProps\"\n            class=\"v-select-trigger\"\n            @click=\"togglePanel\"\n            @keydown=\"onKeydown\"\n          >\n            <span\n              v-if=\"valueText\"\n              class=\"v-select-value\"\n              :class=\"{ 'v-visually-hidden': multiple }\"\n              >{{ valueText }}</span\n            >\n            <span v-else-if=\"placeholder\" class=\"v-select-placeholder\">{{ placeholder }}</span>\n          </button>\n          <!--\n            Out of the tab order and hidden from screen readers, it leaves the button as the\n            single stop and the single announcement. Its options mirror the flat list: a form\n            needs no groups.\n          -->\n          <select\n            ref=\"nativeEl\"\n            v-bind=\"nativeAttrs\"\n            class=\"v-select-native v-hidden-input\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            :multiple=\"multiple || undefined\"\n            :required=\"required || undefined\"\n            :disabled=\"resolvedDisabled || undefined\"\n            @change=\"onNativeChange\"\n            @focus=\"triggerEl?.focus()\"\n            @invalid=\"nativeInvalid = true\"\n          >\n            <option v-if=\"!multiple\" value=\"\" />\n            <option\n              v-for=\"(option, index) in allOptions\"\n              :key=\"index\"\n              :value=\"String(option.value)\"\n              :disabled=\"option.disabled\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!-- The spinner takes the chevron's place: the field sizes either as an icon. -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-select-spinner v-input-icon-end\" :label=\"loadingText\" />\n          <VListboxChevron v-else :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--select-anchor\"\n      :placement=\"placement\"\n      class=\"v-select-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"choose\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n    </VListboxPanel>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-select {\n    /*\n     * Declared on the root, the common ancestor of the field and the panel; a panel drawn above\n     * the page remains a descendant of it in the document.\n     */\n    anchor-scope: --select-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-select-control {\n    display: block;\n  }\n\n  /* The panel opens against the box of the field, not against its label and hint. */\n  .v-select-control .v-input-field {\n    anchor-name: --select-anchor;\n  }\n\n  .v-select-panel {\n    max-block-size: var(--vectis-control-size-select-list-max-block);\n  }\n\n  /*\n   * VInput's `.v-input-control` gives the button the input's box: it fills the field and draws\n   * no border of its own, the field drawing the focus around it.\n   */\n  .v-select-trigger {\n    display: flex;\n    align-items: center;\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /*\n   * Beside chips the button takes what is left of the last row, down to nothing, rather than\n   * wrapping onto a row of its own.\n   */\n  .v-select[data-multiple] .v-select-trigger {\n    flex: 1 1 0;\n  }\n\n  .v-select-value,\n  .v-select-placeholder {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-select-placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-select-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width; without this, a grid\n   * track or a flex row sized `auto` widens to fit every label and the ellipsis never shows.\n   */\n  .v-select:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VSeparator/VSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSeparator.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Use a native hr for separator semantics and borders for visibility in forced colours. */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /** The direction the rule runs in: across by default, or down the page under `vertical`. */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!--\n    Aria-orientation is emitted only when it CONTRADICTS what the role already implies: a\n    separator is horizontal by default, so stating it would merely restate the role. This is the\n    same convention the VTabs tablist follows.\n  -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /*\n     * `.v-menu-separator` and `.v-combobox-separator` override that margin from THEIR own\n     * sheet, and which of the two sheets the consumer's bundler puts last is not ours to\n     * decide. Both are therefore written as the compound `.v-separator.v-x-separator`, and\n     * every declaration added here falls under the same obligation.\n     */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /*\n   * In ordinary flow it collapses to nothing, silently and with no error; there it is up to the\n   * consumer to give it a block-size.\n   */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSeparator.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Use a native hr for separator semantics and borders for visibility in forced colours. */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /** The direction the rule runs in: across by default, or down the page under `vertical`. */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!--\n    Aria-orientation is emitted only when it CONTRADICTS what the role already implies: a\n    separator is horizontal by default, so stating it would merely restate the role. This is the\n    same convention the VTabs tablist follows.\n  -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /*\n     * `.v-menu-separator` and `.v-listbox-separator` override that margin from THEIR own\n     * sheet, and which of the two sheets the consumer's bundler puts last is not ours to\n     * decide. Both are therefore written as the compound `.v-separator.v-x-separator`, and\n     * every declaration added here falls under the same obligation.\n     */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /*\n   * In ordinary flow it collapses to nothing, silently and with no error; there it is up to the\n   * consumer to give it a block-size.\n   */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Use a native hr for separator semantics and borders for visibility in forced colours. */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /** The direction the rule runs in: across by default, or down the page under `vertical`. */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!--\n    Aria-orientation is emitted only when it CONTRADICTS what the role already implies: a\n    separator is horizontal by default, so stating it would merely restate the role. This is the\n    same convention the VTabs tablist follows.\n  -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /*\n     * `.v-menu-separator` and `.v-combobox-separator` override that margin from THEIR own\n     * sheet, and which of the two sheets the consumer's bundler puts last is not ours to\n     * decide. Both are therefore written as the compound `.v-separator.v-x-separator`, and\n     * every declaration added here falls under the same obligation.\n     */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /*\n   * In ordinary flow it collapses to nothing, silently and with no error; there it is up to the\n   * consumer to give it a block-size.\n   */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":";;;;;;yBAqBE,EAIE,MAAA;GAHA,OAAM;GACL,oBAAkB,EAAA;GAClB,oBAAkB,EAAA,gBAAW,aAAA,aAA+B,KAAA"}
+{"version":3,"file":"VSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Use a native hr for separator semantics and borders for visibility in forced colours. */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /** The direction the rule runs in: across by default, or down the page under `vertical`. */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!--\n    Aria-orientation is emitted only when it CONTRADICTS what the role already implies: a\n    separator is horizontal by default, so stating it would merely restate the role. This is the\n    same convention the VTabs tablist follows.\n  -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /*\n     * `.v-menu-separator` and `.v-listbox-separator` override that margin from THEIR own\n     * sheet, and which of the two sheets the consumer's bundler puts last is not ours to\n     * decide. Both are therefore written as the compound `.v-separator.v-x-separator`, and\n     * every declaration added here falls under the same obligation.\n     */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /*\n   * In ordinary flow it collapses to nothing, silently and with no error; there it is up to the\n   * consumer to give it a block-size.\n   */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":";;;;;;yBAqBE,EAIE,MAAA;GAHA,OAAM;GACL,oBAAkB,EAAA;GAClB,oBAAkB,EAAA,gBAAW,aAAA,aAA+B,KAAA"}

package/dist/components/VSideNavigation/VSideNavigation.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useMessages as e } from "../../i18n/state.js";
 import { useAriaLabel as t } from "../../composables/useAriaLabel.js";
-import { arrowNavigate as n } from "../../utils/arrowNav.js";
-import { expand_more as r } from "../VIcon/icons/expand_more.js";
+import { expand_more as n } from "../VIcon/icons/expand_more.js";
+import { arrowNavigate as r } from "../../utils/arrowNav.js";
 import { sideNavigationKey as i } from "./context.js";
 import { createElementBlock as a, createElementVNode as o, defineComponent as s, openBlock as c, provide as l, ref as u, renderSlot as d, unref as f, useId as p } from "vue";
 //#region src/components/VSideNavigation/VSideNavigation.vue?vue&type=script&setup=true&lang.ts
@@ -22,11 +22,11 @@ var m = [
 			type: Boolean,
 			default: !1
 		},
-		expandIcon: { default: () => r },
+		expandIcon: { default: () => n },
 		collapseIcon: { default: void 0 }
 	},
-	setup(r) {
-		let s = r, _ = e(), v = t(() => s.label ?? _.value.sideNavigation.label), y = p();
+	setup(n) {
+		let s = n, _ = e(), v = t(() => s.label ?? _.value.sideNavigation.label), y = p();
 		l(i, {
 			get name() {
 				return s.exclusive ? y : void 0;
@@ -48,14 +48,14 @@ var m = [
 		}
 		function S(e) {
 			let t = b.value;
-			!t || e.defaultPrevented || e.target?.matches(g) && n(e, t, () => [...t.querySelectorAll(g)].filter((e) => x(e, t)), { vertical: !0 });
+			!t || e.defaultPrevented || e.target?.matches(g) && r(e, t, () => [...t.querySelectorAll(g)].filter((e) => x(e, t)), { vertical: !0 });
 		}
 		return (e, t) => (c(), a("nav", {
 			ref_key: "rootEl",
 			ref: b,
 			class: "v-side-nav v-control",
-			"data-size": r.size,
-			"data-compact": r.compact ? "" : void 0,
+			"data-size": n.size,
+			"data-compact": n.compact ? "" : void 0,
 			"aria-label": f(v),
 			onKeydown: S
 		}, [o("ul", h, [d(e.$slots, "default")])], 40, m));

package/dist/components/VSideNavigation/VSideNavigationItem.d.ts

@@ -63,7 +63,7 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     /** Moves the focus to the row: the branch header, or the leaf's link or button. */
     focus: (options?: FocusOptions) => void | undefined;
-    /** That element, which is also where the consumer's attributes land. */
+    /** The row, which is also where the consumer's attributes land. */
     readonly el: HTMLElement | null;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: () => any;
@@ -76,9 +76,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     href: string;
     disabled: boolean;
     icon: IconSource;
+    current: boolean;
     sublabel: string;
     defaultOpen: boolean;
-    current: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;