vectis-ui 0.1.0

package/dist/components/VTabs/VTabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,199 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import r from "../VIconButton/VIconButton.js";
+import { chevron_left as i } from "../VIcon/icons/chevron_left.js";
+import { chevron_right as a } from "../VIcon/icons/chevron_right.js";
+import { isRtl as o } from "../../utils/direction.js";
+import { arrowNavigate as ee, navigableItems as te } from "../../utils/arrowNav.js";
+import { useAriaLabel as ne } from "../../composables/useAriaLabel.js";
+import { expand_less as s } from "../VIcon/icons/expand_less.js";
+import { expand_more as re } from "../VIcon/icons/expand_more.js";
+import { panelIdFor as ie, tabIdFor as c, tabsKey as l } from "./context.js";
+import { useRootAttrs as u } from "../../composables/useRootAttrs.js";
+import { computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, guardReactiveProps as v, mergeModels as y, mergeProps as b, nextTick as x, normalizeClass as S, normalizeProps as C, normalizeStyle as ae, openBlock as w, provide as oe, ref as T, renderSlot as E, unref as D, useId as O, useModel as k, useSlots as A, watch as j, withCtx as M } from "vue";
+//#region src/components/VTabs/VTabs.vue?vue&type=script&setup=true&lang.ts
+var N = [
+	"data-variant",
+	"data-orientation",
+	"data-align",
+	"data-grow"
+], P = { class: "v-tabs-bar" }, F = ["aria-label", "aria-orientation"], I = {
+	key: 0,
+	class: "v-tabs-panels"
+}, L = /*@__PURE__*/ _({
+	inheritAttrs: !1,
+	__name: "VTabs",
+	props: /*@__PURE__*/ y({
+		variant: { default: "flat" },
+		tone: { default: "accent" },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		orientation: { default: "horizontal" },
+		align: { default: "start" },
+		grow: {
+			type: Boolean,
+			default: !1
+		},
+		scrollButtons: {
+			type: Boolean,
+			default: !1
+		},
+		prevIcon: { default: void 0 },
+		nextIcon: { default: void 0 },
+		prevLabel: { default: void 0 },
+		nextLabel: { default: void 0 },
+		activation: { default: "manual" },
+		label: { default: void 0 }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(_) {
+		let y = _, L = k(_, "modelValue"), { rootClass: R, rootStyle: z, forwardedAttrs: B } = u(), V = e(), H = ne(() => y.label ?? V.value.tabs.label), U = d(() => y.prevLabel ?? V.value.tabs.previous), W = d(() => y.nextLabel ?? V.value.tabs.next), G = A(), K = O();
+		oe(l, {
+			get value() {
+				return L.value;
+			},
+			select(e) {
+				L.value = e;
+			},
+			tabId: (e) => c(K, e),
+			panelId: (e) => ie(K, e),
+			get hasPanels() {
+				return G.panels !== void 0;
+			},
+			get variant() {
+				return y.variant;
+			},
+			get tone() {
+				return y.tone;
+			},
+			get size() {
+				return y.size;
+			},
+			get compact() {
+				return y.compact;
+			},
+			get activation() {
+				return y.activation;
+			}
+		});
+		let q = d(() => y.orientation === "vertical"), se = d(() => y.prevIcon ?? (q.value ? s : i)), ce = d(() => y.nextIcon ?? (q.value ? re : a)), J = T(null);
+		function le(e) {
+			let t = J.value;
+			t && ee(e, t, te(t, "[role=\"tab\"]:not(:disabled)"), { vertical: q.value });
+		}
+		let Y = T(null), X = T(null), Z = T(!0), Q = T(!0);
+		j([
+			J,
+			Y,
+			X
+		], ([e, t, n], r, i) => {
+			if (!e || !t || !n || typeof IntersectionObserver > "u") return;
+			let a = new IntersectionObserver((e) => {
+				for (let n of e) n.target === t ? Z.value = n.isIntersecting : Q.value = n.isIntersecting;
+			}, { root: e });
+			a.observe(t), a.observe(n), i(() => a.disconnect());
+		}, { flush: "post" });
+		function $(e) {
+			let t = J.value;
+			if (!t) return;
+			if (q.value) {
+				t.scrollBy?.({ top: e * t.clientHeight * .8 });
+				return;
+			}
+			let n = o(t);
+			t.scrollBy?.({ left: e * t.clientWidth * .8 * (n ? -1 : 1) });
+		}
+		return j(L, () => {
+			x(() => {
+				let e = J.value, t = e?.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+				if (!e || !t) return;
+				let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
+				e.scrollBy?.({
+					left: n.left < r.left ? n.left - r.left : n.right > r.right ? n.right - r.right : 0,
+					top: n.top < r.top ? n.top - r.top : n.bottom > r.bottom ? n.bottom - r.bottom : 0
+				});
+			});
+		}), (e, i) => (w(), m("div", {
+			class: S(["v-tabs", D(R)]),
+			style: ae(D(z)),
+			"data-variant": _.variant,
+			"data-orientation": _.orientation,
+			"data-align": _.align,
+			"data-grow": _.grow ? "" : void 0
+		}, [h("div", P, [
+			_.scrollButtons ? (w(), f(r, {
+				key: 0,
+				class: "v-tabs-scroll",
+				label: U.value,
+				tone: "neutral",
+				size: _.size,
+				compact: _.compact,
+				disabled: Z.value,
+				onClick: i[0] ||= (e) => $(-1)
+			}, {
+				default: M(() => [g(t, C(v(D(n)(se.value))), null, 16)]),
+				_: 1
+			}, 8, [
+				"label",
+				"size",
+				"compact",
+				"disabled"
+			])) : p("", !0),
+			h("div", b({
+				ref_key: "listEl",
+				ref: J
+			}, D(B), {
+				class: "v-tabs-list",
+				role: "tablist",
+				"aria-label": D(H),
+				"aria-orientation": q.value ? "vertical" : void 0,
+				onKeydown: le
+			}), [
+				_.scrollButtons ? (w(), m("span", {
+					key: 0,
+					ref_key: "startSentinelEl",
+					ref: Y,
+					class: "v-tabs-sentinel",
+					"aria-hidden": "true"
+				}, null, 512)) : p("", !0),
+				E(e.$slots, "default"),
+				_.scrollButtons ? (w(), m("span", {
+					key: 1,
+					ref_key: "endSentinelEl",
+					ref: X,
+					class: "v-tabs-sentinel",
+					"aria-hidden": "true"
+				}, null, 512)) : p("", !0)
+			], 16, F),
+			_.scrollButtons ? (w(), f(r, {
+				key: 1,
+				class: "v-tabs-scroll",
+				label: W.value,
+				tone: "neutral",
+				size: _.size,
+				compact: _.compact,
+				disabled: Q.value,
+				onClick: i[1] ||= (e) => $(1)
+			}, {
+				default: M(() => [g(t, C(v(D(n)(ce.value))), null, 16)]),
+				_: 1
+			}, 8, [
+				"label",
+				"size",
+				"compact",
+				"disabled"
+			])) : p("", !0)
+		]), e.$slots.panels ? (w(), m("div", I, [E(e.$slots, "panels")])) : p("", !0)], 14, N));
+	}
+});
+//#endregion
+export { L as default };
+
+//# sourceMappingURL=VTabs.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTabs.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VTabs/VTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, provide, ref, useId, useSlots, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { expand_less as expandLessIcon } from '../VIcon/icons/expand_less'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { panelIdFor, tabIdFor, tabsKey } from './context'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { isRtl } from '../../utils/direction'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\nexport type TabsVariant = 'flat' | 'outlined' | 'inset'\nexport type TabsTone = 'accent' | 'neutral' | 'danger'\nexport type TabsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type TabsOrientation = 'horizontal' | 'vertical'\nexport type TabsAlign = 'start' | 'center' | 'end'\nexport type TabsActivation = 'manual' | 'automatic'\n\n// @a11y @keyboard @core\n/**\n * A row of tabs, and optionally the panels they show. Only one panel is visible at a\n * time, and the tabs follow the pattern assistive technology expects of them: the row\n * is a single stop in the tab order, and the arrow keys move between the tabs inside\n * it.\n *\n * No button is invented here. Every tab is a VButton and the scroll controls are\n * VIconButtons, so hovering, focusing, disabling and the respect of a reader's\n * reduced-motion setting all come from there, without a single state rule being\n * written again in this file.\n *\n * Nothing touches the DOM outside event handlers and effects that run after the page\n * has been updated, which is what lets the component render on a server.\n */\ninterface TabsProps {\n  /**\n   * How the bar is framed. `flat` draws nothing but a rule under the tabs, with the\n   * selected one underlined; `outlined` puts that same bar and its panels inside a\n   * card; `inset` turns the row into a segmented control sitting in a hollow track.\n   */\n  variant?: TabsVariant\n  /** The colour the selected tab takes. The others stay neutral whatever this says. */\n  tone?: TabsTone\n  /** The height of the tabs, from the scale shared by every control. */\n  size?: TabsSize\n  /** Takes 4px off the height of every tab. */\n  compact?: boolean\n  /** Whether the tabs run across the page or down its side. */\n  orientation?: TabsOrientation\n  /** Where the tabs sit along the bar when they do not fill it. */\n  align?: TabsAlign\n  /** Makes the tabs share the whole bar between them, in equal parts. */\n  grow?: boolean\n  /**\n   * Adds a button at each end of the bar to scroll it, each disabled once that end is\n   * reached. It only makes sense when the tabs can overflow, so it excludes `grow`.\n   */\n  scrollButtons?: boolean\n  /** The icon of the button scrolling backwards. It follows the orientation by default. */\n  prevIcon?: IconSource\n  /** The icon of the button scrolling forwards. It follows the orientation by default. */\n  nextIcon?: IconSource\n  /** What the backward scroll button does, in words. It falls back to the dictionary. */\n  prevLabel?: string\n  /** What the forward scroll button does, in words. It falls back to the dictionary. */\n  nextLabel?: string\n  /**\n   * Whether moving to a tab also selects it. Selecting on arrival is what the ARIA\n   * authoring practices recommend when a panel appears instantly; leave it manual when\n   * showing a panel costs a request, or every tab passed over would fire one.\n   */\n  activation?: TabsActivation\n  /**\n   * What screen readers announce for the row of tabs. It falls back to the design\n   * system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<TabsProps>(), {\n  variant: 'flat',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  orientation: 'horizontal',\n  align: 'start',\n  grow: false,\n  scrollButtons: false,\n  prevIcon: undefined,\n  nextIcon: undefined,\n  prevLabel: undefined,\n  nextLabel: undefined,\n  activation: 'manual',\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The tabs themselves. */\n  default(): unknown\n  /**\n   * The panels the tabs show. Leaving it out renders no panel area at all, which is\n   * how the same component serves as a plain bar or a segmented control.\n   */\n  panels?(): unknown\n}>()\n\nconst model = defineModel<string | number>()\n\n// The root element is only a container; the one that matters is the row of tabs. So\n// `class` and `style` stay outside, where a consumer expects to place the component,\n// and everything else — the id, the aria-* naming it, the data-* — goes down onto the\n// row itself.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs: listAttrs } = useRootAttrs()\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins — that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.tabs.label)\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? m.value.tabs.previous)\nconst resolvedNextLabel = computed(() => props.nextLabel ?? m.value.tabs.next)\n\nconst slots = useSlots()\nconst baseId = useId()\n\n// Everything is exposed through getters rather than as values: that is what keeps the\n// root's props reactive on the other side of the injection, so a tab re-renders when\n// the size or the tone changes.\nprovide(tabsKey, {\n  get value() {\n    return model.value\n  },\n  select(value: string | number) {\n    model.value = value\n  },\n  tabId: (value: string | number) => tabIdFor(baseId, value),\n  panelId: (value: string | number) => panelIdFor(baseId, value),\n  // @ssr\n  /*\n   * Whether a slot was given is decided by the parent as it renders, so the answer is\n   * the same on the server and in the browser. A registry the panels filled in as they\n   * mounted would instead read as empty on the server and full on the client, which is\n   * a hydration mismatch.\n   *\n   * The trade-off is that this is not reactive: the panels slot must be there or not\n   * there, and cannot appear halfway through the life of the component.\n   */\n  get hasPanels() {\n    return slots.panels !== undefined\n  },\n  get variant() {\n    return props.variant\n  },\n  get tone() {\n    return props.tone\n  },\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n  get activation() {\n    return props.activation\n  },\n})\n\nconst isVertical = computed(() => props.orientation === 'vertical')\nconst resolvedPrevIcon = computed(\n  () => props.prevIcon ?? (isVertical.value ? expandLessIcon : chevronLeftIcon),\n)\nconst resolvedNextIcon = computed(\n  () => props.nextIcon ?? (isVertical.value ? expandMoreIcon : chevronRightIcon),\n)\n\nconst listEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/*\n * The arrow keys, through the shared implementation in `utils/arrowNav`. This handler\n * ONLY moves the focus. Selecting the tab that receives it — what `automatic`\n * activation means — is done by the tab itself, which knows its own typed value and\n * therefore never has to send it back through a DOM attribute.\n *\n * A tab the consumer has hidden is left out by the helper, which skips anything not\n * displayed.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const list = listEl.value\n  if (!list) return\n  arrowNavigate(event, list, navigableItems(list, '[role=\"tab\"]:not(:disabled)'), {\n    vertical: isVertical.value,\n  })\n}\n\n/*\n * Whether each end of the bar has been reached, which is what disables the scroll\n * buttons.\n *\n * CSS CAN now ask this question — `@container scroll-state(scrollable: inline-start)`,\n * which VDialog already uses for its scroll shadows — and it still cannot answer this\n * one, for two independent reasons. The query is Chrome/Edge 133 and later, with\n * neither Safari nor Firefox shipping it, and unlike VDialog's hairlines (which merely\n * stay invisible where it is missing) these buttons are functional: relying on it would\n * break them on two of the three engines this library targets. Guarding it with\n * `@supports` would mean keeping everything below anyway, so nothing would be saved.\n * And a stylesheet cannot set `disabled` on a button — CSS could only hide or grey the\n * arrows, which is a different affordance and a different thing for a screen reader to\n * announce, not the same behaviour written another way.\n *\n * Rather than measuring the scroll, two hairline markers are placed at the ends of the\n * row and watched. One watcher then covers all three things that can change the\n * answer: scrolling, the bar being resized, and tabs being added or removed — where\n * measuring would need a second mechanism for the resize alone.\n *\n * Both start as reached, so the buttons are disabled on the first render and on the\n * server, never wrongly enabled. It also gives the \"nothing overflows\" case for free:\n * both markers are visible at once, so both buttons stay disabled with no test of\n * their own.\n */\nconst startSentinelEl = ref<HTMLElement | null>(null)\nconst endSentinelEl = ref<HTMLElement | null>(null)\nconst atStart = ref(true)\nconst atEnd = ref(true)\n\nwatch(\n  [listEl, startSentinelEl, endSentinelEl],\n  ([root, start, end], _previous, onCleanup) => {\n    // @fallback\n    // The observer exists neither on the server nor in the unit-test environment, so\n    // its absence has to be tolerated rather than assumed away. The behaviour of the\n    // ends is checked in a real browser instead, by the play functions.\n    if (!root || !start || !end || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.target === start) atStart.value = entry.isIntersecting\n          else atEnd.value = entry.isIntersecting\n        }\n      },\n      { root },\n    )\n    observer.observe(start)\n    observer.observe(end)\n    onCleanup(() => observer.disconnect())\n  },\n  { flush: 'post' },\n)\n\n/**\n * Scrolls the bar by most of its own length. No scrolling behaviour is requested,\n * deliberately: leaving it out lets the stylesheet decide, which is what makes the\n * movement respect a reader who has asked for less motion.\n */\nfunction scrollStep(direction: -1 | 1) {\n  const list = listEl.value\n  if (!list) return\n  // Called optionally because the unit-test environment implements no scrolling at\n  // all; this behaviour is covered in a real browser.\n  if (isVertical.value) {\n    list.scrollBy?.({ top: direction * list.clientHeight * 0.8 })\n    return\n  }\n  // The horizontal offset is physical, not logical: in a right-to-left page, moving\n  // forward means moving left, so the direction has to be flipped by hand.\n  const rtl = isRtl(list)\n  list.scrollBy?.({ left: direction * list.clientWidth * 0.8 * (rtl ? -1 : 1) })\n}\n\n// @a11y @core\n/*\n * Brings the selected tab back into view when the selection was changed from code.\n * The keyboard needs nothing here: it moves the focus, and the browser scrolls a\n * focused element into view by itself.\n *\n * The scrolling is confined to the row rather than asking the element to reveal\n * itself, which would scroll every scrollable ancestor up to the page. The distances\n * are read from the two boxes, so they are already physical: the same code serves\n * left-to-right, right-to-left and vertical without a single test of direction.\n */\nwatch(model, () => {\n  nextTick(() => {\n    const list = listEl.value\n    const tab = list?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    if (!list || !tab) return\n    const t = tab.getBoundingClientRect()\n    const c = list.getBoundingClientRect()\n    list.scrollBy?.({\n      left: t.left < c.left ? t.left - c.left : t.right > c.right ? t.right - c.right : 0,\n      top: t.top < c.top ? t.top - c.top : t.bottom > c.bottom ? t.bottom - c.bottom : 0,\n    })\n  })\n})\n</script>\n\n<template>\n  <div\n    :class=\"['v-tabs', rootClass]\"\n    :style=\"rootStyle\"\n    :data-variant=\"variant\"\n    :data-orientation=\"orientation\"\n    :data-align=\"align\"\n    :data-grow=\"grow ? '' : undefined\"\n  >\n    <div class=\"v-tabs-bar\">\n      <VIconButton\n        v-if=\"scrollButtons\"\n        class=\"v-tabs-scroll\"\n        :label=\"resolvedPrevLabel\"\n        tone=\"neutral\"\n        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"atStart\"\n        @click=\"scrollStep(-1)\"\n      >\n        <VIcon v-bind=\"iconProps(resolvedPrevIcon)\" />\n      </VIconButton>\n\n      <div\n        ref=\"listEl\"\n        v-bind=\"listAttrs\"\n        class=\"v-tabs-list\"\n        role=\"tablist\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"isVertical ? 'vertical' : undefined\"\n        @keydown=\"onKeydown\"\n      >\n        <!-- The two markers watched to know whether an end of the bar is reached.\n             They are hidden from assistive technology: a row of tabs may contain\n             nothing but tabs. -->\n        <span\n          v-if=\"scrollButtons\"\n          ref=\"startSentinelEl\"\n          class=\"v-tabs-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <slot />\n        <span v-if=\"scrollButtons\" ref=\"endSentinelEl\" class=\"v-tabs-sentinel\" aria-hidden=\"true\" />\n      </div>\n\n      <VIconButton\n        v-if=\"scrollButtons\"\n        class=\"v-tabs-scroll\"\n        :label=\"resolvedNextLabel\"\n        tone=\"neutral\"\n        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"atEnd\"\n        @click=\"scrollStep(1)\"\n      >\n        <VIcon v-bind=\"iconProps(resolvedNextIcon)\" />\n      </VIconButton>\n    </div>\n\n    <div v-if=\"$slots.panels\" class=\"v-tabs-panels\">\n      <slot name=\"panels\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-tabs {\n    /*\n     * The gutter between the card's border and what it holds. It is zero when the\n     * component is flat, so the bar and the panels sit flush with whatever contains\n     * them, and only `outlined` gives it a value — the same idiom VDataTable uses.\n     *\n     * It is a FIXED measurement and deliberately not indexed on the size or the\n     * density: it is a property of the card, and in any case the size variables live\n     * on the descendant buttons, each tab declaring its own, so the root could not\n     * read them.\n     */\n    --tabs-frame-pad: 0px;\n\n    display: flex;\n    flex-direction: column;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* Turned vertical, the bar and the panels sit side by side rather than stacked. */\n  .v-tabs[data-orientation='vertical'] {\n    flex-direction: row;\n  }\n\n  /*\n   * The card, taken from the decoration scale shared with VAccordion and VDataTable.\n   * The flat default has nothing to undo, since it declares no decoration at all.\n   *\n   * The frame goes on the ROOT, so it encloses the bar AND the panels, and the rule\n   * under the tabs then becomes the boundary between the two inside it.\n   *\n   * Unlike VDataTable, nothing is clipped here. The gutter always leaves a band at\n   * least as wide as the inner radius, so no box ever reaches a corner and no nested\n   * radius has to be computed; the row already crops its own overflow; and clipping\n   * would cut the panel's focus ring — the only one that leaves the component — as\n   * well as forbidding a consumer any content running edge to edge.\n   */\n  .v-tabs[data-variant='outlined'] {\n    --tabs-frame-pad: var(--vectis-space-3);\n\n    background: var(--vectis-color-surface-raised);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n  }\n\n  .v-tabs-bar {\n    display: flex;\n    /* Stretched rather than centred: the row deliberately overlaps the track by one\n       pixel through a negative margin, and centring would displace it by half of\n       that. */\n    align-items: stretch;\n    /*\n     * The alignment belongs to the BAR and not to the row of tabs. The row is allowed\n     * to shrink below its content as soon as the tabs overflow, so there would be\n     * nothing left to distribute; and setting an alignment on a scrolling container\n     * makes whatever overflows past its start edge permanently unreachable, since a\n     * scroll position cannot go negative.\n     */\n    justify-content: flex-start;\n    gap: var(--vectis-space-1);\n    /* The card's gutter, which is zero when flat. Nothing is added on the edge the\n       track occupies: the tabs have to stay sitting on that line. */\n    padding-block-start: var(--tabs-frame-pad);\n    padding-inline: var(--tabs-frame-pad);\n  }\n\n  .v-tabs[data-orientation='vertical'] .v-tabs-bar {\n    flex-direction: column;\n    align-items: stretch;\n    /* Turned vertical, the track changes axis, so it is now the inline end edge that\n       must be left without a gutter. */\n    padding-block: var(--tabs-frame-pad);\n    padding-inline-end: 0;\n  }\n\n  .v-tabs[data-align='center'] .v-tabs-bar {\n    justify-content: center;\n  }\n\n  .v-tabs[data-align='end'] .v-tabs-bar {\n    justify-content: flex-end;\n  }\n\n  /* The rule the tabs sit on, in the flat and outlined frames. It is drawn on the BAR\n     rather than on the row, so that it also runs under the scroll buttons, which are\n     siblings of the row and not part of it. Inside a card it is what separates the\n     tabs from the panels — which is why that edge is left without a gutter, since\n     otherwise the rule would separate nothing from nothing.\n\n     Both frames are named explicitly rather than excluding the third: a fourth frame\n     will have to opt in by hand instead of inheriting this silently. */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tabs-bar {\n    border-block-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])[data-orientation='vertical']\n    .v-tabs-bar {\n    border-block-end: none;\n    border-inline-start: 1px solid var(--vectis-color-border);\n  }\n\n  /*\n   * Framed AND vertical, the rule MIGRATES to the other edge. Flat, it marks the edge\n   * of the tab column, hence the start; inside a card that edge is already drawn by\n   * the frame's own border — two parallel lines a pixel apart — and what is missing is\n   * the boundary between the tabs and the panels.\n   *\n   * TRAP — this block has exactly the same specificity as the one above, so it is the\n   * ORDER that decides. Moving it up would leave the vertical framed case with two\n   * rules on one side and none between the two areas.\n   */\n  .v-tabs[data-variant='outlined'][data-orientation='vertical'] .v-tabs-bar {\n    border-inline-start: none;\n    border-inline-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-tabs-list {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    overflow: auto;\n    /* Without these the row refuses to shrink below the width of its tabs, and it\n       would widen the whole bar instead of scrolling. */\n    min-inline-size: 0;\n    min-block-size: 0;\n    scrollbar-width: none;\n    scroll-behavior: smooth;\n  }\n\n  .v-tabs[data-orientation='vertical'] .v-tabs-list {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Pulling the row one pixel into the track is what lets the selected tab's indicator\n     COVER that line rather than sit on top of it, which would read as a thicker rule.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tabs-list {\n    margin-block-end: -1px;\n    /* On a track the tabs are contiguous segments and not a queue of buttons: no gap\n       here, and no rounded corners on the tabs themselves. */\n    gap: 0;\n  }\n\n  /* The row is now a pixel taller than the tabs it holds, so they are pushed against\n     its end edge; the indicator each tab draws there then falls exactly on the\n     track. */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])[data-orientation='horizontal']\n    .v-tabs-list {\n    align-items: flex-end;\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])[data-orientation='vertical']\n    .v-tabs-list {\n    margin-block-end: 0;\n    margin-inline-start: -1px;\n  }\n\n  /* Framed AND vertical, there is no longer a track on that edge to cover, since the\n     rule has migrated to the other side: the one-pixel overlap would simply slide the\n     row under the frame's own border.\n\n     TRAP — same specificity as the rule above, so again it is the order that decides. */\n  .v-tabs[data-variant='outlined'][data-orientation='vertical'] .v-tabs-list {\n    margin-inline-start: 0;\n  }\n\n  /*\n   * A framed bar with no panels: the card is reduced to the tabs alone. There is no\n   * longer a boundary to mark, and the track would run right alongside the frame's own\n   * border, doubling it. So the frame takes its place, the gutter closes on that edge,\n   * and the row stops overlapping.\n   */\n  .v-tabs[data-variant='outlined']:not(:has(> .v-tabs-panels)) .v-tabs-bar {\n    border-block-end: none;\n    border-inline-end: none;\n    padding-block-end: var(--tabs-frame-pad);\n    padding-inline-end: var(--tabs-frame-pad);\n  }\n\n  .v-tabs[data-variant='outlined']:not(:has(> .v-tabs-panels)) .v-tabs-list {\n    margin-block-end: 0;\n  }\n\n  /* The hollow track of the segmented variant is drawn on the scrolling row itself,\n     and not on the bar around it: its padding is what keeps the raised tab's shadow\n     from being clipped as the row scrolls. */\n  .v-tabs[data-variant='inset'] .v-tabs-list {\n    background: var(--vectis-color-surface-sunken);\n    padding: var(--vectis-space-1);\n    border-radius: var(--vectis-radius-surface);\n  }\n\n  .v-tabs[data-grow] .v-tabs-list {\n    flex: 1;\n  }\n\n  .v-tabs-sentinel {\n    flex: 0 0 1px;\n    align-self: stretch;\n  }\n\n  .v-tabs-scroll {\n    flex: none;\n    /* The bar stretches its children for the track's sake, so the scroll buttons have\n       to re-centre themselves on the row — which in the segmented variant is taller\n       than they are. */\n    align-self: center;\n  }\n\n  /* A chevron points at a physical direction, which the logical properties do not\n     mirror: in a right-to-left page it has to be flipped by hand. */\n  [dir='rtl'] .v-tabs[data-orientation='horizontal'] .v-tabs-scroll .v-icon {\n    scale: -1 1;\n  }\n\n  .v-tabs-panels {\n    min-inline-size: 0;\n    /* The panels are the content area of the card, so they take the gutter on all four\n       sides — where the bar takes it on three, the fourth being the track's. */\n    padding: var(--tabs-frame-pad);\n  }\n\n  .v-tabs[data-orientation='vertical'] .v-tabs-panels {\n    flex: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs-list {\n      scroll-behavior: auto;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VTabs/context.d.ts

@@ -0,0 +1,43 @@
+import { InjectionKey } from 'vue';
+import { TabsActivation, TabsSize, TabsTone, TabsVariant } from './VTabs.js';
+/**
+ * What a VTabs passes down to the tabs and panels inside it.
+ *
+ * A tab and its panel have to know each other's identifier, since each names the
+ * other for assistive technology. Rather than a registry they fill in as they mount,
+ * both DERIVE that identifier from one generated base and their own `value` — so they
+ * agree without ever exchanging anything, and the server and the browser produce the
+ * same markup.
+ *
+ * The size travels through here rather than through CSS inheritance, as it does in
+ * VAccordion, for a concrete reason: each tab renders a button that declares its own
+ * size on itself, so an inherited value would never reach it.
+ */
+export interface TabsContext {
+    /** The selected tab, or nothing when the v-model names no tab that exists. */
+    readonly value: string | number | undefined;
+    /** Selects a tab. */
+    select: (value: string | number) => void;
+    /** The identifier of a tab, so its panel can point at it. */
+    tabId: (value: string | number) => string;
+    /** The identifier of a panel, so its tab can point at it. */
+    panelId: (value: string | number) => string;
+    /**
+     * Whether panels were given at all. Without them the tabs are a bar of buttons and
+     * must not claim to control anything.
+     */
+    readonly hasPanels: boolean;
+    /** The frame the bar is drawn in. */
+    readonly variant: TabsVariant;
+    /** The colour the selected tab takes. */
+    readonly tone: TabsTone;
+    /** The height of the tabs. */
+    readonly size: TabsSize;
+    /** The reduced density. */
+    readonly compact: boolean;
+    /** Whether moving to a tab selects it, or merely focuses it. */
+    readonly activation: TabsActivation;
+}
+export declare const tabsKey: InjectionKey<TabsContext>;
+export declare const tabIdFor: (base: string, value: string | number) => string;
+export declare const panelIdFor: (base: string, value: string | number) => string;

package/dist/components/VTabs/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VTabs/context.ts
+var e = Symbol("v-tabs"), t = (e) => String(e).replace(/[^\w-]+/g, "_"), n = (e, n) => `${e}-tab-${t(n)}`, r = (e, n) => `${e}-panel-${t(n)}`;
+//#endregion
+export { r as panelIdFor, n as tabIdFor, e as tabsKey };
+
+//# sourceMappingURL=context.js.map

package/dist/components/VTabs/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VTabs/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { TabsActivation, TabsSize, TabsTone, TabsVariant } from './VTabs.vue'\n\n/**\n * What a VTabs passes down to the tabs and panels inside it.\n *\n * A tab and its panel have to know each other's identifier, since each names the\n * other for assistive technology. Rather than a registry they fill in as they mount,\n * both DERIVE that identifier from one generated base and their own `value` — so they\n * agree without ever exchanging anything, and the server and the browser produce the\n * same markup.\n *\n * The size travels through here rather than through CSS inheritance, as it does in\n * VAccordion, for a concrete reason: each tab renders a button that declares its own\n * size on itself, so an inherited value would never reach it.\n */\nexport interface TabsContext {\n  /** The selected tab, or nothing when the v-model names no tab that exists. */\n  readonly value: string | number | undefined\n  /** Selects a tab. */\n  select: (value: string | number) => void\n  /** The identifier of a tab, so its panel can point at it. */\n  tabId: (value: string | number) => string\n  /** The identifier of a panel, so its tab can point at it. */\n  panelId: (value: string | number) => string\n  /**\n   * Whether panels were given at all. Without them the tabs are a bar of buttons and\n   * must not claim to control anything.\n   */\n  readonly hasPanels: boolean\n  /** The frame the bar is drawn in. */\n  readonly variant: TabsVariant\n  /** The colour the selected tab takes. */\n  readonly tone: TabsTone\n  /** The height of the tabs. */\n  readonly size: TabsSize\n  /** The reduced density. */\n  readonly compact: boolean\n  /** Whether moving to a tab selects it, or merely focuses it. */\n  readonly activation: TabsActivation\n}\n\nexport const tabsKey: InjectionKey<TabsContext> = Symbol('v-tabs')\n\n/**\n * Makes a tab's value safe to use inside an identifier. The attribute tying a tab to\n * its panel holds a LIST of identifiers separated by spaces, so a value containing a\n * space would be read there as two references, both to elements that do not exist.\n * Everything a selector would choke on is replaced along the way.\n */\nconst slug = (value: string | number) => String(value).replace(/[^\\w-]+/g, '_')\n\nexport const tabIdFor = (base: string, value: string | number) => `${base}-tab-${slug(value)}`\nexport const panelIdFor = (base: string, value: string | number) => `${base}-panel-${slug(value)}`\n"],"mappings":";AA2CA,IAAa,IAAqC,OAAO,QAAQ,GAQ3D,KAAQ,MAA2B,OAAO,CAAK,CAAC,CAAC,QAAQ,YAAY,GAAG,GAEjE,KAAY,GAAc,MAA2B,GAAG,EAAK,OAAO,EAAK,CAAK,KAC9E,KAAc,GAAc,MAA2B,GAAG,EAAK,SAAS,EAAK,CAAK"}

package/dist/components/VTextarea/VTextarea.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-textarea{gap:var(--vectis-space-1);width:100%;font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-textarea-meta{align-items:baseline;gap:var(--vectis-space-2);display:flex}.v-textarea-counter{font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted);font-variant-numeric:tabular-nums;margin-inline-start:auto}.v-textarea-counter[data-over]{color:var(--vectis-color-danger-text)}.v-textarea-field{--field-border-color:var(--vectis-color-border-strong);--textarea-leading:var(--vectis-text-body-md-leading);--textarea-line:calc(var(--control-font-size) * var(--textarea-leading));align-items:flex-start;gap:var(--control-gap);padding-inline:var(--control-padding-inline-field);padding-block:calc((var(--control-height) - 2px - var(--textarea-line)) / 2);background:var(--vectis-color-surface);color:var(--vectis-color-text);border:1px solid var(--field-border-color);border-radius:var(--vectis-radius-interactive);font-size:var(--control-font-size);line-height:var(--textarea-leading);resize:vertical;transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default), background-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);display:flex;overflow:hidden}.v-textarea-control{min-width:0;color:inherit;font:inherit;resize:none;background:0 0;border:none;outline:none;flex:1;align-self:stretch;padding:0}.v-textarea-control::placeholder{color:var(--vectis-color-text-subtle)}.v-textarea-field>.v-icon,.v-textarea-field>.v-spinner{margin-block:calc((var(--textarea-line) - var(--vectis-icon-size)) / 2)}.v-textarea-field>.v-textarea-action{margin-block:calc((var(--textarea-line) - var(--control-action-size)) / 2)}.v-textarea-field>.v-icon{color:var(--vectis-color-text-muted)}.v-textarea-field>.v-spinner{font-size:var(--vectis-icon-size)}.v-textarea[data-readonly] .v-textarea-field{--field-border-color:var(--vectis-color-border);background:var(--vectis-color-surface-sunken)}.v-textarea-field:hover:not(:has(.v-textarea-control:focus)):not(:has(.v-textarea-control:disabled,.v-textarea-control:user-invalid,.v-textarea-control[aria-invalid=true])){--field-border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-textarea-field:has(.v-textarea-control:focus){--field-border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--field-border-color);outline:var(--vectis-focus-ring-width) solid transparent}:is(.v-textarea-field:has(.v-textarea-control:user-invalid),.v-textarea-field:has(.v-textarea-control[aria-invalid=true])){--field-border-color:var(--vectis-color-danger)}.v-textarea-action{width:var(--control-action-size);height:var(--control-action-size);margin-inline:calc((var(--vectis-icon-size) - var(--control-action-size)) / 2);color:var(--vectis-color-text-muted);border-radius:var(--vectis-radius-interactive);cursor:pointer;transition:color var(--vectis-duration-fast) var(--vectis-ease-default);background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.v-textarea-action:hover:not(:disabled){color:var(--vectis-color-text)}.v-textarea-action:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(var(--vectis-focus-ring-offset) * -1)}.v-textarea[data-disabled] .v-textarea-field{--field-border-color:var(--vectis-color-border);background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-muted);cursor:not-allowed;resize:none}.v-textarea[data-disabled] .v-textarea-label,.v-textarea[data-disabled] .v-textarea-hint,.v-textarea[data-disabled] .v-textarea-counter{color:var(--vectis-color-text-subtle)}.v-textarea[data-disabled] .v-textarea-action,.v-textarea[data-disabled] .v-textarea-field>.v-icon{color:inherit;cursor:not-allowed}.v-textarea-control:disabled{cursor:not-allowed}.v-textarea-field[data-auto-grow]{resize:none}.v-textarea-field[data-auto-grow] .v-textarea-control{field-sizing:content;min-block-size:calc(var(--textarea-rows) * var(--textarea-line))}@media (prefers-reduced-motion:reduce){.v-textarea-field,.v-textarea-action{transition:none}}}

