vectis-ui 0.12.0 → 0.13.0

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

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

package/dist/components/VStepper/VStepper.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-stepper{font-family:var(--vectis-text-family);margin:0;padding:0;list-style:none;display:flex}.v-stepper[data-orientation=horizontal]{align-items:center;gap:var(--vectis-space-2);container:v-stepper/inline-size}.v-stepper[data-orientation=vertical]{flex-direction:column}.v-stepper-step{min-inline-size:0;display:flex}.v-stepper[data-orientation=horizontal]>.v-stepper-step{align-items:center;gap:var(--vectis-space-2);flex:auto}.v-stepper[data-orientation=horizontal]>.v-stepper-step:last-child{flex:none}.v-stepper[data-orientation=vertical]>.v-stepper-step{flex-direction:column}.v-stepper-trigger{align-items:center;gap:var(--vectis-space-3);min-inline-size:0;padding:var(--vectis-space-1);border-radius:var(--vectis-radius-interactive);color:inherit;font:inherit;text-align:start;background:0 0;border:none;display:inline-flex}button.v-stepper-trigger{cursor:pointer}button.v-stepper-trigger:hover{background:var(--vectis-color-surface-muted)}button.v-stepper-trigger:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-stepper-indicator{--vectis-icon-size:var(--vectis-icon-size-md);inline-size:var(--vectis-control-size-stepper-indicator);block-size:var(--vectis-control-size-stepper-indicator);border:1px solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-full);color:var(--vectis-color-text-muted);font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading);font-variant-numeric:tabular-nums;flex:none;place-items:center;display:grid}.v-stepper-text{flex-direction:column;min-inline-size:0;display:flex}.v-stepper-title{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading)}.v-stepper-description{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-caption-weight);line-height:var(--vectis-text-caption-leading)}.v-stepper-step:is([data-state=active],[data-state=completed]) .v-stepper-title{color:var(--vectis-color-text)}.v-stepper-step[data-state=active] .v-stepper-indicator{border-color:var(--vectis-color-accent);background:var(--vectis-color-accent);color:var(--vectis-color-text-on-accent)}.v-stepper-step[data-state=completed] .v-stepper-indicator{border-color:var(--vectis-color-accent-border);background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-stepper-step[data-state=error] .v-stepper-indicator{border-color:var(--vectis-color-danger);background:var(--vectis-color-danger);color:var(--vectis-color-text-on-accent)}.v-stepper-step[data-state=error] .v-stepper-title{color:var(--vectis-color-danger-text)}.v-stepper-step[data-disabled] .v-stepper-title,.v-stepper-step[data-disabled] .v-stepper-indicator{color:var(--vectis-color-text-subtle)}.v-stepper-connector{--stepper-connector-color:var(--vectis-color-border);flex:1 1 var(--vectis-control-size-stepper-connector-min)}.v-stepper-step[data-state=completed]>.v-stepper-connector{--stepper-connector-color:var(--vectis-color-accent)}.v-stepper[data-orientation=horizontal] .v-stepper-connector{min-inline-size:var(--vectis-control-size-stepper-connector-min);border-block-start:1px solid var(--stepper-connector-color)}.v-stepper[data-orientation=vertical] .v-stepper-connector{min-block-size:var(--vectis-control-size-stepper-connector-min);border-inline-start:1px solid var(--stepper-connector-color);margin-block:var(--vectis-space-1);margin-inline-start:calc(var(--vectis-space-1) + var(--vectis-control-size-stepper-indicator) / 2)}@container v-stepper (width<=36rem){.v-stepper-step:not([data-active]) .v-stepper-text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}}@media (forced-colors:active){.v-stepper-step[data-active] .v-stepper-indicator{outline-offset:1px;outline:1px solid highlight}}}

package/dist/components/VStepper/VStepper.d.ts

