vectis-ui 0.14.0 → 0.15.0

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

@@ -1 +1 @@
-{"version":3,"file":"VSplitButton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSplitButton/VSplitButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A VButtonGroup joining a VButton to the VIconButton that opens a VMenu. The group shares the\n * shape and the disabled state; the menu is anchored to the whole control rather than to its\n * trigger, so it can line up with either edge and match the full width.\n */\nimport { computed, ref } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VMenu from '../VMenu/VMenu.vue'\nimport type { MenuPlacement, MenuSize } from '../VMenu/context'\n\ninterface SplitButtonProps {\n  /** The visible text of the main action. */\n  label: string\n  /**\n   * How much visual weight both halves carry, on the values of VButton's own `variant`:\n   * `solid`, `outline`, `ghost` or `soft`.\n   */\n  variant?: ButtonVariant\n  /** What the actions mean, in colour: `accent`, `neutral` or `danger`. */\n  tone?: ButtonTone\n  /** The height of both halves, from the size scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off the height of both halves. */\n  compact?: boolean\n  /** Raises the control off the page with a shadow, on the terms of VButton's `elevated`. */\n  elevated?: boolean\n  /**\n   * Stretches the control to the whole inline size of its parent. The main action takes the\n   * extra room; the menu button stays square.\n   */\n  fullWidth?: boolean\n  /**\n   * Turns the main action into an `<a>` pointing at this address. A disabled or loading link\n   * becomes inert: the address is dropped, so it can be neither focused nor followed.\n   */\n  href?: string\n  /** The native type of the main button. It is ignored as soon as `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes both halves unusable. */\n  disabled?: boolean\n  /**\n   * Shows a spinner in the main action and announces it as busy. The menu button is disabled\n   * meanwhile: an action is already under way.\n   */\n  loading?: boolean\n  /** An icon before the label of the main action. */\n  iconStart?: IconSource\n  /** An icon after the label of the main action. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form. */\n  iconFilled?: boolean\n  /** What screen readers announce for the menu button. The dictionary's \"More options\" otherwise. */\n  menuLabel?: string\n  /** The icon of the menu button, the built-in `expand_more` otherwise. */\n  menuIcon?: IconSource\n  /**\n   * Where the menu opens relative to the whole control. The browser moves it to another side by\n   * itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /** How tall the rows of the menu are: 32, 40 or 48 pixels. */\n  menuSize?: MenuSize\n  /**\n   * A width for the menu: a number is read as pixels, a string as any CSS length or keyword\n   * (`16rem`, `max-content`).\n   */\n  menuWidth?: number | string\n  /** Stops the menu from being narrower than the whole control, while leaving it free to grow. */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<SplitButtonProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  fullWidth: false,\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  menuLabel: undefined,\n  menuIcon: () => expandMoreIcon,\n  placement: 'bottom-end',\n  menuSize: 'sm',\n  menuWidth: undefined,\n  matchTrigger: false,\n})\n\nconst emit = defineEmits<{\n  /** The main action was activated. A disabled or loading control emits nothing. */\n  click: [event: MouseEvent]\n}>()\n\n/** Whether the menu is showing. The browser's own dismissal writes back to it. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The other actions: VMenuItem, VMenuGroup and VMenuSeparator, submenus included. */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst menuText = computed(() => props.menuLabel ?? m.value.splitButton.menu)\n\nconst mainRef = ref<InstanceType<typeof VButton> | null>(null)\nconst el = computed(() => (mainRef.value?.$el as HTMLElement | undefined) ?? null)\n\ndefineExpose({\n  /** Moves the focus to the main action. */\n  focus: (options?: FocusOptions) => el.value?.focus(options),\n  /** The main action's `<button>` or `<a>`. */\n  el,\n})\n</script>\n\n<template>\n  <VButtonGroup\n    bordered\n    class=\"v-split-button\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :variant=\"variant\"\n    :tone=\"tone\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :elevated=\"elevated\"\n    :disabled=\"disabled\"\n    :full-width=\"fullWidth\"\n    :data-loading=\"loading ? '' : undefined\"\n  >\n    <VButton\n      ref=\"mainRef\"\n      v-bind=\"forwardedAttrs\"\n      class=\"v-split-button-main\"\n      :href=\"href\"\n      :type=\"type\"\n      :loading=\"loading\"\n      :icon-start=\"iconStart\"\n      :icon-end=\"iconEnd\"\n      :icon-filled=\"iconFilled\"\n      @click=\"emit('click', $event)\"\n    >\n      {{ label }}\n    </VButton>\n    <VMenu\n      v-model:open=\"open\"\n      :placement=\"placement\"\n      :size=\"menuSize\"\n      :width=\"menuWidth\"\n      :match-trigger=\"matchTrigger\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <VIconButton\n          v-bind=\"triggerProps\"\n          class=\"v-split-button-menu\"\n          :label=\"menuText\"\n          :icon=\"menuIcon\"\n          :disabled=\"loading\"\n        />\n      </template>\n      <slot />\n    </VMenu>\n  </VButtonGroup>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The panel stays a descendant of the group in the document, so the scope covers it while\n     keeping every split button on the page from answering to the same name. */\n  .v-split-button {\n    anchor-name: --split-button-anchor;\n    anchor-scope: --split-button-anchor;\n  }\n\n  /* The whole control instead of the menu button VMenu anchors to. (0,2,0) beats the panel's\n     own `position-anchor` at (0,1,0) whatever the sheet order, and the child combinator leaves\n     submenus, nested inside the panel, on their parent item. */\n  .v-split-button > .v-menu {\n    position-anchor: --split-button-anchor;\n  }\n\n  /* The group's full width shares the row equally between its segments; here only the main\n     action grows, and the menu button keeps its square. */\n  .v-split-button[data-full-width] {\n    grid-template-columns: 1fr auto;\n  }\n\n  /*\n   * While the main action loads, the disabled menu button keeps the paint of the main one, half\n   * transparent, instead of VButton's grey disabled state, which would split the control in two\n   * colours. At (0,5,0) these beat VButton's (0,4,0) disabled rules whatever the sheet order.\n   */\n  .v-split-button[data-loading] > .v-split-button-menu.v-button {\n    opacity: 0.5;\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='outline'] {\n    color: var(--tone-text-tinted);\n    border-color: var(--tone-border-soft);\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='ghost'] {\n    color: var(--tone-text-tinted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFA,IAAM,IAAQ,GAsBR,IAAO,GAMP,IAAO,EAAoB,GAAC,MAA0B,GAStD,EAAE,cAAW,cAAW,sBAAmB,EAAa,GACxD,IAAI,EAAY,GAChB,IAAW,QAAe,EAAM,aAAa,EAAE,MAAM,YAAY,IAAI,GAErE,IAAU,EAAyC,IAAI,GACvD,IAAK,QAAgB,EAAQ,OAAO,OAAmC,IAAI;SAEjF,EAAa;GAEX,QAAQ,MAA2B,EAAG,OAAO,MAAM,CAAO;GAE1D;EACF,CAAC,mBAIC,EA8Ce,GAAA;GA7Cb,UAAA;GACA,OAAK,EAAA,CAAC,kBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,SAAS,EAAA;GACT,MAAM,EAAA;GACN,MAAM,EAAA;GACN,SAAS,EAAA;GACT,UAAU,EAAA;GACV,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,gBAAc,EAAA,UAAO,KAAQ,KAAA;;oBAepB,CAbV,EAaU,GAbV,EAaU;aAZJ;IAAJ,KAAI;MACI,EAAA,CAAA,GAAc;IACtB,OAAM;IACL,MAAM,EAAA;IACN,MAAM,EAAA;IACN,SAAS,EAAA;IACT,cAAY,EAAA;IACZ,YAAU,EAAA;IACV,eAAa,EAAA;IACb,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAU,CAAM;;qBAEjB,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;OAEV,EAiBQ,GAAA;IAhBE,MAAM,EAAA;uCAAI,QAAA;IACjB,WAAW,EAAA;IACX,MAAM,EAAA;IACN,OAAO,EAAA;IACP,iBAAe,EAAA;;IAEL,SAAO,GAOd,EAPkB,sBAAY,CAChC,EAME,GANF,EACU,GAAY;KACpB,OAAM;KACL,OAAO,EAAA;KACP,MAAM,EAAA;KACN,UAAU,EAAA;;;;;;qBAGP,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"VSplitButton.vue_vue_type_script_setup_true_lang.js","names":["expandMoreIcon","_useModel","_openBlock","_createBlock","VButtonGroup","_normalizeClass","_unref","_normalizeStyle","_withCtx","_createVNode","VButton","_mergeProps","_createTextVNode","_toDisplayString","VMenu","VIconButton","_renderSlot","VButton_default","VIconButton_default","VButtonGroup_default","VMenu_default","VSplitButton_vue_vue_type_script_setup_true_lang_default","expand_more","\"open\"","\"openModifiers\"","__expose","__emit","props","__props","emit","open","useModel","useRootAttrs","m","useMessages","menuText","computed","mainRef","ref","el","options","openBlock","createBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","withCtx","createVNode","mergeProps","forwardedAttrs","_cache","$event","createTextVNode","toDisplayString","triggerProps","renderSlot","_ctx"],"sources":["../../../src/components/VSplitButton/VSplitButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A VButtonGroup joining a VButton to the VIconButton that opens a VMenu. The group shares the\n * shape and the disabled state; the menu is anchored to the whole control rather than to its\n * trigger, so it can line up with either edge and match the full width.\n */\nimport { computed, ref } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\n\nimport VButton from '../VButton/VButton.vue'\nimport type { ButtonSize, ButtonTone, ButtonVariant } from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VMenu from '../VMenu/VMenu.vue'\nimport type { MenuPlacement, MenuSize } from '../VMenu/context'\n\ninterface SplitButtonProps {\n  /** The visible text of the main action. */\n  label: string\n  /**\n   * How much visual weight both halves carry, on the values of VButton's own `variant`:\n   * `solid`, `outline`, `ghost` or `soft`.\n   */\n  variant?: ButtonVariant\n  /** What the actions mean, in colour: `accent`, `neutral` or `danger`. */\n  tone?: ButtonTone\n  /** The height of both halves, from the size scale shared by every control. */\n  size?: ButtonSize\n  /** Takes 4px off the height of both halves. */\n  compact?: boolean\n  /** Raises the control off the page with a shadow, on the terms of VButton's `elevated`. */\n  elevated?: boolean\n  /**\n   * Stretches the control to the whole inline size of its parent. The main action takes the\n   * extra room; the menu button stays square.\n   */\n  fullWidth?: boolean\n  /**\n   * Turns the main action into an `<a>` pointing at this address. A disabled or loading link\n   * becomes inert: the address is dropped, so it can be neither focused nor followed.\n   */\n  href?: string\n  /** The native type of the main button. It is ignored as soon as `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /** Makes both halves unusable. */\n  disabled?: boolean\n  /**\n   * Shows a spinner in the main action and announces it as busy. The menu button is disabled\n   * meanwhile: an action is already under way.\n   */\n  loading?: boolean\n  /** An icon before the label of the main action. */\n  iconStart?: IconSource\n  /** An icon after the label of the main action. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form. */\n  iconFilled?: boolean\n  /** What screen readers announce for the menu button. The dictionary's \"More options\" otherwise. */\n  menuLabel?: string\n  /** The icon of the menu button, the built-in `expand_more` otherwise. */\n  menuIcon?: IconSource\n  /**\n   * Where the menu opens relative to the whole control. The browser moves it to another side by\n   * itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /** How tall the rows of the menu are: 32, 40 or 48 pixels. */\n  menuSize?: MenuSize\n  /**\n   * A width for the menu: a number is read as pixels, a string as any CSS length or keyword\n   * (`16rem`, `max-content`).\n   */\n  menuWidth?: number | string\n  /** Stops the menu from being narrower than the whole control, while leaving it free to grow. */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<SplitButtonProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  fullWidth: false,\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  menuLabel: undefined,\n  menuIcon: () => expandMoreIcon,\n  placement: 'bottom-end',\n  menuSize: 'sm',\n  menuWidth: undefined,\n  matchTrigger: false,\n})\n\nconst emit = defineEmits<{\n  /** The main action was activated. A disabled or loading control emits nothing. */\n  click: [event: MouseEvent]\n}>()\n\n/** Whether the menu is showing. The browser's own dismissal writes back to it. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The other actions: VMenuItem, VMenuGroup and VMenuSeparator, submenus included. */\n  default(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst menuText = computed(() => props.menuLabel ?? m.value.splitButton.menu)\n\nconst mainRef = ref<InstanceType<typeof VButton> | null>(null)\nconst el = computed(() => (mainRef.value?.$el as HTMLElement | undefined) ?? null)\n\ndefineExpose({\n  /** Moves the focus to the main action. */\n  focus: (options?: FocusOptions) => el.value?.focus(options),\n  /** The main action's `<button>` or `<a>`. */\n  el,\n})\n</script>\n\n<template>\n  <VButtonGroup\n    bordered\n    class=\"v-split-button\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :variant=\"variant\"\n    :tone=\"tone\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :elevated=\"elevated\"\n    :disabled=\"disabled\"\n    :full-width=\"fullWidth\"\n    :data-loading=\"loading ? '' : undefined\"\n  >\n    <VButton\n      ref=\"mainRef\"\n      v-bind=\"forwardedAttrs\"\n      class=\"v-split-button-main\"\n      :href=\"href\"\n      :type=\"type\"\n      :loading=\"loading\"\n      :icon-start=\"iconStart\"\n      :icon-end=\"iconEnd\"\n      :icon-filled=\"iconFilled\"\n      @click=\"emit('click', $event)\"\n    >\n      {{ label }}\n    </VButton>\n    <VMenu\n      v-model:open=\"open\"\n      :placement=\"placement\"\n      :size=\"menuSize\"\n      :width=\"menuWidth\"\n      :match-trigger=\"matchTrigger\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <VIconButton\n          v-bind=\"triggerProps\"\n          class=\"v-split-button-menu\"\n          :label=\"menuText\"\n          :icon=\"menuIcon\"\n          :disabled=\"loading\"\n        />\n      </template>\n      <slot />\n    </VMenu>\n  </VButtonGroup>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The panel stays a descendant of the group in the document, so the scope covers it while\n     keeping every split button on the page from answering to the same name. */\n  .v-split-button {\n    anchor-name: --split-button-anchor;\n    anchor-scope: --split-button-anchor;\n  }\n\n  /* The whole control instead of the menu button VMenu anchors to. (0,2,0) beats the panel's\n     own `position-anchor` at (0,1,0) whatever the sheet order, and the child combinator leaves\n     submenus, nested inside the panel, on their parent item. */\n  .v-split-button > .v-menu {\n    position-anchor: --split-button-anchor;\n  }\n\n  /* The group's full width shares the row equally between its segments; here only the main\n     action grows, and the menu button keeps its square. */\n  .v-split-button[data-full-width] {\n    grid-template-columns: 1fr auto;\n  }\n\n  /*\n   * While the main action loads, the disabled menu button keeps the paint of the main one, half\n   * transparent, instead of VButton's grey disabled state, which would split the control in two\n   * colours. At (0,5,0) these beat VButton's (0,4,0) disabled rules whatever the sheet order.\n   */\n  .v-split-button[data-loading] > .v-split-button-menu.v-button {\n    opacity: 0.5;\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='outline'] {\n    color: var(--tone-text-tinted);\n    border-color: var(--tone-border-soft);\n  }\n\n  .v-split-button[data-loading] > .v-split-button-menu.v-button[data-variant='ghost'] {\n    color: var(--tone-text-tinted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFA,IAAM2B,IAAQC,GAsBRC,IAAOH,GAMPI,IAAO7B,EAAoB2B,GAAC,MAA0B,GAStD,EAAE,cAAW,cAAW,sBAAmBI,EAAa,GACxDC,IAAIC,EAAY,GAChBC,IAAWC,QAAeT,EAAM,aAAaM,EAAE,MAAM,YAAY,IAAI,GAErEI,IAAUC,EAAyC,IAAI,GACvDC,IAAKH,QAAgBC,EAAQ,OAAO,OAAmC,IAAI;SAEjFZ,EAAa;GAEX,QAAQ,MAA2Bc,EAAG,OAAO,MAAMC,CAAO;GAE1D;EACF,CAAC,cAICtC,EAAA,GAAAC,EA8CeC,GAAA;GA7Cb,UAAA;GACA,OAAKC,EAAA,CAAC,kBACEC,EAAAuC,CAAA,CAAS,CAAA;GAChB,OAAKtC,EAAED,EAAAyC,CAAA,CAAS;GAChB,SAASnB,EAAA;GACT,MAAMA,EAAA;GACN,MAAMA,EAAA;GACN,SAASA,EAAA;GACT,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,cAAYA,EAAA;GACZ,gBAAcA,EAAA,UAAO,KAAQ,KAAA;;GAE9B,SAAApB,QAaU,CAbVC,EAaUC,GAbVC,EAaU;IAZJ,SAAA;IAAJ,KAAI0B;GACI,GAAA/B,EAAA6C,CAAA,GAAc;IACtB,OAAM;IACL,MAAMvB,EAAA;IACN,MAAMA,EAAA;IACN,SAASA,EAAA;IACT,cAAYA,EAAA;IACZ,YAAUA,EAAA;IACV,eAAaA,EAAA;IACb,SAAK,AAAAwB,EAAA,QAAA,MAAEvB,EAAI,SAAUwB,CAAM;;IAE5B,SAAA7C,QAAW,CAARI,EAAAC,EAAAe,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;GAEVnB,CAAAA,GAAAA,EAiBQK,GAAA;IAhBE,MAAMgB,EAAA;IAAA,iBAAA,AAAAsB,EAAA,QAAA,MAAA,EAAI,QAAAC;IACjB,WAAWzB,EAAA;IACX,MAAMA,EAAA;IACN,OAAOA,EAAA;IACP,iBAAeA,EAAA;;IAEL,SAAOpB,GAOd,EAPkB,sBAAY,CAChCC,EAMEM,GANFJ,EACU6C,GAAY;KACpB,OAAM;KACL,OAAOrB,EAAA;KACP,MAAMP,EAAA;KACN,UAAUA,EAAA;;;;;;IAGf,SAAApB,QAAQ,CAARQ,EAAQ0C,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/VStepper/VStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"VStepper.js","names":[],"sources":["../../../src/components/VStepper/VStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * An ordered list of the steps of a process, the current one marked with `aria-current=\"step\"`.\n * It only shows where the reader stands: the content of each step is the consumer's, rendered\n * from the same model. Steps the reader may go back to are buttons; the others are plain text.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport { priority_high as priorityHighIcon } from '../VIcon/icons/priority_high'\nimport type { ItemValue } from '../../types'\nimport { useMessages } from '../../i18n/state'\n\n/** Whether the steps run across or down. */\nexport type StepperOrientation = 'horizontal' | 'vertical'\n\n/** How a step is drawn: done, current, in error, or still ahead. */\nexport type StepperStepState = 'completed' | 'active' | 'error' | 'upcoming'\n\n/** One step of the process. */\nexport interface StepperStep {\n  /** What the model holds while this step is current. */\n  value: ItemValue\n  /** The name of the step. */\n  title: string\n  /** A line under the title. */\n  description?: string\n  /** Marks the step as having a problem to fix. It wins over every other state. */\n  error?: boolean\n  /**\n   * Whether the step is done. Left out, the steps before the current one are done and the others\n   * are not.\n   */\n  completed?: boolean\n  /** Takes the step out of reach: it is never a button. */\n  disabled?: boolean\n}\n\n/** What the `#indicator` slot receives. */\nexport interface StepperIndicatorSlotProps {\n  step: StepperStep\n  /** The position of the step, from 0. */\n  index: number\n  state: StepperStepState\n}\n\ninterface StepperProps {\n  /** The steps, in order. */\n  steps: StepperStep[]\n  /** Whether the steps run across or down. */\n  orientation?: StepperOrientation\n  /**\n   * Makes every step that is not disabled a button. By default only the steps already reached\n   * are: the reader goes back freely, and forward only as far as they have been.\n   */\n  nonLinear?: boolean\n  /**\n   * What screen readers announce for the list of steps. It falls back to the design system\n   * dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<StepperProps>(), {\n  orientation: 'horizontal',\n  nonLinear: false,\n  label: undefined,\n})\n\n/** The value of the current step. Left out or unknown, the first step is current. */\nconst model = defineModel<ItemValue>()\n\ndefineSlots<{\n  /** Replaces what the circle of a step shows: its number, a tick or an exclamation mark. */\n  indicator?(props: StepperIndicatorSlotProps): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedLabel = computed(() => props.label ?? m.value.stepper.label)\n\nconst activeIndex = computed(() =>\n  Math.max(\n    0,\n    props.steps.findIndex((step) => step.value === model.value),\n  ),\n)\n\n// The furthest step reached so far: going back to the first step leaves the later ones open.\nconst furthest = ref(activeIndex.value)\nwatch(activeIndex, (index) => {\n  furthest.value = Math.max(furthest.value, index)\n})\n\nconst states = computed<StepperStepState[]>(() =>\n  props.steps.map((step, index) => {\n    if (step.error) return 'error'\n    if (index === activeIndex.value) return 'active'\n    return (step.completed ?? index < activeIndex.value) ? 'completed' : 'upcoming'\n  }),\n)\n\nfunction reachable(step: StepperStep, index: number) {\n  if (step.disabled) return false\n  return props.nonLinear || index <= Math.max(furthest.value, activeIndex.value)\n}\n\nfunction select(step: StepperStep) {\n  model.value = step.value\n}\n</script>\n\n<template>\n  <ol class=\"v-stepper\" :data-orientation=\"orientation\" :aria-label=\"resolvedLabel\">\n    <li\n      v-for=\"(step, index) in steps\"\n      :key=\"step.value\"\n      class=\"v-stepper-step\"\n      :data-state=\"states[index]\"\n      :data-active=\"index === activeIndex ? '' : undefined\"\n      :data-disabled=\"step.disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"reachable(step, index) ? 'button' : 'span'\"\n        :type=\"reachable(step, index) ? 'button' : undefined\"\n        class=\"v-stepper-trigger\"\n        :aria-current=\"index === activeIndex ? 'step' : undefined\"\n        @click=\"reachable(step, index) && select(step)\"\n      >\n        <span class=\"v-stepper-indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\" :step=\"step\" :index=\"index\" :state=\"states[index]!\">\n            <VIcon v-if=\"states[index] === 'completed'\" :name=\"checkIcon\" />\n            <VIcon v-else-if=\"states[index] === 'error'\" :name=\"priorityHighIcon\" />\n            <template v-else>{{ index + 1 }}</template>\n          </slot>\n        </span>\n        <span class=\"v-stepper-text\">\n          <span class=\"v-stepper-title\">{{ step.title }}</span>\n          <span v-if=\"step.description\" class=\"v-stepper-description\">\n            {{ step.description }}\n          </span>\n          <!-- The tick and the exclamation mark are hidden: their meaning is said in words. -->\n          <span v-if=\"states[index] === 'completed'\" class=\"v-visually-hidden\">\n            {{ m.stepper.completed }}\n          </span>\n          <span v-else-if=\"states[index] === 'error'\" class=\"v-visually-hidden\">\n            {{ m.stepper.error }}\n          </span>\n        </span>\n      </component>\n      <span v-if=\"index < steps.length - 1\" class=\"v-stepper-connector\" aria-hidden=\"true\" />\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-stepper {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * A horizontal stepper is a size container, which is what lets it shorten its labels below a\n   * width. It therefore takes its width from its parent, never from its steps: in a row, give it\n   * a `flex` basis of its own.\n   */\n  .v-stepper[data-orientation='horizontal'] {\n    container-type: inline-size;\n    container-name: v-stepper;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-stepper-step {\n    display: flex;\n    min-inline-size: 0;\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step {\n    flex: 1 1 auto;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step:last-child {\n    flex: none;\n  }\n\n  .v-stepper[data-orientation='vertical'] > .v-stepper-step {\n    flex-direction: column;\n  }\n\n  /* The circle is centred on the text beside it, a title alone or with its description. */\n  .v-stepper-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n    padding: var(--vectis-space-1);\n    border: none;\n    border-radius: var(--vectis-radius-interactive);\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: start;\n  }\n\n  button.v-stepper-trigger {\n    cursor: pointer;\n  }\n\n  button.v-stepper-trigger:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  button.v-stepper-trigger: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  .v-stepper-indicator {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n\n    display: grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-control-size-stepper-indicator);\n    block-size: var(--vectis-control-size-stepper-indicator);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-stepper-text {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-stepper-title {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-stepper-description {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n  }\n\n  .v-stepper-step:is([data-state='active'], [data-state='completed']) .v-stepper-title {\n    color: var(--vectis-color-text);\n  }\n\n  .v-stepper-step[data-state='active'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent);\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='completed'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent-border);\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-indicator {\n    border-color: var(--vectis-color-danger);\n    background: var(--vectis-color-danger);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-title {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* Last of the colour rules, so that a disabled step reads as such whatever its state. */\n  .v-stepper-step[data-disabled] .v-stepper-title,\n  .v-stepper-step[data-disabled] .v-stepper-indicator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* A border rather than a fill draws the line, which forced colours keep. */\n  .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-border);\n\n    flex: 1 1 var(--vectis-control-size-stepper-connector-min);\n  }\n\n  /* The line leaving a step that is done is drawn in the accent: the path walked so far. */\n  .v-stepper-step[data-state='completed'] > .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-accent);\n  }\n\n  .v-stepper[data-orientation='horizontal'] .v-stepper-connector {\n    min-inline-size: var(--vectis-control-size-stepper-connector-min);\n    border-block-start: 1px solid var(--stepper-connector-color);\n  }\n\n  /* Down the indicator's centre, from one circle to the next. */\n  .v-stepper[data-orientation='vertical'] .v-stepper-connector {\n    min-block-size: var(--vectis-control-size-stepper-connector-min);\n    border-inline-start: 1px solid var(--stepper-connector-color);\n    margin-block: var(--vectis-space-1);\n    margin-inline-start: calc(\n      var(--vectis-space-1) + var(--vectis-control-size-stepper-indicator) / 2\n    );\n  }\n\n  /*\n   * Below this width, only the current step keeps its title on screen; the others keep their\n   * circles, and their titles stay readable by assistive technology. The threshold is a literal,\n   * a container query accepting no variables: about four steps with short titles fit above it.\n   */\n  @container v-stepper (max-width: 36rem) {\n    .v-stepper-step:not([data-active]) .v-stepper-text {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  }\n\n  /* The fills are dropped: the current step keeps a ring of its own. */\n  @media (forced-colors: active) {\n    .v-stepper-step[data-active] .v-stepper-indicator {\n      outline: 1px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VStepper.js","names":["_sfc_main","VStepper_vue_vue_type_script_setup_true_lang_default","VStepper_default"],"sources":["../../../src/components/VStepper/VStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * An ordered list of the steps of a process, the current one marked with `aria-current=\"step\"`.\n * It only shows where the reader stands: the content of each step is the consumer's, rendered\n * from the same model. Steps the reader may go back to are buttons; the others are plain text.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport { priority_high as priorityHighIcon } from '../VIcon/icons/priority_high'\nimport type { ItemValue } from '../../types'\nimport { useMessages } from '../../i18n/state'\n\n/** Whether the steps run across or down. */\nexport type StepperOrientation = 'horizontal' | 'vertical'\n\n/** How a step is drawn: done, current, in error, or still ahead. */\nexport type StepperStepState = 'completed' | 'active' | 'error' | 'upcoming'\n\n/** One step of the process. */\nexport interface StepperStep {\n  /** What the model holds while this step is current. */\n  value: ItemValue\n  /** The name of the step. */\n  title: string\n  /** A line under the title. */\n  description?: string\n  /** Marks the step as having a problem to fix. It wins over every other state. */\n  error?: boolean\n  /**\n   * Whether the step is done. Left out, the steps before the current one are done and the others\n   * are not.\n   */\n  completed?: boolean\n  /** Takes the step out of reach: it is never a button. */\n  disabled?: boolean\n}\n\n/** What the `#indicator` slot receives. */\nexport interface StepperIndicatorSlotProps {\n  step: StepperStep\n  /** The position of the step, from 0. */\n  index: number\n  state: StepperStepState\n}\n\ninterface StepperProps {\n  /** The steps, in order. */\n  steps: StepperStep[]\n  /** Whether the steps run across or down. */\n  orientation?: StepperOrientation\n  /**\n   * Makes every step that is not disabled a button. By default only the steps already reached\n   * are: the reader goes back freely, and forward only as far as they have been.\n   */\n  nonLinear?: boolean\n  /**\n   * What screen readers announce for the list of steps. It falls back to the design system\n   * dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<StepperProps>(), {\n  orientation: 'horizontal',\n  nonLinear: false,\n  label: undefined,\n})\n\n/** The value of the current step. Left out or unknown, the first step is current. */\nconst model = defineModel<ItemValue>()\n\ndefineSlots<{\n  /** Replaces what the circle of a step shows: its number, a tick or an exclamation mark. */\n  indicator?(props: StepperIndicatorSlotProps): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedLabel = computed(() => props.label ?? m.value.stepper.label)\n\nconst activeIndex = computed(() =>\n  Math.max(\n    0,\n    props.steps.findIndex((step) => step.value === model.value),\n  ),\n)\n\n// The furthest step reached so far: going back to the first step leaves the later ones open.\nconst furthest = ref(activeIndex.value)\nwatch(activeIndex, (index) => {\n  furthest.value = Math.max(furthest.value, index)\n})\n\nconst states = computed<StepperStepState[]>(() =>\n  props.steps.map((step, index) => {\n    if (step.error) return 'error'\n    if (index === activeIndex.value) return 'active'\n    return (step.completed ?? index < activeIndex.value) ? 'completed' : 'upcoming'\n  }),\n)\n\nfunction reachable(step: StepperStep, index: number) {\n  if (step.disabled) return false\n  return props.nonLinear || index <= Math.max(furthest.value, activeIndex.value)\n}\n\nfunction select(step: StepperStep) {\n  model.value = step.value\n}\n</script>\n\n<template>\n  <ol class=\"v-stepper\" :data-orientation=\"orientation\" :aria-label=\"resolvedLabel\">\n    <li\n      v-for=\"(step, index) in steps\"\n      :key=\"step.value\"\n      class=\"v-stepper-step\"\n      :data-state=\"states[index]\"\n      :data-active=\"index === activeIndex ? '' : undefined\"\n      :data-disabled=\"step.disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"reachable(step, index) ? 'button' : 'span'\"\n        :type=\"reachable(step, index) ? 'button' : undefined\"\n        class=\"v-stepper-trigger\"\n        :aria-current=\"index === activeIndex ? 'step' : undefined\"\n        @click=\"reachable(step, index) && select(step)\"\n      >\n        <span class=\"v-stepper-indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\" :step=\"step\" :index=\"index\" :state=\"states[index]!\">\n            <VIcon v-if=\"states[index] === 'completed'\" :name=\"checkIcon\" />\n            <VIcon v-else-if=\"states[index] === 'error'\" :name=\"priorityHighIcon\" />\n            <template v-else>{{ index + 1 }}</template>\n          </slot>\n        </span>\n        <span class=\"v-stepper-text\">\n          <span class=\"v-stepper-title\">{{ step.title }}</span>\n          <span v-if=\"step.description\" class=\"v-stepper-description\">\n            {{ step.description }}\n          </span>\n          <!-- The tick and the exclamation mark are hidden: their meaning is said in words. -->\n          <span v-if=\"states[index] === 'completed'\" class=\"v-visually-hidden\">\n            {{ m.stepper.completed }}\n          </span>\n          <span v-else-if=\"states[index] === 'error'\" class=\"v-visually-hidden\">\n            {{ m.stepper.error }}\n          </span>\n        </span>\n      </component>\n      <span v-if=\"index < steps.length - 1\" class=\"v-stepper-connector\" aria-hidden=\"true\" />\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-stepper {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * A horizontal stepper is a size container, which is what lets it shorten its labels below a\n   * width. It therefore takes its width from its parent, never from its steps: in a row, give it\n   * a `flex` basis of its own.\n   */\n  .v-stepper[data-orientation='horizontal'] {\n    container-type: inline-size;\n    container-name: v-stepper;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-stepper-step {\n    display: flex;\n    min-inline-size: 0;\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step {\n    flex: 1 1 auto;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step:last-child {\n    flex: none;\n  }\n\n  .v-stepper[data-orientation='vertical'] > .v-stepper-step {\n    flex-direction: column;\n  }\n\n  /* The circle is centred on the text beside it, a title alone or with its description. */\n  .v-stepper-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n    padding: var(--vectis-space-1);\n    border: none;\n    border-radius: var(--vectis-radius-interactive);\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: start;\n  }\n\n  button.v-stepper-trigger {\n    cursor: pointer;\n  }\n\n  button.v-stepper-trigger:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  button.v-stepper-trigger: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  .v-stepper-indicator {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n\n    display: grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-control-size-stepper-indicator);\n    block-size: var(--vectis-control-size-stepper-indicator);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-stepper-text {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-stepper-title {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-stepper-description {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n  }\n\n  .v-stepper-step:is([data-state='active'], [data-state='completed']) .v-stepper-title {\n    color: var(--vectis-color-text);\n  }\n\n  .v-stepper-step[data-state='active'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent);\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='completed'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent-border);\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-indicator {\n    border-color: var(--vectis-color-danger);\n    background: var(--vectis-color-danger);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-title {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* Last of the colour rules, so that a disabled step reads as such whatever its state. */\n  .v-stepper-step[data-disabled] .v-stepper-title,\n  .v-stepper-step[data-disabled] .v-stepper-indicator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* A border rather than a fill draws the line, which forced colours keep. */\n  .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-border);\n\n    flex: 1 1 var(--vectis-control-size-stepper-connector-min);\n  }\n\n  /* The line leaving a step that is done is drawn in the accent: the path walked so far. */\n  .v-stepper-step[data-state='completed'] > .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-accent);\n  }\n\n  .v-stepper[data-orientation='horizontal'] .v-stepper-connector {\n    min-inline-size: var(--vectis-control-size-stepper-connector-min);\n    border-block-start: 1px solid var(--stepper-connector-color);\n  }\n\n  /* Down the indicator's centre, from one circle to the next. */\n  .v-stepper[data-orientation='vertical'] .v-stepper-connector {\n    min-block-size: var(--vectis-control-size-stepper-connector-min);\n    border-inline-start: 1px solid var(--stepper-connector-color);\n    margin-block: var(--vectis-space-1);\n    margin-inline-start: calc(\n      var(--vectis-space-1) + var(--vectis-control-size-stepper-indicator) / 2\n    );\n  }\n\n  /*\n   * Below this width, only the current step keeps its title on screen; the others keep their\n   * circles, and their titles stay readable by assistive technology. The threshold is a literal,\n   * a container query accepting no variables: about four steps with short titles fit above it.\n   */\n  @container v-stepper (max-width: 36rem) {\n    .v-stepper-step:not([data-active]) .v-stepper-text {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  }\n\n  /* The fills are dropped: the current step keeps a ring of its own. */\n  @media (forced-colors: active) {\n    .v-stepper-step[data-active] .v-stepper-indicator {\n      outline: 1px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VStepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VStepper/VStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * An ordered list of the steps of a process, the current one marked with `aria-current=\"step\"`.\n * It only shows where the reader stands: the content of each step is the consumer's, rendered\n * from the same model. Steps the reader may go back to are buttons; the others are plain text.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport { priority_high as priorityHighIcon } from '../VIcon/icons/priority_high'\nimport type { ItemValue } from '../../types'\nimport { useMessages } from '../../i18n/state'\n\n/** Whether the steps run across or down. */\nexport type StepperOrientation = 'horizontal' | 'vertical'\n\n/** How a step is drawn: done, current, in error, or still ahead. */\nexport type StepperStepState = 'completed' | 'active' | 'error' | 'upcoming'\n\n/** One step of the process. */\nexport interface StepperStep {\n  /** What the model holds while this step is current. */\n  value: ItemValue\n  /** The name of the step. */\n  title: string\n  /** A line under the title. */\n  description?: string\n  /** Marks the step as having a problem to fix. It wins over every other state. */\n  error?: boolean\n  /**\n   * Whether the step is done. Left out, the steps before the current one are done and the others\n   * are not.\n   */\n  completed?: boolean\n  /** Takes the step out of reach: it is never a button. */\n  disabled?: boolean\n}\n\n/** What the `#indicator` slot receives. */\nexport interface StepperIndicatorSlotProps {\n  step: StepperStep\n  /** The position of the step, from 0. */\n  index: number\n  state: StepperStepState\n}\n\ninterface StepperProps {\n  /** The steps, in order. */\n  steps: StepperStep[]\n  /** Whether the steps run across or down. */\n  orientation?: StepperOrientation\n  /**\n   * Makes every step that is not disabled a button. By default only the steps already reached\n   * are: the reader goes back freely, and forward only as far as they have been.\n   */\n  nonLinear?: boolean\n  /**\n   * What screen readers announce for the list of steps. It falls back to the design system\n   * dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<StepperProps>(), {\n  orientation: 'horizontal',\n  nonLinear: false,\n  label: undefined,\n})\n\n/** The value of the current step. Left out or unknown, the first step is current. */\nconst model = defineModel<ItemValue>()\n\ndefineSlots<{\n  /** Replaces what the circle of a step shows: its number, a tick or an exclamation mark. */\n  indicator?(props: StepperIndicatorSlotProps): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedLabel = computed(() => props.label ?? m.value.stepper.label)\n\nconst activeIndex = computed(() =>\n  Math.max(\n    0,\n    props.steps.findIndex((step) => step.value === model.value),\n  ),\n)\n\n// The furthest step reached so far: going back to the first step leaves the later ones open.\nconst furthest = ref(activeIndex.value)\nwatch(activeIndex, (index) => {\n  furthest.value = Math.max(furthest.value, index)\n})\n\nconst states = computed<StepperStepState[]>(() =>\n  props.steps.map((step, index) => {\n    if (step.error) return 'error'\n    if (index === activeIndex.value) return 'active'\n    return (step.completed ?? index < activeIndex.value) ? 'completed' : 'upcoming'\n  }),\n)\n\nfunction reachable(step: StepperStep, index: number) {\n  if (step.disabled) return false\n  return props.nonLinear || index <= Math.max(furthest.value, activeIndex.value)\n}\n\nfunction select(step: StepperStep) {\n  model.value = step.value\n}\n</script>\n\n<template>\n  <ol class=\"v-stepper\" :data-orientation=\"orientation\" :aria-label=\"resolvedLabel\">\n    <li\n      v-for=\"(step, index) in steps\"\n      :key=\"step.value\"\n      class=\"v-stepper-step\"\n      :data-state=\"states[index]\"\n      :data-active=\"index === activeIndex ? '' : undefined\"\n      :data-disabled=\"step.disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"reachable(step, index) ? 'button' : 'span'\"\n        :type=\"reachable(step, index) ? 'button' : undefined\"\n        class=\"v-stepper-trigger\"\n        :aria-current=\"index === activeIndex ? 'step' : undefined\"\n        @click=\"reachable(step, index) && select(step)\"\n      >\n        <span class=\"v-stepper-indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\" :step=\"step\" :index=\"index\" :state=\"states[index]!\">\n            <VIcon v-if=\"states[index] === 'completed'\" :name=\"checkIcon\" />\n            <VIcon v-else-if=\"states[index] === 'error'\" :name=\"priorityHighIcon\" />\n            <template v-else>{{ index + 1 }}</template>\n          </slot>\n        </span>\n        <span class=\"v-stepper-text\">\n          <span class=\"v-stepper-title\">{{ step.title }}</span>\n          <span v-if=\"step.description\" class=\"v-stepper-description\">\n            {{ step.description }}\n          </span>\n          <!-- The tick and the exclamation mark are hidden: their meaning is said in words. -->\n          <span v-if=\"states[index] === 'completed'\" class=\"v-visually-hidden\">\n            {{ m.stepper.completed }}\n          </span>\n          <span v-else-if=\"states[index] === 'error'\" class=\"v-visually-hidden\">\n            {{ m.stepper.error }}\n          </span>\n        </span>\n      </component>\n      <span v-if=\"index < steps.length - 1\" class=\"v-stepper-connector\" aria-hidden=\"true\" />\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-stepper {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * A horizontal stepper is a size container, which is what lets it shorten its labels below a\n   * width. It therefore takes its width from its parent, never from its steps: in a row, give it\n   * a `flex` basis of its own.\n   */\n  .v-stepper[data-orientation='horizontal'] {\n    container-type: inline-size;\n    container-name: v-stepper;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-stepper-step {\n    display: flex;\n    min-inline-size: 0;\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step {\n    flex: 1 1 auto;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step:last-child {\n    flex: none;\n  }\n\n  .v-stepper[data-orientation='vertical'] > .v-stepper-step {\n    flex-direction: column;\n  }\n\n  /* The circle is centred on the text beside it, a title alone or with its description. */\n  .v-stepper-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n    padding: var(--vectis-space-1);\n    border: none;\n    border-radius: var(--vectis-radius-interactive);\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: start;\n  }\n\n  button.v-stepper-trigger {\n    cursor: pointer;\n  }\n\n  button.v-stepper-trigger:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  button.v-stepper-trigger: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  .v-stepper-indicator {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n\n    display: grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-control-size-stepper-indicator);\n    block-size: var(--vectis-control-size-stepper-indicator);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-stepper-text {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-stepper-title {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-stepper-description {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n  }\n\n  .v-stepper-step:is([data-state='active'], [data-state='completed']) .v-stepper-title {\n    color: var(--vectis-color-text);\n  }\n\n  .v-stepper-step[data-state='active'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent);\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='completed'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent-border);\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-indicator {\n    border-color: var(--vectis-color-danger);\n    background: var(--vectis-color-danger);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-title {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* Last of the colour rules, so that a disabled step reads as such whatever its state. */\n  .v-stepper-step[data-disabled] .v-stepper-title,\n  .v-stepper-step[data-disabled] .v-stepper-indicator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* A border rather than a fill draws the line, which forced colours keep. */\n  .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-border);\n\n    flex: 1 1 var(--vectis-control-size-stepper-connector-min);\n  }\n\n  /* The line leaving a step that is done is drawn in the accent: the path walked so far. */\n  .v-stepper-step[data-state='completed'] > .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-accent);\n  }\n\n  .v-stepper[data-orientation='horizontal'] .v-stepper-connector {\n    min-inline-size: var(--vectis-control-size-stepper-connector-min);\n    border-block-start: 1px solid var(--stepper-connector-color);\n  }\n\n  /* Down the indicator's centre, from one circle to the next. */\n  .v-stepper[data-orientation='vertical'] .v-stepper-connector {\n    min-block-size: var(--vectis-control-size-stepper-connector-min);\n    border-inline-start: 1px solid var(--stepper-connector-color);\n    margin-block: var(--vectis-space-1);\n    margin-inline-start: calc(\n      var(--vectis-space-1) + var(--vectis-control-size-stepper-indicator) / 2\n    );\n  }\n\n  /*\n   * Below this width, only the current step keeps its title on screen; the others keep their\n   * circles, and their titles stay readable by assistive technology. The threshold is a literal,\n   * a container query accepting no variables: about four steps with short titles fit above it.\n   */\n  @container v-stepper (max-width: 36rem) {\n    .v-stepper-step:not([data-active]) .v-stepper-text {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  }\n\n  /* The fills are dropped: the current step keeps a ring of its own. */\n  @media (forced-colors: active) {\n    .v-stepper-step[data-active] .v-stepper-indicator {\n      outline: 1px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEA,IAAM,IAAQ,GAOR,IAAQ,EAAsB,GAAA,YAAC,GAO/B,IAAI,EAAY,GAChB,IAAgB,QAAe,EAAM,SAAS,EAAE,MAAM,QAAQ,KAAK,GAEnE,IAAc,QAClB,KAAK,IACH,GACA,EAAM,MAAM,WAAW,MAAS,EAAK,UAAU,EAAM,KAAK,CAC5D,CACF,GAGM,IAAW,EAAI,EAAY,KAAK;EACtC,EAAM,IAAc,MAAU;GAC5B,EAAS,QAAQ,KAAK,IAAI,EAAS,OAAO,CAAK;EACjD,CAAC;EAED,IAAM,IAAS,QACb,EAAM,MAAM,KAAK,GAAM,MACjB,EAAK,QAAc,UACnB,MAAU,EAAY,QAAc,WAChC,EAAK,aAAa,IAAQ,EAAY,QAAS,cAAc,UACtE,CACH;EAEA,SAAS,EAAU,GAAmB,GAAe;GAEnD,OADI,EAAK,WAAiB,KACnB,EAAM,aAAa,KAAS,KAAK,IAAI,EAAS,OAAO,EAAY,KAAK;EAC/E;EAEA,SAAS,EAAO,GAAmB;GACjC,EAAM,QAAQ,EAAK;EACrB;yBAIE,EAuCK,MAAA;GAvCD,OAAM;GAAa,oBAAkB,EAAA;GAAc,cAAY,EAAA;cACjE,EAqCK,GAAA,MAAA,EApCqB,EAAA,QAAhB,GAAM,YADhB,EAqCK,MAAA;GAnCF,KAAK,EAAK;GACX,OAAM;GACL,cAAY,EAAA,MAAO;GACnB,eAAa,MAAU,EAAA,QAAW,KAAQ,KAAA;GAC1C,iBAAe,EAAK,WAAQ,KAAQ,KAAA;YAErC,EA2BY,EA1BL,EAAU,GAAM,CAAK,IAAA,WAAA,MAAA,GAAA;GACzB,MAAM,EAAU,GAAM,CAAK,IAAA,WAAe,KAAA;GAC3C,OAAM;GACL,gBAAc,MAAU,EAAA,QAAW,SAAY,KAAA;GAC/C,UAAK,MAAE,EAAU,GAAM,CAAK,KAAK,EAAO,CAAI;;oBAQtC,CANP,EAMO,QANP,GAMO,CALL,EAIO,EAAA,QAAA,aAAA;IAJuB;IAAc;IAAQ,OAAO,EAAA,MAAO;YAI3D,CAHQ,EAAA,MAAO,OAAK,eAAA,EAAA,GAAzB,EAAgE,GAAA;;IAAnB,MAAM,EAAA,CAAA;4BACjC,EAAA,MAAO,OAAK,WAAA,EAAA,GAA9B,EAAwE,GAAA;;IAA1B,MAAM,EAAA,CAAA;kCACpD,EAA2C,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAAvB,IAAK,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,CAAA,GAG7B,EAYO,QAZP,GAYO;IAXL,EAAqD,QAArD,GAAqD,EAApB,EAAK,KAAK,GAAA,CAAA;IAC/B,EAAK,eAAA,EAAA,GAAjB,EAEO,QAFP,GAEO,EADF,EAAK,WAAW,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAGT,EAAA,MAAO,OAAK,eAAA,EAAA,GAAxB,EAEO,QAFP,GAEO,EADF,EAAA,CAAA,CAAC,CAAC,QAAQ,SAAS,GAAA,CAAA,KAEP,EAAA,MAAO,OAAK,WAAA,EAAA,GAA7B,EAEO,QAFP,GAEO,EADF,EAAA,CAAA,CAAC,CAAC,QAAQ,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;;;;;;OAIZ,IAAQ,EAAA,MAAM,SAAM,KAAA,EAAA,GAAhC,EAAuF,QAAvF,CAAuF,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VStepper.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_withCtx","_createElementVNode","_renderSlot","VIcon","_unref","checkIcon","priorityHighIcon","_createTextVNode","_toDisplayString","_createCommentVNode","VIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","VStepper_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","m","useMessages","resolvedLabel","computed","activeIndex","step","furthest","ref","index","states","reachable","select","openBlock","createElementBlock","Fragment","renderList","createBlock","resolveDynamicComponent","withCtx","createElementVNode","renderSlot","_ctx","unref","check","priority_high","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/VStepper/VStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * An ordered list of the steps of a process, the current one marked with `aria-current=\"step\"`.\n * It only shows where the reader stands: the content of each step is the consumer's, rendered\n * from the same model. Steps the reader may go back to are buttons; the others are plain text.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport { priority_high as priorityHighIcon } from '../VIcon/icons/priority_high'\nimport type { ItemValue } from '../../types'\nimport { useMessages } from '../../i18n/state'\n\n/** Whether the steps run across or down. */\nexport type StepperOrientation = 'horizontal' | 'vertical'\n\n/** How a step is drawn: done, current, in error, or still ahead. */\nexport type StepperStepState = 'completed' | 'active' | 'error' | 'upcoming'\n\n/** One step of the process. */\nexport interface StepperStep {\n  /** What the model holds while this step is current. */\n  value: ItemValue\n  /** The name of the step. */\n  title: string\n  /** A line under the title. */\n  description?: string\n  /** Marks the step as having a problem to fix. It wins over every other state. */\n  error?: boolean\n  /**\n   * Whether the step is done. Left out, the steps before the current one are done and the others\n   * are not.\n   */\n  completed?: boolean\n  /** Takes the step out of reach: it is never a button. */\n  disabled?: boolean\n}\n\n/** What the `#indicator` slot receives. */\nexport interface StepperIndicatorSlotProps {\n  step: StepperStep\n  /** The position of the step, from 0. */\n  index: number\n  state: StepperStepState\n}\n\ninterface StepperProps {\n  /** The steps, in order. */\n  steps: StepperStep[]\n  /** Whether the steps run across or down. */\n  orientation?: StepperOrientation\n  /**\n   * Makes every step that is not disabled a button. By default only the steps already reached\n   * are: the reader goes back freely, and forward only as far as they have been.\n   */\n  nonLinear?: boolean\n  /**\n   * What screen readers announce for the list of steps. It falls back to the design system\n   * dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<StepperProps>(), {\n  orientation: 'horizontal',\n  nonLinear: false,\n  label: undefined,\n})\n\n/** The value of the current step. Left out or unknown, the first step is current. */\nconst model = defineModel<ItemValue>()\n\ndefineSlots<{\n  /** Replaces what the circle of a step shows: its number, a tick or an exclamation mark. */\n  indicator?(props: StepperIndicatorSlotProps): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedLabel = computed(() => props.label ?? m.value.stepper.label)\n\nconst activeIndex = computed(() =>\n  Math.max(\n    0,\n    props.steps.findIndex((step) => step.value === model.value),\n  ),\n)\n\n// The furthest step reached so far: going back to the first step leaves the later ones open.\nconst furthest = ref(activeIndex.value)\nwatch(activeIndex, (index) => {\n  furthest.value = Math.max(furthest.value, index)\n})\n\nconst states = computed<StepperStepState[]>(() =>\n  props.steps.map((step, index) => {\n    if (step.error) return 'error'\n    if (index === activeIndex.value) return 'active'\n    return (step.completed ?? index < activeIndex.value) ? 'completed' : 'upcoming'\n  }),\n)\n\nfunction reachable(step: StepperStep, index: number) {\n  if (step.disabled) return false\n  return props.nonLinear || index <= Math.max(furthest.value, activeIndex.value)\n}\n\nfunction select(step: StepperStep) {\n  model.value = step.value\n}\n</script>\n\n<template>\n  <ol class=\"v-stepper\" :data-orientation=\"orientation\" :aria-label=\"resolvedLabel\">\n    <li\n      v-for=\"(step, index) in steps\"\n      :key=\"step.value\"\n      class=\"v-stepper-step\"\n      :data-state=\"states[index]\"\n      :data-active=\"index === activeIndex ? '' : undefined\"\n      :data-disabled=\"step.disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"reachable(step, index) ? 'button' : 'span'\"\n        :type=\"reachable(step, index) ? 'button' : undefined\"\n        class=\"v-stepper-trigger\"\n        :aria-current=\"index === activeIndex ? 'step' : undefined\"\n        @click=\"reachable(step, index) && select(step)\"\n      >\n        <span class=\"v-stepper-indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\" :step=\"step\" :index=\"index\" :state=\"states[index]!\">\n            <VIcon v-if=\"states[index] === 'completed'\" :name=\"checkIcon\" />\n            <VIcon v-else-if=\"states[index] === 'error'\" :name=\"priorityHighIcon\" />\n            <template v-else>{{ index + 1 }}</template>\n          </slot>\n        </span>\n        <span class=\"v-stepper-text\">\n          <span class=\"v-stepper-title\">{{ step.title }}</span>\n          <span v-if=\"step.description\" class=\"v-stepper-description\">\n            {{ step.description }}\n          </span>\n          <!-- The tick and the exclamation mark are hidden: their meaning is said in words. -->\n          <span v-if=\"states[index] === 'completed'\" class=\"v-visually-hidden\">\n            {{ m.stepper.completed }}\n          </span>\n          <span v-else-if=\"states[index] === 'error'\" class=\"v-visually-hidden\">\n            {{ m.stepper.error }}\n          </span>\n        </span>\n      </component>\n      <span v-if=\"index < steps.length - 1\" class=\"v-stepper-connector\" aria-hidden=\"true\" />\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-stepper {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * A horizontal stepper is a size container, which is what lets it shorten its labels below a\n   * width. It therefore takes its width from its parent, never from its steps: in a row, give it\n   * a `flex` basis of its own.\n   */\n  .v-stepper[data-orientation='horizontal'] {\n    container-type: inline-size;\n    container-name: v-stepper;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-stepper-step {\n    display: flex;\n    min-inline-size: 0;\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step {\n    flex: 1 1 auto;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-stepper[data-orientation='horizontal'] > .v-stepper-step:last-child {\n    flex: none;\n  }\n\n  .v-stepper[data-orientation='vertical'] > .v-stepper-step {\n    flex-direction: column;\n  }\n\n  /* The circle is centred on the text beside it, a title alone or with its description. */\n  .v-stepper-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n    padding: var(--vectis-space-1);\n    border: none;\n    border-radius: var(--vectis-radius-interactive);\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: start;\n  }\n\n  button.v-stepper-trigger {\n    cursor: pointer;\n  }\n\n  button.v-stepper-trigger:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  button.v-stepper-trigger: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  .v-stepper-indicator {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n\n    display: grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-control-size-stepper-indicator);\n    block-size: var(--vectis-control-size-stepper-indicator);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-stepper-text {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .v-stepper-title {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-stepper-description {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n  }\n\n  .v-stepper-step:is([data-state='active'], [data-state='completed']) .v-stepper-title {\n    color: var(--vectis-color-text);\n  }\n\n  .v-stepper-step[data-state='active'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent);\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='completed'] .v-stepper-indicator {\n    border-color: var(--vectis-color-accent-border);\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-indicator {\n    border-color: var(--vectis-color-danger);\n    background: var(--vectis-color-danger);\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  .v-stepper-step[data-state='error'] .v-stepper-title {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* Last of the colour rules, so that a disabled step reads as such whatever its state. */\n  .v-stepper-step[data-disabled] .v-stepper-title,\n  .v-stepper-step[data-disabled] .v-stepper-indicator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* A border rather than a fill draws the line, which forced colours keep. */\n  .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-border);\n\n    flex: 1 1 var(--vectis-control-size-stepper-connector-min);\n  }\n\n  /* The line leaving a step that is done is drawn in the accent: the path walked so far. */\n  .v-stepper-step[data-state='completed'] > .v-stepper-connector {\n    --stepper-connector-color: var(--vectis-color-accent);\n  }\n\n  .v-stepper[data-orientation='horizontal'] .v-stepper-connector {\n    min-inline-size: var(--vectis-control-size-stepper-connector-min);\n    border-block-start: 1px solid var(--stepper-connector-color);\n  }\n\n  /* Down the indicator's centre, from one circle to the next. */\n  .v-stepper[data-orientation='vertical'] .v-stepper-connector {\n    min-block-size: var(--vectis-control-size-stepper-connector-min);\n    border-inline-start: 1px solid var(--stepper-connector-color);\n    margin-block: var(--vectis-space-1);\n    margin-inline-start: calc(\n      var(--vectis-space-1) + var(--vectis-control-size-stepper-indicator) / 2\n    );\n  }\n\n  /*\n   * Below this width, only the current step keeps its title on screen; the others keep their\n   * circles, and their titles stay readable by assistive technology. The threshold is a literal,\n   * a container query accepting no variables: about four steps with short titles fit above it.\n   */\n  @container v-stepper (max-width: 36rem) {\n    .v-stepper-step:not([data-active]) .v-stepper-text {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  }\n\n  /* The fills are dropped: the current step keeps a ring of its own. */\n  @media (forced-colors: active) {\n    .v-stepper-step[data-active] .v-stepper-indicator {\n      outline: 1px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEA,IAAM8B,IAAQC,GAORC,IAAQhC,EAAsB+B,GAAA,YAAC,GAO/BG,IAAIC,EAAY,GAChBC,IAAgBC,QAAeP,EAAM,SAASI,EAAE,MAAM,QAAQ,KAAK,GAEnEI,IAAcD,QAClB,KAAK,IACH,GACAP,EAAM,MAAM,WAAW,MAASS,EAAK,UAAUP,EAAM,KAAK,CAC5D,CACF,GAGMQ,IAAWC,EAAIH,EAAY,KAAK;EACtC,EAAMA,IAAc,MAAU;GAC5B,EAAS,QAAQ,KAAK,IAAIE,EAAS,OAAOE,CAAK;EACjD,CAAC;EAED,IAAMC,IAASN,QACbP,EAAM,MAAM,KAAK,GAAM,MACjBS,EAAK,QAAc,UACnBG,MAAUJ,EAAY,QAAc,WAChCC,EAAK,aAAaG,IAAQJ,EAAY,QAAS,cAAc,UACtE,CACH;EAEA,SAASM,EAAU,GAAmB,GAAe;GAEnD,OADIL,EAAK,WAAiB,KACnBT,EAAM,aAAaY,KAAS,KAAK,IAAIF,EAAS,OAAOF,EAAY,KAAK;EAC/E;EAEA,SAASO,EAAO,GAAmB;GACjC,EAAM,QAAQN,EAAK;EACrB;oBAIEtC,EAAA,GAAAC,EAuCK,MAAA;GAvCD,OAAM;GAAa,oBAAkB6B,EAAA;GAAc,cAAYK,EAAA;EACjEnC,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAqCKC,GAAA,MAAAC,EApCqB2B,EAAA,QAAhB,GAAM,OADhB9B,EAAA,GAAAC,EAqCK,MAAA;GAnCF,KAAKqC,EAAK;GACX,OAAM;GACL,cAAYI,EAAA,MAAOD;GACnB,eAAaA,MAAUJ,EAAA,QAAW,KAAQ,KAAA;GAC1C,iBAAeC,EAAK,WAAQ,KAAQ,KAAA;EAErCtC,GAAAA,EAAAA,EAAA,GAAAI,EA2BYC,EA1BLsC,EAAUL,GAAMG,CAAK,IAAA,WAAA,MAAA,GAAA;GACzB,MAAME,EAAUL,GAAMG,CAAK,IAAA,WAAe,KAAA;GAC3C,OAAM;GACL,gBAAcA,MAAUJ,EAAA,QAAW,SAAY,KAAA;GAC/C,UAAK,MAAEM,EAAUL,GAAMG,CAAK,KAAKG,EAAON,CAAI;;GAE7C,SAAAhC,QAMO,CANPC,EAMO,QANPY,GAMO,CALLX,EAIO8C,EAAA,QAAA,aAAA;IAJuB;IAAc;IAAQ,OAAOZ,EAAA,MAAOD;GAAlE,SAIO,CAHQC,EAAA,MAAOD,OAAK,eAAzBzC,EAAA,GAAAI,EAAgEK,GAAA;;IAAnB,MAAMC,EAAAC,CAAA;GACjC,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,KAAA+B,EAAA,MAAOD,OAAK,WAA9BzC,EAAA,GAAAI,EAAwEK,GAAA;;IAA1B,MAAMC,EAAAE,CAAA;GACpDZ,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,EAAA,GAAAC,EAA2CC,GAAA,EAAA,KAAA,EAAA,GAAA,CAAvBW,EAAAC,EAAA2B,IAAK,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,CAAA,GAG7BlC,EAYO,QAZPa,GAYO;IAXLb,EAAqD,QAArDc,GAAqDP,EAApBwB,EAAK,KAAK,GAAA,CAAA;IAC/BA,EAAK,eAAjBtC,EAAA,GAAAC,EAEO,QAFPqB,GAEOR,EADFwB,EAAK,WAAW,GAAA,CAAA,KAAAsB,EAAA,IAAA,EAAA;IAGTlB,EAAA,MAAOD,OAAK,eAAxBzC,EAAA,GAAAC,EAEO,QAFPsB,GAEOT,EADFJ,EAAAuB,CAAA,CAAC,CAAC,QAAQ,SAAS,GAAA,CAAA,KAEPS,EAAA,MAAOD,OAAK,WAA7BzC,EAAA,GAAAC,EAEO,QAFPuB,GAEOV,EADFJ,EAAAuB,CAAA,CAAC,CAAC,QAAQ,KAAK,GAAA,CAAA,KAAA2B,EAAA,IAAA,EAAA;;;;;;;EAIZ,CAAA,IAAAnB,IAAQX,EAAA,MAAM,SAAM,KAAhC9B,EAAA,GAAAC,EAAuF,QAAvFwB,CAAuF,KAAAmC,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA1C,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.js","names":[],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native checkbox beneath switch styling for focus, forms and keyboard activation.\n * Keep the hint outside its accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which rings the track and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the setting without allowing it to be changed. The switch can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\ndefineExpose(exposed)\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        :aria-invalid=\"invalid || !!error || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-switch-track\" aria-hidden=\"true\">\n        <span class=\"v-switch-thumb\" />\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-switch-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Compounded with `.v-choice`, which sits on this element at the same (0,1,0) in another\n   * sheet: at equal weight the winner would depend on the order a bundler emits the sheets.\n   */\n  .v-choice.v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: var(--vectis-control-size-switch-pad);\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    inline-size: var(--switch-track-w);\n    block-size: var(--switch-track-h);\n    padding: var(--switch-pad);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    inline-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    block-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-text-on-accent);\n    border-radius: var(--vectis-radius-pill);\n    box-shadow: var(--vectis-shadow-xs);\n    /*\n     * Move the thumb with logical margin so RTL reverses travel without a separate transform\n     * rule.\n     */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  /*\n   * Both are needed, or a list of switches that are all on answers the pointer nowhere and a\n   * live one cannot be told from a frozen one. Unlike its two siblings these exclude no invalid\n   * state, and they must not: an invalid switch is RINGED rather than tinted, so the hover\n   * repaints a property the invalid rule never touches and the two states simply add up.\n   */\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled, :checked)\n    + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled):checked\n    + .v-switch-track {\n    background: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * Its width is the same token the other two give their border, so a consumer who thickens\n   * their controls thickens all three; the focus outline then starts where the ring ends, at\n   * its own offset, and the two never sit on the same pixels.\n   */\n  .v-switch-input:user-invalid + .v-switch-track,\n  .v-switch-input[aria-invalid='true'] + .v-switch-track {\n    box-shadow: 0 0 0 var(--vectis-control-border-width) var(--vectis-color-danger);\n  }\n\n  /*\n   * Read-only, and it has to say so whichever way the switch is pointing. An OFF switch sinks\n   * like a read-only checkbox; `surface-sunken` behind the 1px `border` ring the box and the\n   * dot draw as a real border, which a track has nowhere to put but inside itself; and its\n   * thumb takes the muted text colour, white being invisible on that pale track.\n   */\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track {\n    background: var(--vectis-color-surface-sunken);\n    box-shadow: inset 0 0 0 var(--vectis-control-border-width) var(--vectis-color-border);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-muted);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-text-muted);\n    box-shadow: none;\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-surface);\n  }\n\n  /*\n   * The thumb takes text-subtle; the colour VCheckbox's disabled tick and VRadio's disabled dot\n   * take; which keeps it visible against the grey track in both themes. The greying of the row\n   * itself comes from `.v-choice`.\n   */\n  /*\n   * A checkbox draws both its invalid verdict and its read-only sink with `border-color`, so\n   * its disabled rule overwrites them by naming the same property; here they are shadows, and\n   * left standing a disabled switch would go on wearing a danger ring around a grey track\n   * nobody can act on.\n   */\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n    box-shadow: none;\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  /*\n   * The classes are repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n   * cannot repaint the track: `forced-color-adjust: none` takes the forcing off it, and a hover\n   * left winning would then paint its real colour over the system one.\n   */\n  @media (forced-colors: active) {\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input + .v-switch-track {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input\n      + .v-switch-track\n      .v-switch-thumb {\n      forced-color-adjust: none;\n      background: CanvasText;\n      box-shadow: none;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track {\n      background: Highlight;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) Highlight;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track\n      .v-switch-thumb {\n      background: HighlightText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track {\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) GrayText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track\n      .v-switch-thumb {\n      background: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSwitch.js","names":["_sfc_main","VSwitch_vue_vue_type_script_setup_true_lang_default","VSwitch_default"],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native checkbox beneath switch styling for focus, forms and keyboard activation.\n * Keep the hint outside its accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which rings the track and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the setting without allowing it to be changed. The switch can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\ndefineExpose(exposed)\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        :aria-invalid=\"invalid || !!error || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-switch-track\" aria-hidden=\"true\">\n        <span class=\"v-switch-thumb\" />\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-switch-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Compounded with `.v-choice`, which sits on this element at the same (0,1,0) in another\n   * sheet: at equal weight the winner would depend on the order a bundler emits the sheets.\n   */\n  .v-choice.v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: var(--vectis-control-size-switch-pad);\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    inline-size: var(--switch-track-w);\n    block-size: var(--switch-track-h);\n    padding: var(--switch-pad);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    inline-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    block-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-text-on-accent);\n    border-radius: var(--vectis-radius-pill);\n    box-shadow: var(--vectis-shadow-xs);\n    /*\n     * Move the thumb with logical margin so RTL reverses travel without a separate transform\n     * rule.\n     */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  /*\n   * Both are needed, or a list of switches that are all on answers the pointer nowhere and a\n   * live one cannot be told from a frozen one. Unlike its two siblings these exclude no invalid\n   * state, and they must not: an invalid switch is RINGED rather than tinted, so the hover\n   * repaints a property the invalid rule never touches and the two states simply add up.\n   */\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled, :checked)\n    + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled):checked\n    + .v-switch-track {\n    background: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * Its width is the same token the other two give their border, so a consumer who thickens\n   * their controls thickens all three; the focus outline then starts where the ring ends, at\n   * its own offset, and the two never sit on the same pixels.\n   */\n  .v-switch-input:user-invalid + .v-switch-track,\n  .v-switch-input[aria-invalid='true'] + .v-switch-track {\n    box-shadow: 0 0 0 var(--vectis-control-border-width) var(--vectis-color-danger);\n  }\n\n  /*\n   * Read-only, and it has to say so whichever way the switch is pointing. An OFF switch sinks\n   * like a read-only checkbox; `surface-sunken` behind the 1px `border` ring the box and the\n   * dot draw as a real border, which a track has nowhere to put but inside itself; and its\n   * thumb takes the muted text colour, white being invisible on that pale track.\n   */\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track {\n    background: var(--vectis-color-surface-sunken);\n    box-shadow: inset 0 0 0 var(--vectis-control-border-width) var(--vectis-color-border);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-muted);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-text-muted);\n    box-shadow: none;\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-surface);\n  }\n\n  /*\n   * The thumb takes text-subtle; the colour VCheckbox's disabled tick and VRadio's disabled dot\n   * take; which keeps it visible against the grey track in both themes. The greying of the row\n   * itself comes from `.v-choice`.\n   */\n  /*\n   * A checkbox draws both its invalid verdict and its read-only sink with `border-color`, so\n   * its disabled rule overwrites them by naming the same property; here they are shadows, and\n   * left standing a disabled switch would go on wearing a danger ring around a grey track\n   * nobody can act on.\n   */\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n    box-shadow: none;\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  /*\n   * The classes are repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n   * cannot repaint the track: `forced-color-adjust: none` takes the forcing off it, and a hover\n   * left winning would then paint its real colour over the system one.\n   */\n  @media (forced-colors: active) {\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input + .v-switch-track {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input\n      + .v-switch-track\n      .v-switch-thumb {\n      forced-color-adjust: none;\n      background: CanvasText;\n      box-shadow: none;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track {\n      background: Highlight;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) Highlight;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track\n      .v-switch-thumb {\n      background: HighlightText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track {\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) GrayText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track\n      .v-switch-thumb {\n      background: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native checkbox beneath switch styling for focus, forms and keyboard activation.\n * Keep the hint outside its accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which rings the track and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the setting without allowing it to be changed. The switch can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\ndefineExpose(exposed)\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        :aria-invalid=\"invalid || !!error || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-switch-track\" aria-hidden=\"true\">\n        <span class=\"v-switch-thumb\" />\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-switch-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Compounded with `.v-choice`, which sits on this element at the same (0,1,0) in another\n   * sheet: at equal weight the winner would depend on the order a bundler emits the sheets.\n   */\n  .v-choice.v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: var(--vectis-control-size-switch-pad);\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    inline-size: var(--switch-track-w);\n    block-size: var(--switch-track-h);\n    padding: var(--switch-pad);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    inline-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    block-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-text-on-accent);\n    border-radius: var(--vectis-radius-pill);\n    box-shadow: var(--vectis-shadow-xs);\n    /*\n     * Move the thumb with logical margin so RTL reverses travel without a separate transform\n     * rule.\n     */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  /*\n   * Both are needed, or a list of switches that are all on answers the pointer nowhere and a\n   * live one cannot be told from a frozen one. Unlike its two siblings these exclude no invalid\n   * state, and they must not: an invalid switch is RINGED rather than tinted, so the hover\n   * repaints a property the invalid rule never touches and the two states simply add up.\n   */\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled, :checked)\n    + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled):checked\n    + .v-switch-track {\n    background: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * Its width is the same token the other two give their border, so a consumer who thickens\n   * their controls thickens all three; the focus outline then starts where the ring ends, at\n   * its own offset, and the two never sit on the same pixels.\n   */\n  .v-switch-input:user-invalid + .v-switch-track,\n  .v-switch-input[aria-invalid='true'] + .v-switch-track {\n    box-shadow: 0 0 0 var(--vectis-control-border-width) var(--vectis-color-danger);\n  }\n\n  /*\n   * Read-only, and it has to say so whichever way the switch is pointing. An OFF switch sinks\n   * like a read-only checkbox; `surface-sunken` behind the 1px `border` ring the box and the\n   * dot draw as a real border, which a track has nowhere to put but inside itself; and its\n   * thumb takes the muted text colour, white being invisible on that pale track.\n   */\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track {\n    background: var(--vectis-color-surface-sunken);\n    box-shadow: inset 0 0 0 var(--vectis-control-border-width) var(--vectis-color-border);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-muted);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-text-muted);\n    box-shadow: none;\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-surface);\n  }\n\n  /*\n   * The thumb takes text-subtle; the colour VCheckbox's disabled tick and VRadio's disabled dot\n   * take; which keeps it visible against the grey track in both themes. The greying of the row\n   * itself comes from `.v-choice`.\n   */\n  /*\n   * A checkbox draws both its invalid verdict and its read-only sink with `border-color`, so\n   * its disabled rule overwrites them by naming the same property; here they are shadows, and\n   * left standing a disabled switch would go on wearing a danger ring around a grey track\n   * nobody can act on.\n   */\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n    box-shadow: none;\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  /*\n   * The classes are repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n   * cannot repaint the track: `forced-color-adjust: none` takes the forcing off it, and a hover\n   * left winning would then paint its real colour over the system one.\n   */\n  @media (forced-colors: active) {\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input + .v-switch-track {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input\n      + .v-switch-track\n      .v-switch-thumb {\n      forced-color-adjust: none;\n      background: CanvasText;\n      box-shadow: none;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track {\n      background: Highlight;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) Highlight;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track\n      .v-switch-thumb {\n      background: HighlightText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track {\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) GrayText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track\n      .v-switch-thumb {\n      background: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,EACJ,cACA,cACA,mBACA,WACA,YACA,gBACA,YACA,uBACA,eACE,EAAU,CAAK,GAGb,IAAQ,EAAoB,GAAA,YAAmB;SAOrD,EAAa,CAAO,mBAIlB,EA+BO,QAAA;GA9BL,OAAK,EAAA,CAAC,qBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,eAAa,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;GAEhC,EAoBQ,SApBR,GAoBQ;MAnBN,EAYE,SAZF,EAYE;cAXI;KAAJ,KAAI;8CACU,QAAA;KACd,MAAK;KACL,MAAK;KACL,OAAM;KACL,gBAAc,EAAA,WAAO,CAAA,CAAM,EAAA,SAAS,KAAA;KACpC,iBAAe,EAAA,YAAY,KAAA;OACpB,EAAA,CAAA,GAAc;KACrB,UAAU,EAAA;KACV,oBAAkB,EAAA,CAAA;KAClB,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;2BATC,EAAA,KAAK,CAAA,CAAA;aAWhB,EAEO,QAAA;KAFD,OAAM;KAAiB,eAAY;QACvC,EAA+B,QAAA,EAAzB,OAAM,iBAAgB,CAAA,CAAA,GAAA,EAAA;IAElBA,EAAAA,OAAO,WAAW,EAAA,SAAA,EAAA,GAA9B,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAGlB,EAAmF,GAAA;IAAnE,MAAM,EAAA;IAAO,OAAO,EAAA;IAAQ,WAAS,EAAA,CAAA;IAAS,YAAU,EAAA,CAAA;;;;;;;GACxE,EAAiC,GAAA,EAAf,MAAM,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}
+{"version":3,"file":"VSwitch.vue_vue_type_script_setup_true_lang.js","names":["$slots","props","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_withDirectives","_mergeProps","_vModelCheckbox","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","VFieldMessage","VFieldAnnouncer","VFieldAnnouncer_default","VFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","VSwitch_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","useChoice","__props","model","useModel","exposed","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","createElementVNode","withDirectives","mergeProps","inputEl","_cache","$event","forwardedAttrs","describedBy","args","refuseWhenReadonly","vModelCheckbox","_ctx","renderSlot","createTextVNode","toDisplayString","createCommentVNode","createVNode","hintId","errorId"],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native checkbox beneath switch styling for focus, forms and keyboard activation.\n * Keep the hint outside its accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which rings the track and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the setting without allowing it to be changed. The switch can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\ndefineExpose(exposed)\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        :aria-invalid=\"invalid || !!error || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-switch-track\" aria-hidden=\"true\">\n        <span class=\"v-switch-thumb\" />\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-switch-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Compounded with `.v-choice`, which sits on this element at the same (0,1,0) in another\n   * sheet: at equal weight the winner would depend on the order a bundler emits the sheets.\n   */\n  .v-choice.v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: var(--vectis-control-size-switch-pad);\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    inline-size: var(--switch-track-w);\n    block-size: var(--switch-track-h);\n    padding: var(--switch-pad);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    inline-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    block-size: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-text-on-accent);\n    border-radius: var(--vectis-radius-pill);\n    box-shadow: var(--vectis-shadow-xs);\n    /*\n     * Move the thumb with logical margin so RTL reverses travel without a separate transform\n     * rule.\n     */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  /*\n   * Both are needed, or a list of switches that are all on answers the pointer nowhere and a\n   * live one cannot be told from a frozen one. Unlike its two siblings these exclude no invalid\n   * state, and they must not: an invalid switch is RINGED rather than tinted, so the hover\n   * repaints a property the invalid rule never touches and the two states simply add up.\n   */\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled, :checked)\n    + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-switch:not([data-readonly])\n    .v-choice-row:hover\n    .v-switch-input:not(:disabled):checked\n    + .v-switch-track {\n    background: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * Its width is the same token the other two give their border, so a consumer who thickens\n   * their controls thickens all three; the focus outline then starts where the ring ends, at\n   * its own offset, and the two never sit on the same pixels.\n   */\n  .v-switch-input:user-invalid + .v-switch-track,\n  .v-switch-input[aria-invalid='true'] + .v-switch-track {\n    box-shadow: 0 0 0 var(--vectis-control-border-width) var(--vectis-color-danger);\n  }\n\n  /*\n   * Read-only, and it has to say so whichever way the switch is pointing. An OFF switch sinks\n   * like a read-only checkbox; `surface-sunken` behind the 1px `border` ring the box and the\n   * dot draw as a real border, which a track has nowhere to put but inside itself; and its\n   * thumb takes the muted text colour, white being invisible on that pale track.\n   */\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track {\n    background: var(--vectis-color-surface-sunken);\n    box-shadow: inset 0 0 0 var(--vectis-control-border-width) var(--vectis-color-border);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-muted);\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-text-muted);\n    box-shadow: none;\n  }\n\n  :where(.v-switch[data-readonly]) .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-surface);\n  }\n\n  /*\n   * The thumb takes text-subtle; the colour VCheckbox's disabled tick and VRadio's disabled dot\n   * take; which keeps it visible against the grey track in both themes. The greying of the row\n   * itself comes from `.v-choice`.\n   */\n  /*\n   * A checkbox draws both its invalid verdict and its read-only sink with `border-color`, so\n   * its disabled rule overwrites them by naming the same property; here they are shadows, and\n   * left standing a disabled switch would go on wearing a danger ring around a grey track\n   * nobody can act on.\n   */\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n    box-shadow: none;\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  /*\n   * The classes are repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n   * cannot repaint the track: `forced-color-adjust: none` takes the forcing off it, and a hover\n   * left winning would then paint its real colour over the system one.\n   */\n  @media (forced-colors: active) {\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input + .v-switch-track {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input\n      + .v-switch-track\n      .v-switch-thumb {\n      forced-color-adjust: none;\n      background: CanvasText;\n      box-shadow: none;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track {\n      background: Highlight;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) Highlight;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:checked:not(\n        :disabled\n      )\n      + .v-switch-track\n      .v-switch-thumb {\n      background: HighlightText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track {\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) GrayText;\n    }\n\n    .v-switch-input.v-switch-input.v-switch-input.v-switch-input.v-switch-input:disabled\n      + .v-switch-track\n      .v-switch-thumb {\n      background: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,EACJ,cACA,cACA,mBACA,WACA,YACA,gBACA,YACA,uBACA,eACE6B,EAAU5B,CAAK,GAGb8B,IAAQ7B,EAAoB4B,GAAA,YAAmB;SAOrDF,EAAaK,CAAO,cAIlB9B,EAAA,GAAAC,EA+BO,QAAA;GA9BL,OAAKC,EAAA,CAAC,qBACEC,EAAAgC,CAAA,CAAS,CAAA;GAChB,OAAK/B,EAAED,EAAAkC,CAAA,CAAS;GAChB,uBAAqBV,EAAA;GACrB,eAAaA,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;;GAEhCtB,EAoBQ,SApBRc,GAoBQ;IAnBNb,EAAAD,EAYE,SAZFE,EAYE;KAXI,SAAA;KAAJ,KAAIkC;KACK,uBAAA,AAAAC,EAAA,QAAA,MAAA,EAAK,QAAAC;KACd,MAAK;KACL,MAAK;KACL,OAAM;KACL,gBAAchB,EAAA,WAAO,CAAA,CAAMA,EAAA,SAAS,KAAA;KACpC,iBAAeA,EAAA,YAAY,KAAA;IACpB,GAAAxB,EAAAyC,CAAA,GAAc;KACrB,UAAUjB,EAAA;KACV,oBAAkBxB,EAAA0C,CAAA;KAClB,SAAK,AAAAH,EAAA,QAAE,GAAAI,MAAA3C,EAAA4C,CAAA,KAAA5C,EAAA4C,CAAA,CAAA,CAAA,GAAAD,CAAA;IATC,CAAA,GAAA,MAAA,IAAA1B,CAAA,GAAA,CAAA,CAAAZ,GAAAoB,EAAA,KAAK,CAAA,CAAA;IAWhB,AAAAc,EAAA,OAAArC,EAEO,QAAA;KAFD,OAAM;KAAiB,eAAY;IACvCA,GAAAA,CAAAA,EAA+B,QAAA,EAAzB,OAAM,iBAAgB,CAAA,CAAA,GAAA,EAAA;IAElBR,EAAAA,OAAO,WAAW8B,EAAA,SAA9B3B,EAAA,GAAAC,EAEO,QAFPoB,GAEO,CADLZ,EAAwBwC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAfvC,EAAAC,EAAAgB,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA0B,EAAA,IAAA,EAAA;;GAGlBxC,EAAmFC,GAAA;IAAnE,MAAMa,EAAA;IAAO,OAAOA,EAAA;IAAQ,WAASxB,EAAAoD,CAAA;IAAS,YAAUpD,EAAAqD,CAAA;;;;;;;GACxE3C,EAAiCE,GAAA,EAAf,MAAMY,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"VTab.js","names":[],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Reuse VButton for activation; tab context supplies selection, IDs and roving tabindex without\n * a mounted-child registry.\n */\n\nimport { computed, inject } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: ItemValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  iconStart?: IconSource\n  /** An icon after the label, for a count or a state the tab carries. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n  /** A VTabs set `disabled` disables every tab, this one included, whatever this says. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\nconst resolvedDisabled = computed(() => props.disabled || Boolean(tabs?.disabled))\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the tab becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return (\n    !props.label &&\n    !slots.default &&\n    Boolean(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\n}\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which `automatic` activation means. It lives here\n * rather than in the row's keyboard handler, because this component knows its own value: the\n * handler would have to read it back from a DOM attribute, and would lose the distinction\n * between the number 1 and the string \"1\" doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !resolvedDisabled.value) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    :role=\"tabs ? 'tab' : undefined\"\n    :aria-selected=\"tabs ? String(selected) : undefined\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"tabs ? (selected ? 0 : -1) : undefined\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected && tabs ? tabs.tone : 'neutral'\"\n    :size=\"tabs?.size\"\n    :compact=\"tabs?.compact\"\n    :disabled=\"resolvedDisabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"iconStart || $slots.start\" #start>\n      <slot name=\"start\"><VIcon v-bind=\"iconProps(iconStart!)\" :filled=\"iconFilled\" /></slot>\n    </template>\n    <template v-if=\"iconEnd || $slots.end\" #end>\n      <slot name=\"end\"><VIcon v-bind=\"iconProps(iconEnd!)\" :filled=\"iconFilled\" /></slot>\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 always\n   * renders. That is what makes them win whatever order the two sheets end up in; the same\n   * device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely what makes the row overflow. Allowed\n     * to shrink, they would squeeze down to their smallest possible width and scrolling would\n     * never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-full-width] > .v-tabs-bar > .v-tabs-list .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-tabs-bar > .v-tabs-list .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 keep their radius except on the edge the indicator is drawn along:\n   * there the indicator lies flush with the rule, which a rounded corner would notch.\n   */\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The selectors ask for the first and last of their TYPE rather than the first and last\n   * child, because the scroll markers are the row's real first and last children. They are\n   * spans, the tabs being the only buttons, which makes the distinction work. The first-tab\n   * rule ties with the vertical one above on specificity, so it must stay after it.\n   */\n  .v-tabs:is([data-variant='outline'], [data-variant='elevated'], [data-variant='filled'])\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:first-of-type {\n    border-start-start-radius: var(--tabs-corner-radius);\n  }\n\n  .v-tabs:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-start-end-radius: var(--tabs-corner-radius);\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:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-end-start-radius: var(--tabs-corner-radius);\n  }\n\n  /*\n   * It is painted in the tab's own text colour rather than by reading one of VButton's private\n   * variables: 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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is(\n        [data-variant='flat'],\n        [data-variant='outline'],\n        [data-variant='elevated'],\n        [data-variant='filled']\n      )\n      > .v-tabs-bar\n      > .v-tabs-list\n      .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-tab.v-tab.v-tab.v-tab[aria-selected='true']:not(:disabled) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTab.js","names":["_sfc_main","VTab_vue_vue_type_script_setup_true_lang_default","VTab_default"],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Reuse VButton for activation; tab context supplies selection, IDs and roving tabindex without\n * a mounted-child registry.\n */\n\nimport { computed, inject } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: ItemValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  iconStart?: IconSource\n  /** An icon after the label, for a count or a state the tab carries. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n  /** A VTabs set `disabled` disables every tab, this one included, whatever this says. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\nconst resolvedDisabled = computed(() => props.disabled || Boolean(tabs?.disabled))\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the tab becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return (\n    !props.label &&\n    !slots.default &&\n    Boolean(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\n}\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which `automatic` activation means. It lives here\n * rather than in the row's keyboard handler, because this component knows its own value: the\n * handler would have to read it back from a DOM attribute, and would lose the distinction\n * between the number 1 and the string \"1\" doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !resolvedDisabled.value) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    :role=\"tabs ? 'tab' : undefined\"\n    :aria-selected=\"tabs ? String(selected) : undefined\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"tabs ? (selected ? 0 : -1) : undefined\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected && tabs ? tabs.tone : 'neutral'\"\n    :size=\"tabs?.size\"\n    :compact=\"tabs?.compact\"\n    :disabled=\"resolvedDisabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"iconStart || $slots.start\" #start>\n      <slot name=\"start\"><VIcon v-bind=\"iconProps(iconStart!)\" :filled=\"iconFilled\" /></slot>\n    </template>\n    <template v-if=\"iconEnd || $slots.end\" #end>\n      <slot name=\"end\"><VIcon v-bind=\"iconProps(iconEnd!)\" :filled=\"iconFilled\" /></slot>\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 always\n   * renders. That is what makes them win whatever order the two sheets end up in; the same\n   * device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely what makes the row overflow. Allowed\n     * to shrink, they would squeeze down to their smallest possible width and scrolling would\n     * never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-full-width] > .v-tabs-bar > .v-tabs-list .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-tabs-bar > .v-tabs-list .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 keep their radius except on the edge the indicator is drawn along:\n   * there the indicator lies flush with the rule, which a rounded corner would notch.\n   */\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The selectors ask for the first and last of their TYPE rather than the first and last\n   * child, because the scroll markers are the row's real first and last children. They are\n   * spans, the tabs being the only buttons, which makes the distinction work. The first-tab\n   * rule ties with the vertical one above on specificity, so it must stay after it.\n   */\n  .v-tabs:is([data-variant='outline'], [data-variant='elevated'], [data-variant='filled'])\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:first-of-type {\n    border-start-start-radius: var(--tabs-corner-radius);\n  }\n\n  .v-tabs:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-start-end-radius: var(--tabs-corner-radius);\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:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-end-start-radius: var(--tabs-corner-radius);\n  }\n\n  /*\n   * It is painted in the tab's own text colour rather than by reading one of VButton's private\n   * variables: 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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is(\n        [data-variant='flat'],\n        [data-variant='outline'],\n        [data-variant='elevated'],\n        [data-variant='filled']\n      )\n      > .v-tabs-bar\n      > .v-tabs-list\n      .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-tab.v-tab.v-tab.v-tab[aria-selected='true']:not(:disabled) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VTab.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Reuse VButton for activation; tab context supplies selection, IDs and roving tabindex without\n * a mounted-child registry.\n */\n\nimport { computed, inject } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: ItemValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  iconStart?: IconSource\n  /** An icon after the label, for a count or a state the tab carries. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n  /** A VTabs set `disabled` disables every tab, this one included, whatever this says. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\nconst resolvedDisabled = computed(() => props.disabled || Boolean(tabs?.disabled))\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the tab becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return (\n    !props.label &&\n    !slots.default &&\n    Boolean(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\n}\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which `automatic` activation means. It lives here\n * rather than in the row's keyboard handler, because this component knows its own value: the\n * handler would have to read it back from a DOM attribute, and would lose the distinction\n * between the number 1 and the string \"1\" doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !resolvedDisabled.value) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    :role=\"tabs ? 'tab' : undefined\"\n    :aria-selected=\"tabs ? String(selected) : undefined\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"tabs ? (selected ? 0 : -1) : undefined\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected && tabs ? tabs.tone : 'neutral'\"\n    :size=\"tabs?.size\"\n    :compact=\"tabs?.compact\"\n    :disabled=\"resolvedDisabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"iconStart || $slots.start\" #start>\n      <slot name=\"start\"><VIcon v-bind=\"iconProps(iconStart!)\" :filled=\"iconFilled\" /></slot>\n    </template>\n    <template v-if=\"iconEnd || $slots.end\" #end>\n      <slot name=\"end\"><VIcon v-bind=\"iconProps(iconEnd!)\" :filled=\"iconFilled\" /></slot>\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 always\n   * renders. That is what makes them win whatever order the two sheets end up in; the same\n   * device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely what makes the row overflow. Allowed\n     * to shrink, they would squeeze down to their smallest possible width and scrolling would\n     * never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-full-width] > .v-tabs-bar > .v-tabs-list .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-tabs-bar > .v-tabs-list .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 keep their radius except on the edge the indicator is drawn along:\n   * there the indicator lies flush with the rule, which a rounded corner would notch.\n   */\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The selectors ask for the first and last of their TYPE rather than the first and last\n   * child, because the scroll markers are the row's real first and last children. They are\n   * spans, the tabs being the only buttons, which makes the distinction work. The first-tab\n   * rule ties with the vertical one above on specificity, so it must stay after it.\n   */\n  .v-tabs:is([data-variant='outline'], [data-variant='elevated'], [data-variant='filled'])\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:first-of-type {\n    border-start-start-radius: var(--tabs-corner-radius);\n  }\n\n  .v-tabs:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-start-end-radius: var(--tabs-corner-radius);\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:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-end-start-radius: var(--tabs-corner-radius);\n  }\n\n  /*\n   * It is painted in the tab's own text colour rather than by reading one of VButton's private\n   * variables: 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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is(\n        [data-variant='flat'],\n        [data-variant='outline'],\n        [data-variant='elevated'],\n        [data-variant='filled']\n      )\n      > .v-tabs-bar\n      > .v-tabs-list\n      .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-tab.v-tab.v-tab.v-tab[aria-selected='true']:not(:disabled) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GAQR,IAAQ,EAAA,GASR,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,GAClF,IAAmB,QAAe,EAAM,YAAY,EAAQ,GAAM,QAAS;EAQjF,SAAS,IAAW;GAClB,OACE,CAAC,EAAM,SACP,CAAC,EAAM,WACP,GAAQ,EAAM,SAAS,EAAM,OAAO,EAAM,aAAa,EAAM;EAEjE;EASA,SAAS,IAAU;GACjB,AAAI,GAAM,eAAe,eAAe,CAAC,EAAiB,SAAO,EAAK,OAAO,EAAM,KAAK;EAC1F;yBAIE,EA6BU,GAAA;GA5BP,IAAI,EAAA;GACL,OAAM;GACL,MAAM,EAAA,CAAA,IAAI,QAAW,KAAA;GACrB,iBAAe,EAAA,CAAA,IAAO,OAAO,EAAA,KAAQ,IAAI,KAAA;GACzC,iBAAe,EAAA;GACf,UAAU,EAAA,CAAA,IAAQ,EAAA,QAAQ,IAAA,KAAa,KAAA;GACxC,SAAQ;GACP,UAAU,EAAA,SAAY,EAAA,CAAA,CAAI,EAAE,YAAO;GACnC,MAAM,EAAA,SAAY,EAAA,CAAA,IAAO,EAAA,CAAA,CAAI,CAAC,OAAI;GAClC,MAAM,EAAA,CAAA,CAAI,EAAE;GACZ,SAAS,EAAA,CAAA,CAAI,EAAE;GACf,UAAU,EAAA;GACV,kBAAgB,EAAQ,IAAA,KAAU,KAAA;GAClC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAI,EAAE,OAAO,EAAA,KAAK;GAClB;;oBAaP,CAFY,EAAQ,IACJ,EAAA,IAAA,EAAA,KADI,EAAA,GAArB,EAEC,QAFD,GAEC,CADE,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA;;MAVD,EAAA,aAAaA,EAAAA,OAAO,QAAA;SAAQ;eAC6C,CAAvF,EAAuF,EAAA,QAAA,SAAA,CAAA,SAAA,CAApE,EAA6D,GAA7D,EAAe,EAA8C,CAAA,CAArC,CAAC,EAAA,SAAS,GAAA,EAAK,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;cAE9D,EAAA,WAAWA,EAAAA,OAAO,MAAA;SAAM;eAC6C,CAAnF,EAAmF,EAAA,QAAA,OAAA,CAAA,SAAA,CAAlE,EAA2D,GAA3D,EAAe,EAA4C,CAAA,CAAnC,CAAC,EAAA,OAAO,GAAA,EAAK,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VTab.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useSlots","_openBlock","_createBlock","VButton","_unref","_createSlots","_withCtx","_createElementBlock","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","VIcon","_mergeProps","VIcon_default","VButton_default","_hoisted_1","VTab_vue_vue_type_script_setup_true_lang_default","props","__props","slots","useSlots","tabs","inject","tabsKey","selected","computed","tabId","panelId","resolvedDisabled","iconOnly","onFocus","openBlock","createBlock","unref","_cache","createSlots","withCtx","createCommentVNode","createElementBlock","renderSlot","_ctx","createTextVNode","toDisplayString","createVNode","mergeProps","iconProps"],"sources":["../../../src/components/VTabs/VTab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Reuse VButton for activation; tab context supplies selection, IDs and roving tabindex without\n * a mounted-child registry.\n */\n\nimport { computed, inject } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabProps {\n  /**\n   * What this tab is called in code. The panel carrying the same value is the one it\n   * shows, and it is also what the v-model holds when this tab is selected.\n   */\n  value: ItemValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  iconStart?: IconSource\n  /** An icon after the label, for a count or a state the tab carries. */\n  iconEnd?: IconSource\n  /** Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis). */\n  iconFilled?: boolean\n  /** A VTabs set `disabled` disables every tab, this one included, whatever this says. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<TabProps>(), {\n  label: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the tab, replacing the `label` prop. */\n  default?(): unknown\n  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => (tabs?.hasPanels ? tabs.panelId(props.value) : undefined))\nconst resolvedDisabled = computed(() => props.disabled || Boolean(tabs?.disabled))\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the tab becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return (\n    !props.label &&\n    !slots.default &&\n    Boolean(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\n}\n\n// @keyboard @a11y\n/*\n * Selecting a tab the moment it takes focus, which `automatic` activation means. It lives here\n * rather than in the row's keyboard handler, because this component knows its own value: the\n * handler would have to read it back from a DOM attribute, and would lose the distinction\n * between the number 1 and the string \"1\" doing so.\n */\nfunction onFocus() {\n  if (tabs?.activation === 'automatic' && !resolvedDisabled.value) tabs.select(props.value)\n}\n</script>\n\n<template>\n  <VButton\n    :id=\"tabId\"\n    class=\"v-tab\"\n    :role=\"tabs ? 'tab' : undefined\"\n    :aria-selected=\"tabs ? String(selected) : undefined\"\n    :aria-controls=\"panelId\"\n    :tabindex=\"tabs ? (selected ? 0 : -1) : undefined\"\n    variant=\"ghost\"\n    :elevated=\"selected && tabs?.variant === 'inset'\"\n    :tone=\"selected && tabs ? tabs.tone : 'neutral'\"\n    :size=\"tabs?.size\"\n    :compact=\"tabs?.compact\"\n    :disabled=\"resolvedDisabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"tabs?.select(value)\"\n    @focus=\"onFocus\"\n  >\n    <template v-if=\"iconStart || $slots.start\" #start>\n      <slot name=\"start\"><VIcon v-bind=\"iconProps(iconStart!)\" :filled=\"iconFilled\" /></slot>\n    </template>\n    <template v-if=\"iconEnd || $slots.end\" #end>\n      <slot name=\"end\"><VIcon v-bind=\"iconProps(iconEnd!)\" :filled=\"iconFilled\" /></slot>\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 always\n   * renders. That is what makes them win whatever order the two sheets end up in; the same\n   * device VIconButton uses.\n   */\n  .v-tab[data-size] {\n    position: relative;\n    /*\n     * The tabs are never compressed, and that is precisely what makes the row overflow. Allowed\n     * to shrink, they would squeeze down to their smallest possible width and scrolling would\n     * never come into play at all.\n     */\n    flex: none;\n    white-space: nowrap;\n  }\n\n  /*\n   * The focus ring is drawn INSIDE the tab. The row scrolls, and a ring sitting\n   * outside the tab would be cropped by that scrolling box on the first and last\n   * tabs.\n   */\n  .v-tab[data-size]:focus-visible {\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tab-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .v-tabs[data-full-width] > .v-tabs-bar > .v-tabs-list .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-tabs-bar > .v-tabs-list .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 keep their radius except on the edge the indicator is drawn along:\n   * there the indicator lies flush with the rule, which a rounded corner would notch.\n   */\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .v-tabs:is(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size] {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /*\n   * The selectors ask for the first and last of their TYPE rather than the first and last\n   * child, because the scroll markers are the row's real first and last children. They are\n   * spans, the tabs being the only buttons, which makes the distinction work. The first-tab\n   * rule ties with the vertical one above on specificity, so it must stay after it.\n   */\n  .v-tabs:is([data-variant='outline'], [data-variant='elevated'], [data-variant='filled'])\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:first-of-type {\n    border-start-start-radius: var(--tabs-corner-radius);\n  }\n\n  .v-tabs:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='horizontal']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-start-end-radius: var(--tabs-corner-radius);\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:is(\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size]:last-of-type {\n    border-end-start-radius: var(--tabs-corner-radius);\n  }\n\n  /*\n   * It is painted in the tab's own text colour rather than by reading one of VButton's private\n   * variables: 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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )[data-orientation='vertical']\n    > .v-tabs-bar\n    > .v-tabs-list\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(\n      [data-variant='flat'],\n      [data-variant='outline'],\n      [data-variant='elevated'],\n      [data-variant='filled']\n    )\n    > .v-tabs-bar\n    > .v-tabs-list\n    .v-tab[data-size][aria-selected='true']::after {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tabs:is(\n        [data-variant='flat'],\n        [data-variant='outline'],\n        [data-variant='elevated'],\n        [data-variant='filled']\n      )\n      > .v-tabs-bar\n      > .v-tabs-list\n      .v-tab[data-size]::after {\n      transition: none;\n    }\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-tab.v-tab.v-tab.v-tab[aria-selected='true']:not(:disabled) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAMoB,IAAQC,GAQRC,IAAQrB,EAAA,GASRuB,IAAOC,EAAOC,GAAS,IAAI,GAE3BC,IAAWC,QAAeJ,KAAQ,QAAQA,EAAK,UAAUJ,EAAM,KAAK,GACpES,IAAQD,QAAeJ,GAAM,MAAMJ,EAAM,KAAK,CAAC,GAC/CU,IAAUF,QAAgBJ,GAAM,YAAYA,EAAK,QAAQJ,EAAM,KAAK,IAAI,KAAA,CAAU,GAClFW,IAAmBH,QAAeR,EAAM,YAAY,EAAQI,GAAM,QAAS;EAQjF,SAASQ,IAAW;GAClB,OACE,CAACZ,EAAM,SACP,CAACE,EAAM,WACP,GAAQA,EAAM,SAASA,EAAM,OAAOF,EAAM,aAAaA,EAAM;EAEjE;EASA,SAASa,IAAU;GACjB,AAAIT,GAAM,eAAe,eAAe,CAACO,EAAiB,SAAOP,EAAK,OAAOJ,EAAM,KAAK;EAC1F;oBAIElB,EAAA,GAAAC,EA6BUC,GAAA;GA5BP,IAAIyB,EAAA;GACL,OAAM;GACL,MAAMxB,EAAAmB,CAAA,IAAI,QAAW,KAAA;GACrB,iBAAenB,EAAAmB,CAAA,IAAO,OAAOG,EAAA,KAAQ,IAAI,KAAA;GACzC,iBAAeG,EAAA;GACf,UAAUzB,EAAAmB,CAAA,IAAQG,EAAA,QAAQ,IAAA,KAAa,KAAA;GACxC,SAAQ;GACP,UAAUA,EAAA,SAAYtB,EAAAmB,CAAA,CAAI,EAAE,YAAO;GACnC,MAAMG,EAAA,SAAYtB,EAAAmB,CAAA,IAAOnB,EAAAmB,CAAA,CAAI,CAAC,OAAI;GAClC,MAAMnB,EAAAmB,CAAA,CAAI,EAAE;GACZ,SAASnB,EAAAmB,CAAA,CAAI,EAAE;GACf,UAAUO,EAAA;GACV,kBAAgBC,EAAQ,IAAA,KAAU,KAAA;GAClC,SAAK,AAAAK,EAAA,QAAA,MAAEhC,EAAAmB,CAAA,CAAI,EAAE,OAAOH,EAAA,KAAK;GAClB;;GAWR,SAAAd,QAEC,CAFYyB,EAAQ,IACJQ,EAAA,IAAA,EAAA,KADjBtC,EAAA,GAAAM,EAEC,QAFDU,GAEC,CADET,EAAwBkC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAfjC,EAAAC,EAAAU,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA;;EAVD,GAAA,CAAAA,EAAA,aAAarB,EAAAA,OAAO,QAAA;GAAQ,MAAA;GAC1C,IAAAO,QAAuF,CAAvFE,EAAuFkC,EAAA,QAAA,SAAA,CAAA,SAAA,CAApE9B,EAA6DC,GAA7DC,EAAeV,EAA8C2C,CAAA,CAArC,CAAC3B,EAAA,SAAS,GAAA,EAAK,QAAQA,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;EAE9D,IAAA,KAAA,GAAAA,EAAA,WAAWrB,EAAAA,OAAO,MAAA;GAAM,MAAA;GACtC,IAAAO,QAAmF,CAAnFE,EAAmFkC,EAAA,QAAA,OAAA,CAAA,SAAA,CAAlE9B,EAA2DC,GAA3DC,EAAeV,EAA4C2C,CAAA,CAAnC,CAAC3B,EAAA,OAAO,GAAA,EAAK,QAAQA,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"VTabPanel.js","names":[],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Keep every panel root mounted for aria-controls. lazy defers its content until first\n * activation, then preserves that content.\n */\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: ItemValue\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/*\n * Once a deferred panel has been shown it stays built, so nothing it holds is lost. The `&&` is\n * what keeps a panel that is not lazy out of the selection's dependencies: its getter stops at\n * `props.lazy`, so changing tab re-runs nothing for it.\n */\nconst revealed = ref(false)\nwatch(\n  () => props.lazy && selected.value,\n  (shown) => {\n    if (shown) revealed.value = true\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own stylesheet,\n   * 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 at once.\n   */\n  .v-tabs-panel[hidden] {\n    display: none;\n  }\n\n  .v-tabs-panel:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTabPanel.js","names":["_sfc_main","VTabPanel_vue_vue_type_script_setup_true_lang_default","VTabPanel_default"],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Keep every panel root mounted for aria-controls. lazy defers its content until first\n * activation, then preserves that content.\n */\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: ItemValue\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/*\n * Once a deferred panel has been shown it stays built, so nothing it holds is lost. The `&&` is\n * what keeps a panel that is not lazy out of the selection's dependencies: its getter stops at\n * `props.lazy`, so changing tab re-runs nothing for it.\n */\nconst revealed = ref(false)\nwatch(\n  () => props.lazy && selected.value,\n  (shown) => {\n    if (shown) revealed.value = true\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own stylesheet,\n   * 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 at once.\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.map

@@ -1 +1 @@
-{"version":3,"file":"VTabPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Keep every panel root mounted for aria-controls. lazy defers its content until first\n * activation, then preserves that content.\n */\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: ItemValue\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/*\n * Once a deferred panel has been shown it stays built, so nothing it holds is lost. The `&&` is\n * what keeps a panel that is not lazy out of the selection's dependencies: its getter stops at\n * `props.lazy`, so changing tab re-runs nothing for it.\n */\nconst revealed = ref(false)\nwatch(\n  () => props.lazy && selected.value,\n  (shown) => {\n    if (shown) revealed.value = true\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own stylesheet,\n   * 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 at once.\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":";;;;;;;;;;;;;;;;;EAsBA,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,GAOnD,IAAW,EAAI,EAAK;SAC1B,QACQ,EAAM,QAAQ,EAAS,QAC5B,MAAU;GACT,AAAI,MAAO,EAAS,QAAQ;EAC9B,GACA,EAAE,WAAW,GAAK,CACpB,mBAIE,EASM,OAAA;GARH,IAAI,EAAA;GACL,OAAM;GACN,MAAK;GACJ,mBAAiB,EAAA;GAClB,UAAS;GACR,QAAM,CAAG,EAAA;OAEG,EAAA,QAAQ,EAAA,QAArB,EAAiC,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VTabPanel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_hoisted_1","VTabPanel_vue_vue_type_script_setup_true_lang_default","props","__props","tabs","inject","tabsKey","selected","computed","tabId","panelId","revealed","ref","watch","shown","openBlock","createElementBlock","renderSlot","_ctx","createCommentVNode"],"sources":["../../../src/components/VTabs/VTabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Keep every panel root mounted for aria-controls. lazy defers its content until first\n * activation, then preserves that content.\n */\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { tabsKey } from './context'\nimport type { ItemValue } from '../../types'\n\ninterface TabPanelProps {\n  /** Which tab shows this panel: it must be the `value` of one of them. */\n  value: ItemValue\n  /**\n   * Holds the content back until the panel is first shown, and keeps it from then on.\n   * It is for a panel expensive to build; the state it holds is still preserved\n   * afterwards.\n   */\n  lazy?: boolean\n}\n\nconst props = withDefaults(defineProps<TabPanelProps>(), { lazy: false })\n\ndefineSlots<{\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\nconst tabs = inject(tabsKey, null)\n\nconst selected = computed(() => tabs != null && tabs.value === props.value)\nconst tabId = computed(() => tabs?.tabId(props.value))\nconst panelId = computed(() => tabs?.panelId(props.value))\n\n/*\n * Once a deferred panel has been shown it stays built, so nothing it holds is lost. The `&&` is\n * what keeps a panel that is not lazy out of the selection's dependencies: its getter stops at\n * `props.lazy`, so changing tab re-runs nothing for it.\n */\nconst revealed = ref(false)\nwatch(\n  () => props.lazy && selected.value,\n  (shown) => {\n    if (shown) revealed.value = true\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div\n    :id=\"panelId\"\n    class=\"v-tabs-panel\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId\"\n    tabindex=\"0\"\n    :hidden=\"!selected\"\n  >\n    <slot v-if=\"!lazy || revealed\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A guard. The `hidden` attribute only hides an element through the browser's own stylesheet,\n   * 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 at once.\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":";;;;;;;;;;;;;;;;;EAsBA,IAAMM,IAAQC,GAORC,IAAOC,EAAOC,GAAS,IAAI,GAE3BC,IAAWC,QAAeJ,KAAQ,QAAQA,EAAK,UAAUF,EAAM,KAAK,GACpEO,IAAQD,QAAeJ,GAAM,MAAMF,EAAM,KAAK,CAAC,GAC/CQ,IAAUF,QAAeJ,GAAM,QAAQF,EAAM,KAAK,CAAC,GAOnDS,IAAWC,EAAI,EAAK;SAC1BC,QACQX,EAAM,QAAQK,EAAS,QAC5B,MAAU;GACT,AAAIO,MAAO,EAAS,QAAQ;EAC9B,GACA,EAAE,WAAW,GAAK,CACpB,cAIElB,EAAA,GAAAC,EASM,OAAA;GARH,IAAIa,EAAA;GACL,OAAM;GACN,MAAK;GACJ,mBAAiBD,EAAA;GAClB,UAAS;GACR,QAAM,CAAGF,EAAA;EAEG,GAAA,CAAA,CAAAJ,EAAA,QAAQQ,EAAA,QAArBb,EAAiCoB,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAAC,EAAA,IAAA,EAAA,CAAA,GAAA,GAAAnB,CAAA"}