package/dist/components/VTextarea/VTextarea.d.ts

@@ -0,0 +1,140 @@
+import { IconSource } from '../VIcon/types.js';
+interface TextareaProps {
+    /** The size of the field, which sets its padding, its type scale and its icons. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Takes 4px off the field by tightening its padding, leaving the number of lines,
+     * the type and the icons alone.
+     */
+    compact?: boolean;
+    /**
+     * How many lines of text the field shows — the native `rows` attribute, which is
+     * what gives the field its height. Anything under 1 is raised to 1, and at 1 the
+     * field is exactly as tall as a VInput of the same size.
+     */
+    rows?: number;
+    /**
+     * Lets the field grow as the text is typed, instead of scrolling inside the height
+     * `rows` gives it — which stays its starting height. It is pure CSS; where the
+     * browser does not support it, the field simply behaves like an ordinary textarea.
+     */
+    autoGrow?: boolean;
+    /**
+     * Marks the field as invalid whatever the browser thinks — the route for a rule
+     * only the server can check.
+     */
+    invalid?: boolean;
+    /** Makes the field unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /**
+     * Shows the text without allowing it to be changed. The field can still be focused
+     * and copied from, and the clear button is hidden.
+     */
+    readonly?: boolean;
+    /** The label above the field, tied to it so that clicking it focuses the field. */
+    label?: string;
+    /**
+     * A line of help under the field, tied to the textarea for assistive technology so
+     * that it is read out along with the label.
+     */
+    hint?: string;
+    /**
+     * An icon inside the field, at the start. It is decorative by default and becomes a
+     * real button as soon as a `@click:icon-start` listener is attached — in which case
+     * it needs `iconStartLabel`. The `#start` slot replaces it.
+     */
+    iconStart?: IconSource;
+    /**
+     * The same at the end of the field. The `#end` slot replaces it, and the loading
+     * spinner takes its place while it turns.
+     */
+    iconEnd?: IconSource;
+    /** What the start icon does, in words, once it is clickable. */
+    iconStartLabel?: string;
+    /** What the end icon does, in words, once it is clickable. */
+    iconEndLabel?: string;
+    /** Shows a spinner at the end of the field, in place of the end icon or slot. */
+    loading?: boolean;
+    /**
+     * What screen readers announce while the spinner turns. It falls back to the design
+     * system dictionary.
+     */
+    loadingLabel?: string;
+    /**
+     * Offers a cross that empties the field. It appears when there is something to
+     * clear and the field can be edited.
+     */
+    clearable?: boolean;
+    /** What the clear button does, in words. It falls back to the design system dictionary. */
+    clearLabel?: string;
+    /**
+     * The maximum number of characters. By default this is the browser's own limit,
+     * which simply refuses anything beyond it.
+     */
+    maxlength?: number;
+    /**
+     * Turns that limit into a soft one: the reader may type past it, and the field goes
+     * into error instead of silently refusing the keystrokes. It is reported through
+     * the native validity, so a form cannot be submitted over the limit.
+     */
+    softLimit?: boolean;
+    /**
+     * Shows how much has been typed, under the field: "12/80" against a limit, or just
+     * "12" without one.
+     */
+    counter?: boolean;
+}
+type __VLS_Props = TextareaProps;
+type __VLS_Slots = {
+    /** Content at the start of the field, which replaces `iconStart`. */
+    start?(): unknown;
+    /**
+     * Content at the end of the field, which replaces `iconEnd`. It is hidden while the
+     * field is loading, the spinner taking that place.
+     */
+    end?(): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: string) => any;
+    "click:icon-start": (event: MouseEvent) => any;
+    "click:icon-end": (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onClick:icon-start"?: ((event: MouseEvent) => any) | undefined;
+    "onClick:icon-end"?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    loading: boolean;
+    label: string;
+    size: "sm" | "md" | "lg";
+    compact: boolean;
+    disabled: boolean;
+    iconStart: IconSource;
+    iconEnd: IconSource;
+    invalid: boolean;
+    readonly: boolean;
+    hint: string;
+    iconStartLabel: string;
+    iconEndLabel: string;
+    loadingLabel: string;
+    clearable: boolean;
+    clearLabel: string;
+    maxlength: number;
+    softLimit: boolean;
+    counter: boolean;
+    rows: number;
+    autoGrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTextarea/VTextarea.js

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

package/dist/components/VTextarea/VTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTextarea.js","names":[],"sources":["../../../src/components/VTextarea/VTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A field for text running over several lines, with the same label, hint, icons,\n * counter, loading state and clear button as VInput, arranged around a real\n * `<textarea>`.\n *\n * Two things differ from its single-line counterpart. The field can grow with what\n * is typed into it, and that is pure CSS — a browser without `field-sizing` simply\n * keeps a fixed height with its usual scrollbar. And the counter is placed UNDER the\n * field rather than inside it, where several lines of text would run into it.\n *\n * As in VInput, the attributes it is given are split — `class` and `style` stay\n * outside, the rest goes to the textarea — validation stays the browser's, and the\n * only behavioural JavaScript is the v-model and the clear button, which has to hand\n * focus back to the field it just emptied.\n */\nimport { computed, ref } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\n\ninterface TextareaProps {\n  /** The size of the field, which sets its padding, its type scale and its icons. */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * Takes 4px off the field by tightening its padding, leaving the number of lines,\n   * the type and the icons alone.\n   */\n  compact?: boolean\n  /**\n   * How many lines of text the field shows — the native `rows` attribute, which is\n   * what gives the field its height. Anything under 1 is raised to 1, and at 1 the\n   * field is exactly as tall as a VInput of the same size.\n   */\n  rows?: number\n  /**\n   * Lets the field grow as the text is typed, instead of scrolling inside the height\n   * `rows` gives it — which stays its starting height. It is pure CSS; where the\n   * browser does not support it, the field simply behaves like an ordinary textarea.\n   */\n  autoGrow?: boolean\n  /**\n   * Marks the field as invalid whatever the browser thinks — the route for a rule\n   * only the server can check.\n   */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the text without allowing it to be changed. The field can still be focused\n   * and copied from, and the clear button is hidden.\n   */\n  readonly?: boolean\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, tied to the textarea for assistive technology so\n   * that it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a\n   * real button as soon as a `@click:icon-start` listener is attached — in which case\n   * it needs `iconStartLabel`. The `#start` slot replaces it.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingLabel?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field goes\n   * into error instead of silently refusing the keystrokes. It is reported through\n   * the native validity, so a form cannot be submitted over the limit.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, under the field: \"12/80\" against a limit, or just\n   * \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n  size: 'md',\n  compact: false,\n  rows: 5,\n  autoGrow: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingLabel: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Content at the start of the field, which replaces `iconStart`. */\n  start?(): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while the\n   * field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n}>()\n\nconst model = defineModel<string>({ default: '' })\n\n// HTML wants `rows` to be a positive integer, and it drops anything else on the floor:\n// a 0, a negative or a fractional value would leave the browser falling back to its own\n// default of two rows, which is neither what was asked for nor this component's default.\n// Rounding and flooring here is what keeps the prop's contract out of the parser's hands.\nconst resolvedRows = computed(() => Math.max(1, Math.round(props.rows)))\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the\n// field; every other attribute goes to the textarea, where it does something.\nconst { attrs, rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedLoadingLabel = computed(() => props.loadingLabel ?? m.value.common.loading)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst { fieldId, hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VTextarea',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLTextAreaElement | null>(null)\n\nconst showClear = computed(\n  () => props.clearable && model.value.length > 0 && !props.disabled && !props.readonly,\n)\n\n// @a11y @core — moving the focus back is the accessibility half of this handler.\n// The cross vanishes the instant it empties the field, so without that call focus\n// falls back to the page body and a keyboard user loses their place in the form.\nfunction onClear() {\n  model.value = ''\n  emit('clear')\n  controlEl.value?.focus()\n}\n\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => model.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-textarea v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-textarea-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div\n      class=\"v-textarea-field\"\n      :style=\"{ '--textarea-rows': resolvedRows }\"\n      :data-auto-grow=\"autoGrow ? '' : undefined\"\n    >\n      <slot name=\"start\">\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-textarea-action\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-start', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconStart)\" />\n        </button>\n        <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n\n      <textarea\n        v-bind=\"restAttrs\"\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        class=\"v-textarea-control\"\n        :rows=\"resolvedRows\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || undefined\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\n\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"v-textarea-action v-textarea-clear\"\n        :aria-label=\"resolvedClearLabel\"\n        @click=\"onClear\"\n      >\n        <VIcon :name=\"closeIcon\" />\n      </button>\n\n      <VSpinner v-if=\"loading\" :label=\"resolvedLoadingLabel\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-textarea-action\"\n          :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-end', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconEnd)\" />\n        </button>\n        <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n      </slot>\n    </div>\n\n    <div v-if=\"hint || counter\" class=\"v-textarea-meta\">\n      <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-textarea-hint\">\n        {{ hint }}\n      </VTypography>\n      <span v-if=\"counter\" class=\"v-textarea-counter\" :data-over=\"over ? '' : undefined\">\n        {{ counterText }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-textarea {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     .v-textarea-label and .v-textarea-hint classes remain as hooks: a consumer\n     overrides through them, and the disabled state below reaches them that way. */\n\n  .v-textarea-meta {\n    display: flex;\n    align-items: baseline;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The counter keeps its own local styling rather than going through VTypography:\n     figures of equal width, so the number does not shift as it counts, and a colour\n     that marks the overflow — neither of which is a typographic role. */\n  .v-textarea-counter {\n    margin-inline-start: auto;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-textarea-counter[data-over] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* This is the box that carries the border, the background, the focus ring and the\n     resize handle — which is why it also hides its overflow, `resize` having no\n     effect on a box whose overflow is visible. `--field-border-color` is the single\n     source of truth for its colour, and the hover, error and disabled states do\n     nothing but redefine it. */\n  .v-textarea-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    /*\n     * Nothing here restates the size scale: the `--control-*` variables are inherited\n     * from the v-control root (styles/control-size.css), the icon context included.\n     *\n     * The field carries NO height of its own: it is the `rows` attribute on the\n     * textarea that sets one, and the field is simply as tall as the control it wraps.\n     * That is what makes dragging the resize handle behave like a bare textarea — the\n     * field shrinks and the control scrolls — instead of stopping at a CSS floor.\n     */\n\n    /* The leading is named ONCE and feeds two things that have to agree by\n       construction: the field's own `line-height`, and the first line box below,\n       against which everything sitting beside the text is offset. */\n    --textarea-leading: var(--vectis-text-body-md-leading);\n\n    /* The height of the FIRST line box, the row the icons and the buttons align on.\n\n       TRAP — it is DERIVED and must never be written as `1lh`. The `lh` unit resolves\n       against the element the property is USED on, and the children do not share the\n       field's font: an icon carries `--vectis-icon-size` (20px against the field's\n       14px), so `1lh` measured a 30px line there and dropped every icon 4.5px below\n       the text and the buttons it is supposed to line up with. The buttons happened to\n       be right only because the reset gives them `font: inherit`. */\n    --textarea-line: calc(var(--control-font-size) * var(--textarea-leading));\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--control-gap);\n    padding-inline: var(--control-padding-inline-field);\n    /* Half of what is left of the control height once its two 1px borders and one line\n       box are taken out — so at `rows=\"1\"` the field is exactly a VInput of the same\n       size, and every further row adds precisely one line box.\n\n       It reads --control-height and not --control-height-base, which is what carries\n       the density here: with no height of its own left to shrink, the padding is the\n       only lever `compact` has, and 2px off each edge is the -4px the whole scale\n       promises. */\n    padding-block: calc((var(--control-height) - 2px - var(--textarea-line)) / 2);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    /* Text running over several lines takes the body line height. The `control` type\n       role, whose lines are set tight against one another, only makes sense for a\n       single-line label. */\n    line-height: var(--textarea-leading);\n    resize: vertical;\n    overflow: hidden;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-textarea-control {\n    flex: 1;\n    min-width: 0;\n    align-self: stretch;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* the focus ring is drawn by the field around it, not here */\n    resize: none; /* the resize handle belongs to the field, so there is only one */\n  }\n\n  .v-textarea-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The icons and buttons align with the FIRST line of text rather than with the\n     middle of a field whose height varies: half the difference between the line box and\n     the element centres it there. On a single line that comes out identical to the\n     centring VInput gets from its fixed height, which is the point.\n\n     The measure is `--textarea-line` and never `1lh` — see the trap where it is\n     declared: `lh` would be resolved against each child's own font, which differs from\n     the field's.\n\n     TRAP — the margin is SYMMETRIC, the VToast rule. It looks redundant under\n     `align-items: flex-start`, where only the start side moves anything, but the end\n     side is what keeps the item's OUTER box down to one line box. Left off, a clear\n     cross (24px against a 21px line) would be the tallest thing in the flex line and\n     the field would be 1.5px taller than the rows asked for — 2px at `lg` — which is\n     exactly the gap that stops `rows=\"1\"` from being a VInput. */\n  .v-textarea-field > .v-icon,\n  .v-textarea-field > .v-spinner {\n    margin-block: calc((var(--textarea-line) - var(--vectis-icon-size)) / 2);\n  }\n\n  .v-textarea-field > .v-textarea-action {\n    margin-block: calc((var(--textarea-line) - var(--control-action-size)) / 2);\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-textarea-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-textarea-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /* A read-only field sinks slightly into the page but keeps its text at full\n     strength — the value is there to be read — and still shows the accent focus ring.\n     The state is read from [data-readonly] and never from `:read-only`, which the\n     browser also matches on a disabled field.\n\n     TRAP — this block must stay FIRST in the sequence of states: read-only, then\n     hover, focus, invalid and disabled. Every one of these selectors weighs (0,3,0),\n     `:has()` taking the specificity of what it contains, so nothing but the source\n     order arbitrates between them. Moved further down, this rule would repaint the\n     error border and the accent focus ring grey, with no error anywhere. What belongs\n     to a read-only field is its BASE colour alone. */\n  .v-textarea[data-readonly] .v-textarea-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-textarea-field:hover:not(:has(.v-textarea-control:focus)):not(\n      :has(\n        .v-textarea-control:disabled,\n        .v-textarea-control:user-invalid,\n        .v-textarea-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The focused field appears to have a two-pixel border: it is really its own 1px\n     border plus a 1px shadow of the same colour just outside it, which costs no\n     layout and therefore makes nothing jump.\n\n     The selector watches the CONTROL's focus and not `:focus-within`, so that when one\n     of the field's own buttons takes keyboard focus, only that button's outline\n     lights up: two indicators at once would be unreadable. And it is `:focus` rather\n     than `:focus-visible`, because a text field shows its focus even when it was\n     reached with the mouse.\n\n     The transparent outline is the safety net for Windows forced colours, which drop\n     box-shadows entirely; an outline survives and keeps the field marked. */\n  .v-textarea-field:has(.v-textarea-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* The invalid state, from the browser's own verdict first and from the `invalid`\n     prop second. Only the colour variable is changed, which is why the border AND the\n     focus ring both turn red without either being restated. */\n  .v-textarea-field:has(.v-textarea-control:user-invalid),\n  .v-textarea-field:has(.v-textarea-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* The field's own buttons — the clear cross, a clickable icon — go from muted grey\n     to full strength on hover, and take VButton's radius so their focus ring has the\n     same rounded corners as everything else.\n\n     The negative margin is DERIVED and never written as a number: it is exactly half\n     the difference between the icon and the wider box holding it. Subtracting it\n     cancels that inset, so the glyph lands precisely where a decorative icon would\n     have — against the field's padding, one --control-gap from its neighbour. */\n  .v-textarea-action {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--control-action-size);\n    height: var(--control-action-size);\n    margin-inline: calc((var(--vectis-icon-size) - var(--control-action-size)) / 2);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text-muted);\n    border-radius: var(--vectis-radius-interactive);\n    cursor: pointer;\n    flex: none;\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-textarea-action:hover:not(:disabled) {\n    color: var(--vectis-color-text);\n  }\n\n  .v-textarea-action:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  /* A disabled field greys out through the colour tokens, the same ones VCheckbox and\n     VRadio use, and never through opacity. It comes LAST in the sequence of states,\n     which at equal specificity is what makes it win over all of them, the error\n     included: a disabled field is not submitted, so it has nothing to report.\n\n     The text here is `text-muted` and not the `text-subtle` used by the label and the\n     hint below, because those sit on the page surface where this sits on\n     `surface-muted` — against which subtle falls to a 4.4:1 contrast. The control\n     itself is exempt from that rule, being natively disabled, but the icons the field\n     CONTAINS are not, and they inherit this colour. */\n  .v-textarea[data-disabled] .v-textarea-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n    resize: none;\n  }\n\n  .v-textarea[data-disabled] .v-textarea-label,\n  .v-textarea[data-disabled] .v-textarea-hint,\n  .v-textarea[data-disabled] .v-textarea-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-textarea[data-disabled] .v-textarea-action,\n  .v-textarea[data-disabled] .v-textarea-field > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-textarea-control:disabled {\n    cursor: not-allowed;\n  }\n\n  /* Growing with the content is pure CSS: `field-sizing` makes the textarea's height\n     follow what is typed, and the field around it follows in turn. The resize handle\n     goes, there being nothing left to resize by hand. A browser without support keeps\n     the fixed height and its scrollbar, which is the intended fallback. */\n  .v-textarea-field[data-auto-grow] {\n    resize: none;\n  }\n\n  /* `field-sizing: content` sizes the control to what has been typed and ignores `rows`\n     outright, so an auto-growing field would open one line tall whatever the prop said.\n     The floor hands the STARTING height back to `rows` and leaves the growing to the\n     browser. It is scoped to this branch and must not be lifted onto the control at\n     large: a floor there would stop the control shrinking with the resize handle, and\n     the field, which hides its overflow, would clip it instead of scrolling. */\n  .v-textarea-field[data-auto-grow] .v-textarea-control {\n    field-sizing: content;\n    min-block-size: calc(var(--textarea-rows) * var(--textarea-line));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-textarea-field,\n    .v-textarea-action {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}