vectis-ui 0.1.0 → 0.8.0

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

@@ -1,24 +1,11 @@
 import { IconSource } from '../VIcon/types.js';
+import { ItemValue } from '../../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
@@ -57,6 +44,12 @@ interface TabsProps {
      * showing a panel costs a request, or every tab passed over would fire one.
      */
     activation?: TabsActivation;
+    /**
+     * Makes every tab unusable, and the scroll buttons with them: the tabs leave the tab order
+     * and grey out through the colour tokens. A tab disabled on its own stays disabled either
+     * way. The panel on show stays on show.
+     */
+    disabled?: boolean;
     /**
      * What screen readers announce for the row of tabs. It falls back to the design
      * system dictionary.
@@ -74,13 +67,28 @@ type __VLS_Slots = {
     panels?(): unknown;
 };
 type __VLS_ModelProps = {
-    modelValue?: string | number;
+    /**
+     * The `value` of the selected tab. There is deliberately no default: the component cannot
+     * know which of the tabs a consumer wrote should open.
+     *
+     * CONTRACT — it must name a tab that exists and is not disabled. Pointing it anywhere else
+     * leaves no tab with a tab stop, and the bar becomes unreachable from the keyboard.
+     */
+    modelValue?: ItemValue;
 };
 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;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /**
+     * Moves the focus to the selected tab, or to the first tab that can take it when the
+     * v-model names none.
+     */
+    focus: (options?: FocusOptions) => void;
+    /** The `role="tablist"` row, which is also where the consumer's attributes land. */
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: ItemValue | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ItemValue | undefined) => any) | undefined;
 }>, {
     label: string;
     size: TabsSize;
@@ -88,6 +96,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     tone: TabsTone;
     orientation: TabsOrientation;
     compact: boolean;
+    disabled: boolean;
     align: TabsAlign;
     prevIcon: IconSource;
     nextIcon: IconSource;

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

@@ -1 +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":""}
+{"version":3,"file":"VTabs.js","names":[],"sources":["../../../src/components/VTabs/VTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\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 */\n\nimport { computed, 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 type { ItemValue } from '../../types'\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\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   * Makes every tab unusable, and the scroll buttons with them: the tabs leave the tab order\n   * and grey out through the colour tokens. A tab disabled on its own stays disabled either\n   * way. The panel on show stays on show.\n   */\n  disabled?: boolean\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  disabled: false,\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\n/**\n * The `value` of the selected tab. There is deliberately no default: the component cannot\n * know which of the tabs a consumer wrote should open.\n *\n * CONTRACT — it must name a tab that exists and is not disabled. Pointing it anywhere else\n * leaves no tab with a tab stop, and the bar becomes unreachable from the keyboard.\n */\nconst model = defineModel<ItemValue>()\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: ItemValue) {\n    model.value = value\n  },\n  tabId: (value: ItemValue) => tabIdFor(baseId, value),\n  panelId: (value: ItemValue) => 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  get disabled() {\n    return props.disabled\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 buttons.\n *\n * READ THIS BEFORE PROPOSING `@container scroll-state` AGAIN. CSS can ask the question —\n * VDialog uses that query for its scroll shadows — and still cannot answer this one, for two\n * independent reasons. It is Chrome/Edge 133+, with neither Safari nor Firefox shipping it,\n * and where VDialog's hairlines merely stay invisible without it these buttons are\n * functional; an `@supports` guard would mean keeping everything below anyway. And CSS\n * cannot set `disabled` on a button: hiding or greying an arrow is a different affordance\n * and a different announcement, not the same behaviour written another way.\n *\n * So two hairline sentinels sit at the ends of the row and are observed. ONE observer then\n * covers all three things that change the answer — scrolling, a resize, tabs added or\n * removed — where measuring the scroll 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 server,\n * never wrongly enabled. That also gives the \"nothing overflows\" case for free: both\n * sentinels are visible at once, so both buttons stay disabled with no test of 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  // `post` so the effect runs once the DOM is up to date: in the default timing the three\n  // template refs are still null on the first pass, the guard above returns, and the\n  // buttons stay disabled for good — the effect having tracked nothing to wake it again.\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(\n  model,\n  () => {\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  // `post`, so the tab that is now selected already carries `aria-selected` when it is looked\n  // for: in the default timing the query would find the one that was selected before.\n  { flush: 'post' },\n)\n\n// The root is a container and the tabs are rendered by the consumer's slot, so a template\n// ref reaches neither the row nor a tab. `focus` goes where the Tab key would land: the\n// selected tab, which holds the row's single tab stop.\ndefineExpose({\n  /**\n   * Moves the focus to the selected tab, or to the first tab that can take it when the\n   * v-model names none.\n   */\n  focus: (options?: FocusOptions) => {\n    const list = listEl.value\n    const tab =\n      list?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]:not(:disabled)') ??\n      list?.querySelector<HTMLElement>('[role=\"tab\"]:not(:disabled)')\n    tab?.focus(options)\n  },\n  /** The `role=\"tablist\"` row, which is also where the consumer's attributes land. */\n  el: listEl,\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    :data-compact=\"compact ? '' : undefined\"\n  >\n    <div class=\"v-tabs-bar\">\n      <VIconButton\n        v-if=\"scrollButtons\"\n        class=\"v-tabs-scroll\"\n        :label=\"resolvedPrevLabel\"\n        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"disabled || atStart\"\n        @click=\"scrollStep(-1)\"\n      >\n        <VIcon v-bind=\"iconProps(resolvedPrevIcon)\" :mirrored=\"!isVertical\" />\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        :size=\"size\"\n        :compact=\"compact\"\n        :disabled=\"disabled || atEnd\"\n        @click=\"scrollStep(1)\"\n      >\n        <VIcon v-bind=\"iconProps(resolvedNextIcon)\" :mirrored=\"!isVertical\" />\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 panels' padding, and the four pixels the compact density takes off it. The\n     * delta is held apart from the value rather than the two being written out, so the\n     * density stays one subtraction wherever the padding is read instead of a second\n     * table to keep in step — the VAccordion idiom.\n     *\n     * It follows the density and deliberately not the SIZE: the padding is a property of\n     * the layout, and in any case the size variables live on the descendant buttons, each\n     * tab declaring its own, so the root could not read them.\n     */\n    --tabs-pad-delta: 0px;\n    --tabs-panels-pad: calc(var(--vectis-space-4) - var(--tabs-pad-delta));\n\n    display: flex;\n    flex-direction: column;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-tabs[data-compact] {\n    --tabs-pad-delta: var(--vectis-space-1);\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   * The bar spends NO gutter: the tabs sit against the card's border and the track runs\n   * from edge to edge, so the whole of the padding is the panels'. That is also what\n   * lands an end tab exactly on a corner of the card, where its outer radius has to be\n   * the frame's INNER one — VTab.vue derives it, and the two cannot move apart without\n   * the corner showing on hover.\n   *\n   * Unlike VDataTable, nothing is clipped here: clipping would cut the panel's focus\n   * ring, the only one that leaves the component, and forbid a consumer any content\n   * running edge to edge. The bar with no panels under it is the single exception, and\n   * it is handled where that case is.\n   */\n  .v-tabs[data-variant='outlined'] {\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  }\n\n  .v-tabs[data-orientation='vertical'] .v-tabs-bar {\n    flex-direction: column;\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 and the row stops overlapping.\n   *\n   * This is the one place the card may clip, and the one place it must. The tabs fill\n   * it on all four sides here, so a hovered end tab reaches the two corners no radius\n   * of its own covers — the ends round the edge the track used to occupy, and that one\n   * only. Nothing is lost to the clip: there is no panel, hence no outer focus ring,\n   * and a tab draws its own ring inwards.\n   */\n  .v-tabs[data-variant='outlined']:not(:has(> .v-tabs-panels)) {\n    overflow: clip;\n  }\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  }\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  .v-tabs-panels {\n    min-inline-size: 0;\n  }\n\n  /*\n   * Flat and segmented, the panels sit in no card, so they take no gutter: their content\n   * has to stay aligned with whatever the page puts above and below the component, which\n   * an indent would break. What they do owe is the separation from the bar, the boundary\n   * between two parts of the same component rather than the parent layout's business —\n   * which the framed variant folds into the gutter it gives its panels on all four sides.\n   *\n   * The axis follows the ORIENTATION and not the writing mode, so it cannot be a single\n   * logical declaration: the bar is above the panels when horizontal and beside them when\n   * vertical.\n   *\n   * Both variants are named explicitly rather than excluding the framed one, as in the\n   * track rules above: a fourth frame opts in by hand.\n   */\n  .v-tabs:is([data-variant='flat'], [data-variant='inset'])[data-orientation='horizontal']\n    .v-tabs-panels {\n    padding-block-start: var(--tabs-panels-pad);\n  }\n\n  .v-tabs:is([data-variant='flat'], [data-variant='inset'])[data-orientation='vertical']\n    .v-tabs-panels {\n    padding-inline-start: var(--tabs-panels-pad);\n  }\n\n  /* Inside a card the gutter is the panels' alone, on all four sides: the bar spends\n     none, so the tabs and their track reach the frame and the content is the only thing\n     set back from it. */\n  .v-tabs[data-variant='outlined'] .v-tabs-panels {\n    padding: var(--tabs-panels-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":""}

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

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