vectis-ui 0.1.0

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

@@ -0,0 +1,42 @@
+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.
+ */
+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;
+    /** The visible label. The default slot replaces it. */
+    label?: string;
+    /** An icon before the label: an icon name, or an explicit render. */
+    icon?: IconSource;
+    /**
+     * Makes the tab unusable: it no longer responds, the arrow keys skip over it, and it
+     * greys out through the colour tokens.
+     */
+    disabled?: boolean;
+}
+type __VLS_Slots = {
+    /** The content of the tab, replacing the `label` prop. */
+    default?(): unknown;
+};
+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;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTabs/VTab.js

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,66 @@
+import e from "../VIcon/VIcon.js";
+import { iconProps as t } from "../VIcon/iconProps.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";
+//#region src/components/VTabs/VTab.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	key: 0,
+	class: "v-tab-label"
+}, S = /*@__PURE__*/ d({
+	__name: "VTab",
+	props: {
+		value: {},
+		label: { default: void 0 },
+		icon: { default: void 0 },
+		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);
+		function k() {
+			w?.activation === "automatic" && !S.disabled && w.select(S.value);
+		}
+		return (r, i) => (h(), a(n, {
+			id: E.value,
+			class: "v-tab",
+			role: "tab",
+			"aria-selected": T.value ? "true" : "false",
+			"aria-controls": D.value,
+			tabindex: T.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),
+			onFocus: k
+		}, c({
+			default: b(() => [O.value ? o("", !0) : (h(), s("span", x, [g(r.$slots, "default", {}, () => [l(_(d.label), 1)])]))]),
+			_: 2
+		}, [d.icon ? {
+			name: "start",
+			fn: b(() => [u(e, m(f(v(t)(d.icon))), null, 16)]),
+			key: "0"
+		} : void 0]), 1032, [
+			"id",
+			"aria-selected",
+			"aria-controls",
+			"tabindex",
+			"elevated",
+			"tone",
+			"size",
+			"compact",
+			"disabled",
+			"data-icon-only"
+		]));
+	}
+});
+//#endregion
+export { S 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

@@ -0,0 +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"}

package/dist/components/VTabs/VTabPanel.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-tabs-panel[hidden]{display:none}.v-tabs-panel:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}}

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

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+interface TabPanelProps {
+    /** Which tab shows this panel: it must be the `value` of one of them. */
+    value: string | number;
+    /**
+     * 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
+     * afterwards.
+     */
+    lazy?: boolean;
+}
+type __VLS_Slots = {
+    /** What the panel contains. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<TabPanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabPanelProps> & Readonly<{}>, {
+    lazy: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTabs/VTabPanel.js

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,34 @@
+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";
+//#region src/components/VTabs/VTabPanel.vue?vue&type=script&setup=true&lang.ts
+var u = [
+	"id",
+	"aria-labelledby",
+	"hidden"
+], d = /*@__PURE__*/ i({
+	__name: "VTabPanel",
+	props: {
+		value: {},
+		lazy: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	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", {
+			id: h.value,
+			class: "v-tabs-panel",
+			role: "tabpanel",
+			"aria-labelledby": m.value,
+			tabindex: "0",
+			hidden: !p.value
+		}, [!i.lazy || g.value ? c(e.$slots, "default", {}, void 0, void 0, 0) : n("", !0)], 8, u));
+	}
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=VTabPanel.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

package/dist/components/VTabs/VTabs.css

@@ -0,0 +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}}}

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

@@ -0,0 +1,107 @@
+import { IconSource } from '../VIcon/types.js';
+export type TabsVariant = 'flat' | 'outlined' | 'inset';
+export type TabsTone = 'accent' | 'neutral' | 'danger';
+export type TabsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsAlign = 'start' | 'center' | 'end';
+export type TabsActivation = 'manual' | 'automatic';
+/**
+ * A row of tabs, and optionally the panels they show. Only one panel is visible at a
+ * time, and the tabs follow the pattern assistive technology expects of them: the row
+ * is a single stop in the tab order, and the arrow keys move between the tabs inside
+ * it.
+ *
+ * No button is invented here. Every tab is a VButton and the scroll controls are
+ * VIconButtons, so hovering, focusing, disabling and the respect of a reader's
+ * reduced-motion setting all come from there, without a single state rule being
+ * written again in this file.
+ *
+ * Nothing touches the DOM outside event handlers and effects that run after the page
+ * has been updated, which is what lets the component render on a server.
+ */
+interface TabsProps {
+    /**
+     * How the bar is framed. `flat` draws nothing but a rule under the tabs, with the
+     * selected one underlined; `outlined` puts that same bar and its panels inside a
+     * card; `inset` turns the row into a segmented control sitting in a hollow track.
+     */
+    variant?: TabsVariant;
+    /** The colour the selected tab takes. The others stay neutral whatever this says. */
+    tone?: TabsTone;
+    /** The height of the tabs, from the scale shared by every control. */
+    size?: TabsSize;
+    /** Takes 4px off the height of every tab. */
+    compact?: boolean;
+    /** Whether the tabs run across the page or down its side. */
+    orientation?: TabsOrientation;
+    /** Where the tabs sit along the bar when they do not fill it. */
+    align?: TabsAlign;
+    /** Makes the tabs share the whole bar between them, in equal parts. */
+    grow?: boolean;
+    /**
+     * Adds a button at each end of the bar to scroll it, each disabled once that end is
+     * reached. It only makes sense when the tabs can overflow, so it excludes `grow`.
+     */
+    scrollButtons?: boolean;
+    /** The icon of the button scrolling backwards. It follows the orientation by default. */
+    prevIcon?: IconSource;
+    /** The icon of the button scrolling forwards. It follows the orientation by default. */
+    nextIcon?: IconSource;
+    /** What the backward scroll button does, in words. It falls back to the dictionary. */
+    prevLabel?: string;
+    /** What the forward scroll button does, in words. It falls back to the dictionary. */
+    nextLabel?: string;
+    /**
+     * Whether moving to a tab also selects it. Selecting on arrival is what the ARIA
+     * authoring practices recommend when a panel appears instantly; leave it manual when
+     * showing a panel costs a request, or every tab passed over would fire one.
+     */
+    activation?: TabsActivation;
+    /**
+     * What screen readers announce for the row of tabs. It falls back to the design
+     * system dictionary.
+     */
+    label?: string;
+}
+type __VLS_Props = TabsProps;
+type __VLS_Slots = {
+    /** The tabs themselves. */
+    default(): unknown;
+    /**
+     * The panels the tabs show. Leaving it out renders no panel area at all, which is
+     * how the same component serves as a plain bar or a segmented control.
+     */
+    panels?(): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    label: string;
+    size: TabsSize;
+    variant: TabsVariant;
+    tone: TabsTone;
+    orientation: TabsOrientation;
+    compact: boolean;
+    align: TabsAlign;
+    prevIcon: IconSource;
+    nextIcon: IconSource;
+    prevLabel: string;
+    nextLabel: string;
+    grow: boolean;
+    scrollButtons: boolean;
+    activation: TabsActivation;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTabs/VTabs.js

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

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

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