vectis-ui 0.14.0 → 0.16.0

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

@@ -67,10 +67,6 @@ var Te = [
 		},
 		labelPosition: { default: "top" },
 		size: { default: "md" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		placeholder: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -104,77 +100,58 @@ var Te = [
 	}),
 	emits: /*@__PURE__*/ p(["clear", "click:icon-start"], ["update:modelValue"]),
 	setup(r, { expose: d, emit: p }) {
-		let w = r, je = e(), Me = i(() => w.clearLabel ?? je.value.select.clear), T = p, { size: E, compact: D, disabled: O } = t(w, _e(oe, null)), k = i(() => fe(E.value, D.value)), A = we(r, "modelValue"), { rootClass: Ne, rootStyle: Pe, forwardedAttrs: Fe } = ee(), Ie = [
+		let w = r, je = e(), Me = i(() => w.clearLabel ?? je.value.select.clear), T = p, Ne = _e(oe, null), { size: E, disabled: D } = t(w, Ne), O = i(() => fe(E.value)), k = we(r, "modelValue"), { rootClass: Pe, rootStyle: Fe, forwardedAttrs: Ie } = ee(), Le = [
 			"name",
 			"form",
 			"autocomplete"
-		], j = i(() => ce(Fe.value, Ie)), Le = i(() => j.value.picked), Re = ie((e) => T("click:icon-start", e)), ze = i(() => ({
-			...j.value.rest,
-			...Re
-		})), M = _(null), N = _(null), P = _(null), F = _(null), I = Ce(), L = _(!1), R = _(!1), z = i(() => me(A.value, w.multiple)), { allOptions: B, visible: V, optionOf: Be, labelOf: H, remember: Ve, activeIndex: U, optionId: He, highlightFirst: Ue, highlightLast: We, highlightSelected: Ge, move: Ke, page: qe, hover: Je, blocks: Ye, measureRow: Xe } = he({
+		], A = i(() => ce(Ie.value, Le)), Re = i(() => A.value.picked), ze = ie((e) => T("click:icon-start", e)), Be = i(() => ({
+			...A.value.rest,
+			...ze
+		})), j = _(null), M = _(null), N = _(null), P = _(null), F = Ce(), I = _(!1), L = _(!1), R = i(() => me(k.value, w.multiple)), { allOptions: z, visible: B, optionOf: Ve, labelOf: V, remember: He, activeIndex: H, optionId: Ue, highlightFirst: U, highlightLast: We, highlightSelected: Ge, move: Ke, page: qe, hover: Je, blocks: Ye, measureRow: Xe } = he({
 			items: () => w.options,
-			selected: () => z.value,
-			open: () => L.value,
-			id: I,
-			panelEl: () => F.value?.el ?? null,
+			selected: () => R.value,
+			open: () => I.value,
+			id: F,
+			panelEl: () => P.value?.el ?? null,
 			virtual: () => !1,
-			size: () => E.value,
-			compact: () => D.value
-		}), Ze = i(() => z.value.map(H).join(", ")), Qe = i(() => w.multiple && w.display === "text"), $e = i(() => w.multiple && !R.value && !L.value), et = i(() => ae(w, O.value, z.value.length > 0)), W = _(!1);
+			size: () => E.value
+		}), Ze = i(() => R.value.map(V).join(", ")), Qe = i(() => w.multiple && w.display === "text"), $e = i(() => w.multiple && !L.value && !I.value), et = i(() => ae(w, D.value, R.value.length > 0)), W = _(!1);
 		function G() {
-			O.value || w.readonly || L.value || (L.value = !0, Ge());
+			D.value || w.readonly || I.value || (I.value = !0, Ge());
 		}
 		function K() {
-			L.value && (L.value = !1, U.value = -1);
+			I.value && (I.value = !1, H.value = -1);
 		}
 		function tt() {
-			L.value ? K() : G();
+			I.value ? K() : G();
 		}
-		let nt = pe(M, () => {
-			R.value = !1, K();
+		let nt = pe(j, () => {
+			L.value = !1, K();
 		});
 		function rt(e) {
-			e.disabled || w.readonly || O.value || (Ve(e), w.multiple ? A.value = re(z.value, e.value) : (A.value !== e.value && (A.value = e.value), K()));
+			e.disabled || w.readonly || D.value || (He(e), w.multiple ? k.value = re(R.value, e.value) : (k.value !== e.value && (k.value = e.value), K()));
 		}
 		function q() {
-			let e = V.value[U.value];
+			let e = B.value[H.value];
 			e && rt(e);
 		}
 		function it(e) {
-			!w.multiple || w.readonly || O.value || (A.value = z.value.filter((t) => t !== e), N.value?.focus());
+			!w.multiple || w.readonly || D.value || (k.value = R.value.filter((t) => t !== e), M.value?.focus());
 		}
 		function at() {
-			A.value = w.multiple ? [] : "", N.value?.focus(), T("clear");
+			k.value = w.multiple ? [] : "", M.value?.focus(), T("clear");
 		}
 		let ot = te(), { find: st, typing: ct } = ne();
 		function J(e) {
-			let t = V.value, n = st(e, t.length, U.value, (e) => {
+			let t = B.value, n = st(e, t.length, H.value, (e) => {
 				let n = t[e];
 				return n.disabled ? void 0 : ot(n, n.label);
 			});
-			n >= 0 && (U.value = n);
+			n >= 0 && (H.value = n);
 		}
 		let Y = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
 		function lt(e) {
-			if (!L.value) {
-				switch (e.key) {
-					case "ArrowDown":
-					case "ArrowUp":
-					case "Enter":
-					case " ":
-						e.preventDefault(), G();
-						return;
-					case "Home":
-						e.preventDefault(), G(), L.value && Ue();
-						return;
-					case "End":
-						e.preventDefault(), G(), L.value && We();
-						return;
-				}
-				Y(e) && (G(), L.value && J(e.key));
-				return;
-			}
-			switch (e.key) {
+			if (I.value) switch (e.key) {
 				case "ArrowDown":
 					e.preventDefault(), Ke(1);
 					break;
@@ -182,7 +159,7 @@ var Te = [
 					e.preventDefault(), e.altKey ? (q(), K()) : Ke(-1);
 					break;
 				case "Home":
-					e.preventDefault(), Ue();
+					e.preventDefault(), U();
 					break;
 				case "End":
 					e.preventDefault(), We();
@@ -207,6 +184,23 @@ var Te = [
 					break;
 				default: Y(e) && J(e.key);
 			}
+			else {
+				switch (e.key) {
+					case "ArrowDown":
+					case "ArrowUp":
+					case "Enter":
+					case " ":
+						e.preventDefault(), G();
+						return;
+					case "Home":
+						e.preventDefault(), G(), I.value && U();
+						return;
+					case "End":
+						e.preventDefault(), G(), I.value && We();
+						return;
+				}
+				Y(e) && (G(), I.value && J(e.key));
+			}
 		}
 		function ut(e) {
 			let t = e.target;
@@ -214,49 +208,49 @@ var Te = [
 		}
 		function dt(e) {
 			let t = e.target;
-			O.value || !t.closest(".v-input-field") || t.closest(C) || (N.value?.focus(), tt());
+			D.value || !t.closest(".v-input-field") || t.closest(C) || (M.value?.focus(), tt());
 		}
 		function X() {
-			let e = P.value;
+			let e = N.value;
 			if (e) {
 				for (let t of e.options) t.selected = t.value !== "" && ft.value.has(t.value);
-				!w.multiple && z.value.length === 0 && (e.value = "");
+				!w.multiple && R.value.length === 0 && (e.value = "");
 			}
 		}
-		let ft = i(() => new Set(z.value.map(String)));
-		x([z, B], X, { flush: "post" }), x(z, () => {
-			W.value &&= !P.value?.checkValidity();
+		let ft = i(() => new Set(R.value.map(String)));
+		x([R, z], X, { flush: "post" }), x(R, () => {
+			W.value &&= !N.value?.checkValidity();
 		}, { flush: "post" });
 		function pt() {
-			let e = P.value;
+			let e = N.value;
 			if (!e) return;
-			let t = [...e.selectedOptions].map((e) => B.value.find((t) => String(t.value) === e.value)).filter((e) => e !== void 0).map((e) => e.value);
-			A.value = w.multiple ? t : t[0] ?? "";
+			let t = [...e.selectedOptions].map((e) => z.value.find((t) => String(t.value) === e.value)).filter((e) => e !== void 0).map((e) => e.value);
+			k.value = w.multiple ? t : t[0] ?? "";
 		}
 		let Z = "", Q = null;
 		function $() {
-			A.value = Array.isArray(Z) ? [...Z] : Z, W.value = !1, setTimeout(X);
+			k.value = Array.isArray(Z) ? [...Z] : Z, W.value = !1, setTimeout(X);
 		}
 		return xe(() => {
-			Z = Array.isArray(A.value) ? [...A.value] : A.value, X(), Q = P.value?.form ?? null, Q?.addEventListener("reset", $);
+			Z = Array.isArray(k.value) ? [...k.value] : k.value, X(), Q = N.value?.form ?? null, Q?.addEventListener("reset", $);
 		}), be(() => Q?.removeEventListener("reset", $)), d({
-			focus: (e) => N.value?.focus(e),
-			el: N
+			focus: (e) => M.value?.focus(e),
+			el: M
 		}), (e, t) => (g(), s("div", {
 			ref_key: "rootEl",
-			ref: M,
-			class: ve(["v-select", b(Ne)]),
-			style: ye([{ "--chip-height": k.value.height }, b(Pe)]),
+			ref: j,
+			class: ve(["v-select", b(Pe)]),
+			style: ye([{ "--chip-height": O.value.height }, b(Fe)]),
 			"data-size": b(E),
 			"data-multiple": r.multiple ? "" : void 0,
-			"data-open": L.value ? "" : void 0,
-			onFocusin: t[3] ||= (e) => R.value = !0,
+			"data-open": I.value ? "" : void 0,
+			onFocusin: t[3] ||= (e) => L.value = !0,
 			onFocusout: t[4] ||= (...e) => b(nt) && b(nt)(...e)
 		}, [c("div", {
 			class: "v-select-control",
 			onMousedown: ut,
 			onClick: dt
-		}, [u(se, m({ class: ["v-input-end-pinned", { "v-input-chips": r.multiple && !Qe.value }] }, ze.value, {
+		}, [u(se, m({ class: ["v-input-end-pinned", { "v-input-chips": r.multiple && !Qe.value }] }, Be.value, {
 			label: r.label,
 			hint: r.hint,
 			error: r.error,
@@ -264,9 +258,8 @@ var Te = [
 			"hide-label": r.hideLabel,
 			"label-position": r.labelPosition,
 			size: b(E),
-			compact: b(D),
 			invalid: r.invalid || W.value,
-			disabled: b(O),
+			disabled: b(D),
 			readonly: r.readonly,
 			"icon-start": r.iconStart,
 			"icon-start-label": r.iconStartLabel,
@@ -277,12 +270,12 @@ var Te = [
 		}), l({
 			control: S(({ controlProps: e }) => [c("button", m({
 				ref_key: "triggerEl",
-				ref: N,
+				ref: M,
 				type: "button",
 				role: "combobox",
-				"aria-expanded": L.value,
-				"aria-controls": b(I),
-				"aria-activedescendant": L.value && b(U) >= 0 ? b(He)(b(U)) : void 0,
+				"aria-expanded": I.value,
+				"aria-controls": b(F),
+				"aria-activedescendant": I.value && b(H) >= 0 ? b(Ue)(b(H)) : void 0,
 				"aria-required": r.required || void 0,
 				"aria-readonly": r.readonly || void 0
 			}, e, {
@@ -294,18 +287,18 @@ var Te = [
 				class: ve(["v-select-value", { "v-visually-hidden": r.multiple }])
 			}, y(Ze.value), 3)) : r.placeholder ? (g(), s("span", De, y(r.placeholder), 1)) : o("", !0)], 16, Ee), c("select", m({
 				ref_key: "nativeEl",
-				ref: P
-			}, Le.value, {
+				ref: N
+			}, Re.value, {
 				class: "v-select-native v-hidden-input",
 				tabindex: "-1",
 				"aria-hidden": "true",
 				multiple: r.multiple || void 0,
 				required: r.required || void 0,
-				disabled: b(O) || void 0,
+				disabled: b(D) || void 0,
 				onChange: pt,
-				onFocus: t[0] ||= (e) => N.value?.focus(),
+				onFocus: t[0] ||= (e) => M.value?.focus(),
 				onInvalid: t[1] ||= (e) => W.value = !0
-			}), [r.multiple ? o("", !0) : (g(), s("option", ke)), (g(!0), s(ge, null, Se(b(B), (e, t) => (g(), s("option", {
+			}), [r.multiple ? o("", !0) : (g(), s("option", ke)), (g(!0), s(ge, null, Se(b(z), (e, t) => (g(), s("option", {
 				key: t,
 				value: String(e.value),
 				disabled: e.disabled
@@ -317,24 +310,24 @@ var Te = [
 			}, null, 8, ["label"])) : (g(), a(le, {
 				key: 1,
 				icon: r.expandIcon,
-				open: L.value
+				open: I.value
 			}, null, 8, ["icon", "open"]))]),
 			_: 2
 		}, [r.multiple || e.$slots.start ? {
 			name: "start",
 			fn: S(() => [r.multiple ? (g(), a(de, {
 				key: 0,
-				values: z.value,
+				values: R.value,
 				display: r.display,
 				max: r.max,
 				collapsed: $e.value,
 				"overflow-text": r.overflowText,
-				scale: k.value,
+				scale: O.value,
 				removable: !r.readonly,
-				disabled: b(O),
+				disabled: b(D),
 				"hide-text": "",
-				"label-of": b(H),
-				"option-of": b(Be),
+				"label-of": b(V),
+				"option-of": b(Ve),
 				onRemove: it
 			}, l({ _: 2 }, [e.$slots.chip ? {
 				name: "chip",
@@ -370,7 +363,6 @@ var Te = [
 			"hide-label",
 			"label-position",
 			"size",
-			"compact",
 			"invalid",
 			"disabled",
 			"readonly",
@@ -380,16 +372,15 @@ var Te = [
 			"clear-visible",
 			"clear-label"
 		])], 32), u(ue, {
-			id: b(I),
+			id: b(F),
 			ref_key: "panelRef",
-			ref: F,
-			open: L.value,
-			"onUpdate:open": t[2] ||= (e) => L.value = e,
+			ref: P,
+			open: I.value,
+			"onUpdate:open": t[2] ||= (e) => I.value = e,
 			anchor: "--select-anchor",
 			placement: r.placement,
 			class: "v-select-panel",
 			size: b(E),
-			compact: b(D),
 			multiple: r.multiple,
 			blocks: b(Ye),
 			measure: b(Xe),
@@ -404,7 +395,6 @@ var Te = [
 			"open",
 			"placement",
 			"size",
-			"compact",
 			"multiple",
 			"blocks",
 			"measure",

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

@@ -1 +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 } 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 { useTypeahead } from '../../composables/useTypeahead'\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>()\nconst { find: findTyped, typing } = useTypeahead()\n\n// @keyboard\n// Typing a label's first letters highlights it.\nfunction typeahead(key: string) {\n  const list = visible.value\n  const index = findTyped(key, list.length, activeIndex.value, (i) => {\n    const option = list[i]!\n    return option.disabled ? undefined : normalizedOf(option, option.label)\n  })\n  if (index >= 0) activeIndex.value = index\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 (typing()) 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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"}
+{"version":3,"file":"VSelect.vue_vue_type_script_setup_true_lang.js","names":["$slots","expandMoreIcon","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_createVNode","VInput","_mergeProps","_createSlots","_withCtx","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_createBlock","VSpinner","VListboxChevron","VListboxValues","_renderSlot","_normalizeProps","_guardReactiveProps","VListboxPanel","VSpinner_default","VInput_default","VListboxChevron_default","VListboxPanel_default","VListboxValues_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","interactive","VSelect_vue_vue_type_script_setup_true_lang_default","expand_more","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","m","useMessages","resolvedClearLabel","computed","emit","group","inject","inputGroupKey","resolvedSize","resolvedDisabled","useControlShape","chipScale","chipScaleFor","model","useModel","useRootAttrs","NATIVE_ONLY","split","partitionAttrs","forwardedAttrs","nativeAttrs","iconStartClick","iconStartListener","event","fieldAttrs","rootEl","ref","triggerEl","nativeEl","panelRef","optionsId","useId","open","focused","selectedValues","selectionOf","useListbox","valueText","labelOf","textDisplay","collapsed","clearVisible","canClear","nativeInvalid","openPanel","highlightSelected","closePanel","togglePanel","onFocusout","useFocusoutDismiss","choose","option","remember","toggleValue","chooseActive","visible","activeIndex","removeValue","v","value","onClear","normalizedOf","createNormalizedCache","findTyped","useTypeahead","typeahead","list","index","key","i","printable","onKeydown","move","highlightFirst","highlightLast","page","typing","onControlMousedown","target","onControlClick","syncNative","el","wantedValues","watch","allOptions","onNativeChange","values","native","initial","formEl","onFormReset","onMounted","onBeforeUnmount","options","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","_cache","args","createElementVNode","createVNode","mergeProps","createSlots","withCtx","optionId","controlProps","toDisplayString","createCommentVNode","Fragment","renderList","createBlock","_ctx","optionOf","renderSlot","normalizeProps","guardReactiveProps","chipProps","overflowProps","$event","blocks","measureRow","hover","slotProps"],"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 } 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 { useTypeahead } from '../../composables/useTypeahead'\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'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | '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  /** 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  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 { size: resolvedSize, disabled: resolvedDisabled } = useControlShape(props, group)\n\nconst chipScale = computed(() => chipScaleFor(resolvedSize.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})\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>()\nconst { find: findTyped, typing } = useTypeahead()\n\n// @keyboard\n// Typing a label's first letters highlights it.\nfunction typeahead(key: string) {\n  const list = visible.value\n  const index = findTyped(key, list.length, activeIndex.value, (i) => {\n    const option = list[i]!\n    return option.disabled ? undefined : normalizedOf(option, option.label)\n  })\n  if (index >= 0) activeIndex.value = index\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 (typing()) 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        :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      :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-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":""}
+{"version":3,"file":"VSeparator.js","names":["_sfc_main","VSeparator_vue_vue_type_script_setup_true_lang_default","VSeparator_default"],"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-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"}
+{"version":3,"file":"VSeparator.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_hoisted_1","VSeparator_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props"],"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":";;;;;;oBAqBEA,EAAA,GAAAC,EAIE,MAAA;GAHA,OAAM;GACL,oBAAkBK,EAAA;GAClB,oBAAkBA,EAAA,gBAAW,aAAA,aAA+B,KAAA"}

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

@@ -10,11 +10,6 @@ interface SideNavigationProps {
     label?: string;
     /** The height of the rows, 32 or 40 pixels, inherited by every level. */
     size?: SideNavigationSize;
-    /**
-     * Takes 4px off the height of every row. It is a density setting and not a collapsed
-     * icon-only rail, which this component does not offer.
-     */
-    compact?: boolean;
     /**
      * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on
      * its own. It is off by default: a sidebar normally lets several sections stay open.
@@ -35,7 +30,6 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<SideNavigationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SideNavigationProps> & Readonly<{}>, {
     label: string;
     size: SideNavigationSize;
-    compact: boolean;
     expandIcon: IconSource;
     collapseIcon: IconSource;
     exclusive: boolean;

package/dist/components/VSideNavigation/VSideNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigation.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native details folds branches; JavaScript bridges open models and adds arrow navigation\n * without replacing native links or buttons.\n */\n\nimport { provide, ref, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type SideNavigationSize = 'sm' | 'md'\n\ninterface SideNavigationProps {\n  /**\n   * What screen readers announce for this navigation. A page often has several (a\n   * main one, a sidebar, a footer) and this is what tells them apart. It falls back\n   * to the design system dictionary.\n   */\n  label?: string\n  /** The height of the rows, 32 or 40 pixels, inherited by every level. */\n  size?: SideNavigationSize\n  /**\n   * Takes 4px off the height of every row. It is a density setting and not a collapsed\n   * icon-only rail, which this component does not offer.\n   */\n  compact?: boolean\n  /**\n   * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on\n   * its own. It is off by default: a sidebar normally lets several sections stay open.\n   */\n  exclusive?: boolean\n  /** The chevron of a closed section: an icon name, or an explicit render. */\n  expandIcon?: IconSource\n  /**\n   * The chevron of an open section. Leave it out and the closed one is simply rotated\n   * by 180°.\n   */\n  collapseIcon?: IconSource\n}\n\nconst props = withDefaults(defineProps<SideNavigationProps>(), {\n  label: undefined,\n  size: 'md',\n  compact: false,\n  exclusive: false,\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n})\n\ndefineSlots<{\n  /** The first level of the tree: items, groups and separators. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.sideNavigation.label)\n\n// The name shared by the first level's sections. Each item mints another for its own children,\n// which keeps the exclusivity local to a level (see context.ts).\nconst rootName = useId()\n\nprovide(sideNavigationKey, {\n  get name() {\n    return props.exclusive ? rootName : undefined\n  },\n  get exclusive() {\n    return props.exclusive\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * What the arrow keys may move to: the header of a branch, and the link of a leaf. Both forms\n * of disabling have to be excluded, since `:disabled` only ever matches a button; an inert link\n * and a disabled branch header are marked with `aria-disabled` instead, exactly as in VMenu's\n * panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * This cannot be left to the shared helper, which skips whatever is not displayed. The content\n * of a closed disclosure element is not hidden that way: the browser passes over it by a rule\n * of its own, and it still reports itself as displayed.\n */\nfunction reachable(el: HTMLElement, root: HTMLElement): boolean {\n  for (\n    let child: HTMLElement = el, parent = el.parentElement;\n    parent && child !== root;\n    child = parent, parent = parent.parentElement\n  ) {\n    if (parent.tagName === 'DETAILS' && !(parent as HTMLDetailsElement).open) {\n      if (child.tagName !== 'SUMMARY') return false\n    }\n  }\n  return true\n}\n\n// @keyboard @a11y\n/*\n * The component's only behavioural JavaScript, and it exists because nothing native moves the\n * focus from one link to the next. It follows the design system's contract: the arrows MOVE the\n * focus and never activate anything.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const root = rootEl.value\n  if (!root || event.defaultPrevented) return\n  // Only a key pressed on a row: a field or a menu in a row's `#end` slot is a descendant too,\n  // and its caret or its own list must keep the arrows and Home/End.\n  if (!(event.target as Element | null)?.matches(ROW_SELECTOR)) return\n  arrowNavigate(\n    event,\n    root,\n    () => [...root.querySelectorAll<HTMLElement>(ROW_SELECTOR)].filter((el) => reachable(el, root)),\n    { vertical: true },\n  )\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    class=\"v-side-nav v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <ul class=\"v-side-nav-list\">\n      <slot />\n    </ul>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav {\n    /* Every level inherits it. */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * They are laid out as flex columns and not as ordinary blocks, which removes margin\n   * collapsing entirely; otherwise a group's margin could escape a branch that is closed, and\n   * therefore of zero height, and push the rows apart under it.\n   */\n  .v-side-nav-list,\n  .v-side-nav-children,\n  .v-side-nav-group-list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSideNavigation.js","names":["_sfc_main","VSideNavigation_vue_vue_type_script_setup_true_lang_default","VSideNavigation_default"],"sources":["../../../src/components/VSideNavigation/VSideNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native details folds branches; JavaScript bridges open models and adds arrow navigation\n * without replacing native links or buttons.\n */\n\nimport { provide, ref, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type SideNavigationSize = 'sm' | 'md'\n\ninterface SideNavigationProps {\n  /**\n   * What screen readers announce for this navigation. A page often has several (a\n   * main one, a sidebar, a footer) and this is what tells them apart. It falls back\n   * to the design system dictionary.\n   */\n  label?: string\n  /** The height of the rows, 32 or 40 pixels, inherited by every level. */\n  size?: SideNavigationSize\n  /**\n   * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on\n   * its own. It is off by default: a sidebar normally lets several sections stay open.\n   */\n  exclusive?: boolean\n  /** The chevron of a closed section: an icon name, or an explicit render. */\n  expandIcon?: IconSource\n  /**\n   * The chevron of an open section. Leave it out and the closed one is simply rotated\n   * by 180°.\n   */\n  collapseIcon?: IconSource\n}\n\nconst props = withDefaults(defineProps<SideNavigationProps>(), {\n  label: undefined,\n  size: 'md',\n  exclusive: false,\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n})\n\ndefineSlots<{\n  /** The first level of the tree: items, groups and separators. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.sideNavigation.label)\n\n// The name shared by the first level's sections. Each item mints another for its own children,\n// which keeps the exclusivity local to a level (see context.ts).\nconst rootName = useId()\n\nprovide(sideNavigationKey, {\n  get name() {\n    return props.exclusive ? rootName : undefined\n  },\n  get exclusive() {\n    return props.exclusive\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * What the arrow keys may move to: the header of a branch, and the link of a leaf. Both forms\n * of disabling have to be excluded, since `:disabled` only ever matches a button; an inert link\n * and a disabled branch header are marked with `aria-disabled` instead, exactly as in VMenu's\n * panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * This cannot be left to the shared helper, which skips whatever is not displayed. The content\n * of a closed disclosure element is not hidden that way: the browser passes over it by a rule\n * of its own, and it still reports itself as displayed.\n */\nfunction reachable(el: HTMLElement, root: HTMLElement): boolean {\n  for (\n    let child: HTMLElement = el, parent = el.parentElement;\n    parent && child !== root;\n    child = parent, parent = parent.parentElement\n  ) {\n    if (parent.tagName === 'DETAILS' && !(parent as HTMLDetailsElement).open) {\n      if (child.tagName !== 'SUMMARY') return false\n    }\n  }\n  return true\n}\n\n// @keyboard @a11y\n/*\n * The component's only behavioural JavaScript, and it exists because nothing native moves the\n * focus from one link to the next. It follows the design system's contract: the arrows MOVE the\n * focus and never activate anything.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const root = rootEl.value\n  if (!root || event.defaultPrevented) return\n  // Only a key pressed on a row: a field or a menu in a row's `#end` slot is a descendant too,\n  // and its caret or its own list must keep the arrows and Home/End.\n  if (!(event.target as Element | null)?.matches(ROW_SELECTOR)) return\n  arrowNavigate(\n    event,\n    root,\n    () => [...root.querySelectorAll<HTMLElement>(ROW_SELECTOR)].filter((el) => reachable(el, root)),\n    { vertical: true },\n  )\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    class=\"v-side-nav v-control\"\n    :data-size=\"size\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <ul class=\"v-side-nav-list\">\n      <slot />\n    </ul>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav {\n    /* Every level inherits it. */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * They are laid out as flex columns and not as ordinary blocks, which removes margin\n   * collapsing entirely; otherwise a group's margin could escape a branch that is closed, and\n   * therefore of zero height, and push the rows apart under it.\n   */\n  .v-side-nav-list,\n  .v-side-nav-children,\n  .v-side-nav-group-list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n}\n</style>\n"],"mappings":""}