vectis-ui 0.1.0 → 0.8.0

package/dist/components/VSwitch/VSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.js","names":[],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A switch, for a setting that takes effect at once — where a checkbox states an\n * intention to be confirmed later.\n *\n * Underneath it is a native checkbox marked `role=\"switch\"`, so a screen reader\n * announces it as on or off rather than as ticked, and the keyboard and the form\n * behaviour come along for free. The track and the moving thumb are pure CSS,\n * following the input's checked state; the only JavaScript is the v-model.\n */\ninterface SwitchProps {\n  /** Which side of the switch the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available — the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<SwitchProps>(), {\n  labelPosition: 'end',\n  spread: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element\n// that actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n</script>\n\n<template>\n  <label class=\"v-switch\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      v-model=\"model\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"v-switch-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n    />\n    <span class=\"v-switch-track\" aria-hidden=\"true\">\n      <span class=\"v-switch-thumb\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-switch-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the track and the label. */\n  .v-switch[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-switch[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order and out of the form. */\n  .v-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    width: var(--switch-track-w);\n    height: var(--switch-track-h);\n    padding: var(--switch-pad);\n    flex: none;\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    width: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    height: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-surface);\n    border-radius: var(--vectis-radius-full);\n    box-shadow: var(--vectis-shadow-xs);\n    /* The thumb travels through `margin-inline-start` rather than a translation,\n       because a logical property follows the reading direction: in a right-to-left\n       page the thumb then moves leftwards on its own, where a translateX would have\n       to be mirrored by a second rule. */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  .v-switch:hover .v-switch-input:not(:disabled):not(:checked) + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 12%\n    );\n  }\n\n  .v-switch-input:focus-visible + .v-switch-track {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* A disabled switch greys out through the colour tokens, the same ones VCheckbox\n     and VRadio use, and never through opacity. The thumb takes text-subtle — the\n     colour their disabled tick and dot take — which is what keeps it visible against\n     the grey track in both themes. */\n  .v-switch:has(.v-switch-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSwitch.js","names":[],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A switch, for a setting that takes effect at once — where a checkbox states an\n * intention to be confirmed later.\n *\n * Underneath it is a native checkbox marked `role=\"switch\"`, so a screen reader\n * announces it as on or off rather than as ticked, and the keyboard and the form\n * behaviour come along for free. The track and the moving thumb are pure CSS,\n * following the input's checked state; the only JavaScript besides the v-model is the\n * refusal `readonly` asks for, which a checkbox has no native form of.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available — the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which rings the track and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the setting without allowing it to be changed. The switch can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  label: undefined,\n  hint: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The root element is a layout box, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element that\n// actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @core\n// The native `readonly` attribute does nothing on a checkbox. Cancelling the click is what\n// refuses the change: the browser puts `checked` back and fires no `change`, so the v-model\n// never hears of it. It covers the Space key, which a checkbox turns into a click, and a\n// click on the label, which is forwarded to the input.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real switch.\ndefineExpose({\n  /** Moves the focus to the real switch. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"checkbox\" role=\"switch\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-switch-track\" aria-hidden=\"true\">\n        <span class=\"v-switch-thumb\" />\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-switch-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-switch-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The track's own measurements, which nothing outside this sheet reads. The row they\n     sit in is `.v-choice`'s (styles/choice.css), and so is the focus ring. */\n  .v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: var(--vectis-control-size-switch-pad);\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    width: var(--switch-track-w);\n    height: var(--switch-track-h);\n    padding: var(--switch-pad);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    width: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    height: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-text-on-accent);\n    border-radius: var(--vectis-radius-pill);\n    box-shadow: var(--vectis-shadow-xs);\n    /* The thumb travels through `margin-inline-start` rather than a translation,\n       because a logical property follows the reading direction: in a right-to-left\n       page the thumb then moves leftwards on its own, where a translateX would have\n       to be mirrored by a second rule. */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  /* The 15 % mix VCheckbox and VRadio take on hover, on the track's own colour. */\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled, :checked)\n    + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The same pair of selectors as VCheckbox and VRadio, so a switch reports a rule the\n     browser checked and one only the consumer can. It is drawn as a RING rather than as\n     a border colour: the track has no border to tint, and a shadow changes no geometry,\n     where a border would eat into the padding the thumb travels in. The focus outline\n     sits further out, at its own offset, so the two never sit on the same pixels. */\n  .v-switch-input:user-invalid + .v-switch-track,\n  .v-switch-input[aria-invalid='true'] + .v-switch-track {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  /* Read-only trades the accent of an ON switch for the muted text colour, the way a\n     read-only checkbox does, and the thumb takes the surface colour that contrasts with it\n     in both themes. `:where()` keeps both rules at the weight of the disabled ones below,\n     which therefore win by order on a switch that is both. */\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-text-muted);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-surface);\n  }\n\n  /* The thumb takes text-subtle — the colour VCheckbox's disabled tick and VRadio's\n     disabled dot take — which is what keeps it visible against the grey track in both\n     themes. The greying of the row itself comes from `.v-choice`. */\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSwitch/VSwitch.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,41 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, mergeProps as a, openBlock as o, renderSlot as s, useModel as c, vModelCheckbox as l, withDirectives as u } from "vue";
+import { useRootAttrs as e } from "../../composables/useRootAttrs.js";
+import { useFieldIds as t } from "../../composables/useFieldIds.js";
+import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, vModelCheckbox as _, withDirectives as v } from "vue";
 //#region src/components/VSwitch/VSwitch.vue?vue&type=script&setup=true&lang.ts
