vectis-ui 0.8.1 → 0.9.1

package/dist/components/VProgressCircular/VProgressCircular.js.map

@@ -1 +1 @@
-{"version":3,"file":"VProgressCircular.js","names":[],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — no behavioural JS at all: value normalization and the display string.\n/**\n * Progress drawn as a ring, an SVG whose geometry is described entirely in CSS with no JS\n * computing anything.\n *\n * Two things make that possible. There is no `viewBox`, so one user unit is one pixel and\n * the circles take plain lengths — a fixed coordinate system would mean converting the\n * thickness into its units, hence knowing the ratio in code and recomputing it at every\n * change of size. And `pathLength=\"100\"` declares the outline 100 units long whatever its\n * real circumference, so the portion drawn is a percentage with no π anywhere.\n *\n * NAMING — pass a `label` saying what is progressing. The figure in the middle cannot\n * serve: `role=\"progressbar\"` makes its content presentational, so it is never announced.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the ring turns continuously and the\n   * value is ignored.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always IN PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always IN PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage — a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: { value: number; max: number; percent: number }): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The two dimensions are declared here as defaults, on the very element the props\n     write to inline — which is what makes an explicit size or thickness always win. */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /* In a right-to-left page the ring fills the other way round, following the reading\n     direction. These individual properties are applied in a fixed order — move, turn,\n     then mirror — so the mirroring is taken into account before the quarter turn above. */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /* The geometry, entirely in CSS and in plain lengths. Percentages are avoided\n     deliberately: a radius given as a percentage is resolved against a normalized\n     diagonal rather than against the width, and there is no reason to expose the\n     component to that when the diameter is always a length to begin with. */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  /* A custom colour replaces the tone: at (0,2,0) it beats the base rule's mapping\n     whatever the order the two are written in. */\n  .v-progress-circular[data-custom] {\n    --progress-fill: var(--custom-color);\n    --progress-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* TRAP — this centres the BOX itself in its cell, and it is not redundant with the\n       centring above. The maximum width below stops the box from being stretched to\n       fill the cell, and a stretch that cannot apply falls back to the START edge: the\n       figure would end up against the side of the ring. */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /* Sized as a fraction of the diameter so it stays in proportion at every size — the\n       same tolerance already granted to VSpinner's stroke — with a floor at the smallest\n       type token, below which it would be unreadable. */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /* When the progress cannot be measured, two animations run at once: the whole ring\n     turns, and the arc drawn on it lengthens and shortens. Their periods are deliberately\n     not multiples of one another — were the arc to restart on every rotation, the pair\n     would repeat the same picture over and over and read as a mechanical beat. At 1s and\n     1.5s they only realign every third turn; the slowed-down pair below is 3s and 5s, so\n     every fifth. Keep any change to those four values out of a whole-number ratio. */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* Both ends of the arc move, so it lengthens, shortens and travels around the circle\n     at once. The spin it rides on is the shared one from styles/utilities.css; only\n     these keyframes, which belong to this component alone, stay here. */\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VProgressCircular.js","names":[],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Progress drawn as a ring, an SVG whose geometry is described entirely in CSS with no JS\n * computing anything.\n *\n * Two things make that possible. There is no `viewBox`, so one user unit is one pixel and\n * the circles take plain lengths — a fixed coordinate system would mean converting the\n * thickness into its units, hence knowing the ratio in code and recomputing it at every\n * change of size. And `pathLength=\"100\"` declares the outline 100 units long whatever its\n * real circumference, so the portion drawn is a percentage with no π anywhere.\n *\n * NAMING — pass a `label` saying what is progressing. The figure in the middle cannot\n * serve: `role=\"progressbar\"` makes its content presentational, so it is never announced.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\n/** What the default slot receives. */\nexport interface ProgressCircularSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the ring turns continuously and the\n   * value is ignored.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always IN PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always IN PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage: a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: ProgressCircularSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The two dimensions are declared here as defaults, on the very element the props\n     write to inline — which is what makes an explicit size or thickness always win. */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /* In a right-to-left page the ring fills the other way round, following the reading\n     direction. These individual properties are applied in a fixed order — move, turn,\n     then mirror — so the mirroring is taken into account before the quarter turn above. */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /* The geometry, entirely in CSS and in plain lengths. Percentages are avoided\n     deliberately: a radius given as a percentage is resolved against a normalized\n     diagonal rather than against the width, and there is no reason to expose the\n     component to that when the diameter is always a length to begin with. */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* TRAP — this centres the BOX itself in its cell, and it is not redundant with the\n       centring above. The maximum width below stops the box from being stretched to\n       fill the cell, and a stretch that cannot apply falls back to the START edge: the\n       figure would end up against the side of the ring. */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /* Sized as a fraction of the diameter so it stays in proportion at every size — the\n       same tolerance already granted to VSpinner's stroke — with a floor at the smallest\n       type token, below which it would be unreadable. */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /* When the progress cannot be measured, two animations run at once: the whole ring\n     turns, and the arc drawn on it lengthens and shortens. Their periods are deliberately\n     not multiples of one another — were the arc to restart on every rotation, the pair\n     would repeat the same picture over and over and read as a mechanical beat. At 1s and\n     1.5s they only realign every third turn; the slowed-down pair below is 3s and 5s, so\n     every fifth. Keep any change to those four values out of a whole-number ratio. */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-progress-circular-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* The turn of the whole ring. VSpinner writes the same one under its own name: shared\n     in the core sheet it cost every consumer the bytes, where the two copies only meet in\n     an application that loads both components. */\n  @keyframes v-progress-circular-spin {\n    to {\n      transform: rotate(1turn);\n    }\n  }\n\n  /* Both ends of the arc move, so it lengthens, shortens and travels around the circle\n     at once. */\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* An SVG keeps its authored colours under Windows forced colours, so the ring would\n     stay pale indigo on a system palette. It is drawn in the system colours instead: the\n     remaining part in GrayText, the progress in Highlight. */\n  @media (forced-colors: active) {\n    .v-progress-circular {\n      forced-color-adjust: none;\n    }\n\n    .v-progress-circular-track {\n      stroke: GrayText;\n    }\n\n    .v-progress-circular-bar {\n      stroke: Highlight;\n    }\n\n    .v-progress-circular-label {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VProgressCircular.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — no behavioural JS at all: value normalization and the display string.\n/**\n * Progress drawn as a ring, an SVG whose geometry is described entirely in CSS with no JS\n * computing anything.\n *\n * Two things make that possible. There is no `viewBox`, so one user unit is one pixel and\n * the circles take plain lengths — a fixed coordinate system would mean converting the\n * thickness into its units, hence knowing the ratio in code and recomputing it at every\n * change of size. And `pathLength=\"100\"` declares the outline 100 units long whatever its\n * real circumference, so the portion drawn is a percentage with no π anywhere.\n *\n * NAMING — pass a `label` saying what is progressing. The figure in the middle cannot\n * serve: `role=\"progressbar\"` makes its content presentational, so it is never announced.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the ring turns continuously and the\n   * value is ignored.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always IN PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always IN PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage — a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: { value: number; max: number; percent: number }): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The two dimensions are declared here as defaults, on the very element the props\n     write to inline — which is what makes an explicit size or thickness always win. */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /* In a right-to-left page the ring fills the other way round, following the reading\n     direction. These individual properties are applied in a fixed order — move, turn,\n     then mirror — so the mirroring is taken into account before the quarter turn above. */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /* The geometry, entirely in CSS and in plain lengths. Percentages are avoided\n     deliberately: a radius given as a percentage is resolved against a normalized\n     diagonal rather than against the width, and there is no reason to expose the\n     component to that when the diameter is always a length to begin with. */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  /* A custom colour replaces the tone: at (0,2,0) it beats the base rule's mapping\n     whatever the order the two are written in. */\n  .v-progress-circular[data-custom] {\n    --progress-fill: var(--custom-color);\n    --progress-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* TRAP — this centres the BOX itself in its cell, and it is not redundant with the\n       centring above. The maximum width below stops the box from being stretched to\n       fill the cell, and a stretch that cannot apply falls back to the START edge: the\n       figure would end up against the side of the ring. */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /* Sized as a fraction of the diameter so it stays in proportion at every size — the\n       same tolerance already granted to VSpinner's stroke — with a floor at the smallest\n       type token, below which it would be unreadable. */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /* When the progress cannot be measured, two animations run at once: the whole ring\n     turns, and the arc drawn on it lengthens and shortens. Their periods are deliberately\n     not multiples of one another — were the arc to restart on every rotation, the pair\n     would repeat the same picture over and over and read as a mechanical beat. At 1s and\n     1.5s they only realign every third turn; the slowed-down pair below is 3s and 5s, so\n     every fifth. Keep any change to those four values out of a whole-number ratio. */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* Both ends of the arc move, so it lengthens, shortens and travels around the circle\n     at once. The spin it rides on is the shared one from styles/utilities.css; only\n     these keyframes, which belong to this component alone, stay here. */\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAQ,GAwBR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAMM,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK;yBAIxE,EA2BO,QAAA;GA1BL,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA,CAAA;GACf,OAAK,EAAA;uBAA6B,OAAO,EAAA,CAAA,CAAQ;sBAA2B,EAAA;2BAAoC,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI;4BAAiC,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;;eAOrK,EAGM,OAAA;GAHD,OAAM;GAA0B,eAAY;MAC/C,EAA6D,UAAA;GAArD,OAAM;GAA4B,YAAW;MACrD,EAA2D,UAAA;GAAnD,OAAM;GAA0B,YAAW;aAExC,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAnD,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VProgressCircular.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Progress drawn as a ring, an SVG whose geometry is described entirely in CSS with no JS\n * computing anything.\n *\n * Two things make that possible. There is no `viewBox`, so one user unit is one pixel and\n * the circles take plain lengths — a fixed coordinate system would mean converting the\n * thickness into its units, hence knowing the ratio in code and recomputing it at every\n * change of size. And `pathLength=\"100\"` declares the outline 100 units long whatever its\n * real circumference, so the portion drawn is a percentage with no π anywhere.\n *\n * NAMING — pass a `label` saying what is progressing. The figure in the middle cannot\n * serve: `role=\"progressbar\"` makes its content presentational, so it is never announced.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressCircularTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the arc ends. */\nexport type ProgressCircularShape = 'rounded' | 'square'\n\n/** What the default slot receives. */\nexport interface ProgressCircularSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressCircularProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the ring turns continuously and the\n   * value is ignored.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressCircularTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * unfilled ring's shade is derived from it against the theme, so it follows the light\n   * and the dark one.\n   */\n  color?: string\n  /** The diameter, always IN PIXELS: `96` and `'96'` both give 96px. */\n  size?: number | string\n  /** How thick the ring is, always IN PIXELS: `8` and `'8'` both give 8px. */\n  thickness?: number | string\n  /** Whether the ends of the drawn arc are rounded or cut square. */\n  shape?: ProgressCircularShape\n  /**\n   * Writes the percentage in the middle of the ring. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n}\n\nconst props = withDefaults(defineProps<ProgressCircularProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  size: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n})\n\ndefineSlots<{\n  /**\n   * What to put in the middle of the ring instead of the percentage: a count of files,\n   * an icon, a shortened figure.\n   */\n  default?(props: ProgressCircularSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <span\n    class=\"v-progress-circular v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-diameter': px(size),\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <svg class=\"v-progress-circular-svg\" aria-hidden=\"true\">\n      <circle class=\"v-progress-circular-track\" pathLength=\"100\" />\n      <circle class=\"v-progress-circular-bar\" pathLength=\"100\" />\n    </svg>\n    <span v-if=\"!indeterminate && (showValue || $slots.default)\" class=\"v-progress-circular-label\">\n      <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n        {{ m.progress.percent(roundedPercent) }}\n      </slot>\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The two dimensions are declared here as defaults, on the very element the props\n     write to inline — which is what makes an explicit size or thickness always win. */\n  .v-progress-circular {\n    --progress-diameter: var(--vectis-control-size-progress-circular-diameter);\n    --progress-thickness: var(--vectis-control-size-progress-circular-thickness);\n    /* Arc and track are the tone's solid and soft colours, read from the shared table\n       (`.v-tone`, set in the template). No text colour is taken from it: the figure sits\n       in the hole of the ring, against the page, in the ordinary text colour. */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    display: inline-grid;\n    inline-size: var(--progress-diameter);\n    block-size: var(--progress-diameter);\n    vertical-align: middle;\n  }\n\n  .v-progress-circular-svg,\n  .v-progress-circular-label {\n    grid-area: 1 / 1;\n  }\n\n  .v-progress-circular-svg {\n    inline-size: 100%;\n    block-size: 100%;\n    /* Turns the ring so that it starts at twelve o'clock rather than at three. It is\n       written as its own property and not as a transform, so that it COMPOSES with the\n       spinning of the unmeasurable mode instead of being overwritten by it. */\n    rotate: -90deg;\n  }\n\n  /* In a right-to-left page the ring fills the other way round, following the reading\n     direction. These individual properties are applied in a fixed order — move, turn,\n     then mirror — so the mirroring is taken into account before the quarter turn above. */\n  .v-progress-circular:dir(rtl) .v-progress-circular-svg {\n    scale: 1 -1;\n  }\n\n  /* The geometry, entirely in CSS and in plain lengths. Percentages are avoided\n     deliberately: a radius given as a percentage is resolved against a normalized\n     diagonal rather than against the width, and there is no reason to expose the\n     component to that when the diameter is always a length to begin with. */\n  .v-progress-circular-track,\n  .v-progress-circular-bar {\n    cx: calc(var(--progress-diameter) / 2);\n    cy: calc(var(--progress-diameter) / 2);\n    /* A thickness as large as the diameter would give a NEGATIVE radius, which is an\n       error in SVG: the circle would simply not be drawn. The floor degrades that case\n       to a radius of zero instead. */\n    r: max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));\n    fill: none;\n    stroke-width: var(--progress-thickness);\n  }\n\n  .v-progress-circular-track {\n    stroke: var(--progress-track);\n  }\n\n  .v-progress-circular-bar {\n    stroke: var(--progress-fill);\n    stroke-linecap: round;\n    stroke-dasharray: 100;\n    stroke-dashoffset: calc(100 - 100 * var(--fill-fraction));\n    transition: stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-circular[data-shape='square'] .v-progress-circular-bar {\n    stroke-linecap: butt;\n  }\n\n  .v-progress-circular-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* TRAP — this centres the BOX itself in its cell, and it is not redundant with the\n       centring above. The maximum width below stops the box from being stretched to\n       fill the cell, and a stretch that cannot apply falls back to the START edge: the\n       figure would end up against the side of the ring. */\n    place-self: center;\n    max-inline-size: calc(var(--progress-diameter) - var(--progress-thickness) * 2);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    /* Sized as a fraction of the diameter so it stays in proportion at every size — the\n       same tolerance already granted to VSpinner's stroke — with a floor at the smallest\n       type token, below which it would be unreadable. */\n    font-size: max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-align: center;\n  }\n\n  /* When the progress cannot be measured, two animations run at once: the whole ring\n     turns, and the arc drawn on it lengthens and shortens. Their periods are deliberately\n     not multiples of one another — were the arc to restart on every rotation, the pair\n     would repeat the same picture over and over and read as a mechanical beat. At 1s and\n     1.5s they only realign every third turn; the slowed-down pair below is 3s and 5s, so\n     every fifth. Keep any change to those four values out of a whole-number ratio. */\n  .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n    animation: v-progress-circular-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n    animation: v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default)\n      infinite;\n    transition: none;\n  }\n\n  /* The turn of the whole ring. VSpinner writes the same one under its own name: shared\n     in the core sheet it cost every consumer the bytes, where the two copies only meet in\n     an application that loads both components. */\n  @keyframes v-progress-circular-spin {\n    to {\n      transform: rotate(1turn);\n    }\n  }\n\n  /* Both ends of the arc move, so it lengthens, shortens and travels around the circle\n     at once. */\n  @keyframes v-progress-circular-dash {\n    0% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: 0;\n    }\n\n    50% {\n      stroke-dasharray: 70 100;\n      stroke-dashoffset: -20;\n    }\n\n    100% {\n      stroke-dasharray: 5 100;\n      stroke-dashoffset: -100;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-circular-bar {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-circular[data-indeterminate] .v-progress-circular-svg {\n      animation-duration: var(--vectis-duration-3000);\n    }\n\n    .v-progress-circular[data-indeterminate] .v-progress-circular-bar {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* An SVG keeps its authored colours under Windows forced colours, so the ring would\n     stay pale indigo on a system palette. It is drawn in the system colours instead: the\n     remaining part in GrayText, the progress in Highlight. */\n  @media (forced-colors: active) {\n    .v-progress-circular {\n      forced-color-adjust: none;\n    }\n\n    .v-progress-circular-track {\n      stroke: GrayText;\n    }\n\n    .v-progress-circular-bar {\n      stroke: Highlight;\n    }\n\n    .v-progress-circular-label {\n      color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEA,IAAM,IAAQ,GAwBR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAMM,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK;yBAIxE,EA2BO,QAAA;GA1BL,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA,CAAA;GACf,OAAK,EAAA;uBAA6B,OAAO,EAAA,CAAA,CAAQ;sBAA2B,EAAA;2BAAoC,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI;4BAAiC,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;;eAOrK,EAGM,OAAA;GAHD,OAAM;GAA0B,eAAY;MAC/C,EAA6D,UAAA;GAArD,OAAM;GAA4B,YAAW;MACrD,EAA2D,UAAA;GAAnD,OAAM;GAA0B,YAAW;aAExC,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAnD,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VProgressLinear/VProgressLinear.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-progress-linear{--progress-thickness:var(--vectis-control-size-progress-linear-thickness);--progress-fill:var(--tone-bg-solid);--progress-track:var(--tone-bg-soft);--progress-text-fallback:var(--tone-text-solid);inline-size:100%;block-size:var(--progress-thickness);border-radius:var(--vectis-radius-pill);background:var(--progress-track);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);display:block;position:relative}.v-progress-linear[data-shape=square]{border-radius:0}.v-progress-linear-fill{inline-size:calc(100% * var(--fill-fraction));border-radius:inherit;background:var(--progress-fill);transition:inline-size var(--vectis-duration-base) var(--vectis-ease-default);position:absolute;inset-block:0;inset-inline-start:0}.v-progress-linear[data-custom]{--progress-fill:var(--custom-color);--progress-track:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);--progress-text-fallback:var(--vectis-color-text-on-accent)}.v-progress-linear-text{--progress-clip-start:calc(100% * var(--fill-fraction));--progress-clip-end:-100vmax;padding-inline:var(--vectis-space-2);color:var(--vectis-color-text);clip-path:inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));transition:clip-path var(--vectis-duration-base) var(--vectis-ease-default);writing-mode:horizontal-tb;white-space:nowrap;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.v-progress-linear[data-value-position=start] .v-progress-linear-text{justify-content:start}.v-progress-linear[data-value-position=end] .v-progress-linear-text{justify-content:end}.v-progress-linear-text[data-on-fill]{--progress-clip-start:-100vmax;--progress-clip-end:calc(100% * (1 - var(--fill-fraction)));color:var(--progress-text-fallback)}@supports (color:contrast-color(red)){.v-progress-linear-text[data-on-fill]{color:contrast-color(var(--progress-fill))}}.v-progress-linear:dir(rtl) .v-progress-linear-text{clip-path:inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end))}.v-progress-linear[data-orientation=vertical]{writing-mode:vertical-lr;inline-size:var(--vectis-control-size-progress-linear-length)}.v-progress-linear[data-orientation=vertical] .v-progress-linear-fill{inset-inline:auto 0}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text{padding-inline:0;padding-block:var(--vectis-space-2);flex-direction:column-reverse}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text,.v-progress-linear[data-orientation=vertical]:dir(rtl) .v-progress-linear-text{clip-path:inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax)}.v-progress-linear[data-indeterminate]{overflow:hidden}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{--progress-bar:40%;inline-size:var(--progress-bar);animation:v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out) infinite;transition:none;inset-inline:0 auto}@keyframes v-progress-linear-indeterminate{0%{inset-inline-start:calc(-1 * var(--progress-bar))}to{inset-inline-start:100%}}.v-progress-linear[data-orientation=vertical][data-indeterminate] .v-progress-linear-fill{animation-direction:reverse}@media (prefers-reduced-motion:reduce){.v-progress-linear-fill,.v-progress-linear-text{transition:none}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{animation-duration:var(--vectis-duration-5000)}}}
+@layer vectis.components{.v-progress-linear{--progress-thickness:var(--vectis-control-size-progress-linear-thickness);--progress-fill:var(--tone-bg-solid);--progress-track:var(--tone-bg-soft);--progress-text-fallback:var(--tone-text-solid);inline-size:100%;block-size:var(--progress-thickness);border-radius:var(--vectis-radius-pill);background:var(--progress-track);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);display:block;position:relative}.v-progress-linear[data-shape=square]{border-radius:0}.v-progress-linear-fill{inline-size:calc(100% * var(--fill-fraction));border-radius:inherit;background:var(--progress-fill);transition:inline-size var(--vectis-duration-base) var(--vectis-ease-default);position:absolute;inset-block:0;inset-inline-start:0}.v-progress-linear-text{--progress-clip-start:calc(100% * var(--fill-fraction));--progress-clip-end:-100vmax;padding-inline:var(--vectis-space-2);color:var(--vectis-color-text);clip-path:inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));transition:clip-path var(--vectis-duration-base) var(--vectis-ease-default);writing-mode:horizontal-tb;white-space:nowrap;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.v-progress-linear[data-value-position=start] .v-progress-linear-text{justify-content:start}.v-progress-linear[data-value-position=end] .v-progress-linear-text{justify-content:end}.v-progress-linear-text[data-on-fill]{--progress-clip-start:-100vmax;--progress-clip-end:calc(100% * (1 - var(--fill-fraction)));color:var(--progress-text-fallback)}@supports (color:contrast-color(red)){.v-progress-linear-text[data-on-fill]{color:contrast-color(var(--progress-fill))}}.v-progress-linear:dir(rtl) .v-progress-linear-text{clip-path:inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end))}.v-progress-linear[data-orientation=vertical]{writing-mode:vertical-lr;inline-size:var(--vectis-control-size-progress-linear-length)}.v-progress-linear[data-orientation=vertical] .v-progress-linear-fill{inset-inline:auto 0}.v-progress-linear[data-orientation=vertical]:dir(rtl) .v-progress-linear-fill{inset-inline:0 auto}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text{padding-inline:0;padding-block:var(--vectis-space-2);flex-direction:column-reverse}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text,.v-progress-linear[data-orientation=vertical]:dir(rtl) .v-progress-linear-text{clip-path:inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax)}.v-progress-linear[data-indeterminate]{overflow:hidden}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{--progress-bar:40%;inline-size:var(--progress-bar);animation:v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out) infinite;transition:none;inset-inline:0 auto}@keyframes v-progress-linear-indeterminate{0%{inset-inline-start:calc(-1 * var(--progress-bar))}to{inset-inline-start:100%}}.v-progress-linear[data-orientation=vertical][data-indeterminate] .v-progress-linear-fill{animation-direction:reverse}.v-progress-linear[data-orientation=vertical][data-indeterminate]:dir(rtl) .v-progress-linear-fill{animation-direction:normal}@media (prefers-reduced-motion:reduce){.v-progress-linear-fill,.v-progress-linear-text{transition:none}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{animation-duration:var(--vectis-duration-5000)}}@media (forced-colors:active){.v-progress-linear{forced-color-adjust:none;box-shadow:inset 0 0 0 var(--vectis-control-border-width) CanvasText;background:canvas}.v-progress-linear-fill{background:highlight}.v-progress-linear-text{color:canvastext}.v-progress-linear-text[data-on-fill]{color:highlighttext}}}