@@ -0,0 +1,73 @@
+import { ItemValue } from '../../types.js';
+/** Whether the steps run across or down. */
+export type StepperOrientation = 'horizontal' | 'vertical';
+/** How a step is drawn: done, current, in error, or still ahead. */
+export type StepperStepState = 'completed' | 'active' | 'error' | 'upcoming';
+/** One step of the process. */
+export interface StepperStep {
+    /** What the model holds while this step is current. */
+    value: ItemValue;
+    /** The name of the step. */
+    title: string;
+    /** A line under the title. */
+    description?: string;
+    /** Marks the step as having a problem to fix. It wins over every other state. */
+    error?: boolean;
+    /**
+     * Whether the step is done. Left out, the steps before the current one are done and the others
+     * are not.
+     */
+    completed?: boolean;
+    /** Takes the step out of reach: it is never a button. */
+    disabled?: boolean;
+}
+/** What the `#indicator` slot receives. */
+export interface StepperIndicatorSlotProps {
+    step: StepperStep;
+    /** The position of the step, from 0. */
+    index: number;
+    state: StepperStepState;
+}
+interface StepperProps {
+    /** The steps, in order. */
+    steps: StepperStep[];
+    /** Whether the steps run across or down. */
+    orientation?: StepperOrientation;
+    /**
+     * Makes every step that is not disabled a button. By default only the steps already reached
+     * are: the reader goes back freely, and forward only as far as they have been.
+     */
+    nonLinear?: boolean;
+    /**
+     * What screen readers announce for the list of steps. It falls back to the design system
+     * dictionary.
+     */
+    label?: string;
+}
+type __VLS_Props = StepperProps;
+type __VLS_Slots = {
+    /** Replaces what the circle of a step shows: its number, a tick or an exclamation mark. */
+    indicator?(props: StepperIndicatorSlotProps): unknown;
+};
+type __VLS_ModelProps = {
+    /** The value of the current step. Left out or unknown, the first step is current. */
+    modelValue?: ItemValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: ItemValue | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ItemValue | undefined) => any) | undefined;
+}>, {
+    label: string;
+    orientation: StepperOrientation;
+    nonLinear: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VStepper/VStepper.js

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

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

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

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

@@ -0,0 +1,96 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import { check as n } from "../VIcon/icons/check.js";
+import { priority_high as r } from "../VIcon/icons/priority_high.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, mergeModels as f, openBlock as p, ref as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useModel as b, watch as x, withCtx as S } from "vue";
+//#region src/components/VStepper/VStepper.vue?vue&type=script&setup=true&lang.ts
+var C = ["data-orientation", "aria-label"], w = [
+	"data-state",
+	"data-active",
+	"data-disabled"
+], T = {
+	class: "v-stepper-indicator",
+	"aria-hidden": "true"
+}, E = { class: "v-stepper-text" }, D = { class: "v-stepper-title" }, O = {
+	key: 0,
+	class: "v-stepper-description"
+}, k = {
+	key: 1,
+	class: "v-visually-hidden"
+}, A = {
+	key: 2,
+	class: "v-visually-hidden"
+}, j = {
+	key: 0,
+	class: "v-stepper-connector",
+	"aria-hidden": "true"
+}, M = /*@__PURE__*/ d({
+	__name: "VStepper",
+	props: /*@__PURE__*/ f({
+		steps: {},
+		orientation: { default: "horizontal" },
+		nonLinear: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d) {
+		let f = d, M = b(d, "modelValue"), N = e(), P = a(() => f.label ?? N.value.stepper.label), F = a(() => Math.max(0, f.steps.findIndex((e) => e.value === M.value))), I = m(F.value);
+		x(F, (e) => {
+			I.value = Math.max(I.value, e);
+		});
+		let L = a(() => f.steps.map((e, t) => e.error ? "error" : t === F.value ? "active" : e.completed ?? t < F.value ? "completed" : "upcoming"));
+		function R(e, t) {
+			return e.disabled ? !1 : f.nonLinear || t <= Math.max(I.value, F.value);
+		}
+		function z(e) {
+			M.value = e.value;
+		}
+		return (e, a) => (p(), c("ol", {
+			class: "v-stepper",
+			"data-orientation": d.orientation,
+			"aria-label": P.value
+		}, [(p(!0), c(i, null, h(d.steps, (a, f) => (p(), c("li", {
+			key: a.value,
+			class: "v-stepper-step",
+			"data-state": L.value[f],
+			"data-active": f === F.value ? "" : void 0,
+			"data-disabled": a.disabled ? "" : void 0
+		}, [(p(), o(_(R(a, f) ? "button" : "span"), {
+			type: R(a, f) ? "button" : void 0,
+			class: "v-stepper-trigger",
+			"aria-current": f === F.value ? "step" : void 0,
+			onClick: (e) => R(a, f) && z(a)
+		}, {
+			default: S(() => [l("span", T, [g(e.$slots, "indicator", {
+				step: a,
+				index: f,
+				state: L.value[f]
+			}, () => [L.value[f] === "completed" ? (p(), o(t, {
+				key: 0,
+				name: y(n)
+			}, null, 8, ["name"])) : L.value[f] === "error" ? (p(), o(t, {
+				key: 1,
+				name: y(r)
+			}, null, 8, ["name"])) : (p(), c(i, { key: 2 }, [u(v(f + 1), 1)], 64))])]), l("span", E, [
+				l("span", D, v(a.title), 1),
+				a.description ? (p(), c("span", O, v(a.description), 1)) : s("", !0),
+				L.value[f] === "completed" ? (p(), c("span", k, v(y(N).stepper.completed), 1)) : L.value[f] === "error" ? (p(), c("span", A, v(y(N).stepper.error), 1)) : s("", !0)
+			])]),
+			_: 2
+		}, 1032, [
+			"type",
+			"aria-current",
+			"onClick"
+		])), f < d.steps.length - 1 ? (p(), c("span", j)) : s("", !0)], 8, w))), 128))], 8, C));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=VStepper.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/components/VSwitch/VSwitch.d.ts

@@ -8,6 +8,12 @@ interface SwitchProps {
      * so it is read out after the label rather than as part of it.
      */
     hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
     /** Which side of the switch the label sits on. */
     labelPosition?: SwitchLabelPosition;
     /**
@@ -41,9 +47,7 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
-    /** Moves the focus to the real switch. */
     focus: (options?: FocusOptions) => void | undefined;
-    /** The real `<input type="checkbox" role="switch">`, for what `focus` does not cover. */
     el: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
@@ -51,11 +55,12 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     label: string;
+    error: string;
     disabled: boolean;
     invalid: boolean;
     hint: string;
-    readonly: boolean;
     labelPosition: SwitchLabelPosition;
+    readonly: boolean;
     spread: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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 { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available. 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  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The root element is a layout box, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element that\n// actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @core\n// The native `readonly` attribute does nothing on a checkbox. Cancelling the click is what\n// refuses the change: the browser puts `checked` back and fires no `change`, so the v-model\n// never hears of it.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real switch.\ndefineExpose({\n  /** Moves the focus to the real switch. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"checkbox\" role=\"switch\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        :aria-invalid=\"invalid || 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    <span v-if=\"hint\" :id=\"hintId\" class=\"v-switch-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector is COMPOUNDED with `.v-choice`, which is on this very element and comes from\n   * another sheet at the same (0,1,0). Nothing collides today, this rule setting only custom\n   * properties and that one only real ones, but the day either gains a `display`, a\n   * `font-family` or a `color` the winner would be whichever sheet the consumer's bundler\n   * happened to emit last.\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":[],"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

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

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 { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\n/** Which side of the switch the label sits on. */\nexport type SwitchLabelPosition = 'start' | 'end'\n\ninterface SwitchProps {\n  /** The text beside the switch, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the switch for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the switch the label sits on. */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available. 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  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The root element is a layout box, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element that\n// actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/** Whether the switch is on. It starts off. */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @core\n// The native `readonly` attribute does nothing on a checkbox. Cancelling the click is what\n// refuses the change: the browser puts `checked` back and fires no `change`, so the v-model\n// never hears of it.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real switch.\ndefineExpose({\n  /** Moves the focus to the real switch. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"checkbox\" role=\"switch\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-switch v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"v-switch-input v-hidden-input\"\n        :aria-invalid=\"invalid || 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    <span v-if=\"hint\" :id=\"hintId\" class=\"v-switch-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector is COMPOUNDED with `.v-choice`, which is on this very element and comes from\n   * another sheet at the same (0,1,0). Nothing collides today, this rule setting only custom\n   * properties and that one only real ones, but the day either gains a `display`, a\n   * `font-family` or a `color` the winner would be whichever sheet the consumer's bundler\n   * happened to emit last.\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,IAAM,IAAQ,GAeR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,mBAAgB,EAAY,SAAa,CAAC,CAAC,EAAM,IAAI,GAG/D,IAAQ,EAAoB,GAAA,YAAmB,GAO/C,IAAU,EAA6B,IAAI;EAMjD,SAAS,EAAmB,GAAmB;GAC7C,AAAI,EAAM,YAAU,EAAM,eAAe;EAC3C;SAIA,EAAa;GAEX,QAAQ,MAA2B,EAAQ,OAAO,MAAM,CAAO;GAE/D,IAAI;EACN,CAAC,mBAIC,EA8BO,QAAA;GA7BL,OAAK,EAAA,CAAC,qBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,eAAa,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAEhC,EAoBQ,SApBR,GAoBQ;KAnBN,EAYE,SAZF,EAYE;aAXI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,MAAK;IACL,OAAM;IACL,gBAAc,EAAA,WAAW,KAAA;IACzB,iBAAe,EAAA,YAAY,KAAA;MACpB,EAAA,CAAA,GAAc;IACrB,UAAU,EAAA;IACV,oBAAkB,EAAA,CAAA;IAClB,SAAO;0BATC,EAAA,KAAK,CAAA,CAAA;YAWhB,EAEO,QAAA;IAFD,OAAM;IAAiB,eAAY;OACvC,EAA+B,QAAA,EAAzB,OAAM,iBAAgB,CAAA,CAAA,GAAA,EAAA;GAElBA,EAAAA,OAAO,WAAW,EAAA,SAAA,EAAA,GAA9B,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAGN,EAAA,QAAA,EAAA,GAAZ,EAAoF,QAAA;;GAAjE,IAAI,EAAA,CAAA;GAAQ,OAAM;OAAiC,EAAA,IAAI,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"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"}

package/dist/components/VTabs/VTab.css

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

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

@@ -27,10 +27,10 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<TabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabProps> & Readonly<{}>, {
     label: string;
-    disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
     iconFilled: boolean;
+    disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;