-var d = ["data-label-position", "data-spread"], f = ["disabled"], p = {
+var y = [
+	"data-label-position",
+	"data-spread",
+	"data-readonly"
+], b = { class: "v-choice-row" }, x = [
+	"disabled",
+	"aria-invalid",
+	"aria-readonly",
+	"aria-describedby"
+], S = {
 	key: 0,
-	class: "v-switch-label"
-}, m = /*@__PURE__*/ r({
+	class: "v-switch-label v-choice-label"
+}, C = ["id"], w = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "VSwitch",
-	props: /*@__PURE__*/ i({
+	props: /*@__PURE__*/ s({
+		label: { default: void 0 },
+		hint: { default: void 0 },
 		labelPosition: { default: "end" },
 		spread: {
 			type: Boolean,
 			default: !1
 		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
 		}
 	}, {
 		modelValue: {
@@ -24,28 +45,48 @@ var d = ["data-label-position", "data-spread"], f = ["disabled"], p = {
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(r) {
-		let i = c(r, "modelValue");
-		return (c, m) => (o(), t("label", {
-			class: "v-switch",
-			"data-label-position": r.labelPosition,
-			"data-spread": r.spread || void 0
-		}, [
-			u(n("input", a({
-				"onUpdate:modelValue": m[0] ||= (e) => i.value = e,
+	setup(o, { expose: s }) {
+		let w = o, { attrs: T, rootClass: E, rootStyle: D, forwardedAttrs: O } = e(), { hintId: k, describedBy: A } = t(T, () => !!w.hint), j = g(o, "modelValue"), M = f(null);
+		function N(e) {
+			w.readonly && e.preventDefault();
+		}
+		return s({
+			focus: (e) => M.value?.focus(e),
+			el: M
+		}), (e, t) => (d(), r("span", {
+			class: l(["v-switch v-choice", h(E)]),
+			style: u(h(D)),
+			"data-label-position": o.labelPosition,
+			"data-spread": o.spread ? "" : void 0,
+			"data-readonly": o.readonly ? "" : void 0
+		}, [i("label", b, [
+			v(i("input", c({
+				ref_key: "inputEl",
+				ref: M,
+				"onUpdate:modelValue": t[0] ||= (e) => j.value = e,
 				type: "checkbox",
 				role: "switch",
-				class: "v-switch-input"
-			}, c.$attrs, { disabled: r.disabled }), null, 16, f), [[l, i.value]]),
-			m[1] ||= n("span", {
+				class: "v-switch-input v-hidden-input"
+			}, h(O), {
+				disabled: o.disabled,
+				"aria-invalid": o.invalid || void 0,
+				"aria-readonly": o.readonly || void 0,
+				"aria-describedby": h(A),
+				onClick: N
+			}), null, 16, x), [[_, j.value]]),
+			t[1] ||= i("span", {
 				class: "v-switch-track",
 				"aria-hidden": "true"
-			}, [n("span", { class: "v-switch-thumb" })], -1),
-			c.$slots.default ? (o(), t("span", p, [s(c.$slots, "default")])) : e("", !0)
-		], 8, d));
+			}, [i("span", { class: "v-switch-thumb" })], -1),
+			e.$slots.default || o.label ? (d(), r("span", S, [p(e.$slots, "default", {}, () => [a(m(o.label), 1)])])) : n("", !0)
+		]), o.hint ? (d(), r("span", {
+			key: 0,
+			id: h(k),
+			class: "v-switch-hint v-choice-hint"
+		}, m(o.hint), 9, C)) : n("", !0)], 14, y));
 	}
 });
 //#endregion
-export { m as default };
+export { w as default };
 
 //# sourceMappingURL=VSwitch.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A switch, for a setting that takes effect at once — where a checkbox states an\n * intention to be confirmed later.\n *\n * Underneath it is a native checkbox marked `role=\"switch\"`, so a screen reader\n * announces it as on or off rather than as ticked, and the keyboard and the form\n * behaviour come along for free. The track and the moving thumb are pure CSS,\n * following the input's checked state; the only JavaScript is the v-model.\n */\ninterface SwitchProps {\n  /** Which side of the switch the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available — the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<SwitchProps>(), {\n  labelPosition: 'end',\n  spread: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element\n// that actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n</script>\n\n<template>\n  <label class=\"v-switch\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      v-model=\"model\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"v-switch-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n    />\n    <span class=\"v-switch-track\" aria-hidden=\"true\">\n      <span class=\"v-switch-thumb\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-switch-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the track and the label. */\n  .v-switch[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-switch[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order and out of the form. */\n  .v-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    width: var(--switch-track-w);\n    height: var(--switch-track-h);\n    padding: var(--switch-pad);\n    flex: none;\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    width: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    height: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-surface);\n    border-radius: var(--vectis-radius-full);\n    box-shadow: var(--vectis-shadow-xs);\n    /* The thumb travels through `margin-inline-start` rather than a translation,\n       because a logical property follows the reading direction: in a right-to-left\n       page the thumb then moves leftwards on its own, where a translateX would have\n       to be mirrored by a second rule. */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  .v-switch:hover .v-switch-input:not(:disabled):not(:checked) + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 12%\n    );\n  }\n\n  .v-switch-input:focus-visible + .v-switch-track {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* A disabled switch greys out through the colour tokens, the same ones VCheckbox\n     and VRadio use, and never through opacity. The thumb takes text-subtle — the\n     colour their disabled tick and dot take — which is what keeps it visible against\n     the grey track in both themes. */\n  .v-switch:has(.v-switch-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAM,IAAQ,EAAoB,GAAA,YAAmB;yBASnD,EAaQ,SAAA;GAbD,OAAM;GAAY,uBAAqB,EAAA;GAAgB,eAAa,EAAA,UAAU,KAAA;;KACnF,EAOE,SAPF,EAOE;6CANc,QAAA;IACd,MAAK;IACL,MAAK;IACL,OAAM;MACEA,EAAAA,QAAM,EACb,UAAU,EAAA,SAAQ,CAAA,GAAA,MAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GALV,EAAA,KAAK,CAAA,CAAA;YAOhB,EAEO,QAAA;IAFD,OAAM;IAAiB,eAAY;OACvC,EAA+B,QAAA,EAAzB,OAAM,iBAAgB,CAAA,CAAA,GAAA,EAAA;GAElBC,EAAAA,OAAO,WAAA,EAAA,GAAnB,EAAkE,QAAlE,GAAkE,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"VSwitch.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A switch, for a setting that takes effect at once — where a checkbox states an\n * intention to be confirmed later.\n *\n * Underneath it is a native checkbox marked `role=\"switch\"`, so a screen reader\n * announces it as on or off rather than as ticked, and the keyboard and the form\n * behaviour come along for free. The track and the moving thumb are pure CSS,\n * following the input's checked state; the only JavaScript besides the v-model is the\n * refusal `readonly` asks for, which a checkbox has no native form of.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available — the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which rings the track and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the setting without allowing it to be changed. The switch can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  label: undefined,\n  hint: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The root element is a layout box, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element that\n// actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @core\n// The native `readonly` attribute does nothing on a checkbox. Cancelling the click is what\n// refuses the change: the browser puts `checked` back and fires no `change`, so the v-model\n// never hears of it. It covers the Space key, which a checkbox turns into a click, and a\n// click on the label, which is forwarded to the input.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real switch.\ndefineExpose({\n  /** Moves the focus to the real switch. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"checkbox\" role=\"switch\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-switch-track\" aria-hidden=\"true\">\n        <span class=\"v-switch-thumb\" />\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-switch-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-switch-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The track's own measurements, which nothing outside this sheet reads. The row they\n     sit in is `.v-choice`'s (styles/choice.css), and so is the focus ring. */\n  .v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: var(--vectis-control-size-switch-pad);\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    width: var(--switch-track-w);\n    height: var(--switch-track-h);\n    padding: var(--switch-pad);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    width: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    height: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-text-on-accent);\n    border-radius: var(--vectis-radius-pill);\n    box-shadow: var(--vectis-shadow-xs);\n    /* The thumb travels through `margin-inline-start` rather than a translation,\n       because a logical property follows the reading direction: in a right-to-left\n       page the thumb then moves leftwards on its own, where a translateX would have\n       to be mirrored by a second rule. */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  /* The 15 % mix VCheckbox and VRadio take on hover, on the track's own colour. */\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled, :checked)\n    + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The same pair of selectors as VCheckbox and VRadio, so a switch reports a rule the\n     browser checked and one only the consumer can. It is drawn as a RING rather than as\n     a border colour: the track has no border to tint, and a shadow changes no geometry,\n     where a border would eat into the padding the thumb travels in. The focus outline\n     sits further out, at its own offset, so the two never sit on the same pixels. */\n  .v-switch-input:user-invalid + .v-switch-track,\n  .v-switch-input[aria-invalid='true'] + .v-switch-track {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  /* Read-only trades the accent of an ON switch for the muted text colour, the way a\n     read-only checkbox does, and the thumb takes the surface colour that contrasts with it\n     in both themes. `:where()` keeps both rules at the weight of the disabled ones below,\n     which therefore win by order on a switch that is both. */\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-text-muted);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-surface);\n  }\n\n  /* The thumb takes text-subtle — the colour VCheckbox's disabled tick and VRadio's\n     disabled dot take — which is what keeps it visible against the grey track in both\n     themes. The greying of the row itself comes from `.v-choice`. */\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,IAAM,IAAQ,GAeR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,mBAAgB,EAAY,SAAa,CAAC,CAAC,EAAM,IAAI,GAG/D,IAAQ,EAAoB,GAAA,YAAmB,GAO/C,IAAU,EAA6B,IAAI;EAOjD,SAAS,EAAmB,GAAmB;GAC7C,AAAI,EAAM,YAAU,EAAM,eAAe;EAC3C;SAIA,EAAa;GAEX,QAAQ,MAA2B,EAAQ,OAAO,MAAM,CAAO;GAE/D,IAAI;EACN,CAAC,mBAIC,EA8BO,QAAA;GA7BL,OAAK,EAAA,CAAC,qBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,eAAa,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAEhC,EAoBQ,SApBR,GAoBQ;KAnBN,EAYE,SAZF,EAYE;aAXI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,MAAK;IACL,OAAM;MACE,EAAA,CAAA,GAAc;IACrB,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;IACzB,iBAAe,EAAA,YAAY,KAAA;IAC3B,oBAAkB,EAAA,CAAA;IAClB,SAAO;0BATC,EAAA,KAAK,CAAA,CAAA;YAWhB,EAEO,QAAA;IAFD,OAAM;IAAiB,eAAY;OACvC,EAA+B,QAAA,EAAzB,OAAM,iBAAgB,CAAA,CAAA,GAAA,EAAA;GAElBA,EAAAA,OAAO,WAAW,EAAA,SAAA,EAAA,GAA9B,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAGN,EAAA,QAAA,EAAA,GAAZ,EAAoF,QAAA;;GAAjE,IAAI,EAAA,CAAA;GAAQ,OAAM;OAAiC,EAAA,IAAI,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VTabs/VTab.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-tab[data-size]{white-space:nowrap;flex:none;position:relative}.v-tab[data-size][data-icon-only]{min-inline-size:var(--control-height);padding-inline:0}.v-tab[data-size]:focus-visible{outline-offset:calc(var(--vectis-focus-ring-offset) * -1)}.v-tab-label{text-overflow:ellipsis;overflow:hidden}.v-tabs[data-grow] .v-tab[data-size]{flex:1 1 0;min-inline-size:0}.v-tabs[data-variant=inset] .v-tab[data-size]{border-radius:calc(var(--vectis-radius-surface) - var(--vectis-space-1))}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]{border-radius:0}.v-tabs[data-variant=outlined] .v-tab[data-size]:first-of-type{border-start-start-radius:var(--vectis-radius-interactive)}.v-tabs[data-variant=outlined][data-orientation=horizontal] .v-tab[data-size]:last-of-type{border-start-end-radius:var(--vectis-radius-interactive)}.v-tabs[data-variant=outlined][data-orientation=vertical] .v-tab[data-size]:last-of-type{border-end-start-radius:var(--vectis-radius-interactive)}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]:after{content:"";block-size:var(--vectis-control-size-tab-indicator);opacity:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default);background:currentColor;position:absolute;inset-block-end:0;inset-inline:0}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=vertical] .v-tab[data-size]:after{block-size:auto;inline-size:var(--vectis-control-size-tab-indicator);inset-block:0;inset-inline:0 auto}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size][aria-selected=true]:after{opacity:1}@media (prefers-reduced-motion:reduce){.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]:after{transition:none}}}
+@layer vectis.components{.v-tab[data-size]{white-space:nowrap;flex:none;position:relative}.v-tab[data-size]:focus-visible{outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-tab-label{text-overflow:ellipsis;overflow:hidden}.v-tabs[data-grow] .v-tab[data-size]{flex:1 1 0;min-inline-size:0}.v-tabs[data-variant=inset] .v-tab[data-size]{border-radius:calc(var(--vectis-radius-surface) - var(--vectis-space-1))}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]{border-radius:0}.v-tabs[data-variant=outlined] .v-tab[data-size]:first-of-type{border-start-start-radius:calc(var(--vectis-radius-surface) - 1px)}.v-tabs[data-variant=outlined][data-orientation=horizontal] .v-tab[data-size]:last-of-type{border-start-end-radius:calc(var(--vectis-radius-surface) - 1px)}.v-tabs[data-variant=outlined][data-orientation=vertical] .v-tab[data-size]:last-of-type{border-end-start-radius:calc(var(--vectis-radius-surface) - 1px)}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]:after{content:"";block-size:var(--vectis-control-size-tab-indicator);opacity:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default);background:currentColor;position:absolute;inset-block-end:0;inset-inline:0}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=vertical] .v-tab[data-size]:after{block-size:auto;inline-size:var(--vectis-control-size-tab-indicator);inset-block:0;inset-inline:0 auto}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size][aria-selected=true]:after{opacity:1}@media (prefers-reduced-motion:reduce){.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]:after{transition:none}}}

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

@@ -1,25 +1,23 @@
 import { IconSource } from '../VIcon/types.js';
-/**
- * One tab. It IS a VButton — the colour, the size, the focus ring and the disabled
- * state all come from there — and what this component adds is the handful of
- * attributes that make a button part of a tab row for assistive technology.
- *
- * Used outside a VTabs it still renders perfectly well, simply never selected, the
- * same way an accordion item does outside its accordion.
- */
+import { ItemValue } from '../../types.js';
 interface TabProps {
     /**
      * What this tab is called in code. The panel carrying the same value is the one it
      * shows, and it is also what the v-model holds when this tab is selected.
      */
-    value: string | number;
+    value: ItemValue;
     /** The visible label. The default slot replaces it. */
     label?: string;
     /** An icon before the label: an icon name, or an explicit render. */
-    icon?: IconSource;
+    iconStart?: IconSource;
+    /** An icon after the label, for a count or a state the tab carries. */
+    iconEnd?: IconSource;
+    /** Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). */
+    iconFilled?: boolean;
     /**
      * Makes the tab unusable: it no longer responds, the arrow keys skip over it, and it
-     * greys out through the colour tokens.
+     * greys out through the colour tokens. A VTabs set `disabled` disables every tab, this
+     * one included, whatever this says.
      */
     disabled?: boolean;
 }
@@ -30,7 +28,9 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<TabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabProps> & Readonly<{}>, {
     label: string;
     disabled: boolean;
-    icon: IconSource;
+    iconStart: IconSource;
+    iconEnd: IconSource;
+    iconFilled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1 +1 @@
-{"version":3,"file":"VTab.js","names":[],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\n\n/**\n * One tab. It IS a VButton — the colour, the size, the focus ring and the disabled\n * state all come from there — and what this component adds is the handful of\n * attributes that make a button part of a tab row for assistive technology.\n *\n * Used outside a VTabs it still renders perfectly well, simply never selected, the\n * same way an accordion item does outside its accordion.\n */\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: string | number\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /**\n   * Makes the tab unusable: it no longer responds, the arrow keys skip over it, and it\n   * greys out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  icon: undefined,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst slots = useSlots()\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\n\n/** An icon and no label at all: the tab becomes a square, like a VIconButton. */\nconst iconOnly = computed(() => Boolean(props.icon) && !props.label && !slots.default)\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which is what `automatic` activation\n * means. It lives here rather than in the row's keyboard handler, because this\n * component knows its own value: the handler would have to read it back from a DOM\n * attribute, and would lose the distinction between the number 1 and the string \"1\"\n * doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !props.disabled) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    role=\"tab\"\n    :aria-selected=\"selected ? 'true' : 'false'\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"selected ? 0 : -1\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected ? (tabs?.tone ?? 'accent') : 'neutral'\"\n    :size=\"tabs?.size ?? 'md'\"\n    :compact=\"tabs?.compact ?? false\"\n    :disabled=\"disabled\"\n    :data-icon-only=\"iconOnly ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"icon\" #start>\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </template>\n    <!-- The label is wrapped in an element of its own so that it can be truncated:\n         an ellipsis cannot be applied to the bare text of a flex container, and tabs\n         sharing the bar equally have to be able to cut their labels short -->\n    <span v-if=\"!iconOnly\" class=\"v-tab-label\"\n      ><slot>{{ label }}</slot></span\n    >\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * These rules override a VButton, so they are qualified by an attribute that button\n   * always renders. That is what makes them win whatever order the two sheets end up\n   * in — the same device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    /* The indicator below is positioned against this box, and a button declares no\n       position of its own. */\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely WHAT makes the row\n     * overflow. Allowed to shrink, they would squeeze down to their smallest possible\n     * width and scrolling would never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  .v-tab[data-size][data-icon-only] {\n    padding-inline: 0;\n    min-inline-size: var(--control-height);\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-grow] .v-tab[data-size] {\n    flex: 1 1 0;\n    min-inline-size: 0;\n  }\n\n  /* A box nested inside a rounded one needs a smaller radius to look concentric: the\n     track's own, less the padding between them. */\n  .v-tabs[data-variant='inset'] .v-tab[data-size] {\n    border-radius: calc(var(--vectis-radius-surface) - var(--vectis-space-1));\n  }\n\n  /*\n   * On a track the tabs are contiguous SEGMENTS with square corners: what carves the\n   * bar up is the rule and the indicator, not the silhouette of each button. Rounded\n   * corners would leave pale notches above the rule, and a gap would break the row of\n   * hover highlights into islands.\n   *\n   * The gap is removed on the row rather than here, the row being what declares it;\n   * the bar's own gap stays, since that one separates the scroll buttons and not the\n   * tabs.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size] {\n    border-radius: 0;\n  }\n\n  /*\n   * Inside a card the row takes its rounded corners back at the ENDS only, the seams\n   * between tabs staying square — the VButtonGroup idiom, applied to the one edge the\n   * track does not occupy.\n   *\n   * The radius used is the button's own and not the card's: the row is set back from\n   * the frame by the gutter, so it follows no clip and has no reason to match it.\n   *\n   * TRAP — the selectors ask for the first and last of their TYPE rather than the\n   * first and last child, because the scroll markers are the row's real first and last\n   * children. They are spans, the tabs being the only buttons, which is what makes the\n   * distinction work.\n   */\n  .v-tabs[data-variant='outlined'] .v-tab[data-size]:first-of-type {\n    border-start-start-radius: var(--vectis-radius-interactive);\n  }\n\n  .v-tabs[data-variant='outlined'][data-orientation='horizontal'] .v-tab[data-size]:last-of-type {\n    border-start-end-radius: var(--vectis-radius-interactive);\n  }\n\n  /* Turned vertical, the track has migrated to the end edge, so the free edge is the\n     start one: that is where the ends of the column round their corners. */\n  .v-tabs[data-variant='outlined'][data-orientation='vertical'] .v-tab[data-size]:last-of-type {\n    border-end-start-radius: var(--vectis-radius-interactive);\n  }\n\n  /*\n   * The bar marking the selected tab, in the two framed variants. It is painted in the\n   * tab's own text colour rather than by reading one of VButton's private variables:\n   * that way it follows the selected tone AND the grey of a disabled tab on its own,\n   * without this file having to know anything about either.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    inset-block-end: 0;\n    block-size: var(--vectis-control-size-tab-indicator);\n    background: currentColor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])[data-orientation='vertical']\n    .v-tab[data-size]::after {\n    inset-block: 0;\n    inset-inline: auto;\n    inset-inline-start: 0;\n    block-size: auto;\n    inline-size: var(--vectis-control-size-tab-indicator);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTab.js","names":[],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One tab. It IS a VButton — the colour, the size, the focus ring and the disabled\n * state all come from there — and what this component adds is the handful of\n * attributes that make a button part of a tab row for assistive technology.\n *\n * Used outside a VTabs it still renders, simply never selected, as a quiet neutral button\n * at VButton's own size: the row's decisions all come from the context, and a tab with no\n * row takes VButton's defaults rather than a copy of the row's.\n */\n\nimport { computed, inject } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: ItemValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  iconStart?: IconSource\n  /** An icon after the label, for a count or a state the tab carries. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n  /**\n   * Makes the tab unusable: it no longer responds, the arrow keys skip over it, and it\n   * greys out through the colour tokens. A VTabs set `disabled` disables every tab, this\n   * one included, whatever this says.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\n// Cumulative, the VButtonGroup rule: a row switched off has no tab that can opt back in.\nconst resolvedDisabled = computed(() => props.disabled || Boolean(tabs?.disabled))\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the tab becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return !props.label && !slots.default && Boolean(props.iconStart || props.iconEnd)\n}\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which is what `automatic` activation\n * means. It lives here rather than in the row's keyboard handler, because this\n * component knows its own value: the handler would have to read it back from a DOM\n * attribute, and would lose the distinction between the number 1 and the string \"1\"\n * doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !resolvedDisabled.value) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    role=\"tab\"\n    :aria-selected=\"selected ? 'true' : 'false'\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"selected ? 0 : -1\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected && tabs ? tabs.tone : 'neutral'\"\n    :size=\"tabs?.size\"\n    :compact=\"tabs?.compact\"\n    :disabled=\"resolvedDisabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"iconStart\" #start>\n      <VIcon v-bind=\"iconProps(iconStart)\" :filled=\"iconFilled\" />\n    </template>\n    <template v-if=\"iconEnd\" #end>\n      <VIcon v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </template>\n    <!-- The label is wrapped in an element of its own so that it can be truncated:\n         an ellipsis cannot be applied to the bare text of a flex container, and tabs\n         sharing the bar equally have to be able to cut their labels short -->\n    <span v-if=\"!iconOnly()\" class=\"v-tab-label\"\n      ><slot>{{ label }}</slot></span\n    >\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * These rules override a VButton, so they are qualified by an attribute that button\n   * always renders. That is what makes them win whatever order the two sheets end up\n   * in — the same device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    /* The indicator below is positioned against this box, and a button declares no\n       position of its own. */\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely WHAT makes the row\n     * overflow. Allowed to shrink, they would squeeze down to their smallest possible\n     * width and scrolling would never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-grow] .v-tab[data-size] {\n    flex: 1 1 0;\n    min-inline-size: 0;\n  }\n\n  /* A box nested inside a rounded one needs a smaller radius to look concentric: the\n     track's own, less the padding between them. */\n  .v-tabs[data-variant='inset'] .v-tab[data-size] {\n    border-radius: calc(var(--vectis-radius-surface) - var(--vectis-space-1));\n  }\n\n  /*\n   * On a track the tabs are contiguous SEGMENTS with square corners: what carves the\n   * bar up is the rule and the indicator, not the silhouette of each button. Rounded\n   * corners would leave pale notches above the rule, and a gap would break the row of\n   * hover highlights into islands.\n   *\n   * The gap is removed on the row rather than here, the row being what declares it;\n   * the bar's own gap stays, since that one separates the scroll buttons and not the\n   * tabs.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size] {\n    border-radius: 0;\n  }\n\n  /*\n   * Inside a card the row takes its rounded corners back at the ENDS only, the seams\n   * between tabs staying square — the VButtonGroup idiom, applied to the one edge the\n   * track does not occupy.\n   *\n   * The radius is the CARD's inner one — its own, less the border it sits behind — and\n   * not the button's. The bar spends no gutter, so an end tab lands exactly on a corner\n   * of the frame and has to follow that curve: a button radius, smaller, would leave a\n   * sliver of card showing outside the tab as soon as it painted a background.\n   *\n   * TRAP — the selectors ask for the first and last of their TYPE rather than the\n   * first and last child, because the scroll markers are the row's real first and last\n   * children. They are spans, the tabs being the only buttons, which is what makes the\n   * distinction work.\n   */\n  .v-tabs[data-variant='outlined'] .v-tab[data-size]:first-of-type {\n    border-start-start-radius: calc(var(--vectis-radius-surface) - 1px);\n  }\n\n  .v-tabs[data-variant='outlined'][data-orientation='horizontal'] .v-tab[data-size]:last-of-type {\n    border-start-end-radius: calc(var(--vectis-radius-surface) - 1px);\n  }\n\n  /* Turned vertical, the track has migrated to the end edge, so the free edge is the\n     start one: that is where the ends of the column round their corners. */\n  .v-tabs[data-variant='outlined'][data-orientation='vertical'] .v-tab[data-size]:last-of-type {\n    border-end-start-radius: calc(var(--vectis-radius-surface) - 1px);\n  }\n\n  /*\n   * The bar marking the selected tab, in the two framed variants. It is painted in the\n   * tab's own text colour rather than by reading one of VButton's private variables:\n   * that way it follows the selected tone AND the grey of a disabled tab on its own,\n   * without this file having to know anything about either.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    inset-block-end: 0;\n    block-size: var(--vectis-control-size-tab-indicator);\n    background: currentColor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])[data-orientation='vertical']\n    .v-tab[data-size]::after {\n    inset-block: 0;\n    inset-inline: auto;\n    inset-inline-start: 0;\n    block-size: auto;\n    inline-size: var(--vectis-control-size-tab-indicator);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,51 +1,63 @@
-import e from "../VIcon/VIcon.js";
-import { iconProps as t } from "../VIcon/iconProps.js";
+import { iconProps as e } from "../VIcon/iconProps.js";
+import t from "../VIcon/VIcon.js";
 import n from "../VButton/VButton.js";
 import { tabsKey as r } from "./context.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createSlots as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, inject as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, useSlots as y, withCtx as b } from "vue";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createSlots as c, createTextVNode as l, createVNode as u, defineComponent as d, inject as f, mergeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useSlots as v, withCtx as y } from "vue";
 //#region src/components/VTabs/VTab.vue?vue&type=script&setup=true&lang.ts
-var x = {
+var b = {
 	key: 0,
 	class: "v-tab-label"
-}, S = /*@__PURE__*/ d({
+}, x = /*@__PURE__*/ d({
 	__name: "VTab",
 	props: {
 		value: {},
 		label: { default: void 0 },
-		icon: { default: void 0 },
+		iconStart: { default: void 0 },
+		iconEnd: { default: void 0 },
+		iconFilled: {
+			type: Boolean,
+			default: !1
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
 		}
 	},
 	setup(d) {
-		let S = d, C = y(), w = p(r, null), T = i(() => w != null && w.value === S.value), E = i(() => w?.tabId(S.value)), D = i(() => w?.hasPanels ? w.panelId(S.value) : void 0), O = i(() => !!S.icon && !S.label && !C.default);
+		let x = d, S = v(), C = f(r, null), w = i(() => C != null && C.value === x.value), T = i(() => C?.tabId(x.value)), E = i(() => C?.hasPanels ? C.panelId(x.value) : void 0), D = i(() => x.disabled || !!C?.disabled);
+		function O() {
+			return !x.label && !S.default && !!(x.iconStart || x.iconEnd);
+		}
 		function k() {
-			w?.activation === "automatic" && !S.disabled && w.select(S.value);
+			C?.activation === "automatic" && !D.value && C.select(x.value);
 		}
-		return (r, i) => (h(), a(n, {
-			id: E.value,
+		return (r, i) => (m(), a(n, {
+			id: T.value,
 			class: "v-tab",
 			role: "tab",
-			"aria-selected": T.value ? "true" : "false",
-			"aria-controls": D.value,
-			tabindex: T.value ? 0 : -1,
+			"aria-selected": w.value ? "true" : "false",
+			"aria-controls": E.value,
+			tabindex: w.value ? 0 : -1,
 			variant: "ghost",
-			elevated: T.value && v(w)?.variant === "inset",
-			tone: T.value ? v(w)?.tone ?? "accent" : "neutral",
-			size: v(w)?.size ?? "md",
-			compact: v(w)?.compact ?? !1,
-			disabled: d.disabled,
-			"data-icon-only": O.value ? "" : void 0,
-			onClick: i[0] ||= (e) => v(w)?.select(d.value),
+			elevated: w.value && _(C)?.variant === "inset",
+			tone: w.value && _(C) ? _(C).tone : "neutral",
+			size: _(C)?.size,
+			compact: _(C)?.compact,
+			disabled: D.value,
+			"data-icon-only": O() ? "" : void 0,
+			onClick: i[0] ||= (e) => _(C)?.select(d.value),
 			onFocus: k
 		}, c({
-			default: b(() => [O.value ? o("", !0) : (h(), s("span", x, [g(r.$slots, "default", {}, () => [l(_(d.label), 1)])]))]),
+			default: y(() => [O() ? o("", !0) : (m(), s("span", b, [h(r.$slots, "default", {}, () => [l(g(d.label), 1)])]))]),
 			_: 2
-		}, [d.icon ? {
+		}, [d.iconStart ? {
 			name: "start",
-			fn: b(() => [u(e, m(f(v(t)(d.icon))), null, 16)]),
+			fn: y(() => [u(t, p(_(e)(d.iconStart), { filled: d.iconFilled }), null, 16, ["filled"])]),
 			key: "0"
+		} : void 0, d.iconEnd ? {
+			name: "end",
+			fn: y(() => [u(t, p(_(e)(d.iconEnd), { filled: d.iconFilled }), null, 16, ["filled"])]),
+			key: "1"
 		} : void 0]), 1032, [
 			"id",
 			"aria-selected",
@@ -61,6 +73,6 @@ var x = {
 	}
 });
 //#endregion
-export { S as default };
+export { x as default };
 
 //# sourceMappingURL=VTab.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VTab.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\n\n/**\n * One tab. It IS a VButton — the colour, the size, the focus ring and the disabled\n * state all come from there — and what this component adds is the handful of\n * attributes that make a button part of a tab row for assistive technology.\n *\n * Used outside a VTabs it still renders perfectly well, simply never selected, the\n * same way an accordion item does outside its accordion.\n */\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: string | number\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /**\n   * Makes the tab unusable: it no longer responds, the arrow keys skip over it, and it\n   * greys out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  icon: undefined,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst slots = useSlots()\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\n\n/** An icon and no label at all: the tab becomes a square, like a VIconButton. */\nconst iconOnly = computed(() => Boolean(props.icon) && !props.label && !slots.default)\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which is what `automatic` activation\n * means. It lives here rather than in the row's keyboard handler, because this\n * component knows its own value: the handler would have to read it back from a DOM\n * attribute, and would lose the distinction between the number 1 and the string \"1\"\n * doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !props.disabled) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    role=\"tab\"\n    :aria-selected=\"selected ? 'true' : 'false'\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"selected ? 0 : -1\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected ? (tabs?.tone ?? 'accent') : 'neutral'\"\n    :size=\"tabs?.size ?? 'md'\"\n    :compact=\"tabs?.compact ?? false\"\n    :disabled=\"disabled\"\n    :data-icon-only=\"iconOnly ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"icon\" #start>\n      <VIcon v-bind=\"iconProps(icon)\" />\n    </template>\n    <!-- The label is wrapped in an element of its own so that it can be truncated:\n         an ellipsis cannot be applied to the bare text of a flex container, and tabs\n         sharing the bar equally have to be able to cut their labels short -->\n    <span v-if=\"!iconOnly\" class=\"v-tab-label\"\n      ><slot>{{ label }}</slot></span\n    >\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * These rules override a VButton, so they are qualified by an attribute that button\n   * always renders. That is what makes them win whatever order the two sheets end up\n   * in — the same device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    /* The indicator below is positioned against this box, and a button declares no\n       position of its own. */\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely WHAT makes the row\n     * overflow. Allowed to shrink, they would squeeze down to their smallest possible\n     * width and scrolling would never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  .v-tab[data-size][data-icon-only] {\n    padding-inline: 0;\n    min-inline-size: var(--control-height);\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-grow] .v-tab[data-size] {\n    flex: 1 1 0;\n    min-inline-size: 0;\n  }\n\n  /* A box nested inside a rounded one needs a smaller radius to look concentric: the\n     track's own, less the padding between them. */\n  .v-tabs[data-variant='inset'] .v-tab[data-size] {\n    border-radius: calc(var(--vectis-radius-surface) - var(--vectis-space-1));\n  }\n\n  /*\n   * On a track the tabs are contiguous SEGMENTS with square corners: what carves the\n   * bar up is the rule and the indicator, not the silhouette of each button. Rounded\n   * corners would leave pale notches above the rule, and a gap would break the row of\n   * hover highlights into islands.\n   *\n   * The gap is removed on the row rather than here, the row being what declares it;\n   * the bar's own gap stays, since that one separates the scroll buttons and not the\n   * tabs.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size] {\n    border-radius: 0;\n  }\n\n  /*\n   * Inside a card the row takes its rounded corners back at the ENDS only, the seams\n   * between tabs staying square — the VButtonGroup idiom, applied to the one edge the\n   * track does not occupy.\n   *\n   * The radius used is the button's own and not the card's: the row is set back from\n   * the frame by the gutter, so it follows no clip and has no reason to match it.\n   *\n   * TRAP — the selectors ask for the first and last of their TYPE rather than the\n   * first and last child, because the scroll markers are the row's real first and last\n   * children. They are spans, the tabs being the only buttons, which is what makes the\n   * distinction work.\n   */\n  .v-tabs[data-variant='outlined'] .v-tab[data-size]:first-of-type {\n    border-start-start-radius: var(--vectis-radius-interactive);\n  }\n\n  .v-tabs[data-variant='outlined'][data-orientation='horizontal'] .v-tab[data-size]:last-of-type {\n    border-start-end-radius: var(--vectis-radius-interactive);\n  }\n\n  /* Turned vertical, the track has migrated to the end edge, so the free edge is the\n     start one: that is where the ends of the column round their corners. */\n  .v-tabs[data-variant='outlined'][data-orientation='vertical'] .v-tab[data-size]:last-of-type {\n    border-end-start-radius: var(--vectis-radius-interactive);\n  }\n\n  /*\n   * The bar marking the selected tab, in the two framed variants. It is painted in the\n   * tab's own text colour rather than by reading one of VButton's private variables:\n   * that way it follows the selected tone AND the grey of a disabled tab on its own,\n   * without this file having to know anything about either.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    inset-block-end: 0;\n    block-size: var(--vectis-control-size-tab-indicator);\n    background: currentColor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])[data-orientation='vertical']\n    .v-tab[data-size]::after {\n    inset-block: 0;\n    inset-inline: auto;\n    inset-inline-start: 0;\n    block-size: auto;\n    inline-size: var(--vectis-control-size-tab-indicator);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAkCA,IAAM,IAAQ,GAWR,IAAQ,EAAS,GACjB,IAAO,EAAO,GAAS,IAAI,GAE3B,IAAW,QAAe,KAAQ,QAAQ,EAAK,UAAU,EAAM,KAAK,GACpE,IAAQ,QAAe,GAAM,MAAM,EAAM,KAAK,CAAC,GAC/C,IAAU,QAAgB,GAAM,YAAY,EAAK,QAAQ,EAAM,KAAK,IAAI,KAAA,CAAU,GAGlF,IAAW,QAAe,EAAQ,EAAM,QAAS,CAAC,EAAM,SAAS,CAAC,EAAM,OAAO;EAUrF,SAAS,IAAU;GACjB,AAAI,GAAM,eAAe,eAAe,CAAC,EAAM,YAAU,EAAK,OAAO,EAAM,KAAK;EAClF;yBAIE,EA0BU,GAAA;GAzBP,IAAI,EAAA;GACL,OAAM;GACN,MAAK;GACJ,iBAAe,EAAA,QAAQ,SAAA;GACvB,iBAAe,EAAA;GACf,UAAU,EAAA,QAAQ,IAAA;GACnB,SAAQ;GACP,UAAU,EAAA,SAAY,EAAA,CAAA,CAAI,EAAE,YAAO;GACnC,MAAM,EAAA,QAAY,EAAA,CAAA,CAAI,EAAE,QAAI,WAAA;GAC5B,MAAM,EAAA,CAAA,CAAI,EAAE,QAAI;GAChB,SAAS,EAAA,CAAA,CAAI,EAAE,WAAO;GACtB,UAAU,EAAA;GACV,kBAAgB,EAAA,QAAQ,KAAQ,KAAA;GAChC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAI,EAAE,OAAO,EAAA,KAAK;GAClB;;oBAUP,CAFY,EAAA,QACI,EAAA,IAAA,EAAA,KADJ,EAAA,GAAb,EAEC,QAFD,GAEC,CADE,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA;;MAPD,EAAA,OAAA;SAAO;eACa,CAAlC,EAAkC,GAAA,EAAA,EAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"VTab.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One tab. It IS a VButton — the colour, the size, the focus ring and the disabled\n * state all come from there — and what this component adds is the handful of\n * attributes that make a button part of a tab row for assistive technology.\n *\n * Used outside a VTabs it still renders, simply never selected, as a quiet neutral button\n * at VButton's own size: the row's decisions all come from the context, and a tab with no\n * row takes VButton's defaults rather than a copy of the row's.\n */\n\nimport { computed, inject } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: ItemValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  iconStart?: IconSource\n  /** An icon after the label, for a count or a state the tab carries. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n  /**\n   * Makes the tab unusable: it no longer responds, the arrow keys skip over it, and it\n   * greys out through the colour tokens. A VTabs set `disabled` disables every tab, this\n   * one included, whatever this says.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\n// Cumulative, the VButtonGroup rule: a row switched off has no tab that can opt back in.\nconst resolvedDisabled = computed(() => props.disabled || Boolean(tabs?.disabled))\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the tab becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return !props.label && !slots.default && Boolean(props.iconStart || props.iconEnd)\n}\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which is what `automatic` activation\n * means. It lives here rather than in the row's keyboard handler, because this\n * component knows its own value: the handler would have to read it back from a DOM\n * attribute, and would lose the distinction between the number 1 and the string \"1\"\n * doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !resolvedDisabled.value) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    role=\"tab\"\n    :aria-selected=\"selected ? 'true' : 'false'\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"selected ? 0 : -1\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected && tabs ? tabs.tone : 'neutral'\"\n    :size=\"tabs?.size\"\n    :compact=\"tabs?.compact\"\n    :disabled=\"resolvedDisabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"iconStart\" #start>\n      <VIcon v-bind=\"iconProps(iconStart)\" :filled=\"iconFilled\" />\n    </template>\n    <template v-if=\"iconEnd\" #end>\n      <VIcon v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </template>\n    <!-- The label is wrapped in an element of its own so that it can be truncated:\n         an ellipsis cannot be applied to the bare text of a flex container, and tabs\n         sharing the bar equally have to be able to cut their labels short -->\n    <span v-if=\"!iconOnly()\" class=\"v-tab-label\"\n      ><slot>{{ label }}</slot></span\n    >\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * These rules override a VButton, so they are qualified by an attribute that button\n   * always renders. That is what makes them win whatever order the two sheets end up\n   * in — the same device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    /* The indicator below is positioned against this box, and a button declares no\n       position of its own. */\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely WHAT makes the row\n     * overflow. Allowed to shrink, they would squeeze down to their smallest possible\n     * width and scrolling would never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-grow] .v-tab[data-size] {\n    flex: 1 1 0;\n    min-inline-size: 0;\n  }\n\n  /* A box nested inside a rounded one needs a smaller radius to look concentric: the\n     track's own, less the padding between them. */\n  .v-tabs[data-variant='inset'] .v-tab[data-size] {\n    border-radius: calc(var(--vectis-radius-surface) - var(--vectis-space-1));\n  }\n\n  /*\n   * On a track the tabs are contiguous SEGMENTS with square corners: what carves the\n   * bar up is the rule and the indicator, not the silhouette of each button. Rounded\n   * corners would leave pale notches above the rule, and a gap would break the row of\n   * hover highlights into islands.\n   *\n   * The gap is removed on the row rather than here, the row being what declares it;\n   * the bar's own gap stays, since that one separates the scroll buttons and not the\n   * tabs.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size] {\n    border-radius: 0;\n  }\n\n  /*\n   * Inside a card the row takes its rounded corners back at the ENDS only, the seams\n   * between tabs staying square — the VButtonGroup idiom, applied to the one edge the\n   * track does not occupy.\n   *\n   * The radius is the CARD's inner one — its own, less the border it sits behind — and\n   * not the button's. The bar spends no gutter, so an end tab lands exactly on a corner\n   * of the frame and has to follow that curve: a button radius, smaller, would leave a\n   * sliver of card showing outside the tab as soon as it painted a background.\n   *\n   * TRAP — the selectors ask for the first and last of their TYPE rather than the\n   * first and last child, because the scroll markers are the row's real first and last\n   * children. They are spans, the tabs being the only buttons, which is what makes the\n   * distinction work.\n   */\n  .v-tabs[data-variant='outlined'] .v-tab[data-size]:first-of-type {\n    border-start-start-radius: calc(var(--vectis-radius-surface) - 1px);\n  }\n\n  .v-tabs[data-variant='outlined'][data-orientation='horizontal'] .v-tab[data-size]:last-of-type {\n    border-start-end-radius: calc(var(--vectis-radius-surface) - 1px);\n  }\n\n  /* Turned vertical, the track has migrated to the end edge, so the free edge is the\n     start one: that is where the ends of the column round their corners. */\n  .v-tabs[data-variant='outlined'][data-orientation='vertical'] .v-tab[data-size]:last-of-type {\n    border-end-start-radius: calc(var(--vectis-radius-surface) - 1px);\n  }\n\n  /*\n   * The bar marking the selected tab, in the two framed variants. It is painted in the\n   * tab's own text colour rather than by reading one of VButton's private variables:\n   * that way it follows the selected tone AND the grey of a disabled tab on its own,\n   * without this file having to know anything about either.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n    content: '';\n    position: absolute;\n    inset-inline: 0;\n    inset-block-end: 0;\n    block-size: var(--vectis-control-size-tab-indicator);\n    background: currentColor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])[data-orientation='vertical']\n    .v-tab[data-size]::after {\n    inset-block: 0;\n    inset-inline: auto;\n    inset-inline-start: 0;\n    block-size: auto;\n    inline-size: var(--vectis-control-size-tab-indicator);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='outlined'])\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is([data-variant='flat'], [data-variant='outlined']) .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAQR,IAAQ,EAAA,GAKR,IAAO,EAAO,GAAS,IAAI,GAE3B,IAAW,QAAe,KAAQ,QAAQ,EAAK,UAAU,EAAM,KAAK,GACpE,IAAQ,QAAe,GAAM,MAAM,EAAM,KAAK,CAAC,GAC/C,IAAU,QAAgB,GAAM,YAAY,EAAK,QAAQ,EAAM,KAAK,IAAI,KAAA,CAAU,GAElF,IAAmB,QAAe,EAAM,YAAY,EAAQ,GAAM,QAAS;EAQjF,SAAS,IAAW;GAClB,OAAO,CAAC,EAAM,SAAS,CAAC,EAAM,WAAW,GAAQ,EAAM,aAAa,EAAM;EAC5E;EAUA,SAAS,IAAU;GACjB,AAAI,GAAM,eAAe,eAAe,CAAC,EAAiB,SAAO,EAAK,OAAO,EAAM,KAAK;EAC1F;yBAIE,EA6BU,GAAA;GA5BP,IAAI,EAAA;GACL,OAAM;GACN,MAAK;GACJ,iBAAe,EAAA,QAAQ,SAAA;GACvB,iBAAe,EAAA;GACf,UAAU,EAAA,QAAQ,IAAA;GACnB,SAAQ;GACP,UAAU,EAAA,SAAY,EAAA,CAAA,CAAI,EAAE,YAAO;GACnC,MAAM,EAAA,SAAY,EAAA,CAAA,IAAO,EAAA,CAAA,CAAI,CAAC,OAAI;GAClC,MAAM,EAAA,CAAA,CAAI,EAAE;GACZ,SAAS,EAAA,CAAA,CAAI,EAAE;GACf,UAAU,EAAA;GACV,kBAAgB,EAAQ,IAAA,KAAU,KAAA;GAClC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAI,EAAE,OAAO,EAAA,KAAK;GAClB;;oBAaP,CAFY,EAAQ,IACJ,EAAA,IAAA,EAAA,KADI,EAAA,GAArB,EAEC,QAFD,GAEC,CADE,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA;;MAVD,EAAA,YAAA;SAAY;eACkC,CAA5D,EAA4D,GAA5D,EAAe,EAA6C,CAAA,CAApC,CAAC,EAAA,SAAS,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;cAE1C,EAAA,UAAA;SAAU;eACkC,CAA1D,EAA0D,GAA1D,EAAe,EAA2C,CAAA,CAAlC,CAAC,EAAA,OAAO,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}

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

@@ -1,15 +1,7 @@
-/**
- * The panel a tab shows, matched to it by the same `value`.
- *
- * Every panel is rendered at all times, and the inactive ones are hidden with the
- * native `hidden` attribute rather than removed. That costs no JavaScript, and it
- * means the state of what they contain survives a change of tab: a half-typed field
- * keeps its text, a scrolled list its position, and a form's fields are still
- * submitted.
- */
+import { ItemValue } from '../../types.js';
 interface TabPanelProps {
     /** Which tab shows this panel: it must be the `value` of one of them. */
-    value: string | number;
+    value: ItemValue;
     /**
      * Holds the content back until the panel is first shown, and keeps it from then on.
      * It is for a panel expensive to build; the state it holds is still preserved

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

@@ -1 +1 @@
-{"version":3,"file":"VTabPanel.js","names":[],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, ref, watchEffect } from 'vue'\n\nimport { tabsKey } from './context'\n\n/**\n * The panel a tab shows, matched to it by the same `value`.\n *\n * Every panel is rendered at all times, and the inactive ones are hidden with the\n * native `hidden` attribute rather than removed. That costs no JavaScript, and it\n * means the state of what they contain survives a change of tab: a half-typed field\n * keeps its text, a scrolled list its position, and a form's fields are still\n * submitted.\n */\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: string | number\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/** Once a deferred panel has been shown it stays built, so nothing it holds is lost. */\nconst revealed = ref(false)\nwatchEffect(() => {\n  if (selected.value) revealed.value = true\n})\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own\n   * stylesheet, which ANY author declaration of a display overrides — a consumer's\n   * `.v-tabs-panel { display: flex }` included, and it would then reveal every panel\n   * at once.\n   *\n   * It is deliberately left overridable, with no `!important`: that would make this\n   * the one component of the design system a consumer could not restyle. To give the\n   * panel a display of your own, exclude the hidden ones —\n   * `.v-tabs-panel:not([hidden])`.\n   */\n  .v-tabs-panel[hidden] {\n    display: none;\n  }\n\n  .v-tabs-panel:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTabPanel.js","names":[],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The panel a tab shows, matched to it by the same `value`.\n *\n * Every panel is rendered at all times, and the inactive ones are hidden with the\n * native `hidden` attribute rather than removed. That costs no JavaScript, and it\n * means the state of what they contain survives a change of tab: a half-typed field\n * keeps its text, a scrolled list its position, and a form's fields are still\n * submitted.\n */\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: ItemValue\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/*\n * Once a deferred panel has been shown it stays built, so nothing it holds is lost.\n *\n * The `&&` is what keeps a panel that is not lazy out of the selection's dependencies: its\n * getter stops at `props.lazy`, so changing tab re-runs nothing for it. `immediate` latches\n * a lazy panel that starts selected during setup, on the server too, so its content is in\n * the first render rather than one tick later.\n */\nconst revealed = ref(false)\nwatch(\n  () => props.lazy && selected.value,\n  (shown) => {\n    if (shown) revealed.value = true\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own\n   * stylesheet, which ANY author declaration of a display overrides — a consumer's\n   * `.v-tabs-panel { display: flex }` included, and it would then reveal every panel\n   * at once.\n   *\n   * It is deliberately left overridable, with no `!important`: that would make this\n   * the one component of the design system a consumer could not restyle. To give the\n   * panel a display of your own, exclude the hidden ones —\n   * `.v-tabs-panel:not([hidden])`.\n   */\n  .v-tabs-panel[hidden] {\n    display: none;\n  }\n\n  .v-tabs-panel:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 import { tabsKey as e } from "./context.js";
-import { computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, inject as a, openBlock as o, ref as s, renderSlot as c, watchEffect as l } from "vue";
+import { computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, inject as a, openBlock as o, ref as s, renderSlot as c, watch as l } from "vue";
 //#region src/components/VTabs/VTabPanel.vue?vue&type=script&setup=true&lang.ts
 var u = [
 	"id",
@@ -16,9 +16,9 @@ var u = [
 	},
 	setup(i) {
 		let d = i, f = a(e, null), p = t(() => f != null && f.value === d.value), m = t(() => f?.tabId(d.value)), h = t(() => f?.panelId(d.value)), g = s(!1);
-		return l(() => {
-			p.value && (g.value = !0);
-		}), (e, t) => (o(), r("div", {
+		return l(() => d.lazy && p.value, (e) => {
+			e && (g.value = !0);
+		}, { immediate: !0 }), (e, t) => (o(), r("div", {
 			id: h.value,
 			class: "v-tabs-panel",
 			role: "tabpanel",

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

@@ -1 +1 @@
-{"version":3,"file":"VTabPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, ref, watchEffect } from 'vue'\n\nimport { tabsKey } from './context'\n\n/**\n * The panel a tab shows, matched to it by the same `value`.\n *\n * Every panel is rendered at all times, and the inactive ones are hidden with the\n * native `hidden` attribute rather than removed. That costs no JavaScript, and it\n * means the state of what they contain survives a change of tab: a half-typed field\n * keeps its text, a scrolled list its position, and a form's fields are still\n * submitted.\n */\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: string | number\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/** Once a deferred panel has been shown it stays built, so nothing it holds is lost. */\nconst revealed = ref(false)\nwatchEffect(() => {\n  if (selected.value) revealed.value = true\n})\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own\n   * stylesheet, which ANY author declaration of a display overrides — a consumer's\n   * `.v-tabs-panel { display: flex }` included, and it would then reveal every panel\n   * at once.\n   *\n   * It is deliberately left overridable, with no `!important`: that would make this\n   * the one component of the design system a consumer could not restyle. To give the\n   * panel a display of your own, exclude the hidden ones —\n   * `.v-tabs-panel:not([hidden])`.\n   */\n  .v-tabs-panel[hidden] {\n    display: none;\n  }\n\n  .v-tabs-panel:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAyBA,IAAM,IAAQ,GAOR,IAAO,EAAO,GAAS,IAAI,GAE3B,IAAW,QAAe,KAAQ,QAAQ,EAAK,UAAU,EAAM,KAAK,GACpE,IAAQ,QAAe,GAAM,MAAM,EAAM,KAAK,CAAC,GAC/C,IAAU,QAAe,GAAM,QAAQ,EAAM,KAAK,CAAC,GAGnD,IAAW,EAAI,EAAK;SAC1B,QAAkB;GAChB,AAAI,EAAS,UAAO,EAAS,QAAQ;EACvC,CAAC,mBAIC,EASM,OAAA;GARH,IAAI,EAAA;GACL,OAAM;GACN,MAAK;GACJ,mBAAiB,EAAA;GAClB,UAAS;GACR,QAAM,CAAG,EAAA;OAEG,EAAA,QAAQ,EAAA,QAArB,EAAiC,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VTabPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The panel a tab shows, matched to it by the same `value`.\n *\n * Every panel is rendered at all times, and the inactive ones are hidden with the\n * native `hidden` attribute rather than removed. That costs no JavaScript, and it\n * means the state of what they contain survives a change of tab: a half-typed field\n * keeps its text, a scrolled list its position, and a form's fields are still\n * submitted.\n */\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: ItemValue\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/*\n * Once a deferred panel has been shown it stays built, so nothing it holds is lost.\n *\n * The `&&` is what keeps a panel that is not lazy out of the selection's dependencies: its\n * getter stops at `props.lazy`, so changing tab re-runs nothing for it. `immediate` latches\n * a lazy panel that starts selected during setup, on the server too, so its content is in\n * the first render rather than one tick later.\n */\nconst revealed = ref(false)\nwatch(\n  () => props.lazy && selected.value,\n  (shown) => {\n    if (shown) revealed.value = true\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own\n   * stylesheet, which ANY author declaration of a display overrides — a consumer's\n   * `.v-tabs-panel { display: flex }` included, and it would then reveal every panel\n   * at once.\n   *\n   * It is deliberately left overridable, with no `!important`: that would make this\n   * the one component of the design system a consumer could not restyle. To give the\n   * panel a display of your own, exclude the hidden ones —\n   * `.v-tabs-panel:not([hidden])`.\n   */\n  .v-tabs-panel[hidden] {\n    display: none;\n  }\n\n  .v-tabs-panel:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EA2BA,IAAM,IAAQ,GAOR,IAAO,EAAO,GAAS,IAAI,GAE3B,IAAW,QAAe,KAAQ,QAAQ,EAAK,UAAU,EAAM,KAAK,GACpE,IAAQ,QAAe,GAAM,MAAM,EAAM,KAAK,CAAC,GAC/C,IAAU,QAAe,GAAM,QAAQ,EAAM,KAAK,CAAC,GAUnD,IAAW,EAAI,EAAK;SAC1B,QACQ,EAAM,QAAQ,EAAS,QAC5B,MAAU;GACT,AAAI,MAAO,EAAS,QAAQ;EAC9B,GACA,EAAE,WAAW,GAAK,CACpB,mBAIE,EASM,OAAA;GARH,IAAI,EAAA;GACL,OAAM;GACN,MAAK;GACJ,mBAAiB,EAAA;GAClB,UAAS;GACR,QAAM,CAAG,EAAA;OAEG,EAAA,QAAQ,EAAA,QAArB,EAAiC,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VTabs/VTabs.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-tabs{--tabs-frame-pad:0px;font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-tabs[data-orientation=vertical]{flex-direction:row}.v-tabs[data-variant=outlined]{--tabs-frame-pad:var(--vectis-space-3);background:var(--vectis-color-surface-raised);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-surface)}.v-tabs-bar{justify-content:flex-start;align-items:stretch;gap:var(--vectis-space-1);padding-block-start:var(--tabs-frame-pad);padding-inline:var(--tabs-frame-pad);display:flex}.v-tabs[data-orientation=vertical] .v-tabs-bar{padding-block:var(--tabs-frame-pad);flex-direction:column;align-items:stretch;padding-inline-end:0}.v-tabs[data-align=center] .v-tabs-bar{justify-content:center}.v-tabs[data-align=end] .v-tabs-bar{justify-content:flex-end}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tabs-bar{border-block-end:1px solid var(--vectis-color-border)}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=vertical] .v-tabs-bar{border-block-end:none;border-inline-start:1px solid var(--vectis-color-border)}.v-tabs[data-variant=outlined][data-orientation=vertical] .v-tabs-bar{border-inline-start:none;border-inline-end:1px solid var(--vectis-color-border)}.v-tabs-list{align-items:center;gap:var(--vectis-space-1);scrollbar-width:none;scroll-behavior:smooth;min-block-size:0;min-inline-size:0;display:flex;overflow:auto}.v-tabs[data-orientation=vertical] .v-tabs-list{flex-direction:column;align-items:stretch}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tabs-list{gap:0;margin-block-end:-1px}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=horizontal] .v-tabs-list{align-items:flex-end}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=vertical] .v-tabs-list{margin-block-end:0;margin-inline-start:-1px}.v-tabs[data-variant=outlined][data-orientation=vertical] .v-tabs-list{margin-inline-start:0}.v-tabs[data-variant=outlined]:not(:has(>.v-tabs-panels)) .v-tabs-bar{border-block-end:none;border-inline-end:none;padding-block-end:var(--tabs-frame-pad);padding-inline-end:var(--tabs-frame-pad)}.v-tabs[data-variant=outlined]:not(:has(>.v-tabs-panels)) .v-tabs-list{margin-block-end:0}.v-tabs[data-variant=inset] .v-tabs-list{background:var(--vectis-color-surface-sunken);padding:var(--vectis-space-1);border-radius:var(--vectis-radius-surface)}.v-tabs[data-grow] .v-tabs-list{flex:1}.v-tabs-sentinel{flex:0 0 1px;align-self:stretch}.v-tabs-scroll{flex:none;align-self:center}[dir=rtl] .v-tabs[data-orientation=horizontal] .v-tabs-scroll .v-icon{scale:-1 1}.v-tabs-panels{min-inline-size:0;padding:var(--tabs-frame-pad)}.v-tabs[data-orientation=vertical] .v-tabs-panels{flex:1}@media (prefers-reduced-motion:reduce){.v-tabs-list{scroll-behavior:auto}}}
+@layer vectis.components{.v-tabs{--tabs-pad-delta:0px;--tabs-panels-pad:calc(var(--vectis-space-4) - var(--tabs-pad-delta));font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-tabs[data-compact]{--tabs-pad-delta:var(--vectis-space-1)}.v-tabs[data-orientation=vertical]{flex-direction:row}.v-tabs[data-variant=outlined]{background:var(--vectis-color-surface-raised);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-surface)}.v-tabs-bar{justify-content:flex-start;align-items:stretch;gap:var(--vectis-space-1);display:flex}.v-tabs[data-orientation=vertical] .v-tabs-bar{flex-direction:column}.v-tabs[data-align=center] .v-tabs-bar{justify-content:center}.v-tabs[data-align=end] .v-tabs-bar{justify-content:flex-end}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tabs-bar{border-block-end:1px solid var(--vectis-color-border)}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=vertical] .v-tabs-bar{border-block-end:none;border-inline-start:1px solid var(--vectis-color-border)}.v-tabs[data-variant=outlined][data-orientation=vertical] .v-tabs-bar{border-inline-start:none;border-inline-end:1px solid var(--vectis-color-border)}.v-tabs-list{align-items:center;gap:var(--vectis-space-1);scrollbar-width:none;scroll-behavior:smooth;min-block-size:0;min-inline-size:0;display:flex;overflow:auto}.v-tabs[data-orientation=vertical] .v-tabs-list{flex-direction:column;align-items:stretch}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tabs-list{gap:0;margin-block-end:-1px}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=horizontal] .v-tabs-list{align-items:flex-end}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=vertical] .v-tabs-list{margin-block-end:0;margin-inline-start:-1px}.v-tabs[data-variant=outlined][data-orientation=vertical] .v-tabs-list{margin-inline-start:0}.v-tabs[data-variant=outlined]:not(:has(>.v-tabs-panels)){overflow:clip}.v-tabs[data-variant=outlined]:not(:has(>.v-tabs-panels)) .v-tabs-bar{border-block-end:none;border-inline-end:none}.v-tabs[data-variant=outlined]:not(:has(>.v-tabs-panels)) .v-tabs-list{margin-block-end:0}.v-tabs[data-variant=inset] .v-tabs-list{background:var(--vectis-color-surface-sunken);padding:var(--vectis-space-1);border-radius:var(--vectis-radius-surface)}.v-tabs[data-grow] .v-tabs-list{flex:1}.v-tabs-sentinel{flex:0 0 1px;align-self:stretch}.v-tabs-scroll{flex:none;align-self:center}.v-tabs-panels{min-inline-size:0}.v-tabs:is([data-variant=flat],[data-variant=inset])[data-orientation=horizontal] .v-tabs-panels{padding-block-start:var(--tabs-panels-pad)}.v-tabs:is([data-variant=flat],[data-variant=inset])[data-orientation=vertical] .v-tabs-panels{padding-inline-start:var(--tabs-panels-pad)}.v-tabs[data-variant=outlined] .v-tabs-panels{padding:var(--tabs-panels-pad)}.v-tabs[data-orientation=vertical] .v-tabs-panels{flex:1}@media (prefers-reduced-motion:reduce){.v-tabs-list{scroll-behavior:auto}}}