package/dist/components/VProgressLinear/VProgressLinear.d.ts

@@ -1,11 +1,20 @@
 /** What the progress means, in colour. */
-export type ProgressLinearTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+export type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
 /** How the track and the fill end. */
 export type ProgressLinearShape = 'rounded' | 'square';
 /** Where the value sits along the bar. */
 export type ProgressLinearValuePosition = 'start' | 'center' | 'end';
 /** Which way the bar fills. */
 export type ProgressLinearOrientation = 'horizontal' | 'vertical';
+/** What the default slot receives. */
+export interface ProgressLinearSlotProps {
+    /** The value, brought back into the range. */
+    value: number;
+    /** The bound, zero or more. */
+    max: number;
+    /** How far along it is, as a percentage and unrounded. */
+    percent: number;
+}
 interface ProgressLinearProps {
     /** How far along it is. Anything outside the range is brought back into it. */
     value?: number;
@@ -33,7 +42,7 @@ interface ProgressLinearProps {
     color?: string;
     /**
      * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px
-     * by default — bear in mind that showing text inside a bar that thin needs an
+     * by default, and showing text inside a bar that thin needs an
      * explicit thickness.
      */
     thickness?: number | string;
@@ -56,15 +65,11 @@ type __VLS_Slots = {
     /**
      * What to write inside the bar instead of the percentage.
      *
-     * TRAP — it is rendered TWICE, once over the empty track and once over the filled
-     * part in a colour that contrasts with it, each copy cut at the fill's edge. So
-     * whatever it renders must be pure: anything with a side effect would happen twice.
+     * It is rendered TWICE, once over the empty track and once over the filled part in a
+     * colour that contrasts with it, each copy cut at the fill's edge. So whatever it renders
+     * must be pure: anything with a side effect would happen twice.
      */
-    default?(props: {
-        value: number;
-        max: number;
-        percent: number;
-    }): unknown;
+    default?(props: ProgressLinearSlotProps): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<ProgressLinearProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProgressLinearProps> & Readonly<{}>, {
     label: string;

package/dist/components/VProgressLinear/VProgressLinear.js.map

@@ -1 +1 @@
-{"version":3,"file":"VProgressLinear.js","names":[],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — no behavioural JS at all: value normalization and the display string.\n/**\n * A bar filling up as something progresses. The element rendered IS the track, and the\n * whole geometry follows from a single number set on it — the fraction filled, with no\n * unit. Everything is written in logical properties, so turning the bar vertical needs\n * nothing but a change of writing direction.\n *\n * There is no behavioural JavaScript: the value is clamped and a percentage is\n * formatted, and that is all.\n *\n * On naming: pass a `label` saying what is progressing. The text shown inside the\n * bar cannot serve as that name — the role a progress bar carries makes its content\n * presentational, so screen readers do not announce it.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the bar animates continuously and the\n   * value is ignored. It is what to use while waiting for a server that reports no\n   * percentage.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px\n   * by default — bear in mind that showing text inside a bar that thin needs an\n   * explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /**\n   * What to write inside the bar instead of the percentage.\n   *\n   * TRAP — it is rendered TWICE, once over the empty track and once over the filled\n   * part in a colour that contrasts with it, each copy cut at the fill's edge. So\n   * whatever it renders must be pure: anything with a side effect would happen twice.\n   */\n  default?(props: { value: number; max: number; percent: number }): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-orientation=\"orientation\"\n    :data-value-position=\"valuePosition\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <span class=\"v-progress-linear-fill\" />\n    <!--\n      The same text twice, each copy cut at the fill's edge so that the two complete\n      each other exactly: the first in the ordinary text colour over the empty track,\n      the second over the filled part, coloured to contrast with it. The second is\n      hidden from screen readers, being a duplicate of text already there.\n    -->\n    <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n      <span class=\"v-progress-linear-text\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n      <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The element IS the track, and it takes the whole length available. Sizing it is the\n   * consumer's business, through the parent or through a width of their own — a\n   * consumer's style sits outside our layers and always wins.\n   */\n  .v-progress-linear {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out\n     * again on every frame. Scaling it would be cheaper, but a scale is physical: it\n     * would have to be undone for the vertical orientation and again for a\n     * right-to-left page, where a logical length simply works.\n     *\n     * The duration and easing are repeated by the clip of the text over the fill, or the\n     * colour boundary would drift away from the fill's own edge for the length of the\n     * transition.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /* A custom colour replaces the tone: at (0,2,0) it beats the base rule's mapping\n     whatever the order the two are written in. */\n  .v-progress-linear[data-custom] {\n    --progress-fill: var(--custom-color);\n    --progress-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n    --progress-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  /* The text inside the bar, in two copies laid over the same box — the track's own,\n     which is why a cut expressed as a fraction of it lands exactly on the fill's edge.\n     Bear in mind that the default 4px thickness cannot hold text at all: showing any\n     implies asking for a thicker bar.\n\n     TRAP — the two copies are COMPLEMENTARY and never superimposed: this one is cut OUT\n     of the filled part, the other cut TO it, so every letter is painted exactly once.\n     Removing either clip raises no error and stays invisible for as long as both copies\n     resolve to the SAME colour, which is what happens wherever the adaptive colour\n     function is unsupported. Where it IS supported and the two disagree — black over an\n     accent fill against white text in the dark theme — the copy underneath shows its\n     antialiased edges all around the letters of the one on top, and the label reads as\n     a halo. */\n  .v-progress-linear-text {\n    /* The two insets of the cut: one on the edge the fill grows FROM, one on the edge it\n       grows towards. They are named after those roles rather than after physical sides,\n       so the three geometry rules further down — horizontal, right-to-left, vertical —\n       all read the same pair. This copy cuts on the start side; the one over the fill\n       swaps them. */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /* The large negative inset on the two sides that do NOT carry the cut is what stops\n       text taller or wider than the bar from being cropped by its own clip. */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /* The per-tone fallback colour. The adaptive one cannot simply be written as a\n       second declaration after it: because that declaration contains a var(), a browser\n       with no support does not reject it at parse time — it would win the cascade and\n       only then turn invalid, which resets the colour to inherited and leaves the\n       fallback never applied. The block below is the way round it, being evaluated\n       before any var() substitution. */\n    color: var(--progress-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /* In a right-to-left page the fill grows from the right, so the two insets change\n     physical sides — the variables themselves keep their meaning. */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /* Upright, the bar fills from the bottom.\n\n     Changing the writing direction on the element is enough to turn everything: the\n     axis the fill grows along becomes vertical, so the length and the thickness swap\n     places, and both the fill and the animation follow with no rule written twice.\n\n     TRAP — putting zero at the bottom is NOT done by reversing the direction, which\n     would also apply to the text of the two copies: bidirectional reordering would then\n     display \"50 %\" as \"% 50\". The fill is anchored to the far end of the axis instead.\n\n     The length comes from a token because there is nothing to inherit it from: in a\n     parent of automatic height the bar would collapse to nothing. A consumer's own\n     height overrides it, sitting outside our layers. */\n  .v-progress-linear[data-orientation='vertical'] {\n    writing-mode: vertical-lr;\n    inline-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /* The text now stacks along the vertical axis, whose start is the zero end — the\n     bottom of the bar. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /* The cut moves to the vertical axis: the fill rises from the bottom, which is that\n     axis' start. It is therefore the same in both reading directions, which means the\n     right-to-left rule further up has to be neutralized.\n\n     TRAP — the second selector is what neutralizes it, and it is written that way on\n     purpose: it is one step MORE specific than that rule, where the first selector alone\n     would merely tie with it and win by source order — a far more fragile arrangement. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /* When the progress cannot be measured, a bar of fixed size crosses the track from\n     just outside one end to just outside the other. At each extreme it is exactly flush\n     with the edge without ever pulling away from it, which is what makes the loop\n     invisible and keeps the track from ever looking empty — no second bar is needed.\n\n     The easing carries the whole impression: a gradual entry, a quick crossing, a damped\n     exit. A linear run, or an asymmetric curve, immediately reads as mechanical.\n\n     The movement is expressed in LOGICAL properties — a position and a size as\n     percentages of the track — rather than as a transform. One definition then serves\n     the horizontal, the vertical and the right-to-left cases, where a transform, being\n     physical, would need its own keyframes per axis and a flip per direction. */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /* The anchoring is put back at the start of the axis, vertical case included — where\n       a measurable progress anchors at the far end instead. */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /* Turned upright, the axis runs downwards, so the bar would travel from the top down —\n     the opposite of a measurable fill, which rises from the bottom. The same keyframes\n     are simply read backwards, which changes nothing else BECAUSE the easing curve is\n     symmetric; an asymmetric one would need a second set of keyframes.\n\n     Nothing is needed for a right-to-left page: the logical inset already follows the\n     reading direction. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VProgressLinear.js","names":[],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A bar filling up as something progresses. The element rendered IS the track, and the\n * whole geometry follows from a single number set on it — the fraction filled, with no\n * unit. Everything is written in logical properties, so turning the bar vertical needs\n * nothing but a change of writing direction.\n *\n * There is no behavioural JavaScript: the value is clamped and a percentage is\n * formatted, and that is all.\n *\n * On naming: pass a `label` saying what is progressing. The text shown inside the\n * bar cannot serve as that name — the role a progress bar carries makes its content\n * presentational, so screen readers do not announce it.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\n/** What the default slot receives. */\nexport interface ProgressLinearSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the bar animates continuously and the\n   * value is ignored. It is what to use while waiting for a server that reports no\n   * percentage.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px\n   * by default, and showing text inside a bar that thin needs an\n   * explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /**\n   * What to write inside the bar instead of the percentage.\n   *\n   * It is rendered TWICE, once over the empty track and once over the filled part in a\n   * colour that contrasts with it, each copy cut at the fill's edge. So whatever it renders\n   * must be pure: anything with a side effect would happen twice.\n   */\n  default?(props: ProgressLinearSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-orientation=\"orientation\"\n    :data-value-position=\"valuePosition\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <span class=\"v-progress-linear-fill\" />\n    <!--\n      The same text twice, each copy cut at the fill's edge so that the two complete\n      each other exactly: the first in the ordinary text colour over the empty track,\n      the second over the filled part, coloured to contrast with it. The second is\n      hidden from screen readers, being a duplicate of text already there.\n    -->\n    <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n      <span class=\"v-progress-linear-text\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n      <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The element IS the track, and it takes the whole length available. Sizing it is the\n   * consumer's business, through the parent or through a width of their own — a\n   * consumer's style sits outside our layers and always wins.\n   */\n  .v-progress-linear {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out\n     * again on every frame. Scaling it would be cheaper, but a scale is physical: it\n     * would have to be undone for the vertical orientation and again for a\n     * right-to-left page, where a logical length simply works.\n     *\n     * The duration and easing are repeated by the clip of the text over the fill, or the\n     * colour boundary would drift away from the fill's own edge for the length of the\n     * transition.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /* The text inside the bar, in two copies laid over the same box — the track's own,\n     which is why a cut expressed as a fraction of it lands exactly on the fill's edge.\n     Bear in mind that the default 4px thickness cannot hold text at all: showing any\n     implies asking for a thicker bar.\n\n     TRAP — the two copies are COMPLEMENTARY and never superimposed: this one is cut OUT\n     of the filled part, the other cut TO it, so every letter is painted exactly once.\n     Removing either clip raises no error and stays invisible for as long as both copies\n     resolve to the SAME colour, which is what happens wherever the adaptive colour\n     function is unsupported. Where it IS supported and the two disagree — black over an\n     accent fill against white text in the dark theme — the copy underneath shows its\n     antialiased edges all around the letters of the one on top, and the label reads as\n     a halo. */\n  .v-progress-linear-text {\n    /* The two insets of the cut: one on the edge the fill grows FROM, one on the edge it\n       grows towards. They are named after those roles rather than after physical sides,\n       so the three geometry rules further down — horizontal, right-to-left, vertical —\n       all read the same pair. This copy cuts on the start side; the one over the fill\n       swaps them. */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /* The large negative inset on the two sides that do NOT carry the cut is what stops\n       text taller or wider than the bar from being cropped by its own clip. */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /* The per-tone fallback colour. The adaptive one cannot simply be written as a\n       second declaration after it: because that declaration contains a var(), a browser\n       with no support does not reject it at parse time — it would win the cascade and\n       only then turn invalid, which resets the colour to inherited and leaves the\n       fallback never applied. The block below is the way round it, being evaluated\n       before any var() substitution. */\n    color: var(--progress-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /* In a right-to-left page the fill grows from the right, so the two insets change\n     physical sides — the variables themselves keep their meaning. */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /* Upright, the bar fills from the bottom.\n\n     Changing the writing direction on the element is enough to turn everything: the\n     axis the fill grows along becomes vertical, so the length and the thickness swap\n     places, and both the fill and the animation follow with no rule written twice.\n\n     TRAP — putting zero at the bottom is NOT done by reversing the direction, which\n     would also apply to the text of the two copies: bidirectional reordering would then\n     display \"50 %\" as \"% 50\". The fill is anchored to the far end of the axis instead.\n\n     The length comes from a token because there is nothing to inherit it from: in a\n     parent of automatic height the bar would collapse to nothing. A consumer's own\n     height overrides it, sitting outside our layers. */\n  .v-progress-linear[data-orientation='vertical'] {\n    writing-mode: vertical-lr;\n    inline-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /* TRAP — a right-to-left page reverses the inline axis of a vertical writing mode too:\n     `vertical-lr` then runs from the bottom up, so the far end anchored above is the TOP.\n     The fill goes back to the start of the axis, which is now the bottom. Without this\n     rule the bar fills downwards, and the clip of the text, which assumes a fill rising\n     from the bottom, paints each copy over the wrong ground. */\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-fill {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n  }\n\n  /* The text now stacks along the vertical axis, whose start is the zero end — the\n     bottom of the bar. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /* The cut moves to the vertical axis: the fill rises from the bottom, which is that\n     axis' start. It is therefore the same in both reading directions, which means the\n     right-to-left rule further up has to be neutralized.\n\n     TRAP — the second selector is what neutralizes it, and it is written that way on\n     purpose: it is one step MORE specific than that rule, where the first selector alone\n     would merely tie with it and win by source order — a far more fragile arrangement. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /* When the progress cannot be measured, a bar of fixed size crosses the track from\n     just outside one end to just outside the other. At each extreme it is exactly flush\n     with the edge without ever pulling away from it, which is what makes the loop\n     invisible and keeps the track from ever looking empty — no second bar is needed.\n\n     The easing carries the whole impression: a gradual entry, a quick crossing, a damped\n     exit. A linear run, or an asymmetric curve, immediately reads as mechanical.\n\n     The movement is expressed in LOGICAL properties — a position and a size as\n     percentages of the track — rather than as a transform. One definition then serves\n     the horizontal, the vertical and the right-to-left cases, where a transform, being\n     physical, would need its own keyframes per axis and a flip per direction. */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /* The anchoring is put back at the start of the axis, vertical case included — where\n       a measurable progress anchors at the far end instead. */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /* Turned upright, the axis runs downwards, so the bar would travel from the top down —\n     the opposite of a measurable fill, which rises from the bottom. The same keyframes\n     are simply read backwards, which changes nothing else BECAUSE the easing curve is\n     symmetric; an asymmetric one would need a second set of keyframes.\n\n     A horizontal right-to-left page needs nothing: the logical inset already follows the\n     reading direction. A vertical one does, below. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  /* On a right-to-left page the vertical axis already runs upwards (see the trap above),\n     so the keyframes are read forwards again. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate]:dir(rtl)\n    .v-progress-linear-fill {\n    animation-direction: normal;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* Windows forced colours repaint every background as Canvas, which takes the track and\n     the fill away together and leaves a floating figure at best. The bar is drawn in the\n     system colours instead, the VSlider pair: an edge in CanvasText for the track, the\n     Highlight pair for the fill and the text over it. `forced-color-adjust` inherits, so\n     both copies of the text are given their colour here too. */\n  @media (forced-colors: active) {\n    .v-progress-linear {\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-progress-linear-fill {\n      background: Highlight;\n    }\n\n    .v-progress-linear-text {\n      color: CanvasText;\n    }\n\n    .v-progress-linear-text[data-on-fill] {\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VProgressLinear.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — no behavioural JS at all: value normalization and the display string.\n/**\n * A bar filling up as something progresses. The element rendered IS the track, and the\n * whole geometry follows from a single number set on it — the fraction filled, with no\n * unit. Everything is written in logical properties, so turning the bar vertical needs\n * nothing but a change of writing direction.\n *\n * There is no behavioural JavaScript: the value is clamped and a percentage is\n * formatted, and that is all.\n *\n * On naming: pass a `label` saying what is progressing. The text shown inside the\n * bar cannot serve as that name — the role a progress bar carries makes its content\n * presentational, so screen readers do not announce it.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the bar animates continuously and the\n   * value is ignored. It is what to use while waiting for a server that reports no\n   * percentage.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px\n   * by default — bear in mind that showing text inside a bar that thin needs an\n   * explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /**\n   * What to write inside the bar instead of the percentage.\n   *\n   * TRAP — it is rendered TWICE, once over the empty track and once over the filled\n   * part in a colour that contrasts with it, each copy cut at the fill's edge. So\n   * whatever it renders must be pure: anything with a side effect would happen twice.\n   */\n  default?(props: { value: number; max: number; percent: number }): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-orientation=\"orientation\"\n    :data-value-position=\"valuePosition\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <span class=\"v-progress-linear-fill\" />\n    <!--\n      The same text twice, each copy cut at the fill's edge so that the two complete\n      each other exactly: the first in the ordinary text colour over the empty track,\n      the second over the filled part, coloured to contrast with it. The second is\n      hidden from screen readers, being a duplicate of text already there.\n    -->\n    <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n      <span class=\"v-progress-linear-text\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n      <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The element IS the track, and it takes the whole length available. Sizing it is the\n   * consumer's business, through the parent or through a width of their own — a\n   * consumer's style sits outside our layers and always wins.\n   */\n  .v-progress-linear {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out\n     * again on every frame. Scaling it would be cheaper, but a scale is physical: it\n     * would have to be undone for the vertical orientation and again for a\n     * right-to-left page, where a logical length simply works.\n     *\n     * The duration and easing are repeated by the clip of the text over the fill, or the\n     * colour boundary would drift away from the fill's own edge for the length of the\n     * transition.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /* A custom colour replaces the tone: at (0,2,0) it beats the base rule's mapping\n     whatever the order the two are written in. */\n  .v-progress-linear[data-custom] {\n    --progress-fill: var(--custom-color);\n    --progress-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n    --progress-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  /* The text inside the bar, in two copies laid over the same box — the track's own,\n     which is why a cut expressed as a fraction of it lands exactly on the fill's edge.\n     Bear in mind that the default 4px thickness cannot hold text at all: showing any\n     implies asking for a thicker bar.\n\n     TRAP — the two copies are COMPLEMENTARY and never superimposed: this one is cut OUT\n     of the filled part, the other cut TO it, so every letter is painted exactly once.\n     Removing either clip raises no error and stays invisible for as long as both copies\n     resolve to the SAME colour, which is what happens wherever the adaptive colour\n     function is unsupported. Where it IS supported and the two disagree — black over an\n     accent fill against white text in the dark theme — the copy underneath shows its\n     antialiased edges all around the letters of the one on top, and the label reads as\n     a halo. */\n  .v-progress-linear-text {\n    /* The two insets of the cut: one on the edge the fill grows FROM, one on the edge it\n       grows towards. They are named after those roles rather than after physical sides,\n       so the three geometry rules further down — horizontal, right-to-left, vertical —\n       all read the same pair. This copy cuts on the start side; the one over the fill\n       swaps them. */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /* The large negative inset on the two sides that do NOT carry the cut is what stops\n       text taller or wider than the bar from being cropped by its own clip. */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /* The per-tone fallback colour. The adaptive one cannot simply be written as a\n       second declaration after it: because that declaration contains a var(), a browser\n       with no support does not reject it at parse time — it would win the cascade and\n       only then turn invalid, which resets the colour to inherited and leaves the\n       fallback never applied. The block below is the way round it, being evaluated\n       before any var() substitution. */\n    color: var(--progress-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /* In a right-to-left page the fill grows from the right, so the two insets change\n     physical sides — the variables themselves keep their meaning. */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /* Upright, the bar fills from the bottom.\n\n     Changing the writing direction on the element is enough to turn everything: the\n     axis the fill grows along becomes vertical, so the length and the thickness swap\n     places, and both the fill and the animation follow with no rule written twice.\n\n     TRAP — putting zero at the bottom is NOT done by reversing the direction, which\n     would also apply to the text of the two copies: bidirectional reordering would then\n     display \"50 %\" as \"% 50\". The fill is anchored to the far end of the axis instead.\n\n     The length comes from a token because there is nothing to inherit it from: in a\n     parent of automatic height the bar would collapse to nothing. A consumer's own\n     height overrides it, sitting outside our layers. */\n  .v-progress-linear[data-orientation='vertical'] {\n    writing-mode: vertical-lr;\n    inline-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /* The text now stacks along the vertical axis, whose start is the zero end — the\n     bottom of the bar. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /* The cut moves to the vertical axis: the fill rises from the bottom, which is that\n     axis' start. It is therefore the same in both reading directions, which means the\n     right-to-left rule further up has to be neutralized.\n\n     TRAP — the second selector is what neutralizes it, and it is written that way on\n     purpose: it is one step MORE specific than that rule, where the first selector alone\n     would merely tie with it and win by source order — a far more fragile arrangement. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /* When the progress cannot be measured, a bar of fixed size crosses the track from\n     just outside one end to just outside the other. At each extreme it is exactly flush\n     with the edge without ever pulling away from it, which is what makes the loop\n     invisible and keeps the track from ever looking empty — no second bar is needed.\n\n     The easing carries the whole impression: a gradual entry, a quick crossing, a damped\n     exit. A linear run, or an asymmetric curve, immediately reads as mechanical.\n\n     The movement is expressed in LOGICAL properties — a position and a size as\n     percentages of the track — rather than as a transform. One definition then serves\n     the horizontal, the vertical and the right-to-left cases, where a transform, being\n     physical, would need its own keyframes per axis and a flip per direction. */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /* The anchoring is put back at the start of the axis, vertical case included — where\n       a measurable progress anchors at the far end instead. */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /* Turned upright, the axis runs downwards, so the bar would travel from the top down —\n     the opposite of a measurable fill, which rises from the bottom. The same keyframes\n     are simply read backwards, which changes nothing else BECAUSE the easing curve is\n     symmetric; an asymmetric one would need a second set of keyframes.\n\n     Nothing is needed for a right-to-left page: the logical inset already follows the\n     reading direction. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA,IAAM,IAAQ,GA4BR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAMM,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK;yBAIxE,EAsCM,OAAA;GArCJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,oBAAkB,EAAA;GAClB,uBAAqB,EAAA;GACrB,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA,CAAA;GACf,OAAK,EAAA;uBAA6B,OAAO,EAAA,CAAA,CAAQ;sBAA2B,EAAA;4BAAqC,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;;eAM9H,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAAA,CAOnB,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAvD,EAWW,GAAA,EAAA,KAAA,EAAA,GAAA,CAVT,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGxC,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VProgressLinear.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A bar filling up as something progresses. The element rendered IS the track, and the\n * whole geometry follows from a single number set on it — the fraction filled, with no\n * unit. Everything is written in logical properties, so turning the bar vertical needs\n * nothing but a change of writing direction.\n *\n * There is no behavioural JavaScript: the value is clamped and a percentage is\n * formatted, and that is all.\n *\n * On naming: pass a `label` saying what is progressing. The text shown inside the\n * bar cannot serve as that name — the role a progress bar carries makes its content\n * presentational, so screen readers do not announce it.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\n/** What the default slot receives. */\nexport interface ProgressLinearSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the bar animates continuously and the\n   * value is ignored. It is what to use while waiting for a server that reports no\n   * percentage.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px\n   * by default, and showing text inside a bar that thin needs an\n   * explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /**\n   * What to write inside the bar instead of the percentage.\n   *\n   * It is rendered TWICE, once over the empty track and once over the filled part in a\n   * colour that contrasts with it, each copy cut at the fill's edge. So whatever it renders\n   * must be pure: anything with a side effect would happen twice.\n   */\n  default?(props: ProgressLinearSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-orientation=\"orientation\"\n    :data-value-position=\"valuePosition\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <span class=\"v-progress-linear-fill\" />\n    <!--\n      The same text twice, each copy cut at the fill's edge so that the two complete\n      each other exactly: the first in the ordinary text colour over the empty track,\n      the second over the filled part, coloured to contrast with it. The second is\n      hidden from screen readers, being a duplicate of text already there.\n    -->\n    <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n      <span class=\"v-progress-linear-text\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n      <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The element IS the track, and it takes the whole length available. Sizing it is the\n   * consumer's business, through the parent or through a width of their own — a\n   * consumer's style sits outside our layers and always wins.\n   */\n  .v-progress-linear {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out\n     * again on every frame. Scaling it would be cheaper, but a scale is physical: it\n     * would have to be undone for the vertical orientation and again for a\n     * right-to-left page, where a logical length simply works.\n     *\n     * The duration and easing are repeated by the clip of the text over the fill, or the\n     * colour boundary would drift away from the fill's own edge for the length of the\n     * transition.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /* The text inside the bar, in two copies laid over the same box — the track's own,\n     which is why a cut expressed as a fraction of it lands exactly on the fill's edge.\n     Bear in mind that the default 4px thickness cannot hold text at all: showing any\n     implies asking for a thicker bar.\n\n     TRAP — the two copies are COMPLEMENTARY and never superimposed: this one is cut OUT\n     of the filled part, the other cut TO it, so every letter is painted exactly once.\n     Removing either clip raises no error and stays invisible for as long as both copies\n     resolve to the SAME colour, which is what happens wherever the adaptive colour\n     function is unsupported. Where it IS supported and the two disagree — black over an\n     accent fill against white text in the dark theme — the copy underneath shows its\n     antialiased edges all around the letters of the one on top, and the label reads as\n     a halo. */\n  .v-progress-linear-text {\n    /* The two insets of the cut: one on the edge the fill grows FROM, one on the edge it\n       grows towards. They are named after those roles rather than after physical sides,\n       so the three geometry rules further down — horizontal, right-to-left, vertical —\n       all read the same pair. This copy cuts on the start side; the one over the fill\n       swaps them. */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /* The large negative inset on the two sides that do NOT carry the cut is what stops\n       text taller or wider than the bar from being cropped by its own clip. */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /* The per-tone fallback colour. The adaptive one cannot simply be written as a\n       second declaration after it: because that declaration contains a var(), a browser\n       with no support does not reject it at parse time — it would win the cascade and\n       only then turn invalid, which resets the colour to inherited and leaves the\n       fallback never applied. The block below is the way round it, being evaluated\n       before any var() substitution. */\n    color: var(--progress-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /* In a right-to-left page the fill grows from the right, so the two insets change\n     physical sides — the variables themselves keep their meaning. */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /* Upright, the bar fills from the bottom.\n\n     Changing the writing direction on the element is enough to turn everything: the\n     axis the fill grows along becomes vertical, so the length and the thickness swap\n     places, and both the fill and the animation follow with no rule written twice.\n\n     TRAP — putting zero at the bottom is NOT done by reversing the direction, which\n     would also apply to the text of the two copies: bidirectional reordering would then\n     display \"50 %\" as \"% 50\". The fill is anchored to the far end of the axis instead.\n\n     The length comes from a token because there is nothing to inherit it from: in a\n     parent of automatic height the bar would collapse to nothing. A consumer's own\n     height overrides it, sitting outside our layers. */\n  .v-progress-linear[data-orientation='vertical'] {\n    writing-mode: vertical-lr;\n    inline-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /* TRAP — a right-to-left page reverses the inline axis of a vertical writing mode too:\n     `vertical-lr` then runs from the bottom up, so the far end anchored above is the TOP.\n     The fill goes back to the start of the axis, which is now the bottom. Without this\n     rule the bar fills downwards, and the clip of the text, which assumes a fill rising\n     from the bottom, paints each copy over the wrong ground. */\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-fill {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n  }\n\n  /* The text now stacks along the vertical axis, whose start is the zero end — the\n     bottom of the bar. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /* The cut moves to the vertical axis: the fill rises from the bottom, which is that\n     axis' start. It is therefore the same in both reading directions, which means the\n     right-to-left rule further up has to be neutralized.\n\n     TRAP — the second selector is what neutralizes it, and it is written that way on\n     purpose: it is one step MORE specific than that rule, where the first selector alone\n     would merely tie with it and win by source order — a far more fragile arrangement. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /* When the progress cannot be measured, a bar of fixed size crosses the track from\n     just outside one end to just outside the other. At each extreme it is exactly flush\n     with the edge without ever pulling away from it, which is what makes the loop\n     invisible and keeps the track from ever looking empty — no second bar is needed.\n\n     The easing carries the whole impression: a gradual entry, a quick crossing, a damped\n     exit. A linear run, or an asymmetric curve, immediately reads as mechanical.\n\n     The movement is expressed in LOGICAL properties — a position and a size as\n     percentages of the track — rather than as a transform. One definition then serves\n     the horizontal, the vertical and the right-to-left cases, where a transform, being\n     physical, would need its own keyframes per axis and a flip per direction. */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /* The anchoring is put back at the start of the axis, vertical case included — where\n       a measurable progress anchors at the far end instead. */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /* Turned upright, the axis runs downwards, so the bar would travel from the top down —\n     the opposite of a measurable fill, which rises from the bottom. The same keyframes\n     are simply read backwards, which changes nothing else BECAUSE the easing curve is\n     symmetric; an asymmetric one would need a second set of keyframes.\n\n     A horizontal right-to-left page needs nothing: the logical inset already follows the\n     reading direction. A vertical one does, below. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  /* On a right-to-left page the vertical axis already runs upwards (see the trap above),\n     so the keyframes are read forwards again. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate]:dir(rtl)\n    .v-progress-linear-fill {\n    animation-direction: normal;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* Windows forced colours repaint every background as Canvas, which takes the track and\n     the fill away together and leaves a floating figure at best. The bar is drawn in the\n     system colours instead, the VSlider pair: an edge in CanvasText for the track, the\n     Highlight pair for the fill and the text over it. `forced-color-adjust` inherits, so\n     both copies of the text are given their colour here too. */\n  @media (forced-colors: active) {\n    .v-progress-linear {\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-progress-linear-fill {\n      background: Highlight;\n    }\n\n    .v-progress-linear-text {\n      color: CanvasText;\n    }\n\n    .v-progress-linear-text[data-on-fill] {\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwFA,IAAM,IAAQ,GA4BR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAMM,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK;yBAIxE,EAsCM,OAAA;GArCJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,oBAAkB,EAAA;GAClB,uBAAqB,EAAA;GACrB,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA,CAAA;GACf,OAAK,EAAA;uBAA6B,OAAO,EAAA,CAAA,CAAQ;sBAA2B,EAAA;4BAAqC,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;;eAM9H,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAAA,CAOnB,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAvD,EAWW,GAAA,EAAA,KAAA,EAAA,GAAA,CAVT,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGxC,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VRadio/VRadio.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-radio-dot{width:var(--vectis-control-size-check);height:var(--vectis-control-size-check);border:var(--vectis-control-border-width) solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-pill);color:var(--vectis-color-text-on-accent);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default);background:0 0;place-items:center;display:inline-grid}.v-radio-dot:before{content:"";width:var(--vectis-control-size-check-dot);height:var(--vectis-control-size-check-dot);border-radius:var(--vectis-radius-pill);opacity:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default);background:currentColor}.v-radio-input:checked+.v-radio-dot:before{opacity:1}.v-radio:not([data-readonly]) .v-choice-row:hover .v-radio-input:not(:disabled,:checked)+.v-radio-dot{border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-radio-input:checked+.v-radio-dot{background:var(--vectis-color-accent);border-color:var(--vectis-color-accent)}.v-radio:not([data-readonly]) .v-choice-row:hover .v-radio-input:not(:disabled):checked+.v-radio-dot{background:var(--vectis-color-accent-hover);border-color:var(--vectis-color-accent-hover)}:where(.v-radio[data-readonly]) .v-radio-input+.v-radio-dot{background:var(--vectis-color-surface-sunken);border-color:var(--vectis-color-border)}:where(.v-radio[data-readonly]) .v-radio-input:checked+.v-radio-dot{background:var(--vectis-color-text-muted);border-color:var(--vectis-color-text-muted);color:var(--vectis-color-surface)}:is(.v-radio-input:user-invalid+.v-radio-dot,.v-radio-input[aria-invalid=true]+.v-radio-dot){border-color:var(--vectis-color-danger)}.v-radio-input:disabled+.v-radio-dot{background:var(--vectis-color-surface-muted);border-color:var(--vectis-color-border);color:var(--vectis-color-text-subtle)}@media (prefers-reduced-motion:reduce){.v-radio-dot,.v-radio-dot:before{transition:none}}}
+@layer vectis.components{.v-radio-dot{width:var(--vectis-control-size-check);height:var(--vectis-control-size-check);border:var(--vectis-control-border-width) solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-pill);color:var(--vectis-color-text-on-accent);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default);background:0 0;place-items:center;display:inline-grid}.v-radio-dot:before{content:"";width:var(--vectis-control-size-check-dot);height:var(--vectis-control-size-check-dot);border-radius:var(--vectis-radius-pill);opacity:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default);background:currentColor}.v-radio-input:checked+.v-radio-dot:before{opacity:1}.v-radio:not([data-readonly]) .v-choice-row:hover .v-radio-input:not(:disabled,:checked,:user-invalid,[aria-invalid=true])+.v-radio-dot{border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-radio-input:checked+.v-radio-dot{background:var(--vectis-color-accent);border-color:var(--vectis-color-accent)}.v-radio:not([data-readonly]) .v-choice-row:hover .v-radio-input:not(:disabled,:user-invalid,[aria-invalid=true]):checked+.v-radio-dot{background:var(--vectis-color-accent-hover);border-color:var(--vectis-color-accent-hover)}:where(.v-radio[data-readonly]) .v-radio-input+.v-radio-dot{background:var(--vectis-color-surface-sunken);border-color:var(--vectis-color-border)}:where(.v-radio[data-readonly]) .v-radio-input:checked+.v-radio-dot{background:var(--vectis-color-text-muted);border-color:var(--vectis-color-text-muted);color:var(--vectis-color-surface)}:is(.v-radio-input:user-invalid+.v-radio-dot,.v-radio-input[aria-invalid=true]+.v-radio-dot){border-color:var(--vectis-color-danger)}.v-radio-input:disabled+.v-radio-dot{background:var(--vectis-color-surface-muted);border-color:var(--vectis-color-border);color:var(--vectis-color-text-subtle)}@media (forced-colors:active){.v-radio-input.v-radio-input.v-radio-input.v-radio-input.v-radio-input:checked:not(:disabled)+.v-radio-dot{forced-color-adjust:none;color:highlighttext;background:highlight;border-color:highlight}}@media (prefers-reduced-motion:reduce){.v-radio-dot,.v-radio-dot:before{transition:none}}}

package/dist/components/VRadio/VRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"VRadio.js","names":[],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A radio button whose dot is drawn by the design system, on the same principle as\n * VCheckbox: the real `<input type=\"radio\">` stays in place and only its own drawing\n * is hidden.\n *\n * The group is native as well. Several VRadio sharing the same `name` and the same\n * v-model form one choice, and it is the browser that then makes the arrow keys move\n * between them, that lets only one be selected, and that gives the group a single\n * stop in the tab order. There is no JavaScript here for any of it; the only piece this\n * component writes is the refusal `readonly` asks for, which a radio has no native form of.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, 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 radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the selection without allowing it to be changed. The button can still be\n   * focused and is still submitted with its form; a click or an arrow key simply selects\n   * nothing. Set it on every button of the group.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\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 — the redirection buys the whole keyboard. Moving between the buttons of a group is\n// the browser's job, but it only groups inputs that share a `name` — so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name`\n// left on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\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 radio button. Cancelling the click is\n// what refuses the selection: the browser puts the group's previous selection back and fires\n// no `change`. It covers the arrow keys too, which select the next button of the group\n// through a click the browser dispatches on it — so the focus still moves, the selection\n// does not.\n//\n// No `aria-readonly` goes with it, unlike VCheckbox and VSwitch: ARIA allows it on a\n// `radiogroup` and not on a `radio`, and axe fails the page for 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 radio button.\ndefineExpose({\n  /** Moves the focus to the real radio button. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"radio\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-radio 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=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-radio-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /* The state painting, rule for rule the same as VCheckbox's with its own classes: keep the\n     two ALIGNED. Every state below but the hovers weighs (0,3,0), so their ORDER arbitrates\n     them: checked, read-only, invalid, then disabled last. The two hovers exclude every state\n     they must not repaint, so no order argument reaches them. */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked)\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled):is(:checked)\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /* Read-only sinks like a read-only field, and a selected control trades the accent for the\n     muted text colour: still plainly on, no longer inviting a click. The mark takes the\n     surface colour, which contrasts with that fill in both themes, where white would vanish\n     against the light grey of the dark theme. `:where()` keeps both rules at the weight of\n     the states they sit between. */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VRadio.js","names":[],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A radio button whose dot is drawn by the design system, on the same principle as\n * VCheckbox: the real `<input type=\"radio\">` stays in place and only its own drawing\n * is hidden.\n *\n * The group is native as well. Several VRadio sharing the same `name` and the same\n * v-model form one choice, and it is the browser that then makes the arrow keys move\n * between them, that lets only one be selected, and that gives the group a single\n * stop in the tab order. There is no JavaScript here for any of it; the only piece this\n * component writes is the refusal `readonly` asks for, which a radio has no native form of.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, 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 radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the selection without allowing it to be changed. The button can still be\n   * focused and is still submitted with its form; a click or an arrow key simply selects\n   * nothing. Set it on every button of the group.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\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 — the redirection buys the whole keyboard. Moving between the buttons of a group is\n// the browser's job, but it only groups inputs that share a `name` — so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name`\n// left on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\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 radio button. Cancelling the click is\n// what refuses the selection: the browser puts the group's previous selection back and fires\n// no `change`. It covers the arrow keys too, which select the next button of the group\n// through a click the browser dispatches on it — so the focus still moves, the selection\n// does not.\n//\n// No `aria-readonly` goes with it, unlike VCheckbox and VSwitch: ARIA allows it on a\n// `radiogroup` and not on a `radio`, and axe fails the page for 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 radio button.\ndefineExpose({\n  /** Moves the focus to the real radio button. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"radio\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-radio 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=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-radio-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /* The state painting, rule for rule the same as VCheckbox's with its own classes: keep the\n     two ALIGNED. The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their\n     ORDER arbitrates them: checked, read-only, invalid, then disabled last.\n\n     The two hovers sit at (0,7,0) and therefore beat every one of them on specificity, order\n     or no order — which is why they have to EXCLUDE by hand each state they must not repaint.\n     Forgetting the invalid pair is what once rubbed the danger border out under the pointer,\n     on a control whose whole point at that moment is to look wrong. */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked, :user-invalid, [aria-invalid='true'])\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :user-invalid, [aria-invalid='true']):checked\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /* Read-only sinks like a read-only field, and a selected control trades the accent for the\n     muted text colour: still plainly on, no longer inviting a click. The inner disc takes the\n     surface colour, which contrasts with that fill in both themes, where white would vanish\n     against the light grey of the dark theme. `:where()` keeps both rules at the weight of\n     the states they sit between. */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (forced-colors: active) {\n    /* Windows forced colors erase every author colour: a `background` becomes `Canvas` and a\n     `border-color` becomes `CanvasText`, so a selected radio loses its inner disc outright, that disc being\n     a `background` on a `background` where a checkbox has a `stroke` that survives. The system\n     Highlight pair is what says \"selected\" here, as it does on a pressed VToggleItem, a\n     selected VChip and the current VPagination page.\n\n     The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and\n     a hover left winning would then paint its REAL grey over the system colour. */\n    .v-radio-input.v-radio-input.v-radio-input.v-radio-input.v-radio-input:checked:not(:disabled)\n      + .v-radio-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VRadio/VRadio.vue_vue_type_script_setup_true_lang.js

@@ -7,9 +7,9 @@ var y = [
 	"data-spread",
 	"data-readonly"
 ], b = { class: "v-choice-row" }, x = [
+	"aria-invalid",
 	"value",
 	"disabled",
-	"aria-invalid",
 	"aria-describedby"
 ], S = {
 	key: 0,
@@ -63,11 +63,11 @@ var y = [
 				ref: M,
 				"onUpdate:modelValue": t[0] ||= (e) => j.value = e,
 				type: "radio",
-				class: "v-radio-input v-hidden-input"
+				class: "v-radio-input v-hidden-input",
+				"aria-invalid": o.invalid || void 0
 			}, h(O), {
 				value: o.value,
 				disabled: o.disabled,
-				"aria-invalid": o.invalid || void 0,
 				"aria-describedby": h(A),
 				onClick: N
 			}), null, 16, x), [[_, j.value]]),

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

@@ -1 +1 @@
-{"version":3,"file":"VRadio.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A radio button whose dot is drawn by the design system, on the same principle as\n * VCheckbox: the real `<input type=\"radio\">` stays in place and only its own drawing\n * is hidden.\n *\n * The group is native as well. Several VRadio sharing the same `name` and the same\n * v-model form one choice, and it is the browser that then makes the arrow keys move\n * between them, that lets only one be selected, and that gives the group a single\n * stop in the tab order. There is no JavaScript here for any of it; the only piece this\n * component writes is the refusal `readonly` asks for, which a radio has no native form of.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, 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 radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the selection without allowing it to be changed. The button can still be\n   * focused and is still submitted with its form; a click or an arrow key simply selects\n   * nothing. Set it on every button of the group.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\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 — the redirection buys the whole keyboard. Moving between the buttons of a group is\n// the browser's job, but it only groups inputs that share a `name` — so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name`\n// left on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\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 radio button. Cancelling the click is\n// what refuses the selection: the browser puts the group's previous selection back and fires\n// no `change`. It covers the arrow keys too, which select the next button of the group\n// through a click the browser dispatches on it — so the focus still moves, the selection\n// does not.\n//\n// No `aria-readonly` goes with it, unlike VCheckbox and VSwitch: ARIA allows it on a\n// `radiogroup` and not on a `radio`, and axe fails the page for 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 radio button.\ndefineExpose({\n  /** Moves the focus to the real radio button. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"radio\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-radio 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=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-radio-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /* The state painting, rule for rule the same as VCheckbox's with its own classes: keep the\n     two ALIGNED. Every state below but the hovers weighs (0,3,0), so their ORDER arbitrates\n     them: checked, read-only, invalid, then disabled last. The two hovers exclude every state\n     they must not repaint, so no order argument reaches them. */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked)\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled):is(:checked)\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /* Read-only sinks like a read-only field, and a selected control trades the accent for the\n     muted text colour: still plainly on, no longer inviting a click. The mark takes the\n     surface colour, which contrasts with that fill in both themes, where white would vanish\n     against the light grey of the dark theme. `:where()` keeps both rules at the weight of\n     the states they sit between. */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,IAAM,IAAQ,GAeR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,mBAAgB,EAAY,SAAa,CAAC,CAAC,EAAM,IAAI,GAM/D,IAAQ,EAAsB,GAAA,YAAgB,GAO9C,IAAU,EAA6B,IAAI;EAWjD,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,EA2BO,QAAA;GA1BL,OAAK,EAAA,CAAC,oBACE,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,EAiBQ,SAjBR,GAiBQ;KAhBN,EAWE,SAXF,EAWE;aAVI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,OAAM;MACE,EAAA,CAAA,GAAc;IACrB,OAAO,EAAA;IACP,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;IACzB,oBAAkB,EAAA,CAAA;IAClB,SAAO;0BARC,EAAA,KAAK,CAAA,CAAA;YAUhB,EAA+C,QAAA;IAAzC,OAAM;IAAc,eAAY;;GAC1BA,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,EAAmF,QAAA;;GAAhE,IAAI,EAAA,CAAA;GAAQ,OAAM;OAAgC,EAAA,IAAI,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VRadio.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A radio button whose dot is drawn by the design system, on the same principle as\n * VCheckbox: the real `<input type=\"radio\">` stays in place and only its own drawing\n * is hidden.\n *\n * The group is native as well. Several VRadio sharing the same `name` and the same\n * v-model form one choice, and it is the browser that then makes the arrow keys move\n * between them, that lets only one be selected, and that gives the group a single\n * stop in the tab order. There is no JavaScript here for any of it; the only piece this\n * component writes is the refusal `readonly` asks for, which a radio has no native form of.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, 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 radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the selection without allowing it to be changed. The button can still be\n   * focused and is still submitted with its form; a click or an arrow key simply selects\n   * nothing. Set it on every button of the group.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\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 — the redirection buys the whole keyboard. Moving between the buttons of a group is\n// the browser's job, but it only groups inputs that share a `name` — so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name`\n// left on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\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 radio button. Cancelling the click is\n// what refuses the selection: the browser puts the group's previous selection back and fires\n// no `change`. It covers the arrow keys too, which select the next button of the group\n// through a click the browser dispatches on it — so the focus still moves, the selection\n// does not.\n//\n// No `aria-readonly` goes with it, unlike VCheckbox and VSwitch: ARIA allows it on a\n// `radiogroup` and not on a `radio`, and axe fails the page for 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 radio button.\ndefineExpose({\n  /** Moves the focus to the real radio button. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"radio\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-radio 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=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-radio-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /* The state painting, rule for rule the same as VCheckbox's with its own classes: keep the\n     two ALIGNED. The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their\n     ORDER arbitrates them: checked, read-only, invalid, then disabled last.\n\n     The two hovers sit at (0,7,0) and therefore beat every one of them on specificity, order\n     or no order — which is why they have to EXCLUDE by hand each state they must not repaint.\n     Forgetting the invalid pair is what once rubbed the danger border out under the pointer,\n     on a control whose whole point at that moment is to look wrong. */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked, :user-invalid, [aria-invalid='true'])\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :user-invalid, [aria-invalid='true']):checked\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /* Read-only sinks like a read-only field, and a selected control trades the accent for the\n     muted text colour: still plainly on, no longer inviting a click. The inner disc takes the\n     surface colour, which contrasts with that fill in both themes, where white would vanish\n     against the light grey of the dark theme. `:where()` keeps both rules at the weight of\n     the states they sit between. */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (forced-colors: active) {\n    /* Windows forced colors erase every author colour: a `background` becomes `Canvas` and a\n     `border-color` becomes `CanvasText`, so a selected radio loses its inner disc outright, that disc being\n     a `background` on a `background` where a checkbox has a `stroke` that survives. The system\n     Highlight pair is what says \"selected\" here, as it does on a pressed VToggleItem, a\n     selected VChip and the current VPagination page.\n\n     The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and\n     a hover left winning would then paint its REAL grey over the system colour. */\n    .v-radio-input.v-radio-input.v-radio-input.v-radio-input.v-radio-input:checked:not(:disabled)\n      + .v-radio-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDA,IAAM,IAAQ,GAeR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,mBAAgB,EAAY,SAAa,CAAC,CAAC,EAAM,IAAI,GAM/D,IAAQ,EAAsB,GAAA,YAAgB,GAO9C,IAAU,EAA6B,IAAI;EAWjD,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,EA2BO,QAAA;GA1BL,OAAK,EAAA,CAAC,oBACE,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,EAiBQ,SAjBR,GAiBQ;KAhBN,EAWE,SAXF,EAWE;aAVI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,OAAM;IACL,gBAAc,EAAA,WAAW,KAAA;MAClB,EAAA,CAAA,GAAc;IACrB,OAAO,EAAA;IACP,UAAU,EAAA;IACV,oBAAkB,EAAA,CAAA;IAClB,SAAO;0BARC,EAAA,KAAK,CAAA,CAAA;YAUhB,EAA+C,QAAA;IAAzC,OAAM;IAAc,eAAY;;GAC1BA,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,EAAmF,QAAA;;GAAhE,IAAI,EAAA,CAAA;GAAQ,OAAM;OAAgC,EAAA,IAAI,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VSeparator/VSeparator.d.ts

@@ -5,7 +5,7 @@
  *
  * It carries no content slot and no spacing prop, on purpose. A divider with a label
  * in the middle is really a heading that happens to have a rule, and the space
- * around a rule belongs to the layout placing it — the same rule VTypography
+ * around a rule belongs to the layout placing it: the same rule VTypography
  * follows.
  */
 /** Which way the rule runs. */

package/dist/components/VSeparator/VSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSeparator.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — no behavioural JS at all. Choosing an `<hr>` as the root IS the\n// accessibility decision: the `separator` role comes with it, and\n// `aria-orientation` is emitted for the vertical case alone.\n/**\n * A one-pixel rule drawn between two blocks. It renders an `<hr>`, so assistive\n * technology already knows it is a separator, and the element takes no focus and\n * appears in no keyboard navigation.\n *\n * It carries no content slot and no spacing prop, on purpose. A divider with a label\n * in the middle is really a heading that happens to have a rule, and the space\n * around a rule belongs to the layout placing it — the same rule VTypography\n * follows.\n */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /**\n   * The direction the rule runs in: across by default, or down the page under\n   * `vertical`. A vertical rule needs a height to show: as a flex or grid item it\n   * takes the one of its line, but in ordinary flow the consumer has to set one.\n   */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!-- aria-orientation is emitted only when it CONTRADICTS what the role already\n       implies: a separator is horizontal by default, so stating it would merely\n       restate the role. This is the same convention the VTabs tablist follows. -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /* The rule is painted with a BORDER and not a background. Under Windows forced\n       colours a background is forced to Canvas, where a rule drawn that way simply\n       vanishes, while a border colour is forced to CanvasText and survives — the\n       same argument that made the icon registry ship SVG paths. Everywhere else the\n       two paints are pixel-identical, `box-sizing: border-box` keeping the box at\n       one pixel in total either way.\n\n       The user agent gives an <hr> a 0.5em block margin, an automatic inline one and\n       an inset border. All three are cancelled here rather than in the reset: the\n       reset sits in a weaker layer, so the margin below would win only by accident.\n\n       TRAP — `.v-menu-separator` and `.v-combobox-separator` override that margin\n       from THEIR OWN sheet, and which of the two sheets the consumer's bundler puts\n       last is not ours to decide. Both are therefore written as the compound\n       `.v-separator.v-x-separator`, and every declaration added here falls under the\n       same obligation. */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /* `align-self: stretch` IS the contract of a vertical rule. An <hr> has no height\n     of its own, so the rule only appears when it is a flex or grid item, where this\n     makes it take the full cross size of its line whatever the container's\n     align-items says. In ordinary flow it collapses to nothing, silently and with no\n     error — there it is up to the consumer to give it a block-size. */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSeparator.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// No behavioural JS at all. Choosing an `<hr>` as the root IS the\n// accessibility decision: the `separator` role comes with it, and\n// `aria-orientation` is emitted for the vertical case alone.\n/**\n * A one-pixel rule drawn between two blocks. It renders an `<hr>`, so assistive\n * technology already knows it is a separator, and the element takes no focus and\n * appears in no keyboard navigation.\n *\n * It carries no content slot and no spacing prop, on purpose. A divider with a label\n * in the middle is really a heading that happens to have a rule, and the space\n * around a rule belongs to the layout placing it: the same rule VTypography\n * follows.\n */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /**\n   * The direction the rule runs in: across by default, or down the page under\n   * `vertical`. A vertical rule needs a height to show: as a flex or grid item it\n   * takes the one of its line, but in ordinary flow the consumer has to set one.\n   */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!-- aria-orientation is emitted only when it CONTRADICTS what the role already\n       implies: a separator is horizontal by default, so stating it would merely\n       restate the role. This is the same convention the VTabs tablist follows. -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /* The rule is painted with a BORDER and not a background. Under Windows forced\n       colours a background is forced to Canvas, where a rule drawn that way simply\n       vanishes, while a border colour is forced to CanvasText and survives — the\n       same argument that made the icon registry ship SVG paths. Everywhere else the\n       two paints are pixel-identical, `box-sizing: border-box` keeping the box at\n       one pixel in total either way.\n\n       The user agent gives an <hr> a 0.5em block margin, an automatic inline one and\n       an inset border. All three are cancelled here rather than in the reset: the\n       reset sits in a weaker layer, so the margin below would win only by accident.\n\n       TRAP — `.v-menu-separator` and `.v-combobox-separator` override that margin\n       from THEIR OWN sheet, and which of the two sheets the consumer's bundler puts\n       last is not ours to decide. Both are therefore written as the compound\n       `.v-separator.v-x-separator`, and every declaration added here falls under the\n       same obligation. */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /* `align-self: stretch` IS the contract of a vertical rule. An <hr> has no height\n     of its own, so the rule only appears when it is a flex or grid item, where this\n     makes it take the full cross size of its line whatever the container's\n     align-items says. In ordinary flow it collapses to nothing, silently and with no\n     error — there it is up to the consumer to give it a block-size. */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":""}