vectis-ui 0.14.0 → 0.16.0

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/**\n * CSS draws the fill. JavaScript normalizes values shared by geometry, slots and progressbar\n * ARIA attributes.\n */\nimport { computed, useId } from 'vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\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, shown above the bar and naming it for screen readers. Without it, the\n   * bar is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your\n   * own takes precedence.\n   */\n  label?: string\n  /** Hides the label visually. It still names the bar for screen readers. */\n  hideLabel?: boolean\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /** Shows progress that cannot be measured, such as a server that reports no percentage. */\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 by\n   * default, and showing text inside a bar that thin needs an 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  hideLabel: false,\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  /** What to write inside the bar instead of the percentage. */\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// The root is a layout box holding the label and the bar: `class` and `style` stay on it, with\n// the tone and the custom properties the bar inherits, and every other attribute goes to the bar.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// @a11y\n// A visible label names the bar by reference, unless the consumer named it themselves; without\n// one, the dictionary does. An indicator takes no name from the text inside it.\nconst labelId = useId()\nconst ariaLabel = useAriaLabel(() => (props.label ? undefined : m.value.progress.label))\nconst labelledBy = computed(() =>\n  props.label && attrs['aria-label'] == null && attrs['aria-labelledby'] == null\n    ? labelId\n    : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear-field v-tone\"\n    :class=\"rootClass\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-orientation=\"orientation\"\n    :style=\"[{ '--custom-color': color, '--progress-thickness': px(thickness) }, rootStyle]\"\n  >\n    <span\n      v-if=\"label\"\n      :id=\"labelId\"\n      class=\"v-progress-linear-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      >{{ label }}</span\n    >\n    <div\n      class=\"v-progress-linear\"\n      role=\"progressbar\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"forwardedAttrs\"\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=\"{ '--fill-fraction': String(fraction) }\"\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  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The root holds the label and the bar, and declares what the bar reads, so a consumer's style\n   * on it (outside our layers) overrides the thickness and the colours. The bar takes the whole\n   * length available: sizing it is the consumer's business, through the parent or a width of\n   * their own on the root.\n   */\n  .v-progress-linear-field {\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    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-progress-linear-label {\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* The element IS the track. */\n  .v-progress-linear {\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 again on\n     * every frame. Scaling it would be cheaper, but a scale is physical: it would have to be\n     * undone for the vertical orientation and again for a right-to-left page, where a logical\n     * length simply works.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /*\n   * The two copies are COMPLEMENTARY and never superimposed: this one is cut OUT of the filled\n   * part, the other cut TO it, so every letter is painted exactly once. Removing either clip\n   * raises no error and stays invisible for as long as both copies resolve to the same colour,\n   * which happens wherever the adaptive colour function is unsupported.\n   */\n  .v-progress-linear-text {\n    /*\n     * The two insets of the cut: one on the edge the fill grows FROM, one on the edge it grows\n     * towards. They are named after those roles rather than after physical sides, so the three\n     * geometry rules further down; horizontal, right-to-left, vertical; all read the same pair.\n     */\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    /*\n     * The large negative inset on the two sides that do not carry the cut is what stops text\n     * taller or wider than the bar from being cropped by its own clip.\n     */\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    /*\n     * The per-tone fallback colour. The adaptive one cannot simply be written as a second\n     * declaration after it: because that declaration contains a var(), a browser with no\n     * support does not reject it at parse time; it would win the cascade and only then turn\n     * invalid, which resets the colour to inherited and leaves the fallback never applied.\n     */\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  /*\n   * In a right-to-left page the fill grows from the right, so the two insets change physical\n   * sides; the variables themselves keep their meaning.\n   */\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  /*\n   * Putting zero at the bottom is not done by reversing the direction, which would also apply\n   * to the text of the two copies: bidirectional reordering would then display \"50 %\" as \"%\n   * 50\". The fill is anchored to the far end of the axis instead.\n   */\n  /*\n   * Upright, the root carries the length, so a consumer's height on it sets the bar's: the bar\n   * takes whatever the label leaves, its own inline size being the physical height.\n   */\n  .v-progress-linear-field[data-orientation='vertical'] {\n    align-items: flex-start;\n    block-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] {\n    flex: 1 1 0;\n    writing-mode: vertical-lr;\n    inline-size: auto;\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  /*\n   * A right-to-left page reverses the inline axis of a vertical writing mode too: `vertical-lr`\n   * then runs from the bottom up, so the far end anchored above is the TOP. The fill goes back\n   * to the start of the axis, which is now the bottom.\n   */\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  .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  /*\n   * The second selector is what neutralizes it, and it is written that way on purpose: it is\n   * one step MORE specific than that rule, where the first selector alone would merely tie with\n   * it and win by source order; a far more fragile arrangement.\n   */\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  /*\n   * At each extreme it is exactly flush with the edge without ever pulling away from it, which\n   * makes the loop invisible and keeps the track from ever looking empty; no second bar is\n   * needed. The easing carries the whole impression: a gradual entry, a quick crossing, a\n   * damped exit.\n   */\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    /*\n     * The anchoring is put back at the start of the axis, vertical case included; where a\n     * measurable progress anchors at the far end instead.\n     */\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  /*\n   * The same keyframes are simply read backwards, which changes nothing else BECAUSE the easing\n   * curve is symmetric; an asymmetric one would need a second set of keyframes. A horizontal\n   * right-to-left page needs nothing: the logical inset already follows the reading direction.\n   */\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    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* `forced-color-adjust` inherits, so 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA,IAAM,IAAQ,GAuBR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAKM,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAK/D,IAAU,EAAM,GAChB,IAAY,QAAoB,EAAM,QAAQ,KAAA,IAAY,EAAE,MAAM,SAAS,KAAM,GACjF,IAAa,QACjB,EAAM,SAAS,EAAM,iBAAiB,QAAQ,EAAM,sBAAsB,OACtE,IACA,KAAA,CACN;yBAIE,EAkDM,OAAA;GAjDJ,OAAK,EAAA,CAAC,kCACE,EAAA,CAAA,CAAS,CAAA;GAChB,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,oBAAkB,EAAA;GAClB,OAAK,EAAA,CAAA;IAAA,kBAAuB,EAAA;IAAK,wBAA0B,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;GAAA,GAAK,EAAA,CAAA,CAAS,CAAA;MAG9E,EAAA,SAAA,EAAA,GADR,EAMC,QAAA;;GAJE,IAAI,EAAA,CAAA;GACL,OAAK,EAAA,CAAC,2BAAyB,EAAA,qBACA,EAAA,UAAS,CAAA,CAAA;OACpC,EAAA,KAAK,GAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEX,EAkCM,OAlCN,EAkCM;GAjCJ,OAAM;GACN,MAAK;GACJ,mBAAiB,EAAA;GACjB,cAAY,EAAA,CAAA;KACL,EAAA,CAAA,GAAc;GACrB,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,mBAAuB,OAAO,EAAA,CAAA,CAAQ,EAAA;gBAE5C,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,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VProgressLinear.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_toDisplayString","_createCommentVNode","_createElementVNode","_mergeProps","_Fragment","_renderSlot","_createTextVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","VProgressLinear_vue_vue_type_script_setup_true_lang_default","props","__props","m","useMessages","normalizedMax","useProgressValue","useRootAttrs","labelId","useId","ariaLabel","useAriaLabel","labelledBy","computed","attrs","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","px","rootStyle","toDisplayString","createCommentVNode","createElementVNode","mergeProps","forwardedAttrs","clamped","fraction","_cache","_ctx","Fragment","renderSlot","percent","createTextVNode","roundedPercent"],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the fill. JavaScript normalizes values shared by geometry, slots and progressbar\n * ARIA attributes.\n */\nimport { computed, useId } from 'vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\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, shown above the bar and naming it for screen readers. Without it, the\n   * bar is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your\n   * own takes precedence.\n   */\n  label?: string\n  /** Hides the label visually. It still names the bar for screen readers. */\n  hideLabel?: boolean\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /** Shows progress that cannot be measured, such as a server that reports no percentage. */\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 by\n   * default, and showing text inside a bar that thin needs an 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  hideLabel: false,\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  /** What to write inside the bar instead of the percentage. */\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// The root is a layout box holding the label and the bar: `class` and `style` stay on it, with\n// the tone and the custom properties the bar inherits, and every other attribute goes to the bar.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// @a11y\n// A visible label names the bar by reference, unless the consumer named it themselves; without\n// one, the dictionary does. An indicator takes no name from the text inside it.\nconst labelId = useId()\nconst ariaLabel = useAriaLabel(() => (props.label ? undefined : m.value.progress.label))\nconst labelledBy = computed(() =>\n  props.label && attrs['aria-label'] == null && attrs['aria-labelledby'] == null\n    ? labelId\n    : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear-field v-tone\"\n    :class=\"rootClass\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-orientation=\"orientation\"\n    :style=\"[{ '--custom-color': color, '--progress-thickness': px(thickness) }, rootStyle]\"\n  >\n    <span\n      v-if=\"label\"\n      :id=\"labelId\"\n      class=\"v-progress-linear-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      >{{ label }}</span\n    >\n    <div\n      class=\"v-progress-linear\"\n      role=\"progressbar\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"forwardedAttrs\"\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=\"{ '--fill-fraction': String(fraction) }\"\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  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The root holds the label and the bar, and declares what the bar reads, so a consumer's style\n   * on it (outside our layers) overrides the thickness and the colours. The bar takes the whole\n   * length available: sizing it is the consumer's business, through the parent or a width of\n   * their own on the root.\n   */\n  .v-progress-linear-field {\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    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-progress-linear-label {\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* The element IS the track. */\n  .v-progress-linear {\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 again on\n     * every frame. Scaling it would be cheaper, but a scale is physical: it would have to be\n     * undone for the vertical orientation and again for a right-to-left page, where a logical\n     * length simply works.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /*\n   * The two copies are COMPLEMENTARY and never superimposed: this one is cut OUT of the filled\n   * part, the other cut TO it, so every letter is painted exactly once. Removing either clip\n   * raises no error and stays invisible for as long as both copies resolve to the same colour,\n   * which happens wherever the adaptive colour function is unsupported.\n   */\n  .v-progress-linear-text {\n    /*\n     * The two insets of the cut: one on the edge the fill grows FROM, one on the edge it grows\n     * towards. They are named after those roles rather than after physical sides, so the three\n     * geometry rules further down; horizontal, right-to-left, vertical; all read the same pair.\n     */\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    /*\n     * The large negative inset on the two sides that do not carry the cut is what stops text\n     * taller or wider than the bar from being cropped by its own clip.\n     */\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    /*\n     * The per-tone fallback colour. The adaptive one cannot simply be written as a second\n     * declaration after it: because that declaration contains a var(), a browser with no\n     * support does not reject it at parse time; it would win the cascade and only then turn\n     * invalid, which resets the colour to inherited and leaves the fallback never applied.\n     */\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  /*\n   * In a right-to-left page the fill grows from the right, so the two insets change physical\n   * sides; the variables themselves keep their meaning.\n   */\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  /*\n   * Putting zero at the bottom is not done by reversing the direction, which would also apply\n   * to the text of the two copies: bidirectional reordering would then display \"50 %\" as \"%\n   * 50\". The fill is anchored to the far end of the axis instead.\n   */\n  /*\n   * Upright, the root carries the length, so a consumer's height on it sets the bar's: the bar\n   * takes whatever the label leaves, its own inline size being the physical height.\n   */\n  .v-progress-linear-field[data-orientation='vertical'] {\n    align-items: flex-start;\n    block-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] {\n    flex: 1 1 0;\n    writing-mode: vertical-lr;\n    inline-size: auto;\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  /*\n   * A right-to-left page reverses the inline axis of a vertical writing mode too: `vertical-lr`\n   * then runs from the bottom up, so the far end anchored above is the TOP. The fill goes back\n   * to the start of the axis, which is now the bottom.\n   */\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  .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  /*\n   * The second selector is what neutralizes it, and it is written that way on purpose: it is\n   * one step MORE specific than that rule, where the first selector alone would merely tie with\n   * it and win by source order; a far more fragile arrangement.\n   */\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  /*\n   * At each extreme it is exactly flush with the edge without ever pulling away from it, which\n   * makes the loop invisible and keeps the track from ever looking empty; no second bar is\n   * needed. The easing carries the whole impression: a gradual entry, a quick crossing, a\n   * damped exit.\n   */\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    /*\n     * The anchoring is put back at the start of the axis, vertical case included; where a\n     * measurable progress anchors at the far end instead.\n     */\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  /*\n   * The same keyframes are simply read backwards, which changes nothing else BECAUSE the easing\n   * curve is symmetric; an asymmetric one would need a second set of keyframes. A horizontal\n   * right-to-left page needs nothing: the logical inset already follows the reading direction.\n   */\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    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* `forced-color-adjust` inherits, so 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA,IAAMmB,IAAQC,GAuBRC,IAAIC,EAAY,GAEhB,EACJ,KAAKC,GACL,YACA,aACA,YACA,sBACEC,QACIL,EAAM,aACNA,EAAM,GACd,GAKM,EAAE,UAAO,cAAW,cAAW,sBAAmBM,EAAa,GAK/DC,IAAUC,EAAM,GAChBC,IAAYC,QAAoBV,EAAM,QAAQ,KAAA,IAAYE,EAAE,MAAM,SAAS,KAAM,GACjFS,IAAaC,QACjBZ,EAAM,SAASa,EAAM,iBAAiB,QAAQA,EAAM,sBAAsB,OACtEN,IACA,KAAA,CACN;oBAIEzB,EAAA,GAAAC,EAkDM,OAAA;GAjDJ,OAAKC,EAAA,CAAC,kCACEC,EAAAiC,CAAA,CAAS,CAAA;GAChB,aAAWjB,EAAA;GACX,eAAaA,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,oBAAkBA,EAAA;GAClB,OAAKf,EAAA,CAAA;IAAA,kBAAuBe,EAAA;IAAK,wBAA0BhB,EAAAmC,CAAA,CAAE,CAACnB,EAAA,SAAS;GAAA,GAAKhB,EAAAoC,CAAA,CAAS,CAAA;EAG9E,GAAA,CAAApB,EAAA,SADRnB,EAAA,GAAAC,EAMC,QAAA;;GAJE,IAAIE,EAAAsB,CAAA;GACL,OAAKvB,EAAA,CAAC,2BAAyB,EAAA,qBACAiB,EAAA,UAAS,CAAA,CAAA;EACpC,GAAAd,EAAAc,EAAA,KAAK,GAAA,IAAAN,CAAA,KAAA4B,EAAA,IAAA,EAAA,GAEXlC,EAkCM,OAlCNC,EAkCM;GAjCJ,OAAM;GACN,MAAK;GACJ,mBAAiBqB,EAAA;GACjB,cAAY1B,EAAAwB,CAAA;EACL,GAAAxB,EAAAyC,CAAA,GAAc;GACrB,cAAYzB,EAAA;GACZ,oBAAkBA,EAAA;GAClB,uBAAqBA,EAAA;GACrB,sBAAoBA,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAeA,EAAA,gBAAgB,KAAA,IAAYhB,EAAA0C,CAAA;GAC5C,iBAAc;GACb,iBAAe1C,EAAAmB,CAAA;GACf,OAAK,EAAA,mBAAuB,OAAOnB,EAAA2C,CAAA,CAAQ,EAAA;EAE5C,CAAA,GAAA,CAAA,AAAAC,EAAA,OAAAxC,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAOnB,CAAAY,EAAA,kBAAkBA,EAAA,aAAapB,EAAAA,OAAO,YAAvDC,EAAA,GAAAC,EAWWQ,GAAA,EAAA,KAAA,EAAA,GAAA,CAVTF,EAIO,QAJPQ,GAIO,CAHLL,EAEOsC,EAAA,QAAA,WAAA;GAFA,OAAO7C,EAAA0C,CAAA;GAAU,KAAK1C,EAAAmB,CAAA;GAAgB,SAASnB,EAAAgD,CAAA;EAAtD,SAEO,CADFxC,EAAAN,EAAAF,EAAAiB,CAAA,CAAC,CAAC,SAAS,QAAQjB,EAAAkD,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGxC9C,EAIO,QAJPS,GAIO,CAHLN,EAEOsC,EAAA,QAAA,WAAA;GAFA,OAAO7C,EAAA0C,CAAA;GAAU,KAAK1C,EAAAmB,CAAA;GAAgB,SAASnB,EAAAgD,CAAA;EAAtD,SAEO,CADFxC,EAAAN,EAAAF,EAAAiB,CAAA,CAAC,CAAC,SAAS,QAAQjB,EAAAkD,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAAZ,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA3B,CAAA,CAAA,GAAA,IAAAF,CAAA"}

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 * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\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  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the 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  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\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` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/**\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\ndefineExpose(exposed)\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 || !!error || 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    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* 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  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\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  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\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    /*\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 a\n     * hover left winning would then paint its real grey over the system colour.\n     */\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":""}
+{"version":3,"file":"VRadio.js","names":["_sfc_main","VRadio_vue_vue_type_script_setup_true_lang_default","VRadio_default"],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\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  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the 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  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\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` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/**\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\ndefineExpose(exposed)\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 || !!error || 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    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* 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  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\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  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\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    /*\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 a\n     * hover left winning would then paint its real grey over the system colour.\n     */\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.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 * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\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  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the 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  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\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` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/**\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\ndefineExpose(exposed)\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 || !!error || 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    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* 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  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\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  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\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    /*\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 a\n     * hover left winning would then paint its real grey over the system colour.\n     */\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,IAAM,EACJ,cACA,cACA,mBACA,WACA,YACA,gBACA,YACA,uBACA,eACE,EAAU,CAAK,GAMb,IAAQ,EAAsB,GAAA,YAAgB;SAOpD,EAAa,CAAO,mBAIlB,EA4BO,QAAA;GA3BL,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;;GAEhC,EAiBQ,SAjBR,GAiBQ;MAhBN,EAWE,SAXF,EAWE;cAVI;KAAJ,KAAI;8CACU,QAAA;KACd,MAAK;KACL,OAAM;KACL,gBAAc,EAAA,WAAO,CAAA,CAAM,EAAA,SAAS,KAAA;OAC7B,EAAA,CAAA,GAAc;KACrB,OAAO,EAAA;KACP,UAAU,EAAA;KACV,oBAAkB,EAAA,CAAA;KAClB,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;2BARC,EAAA,KAAK,CAAA,CAAA;aAUhB,EAA+C,QAAA;KAAzC,OAAM;KAAc,eAAY;;IAC1BA,EAAAA,OAAO,WAAW,EAAA,SAAA,EAAA,GAA9B,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAGlB,EAAmF,GAAA;IAAnE,MAAM,EAAA;IAAO,OAAO,EAAA;IAAQ,WAAS,EAAA,CAAA;IAAS,YAAU,EAAA,CAAA;;;;;;;GACxE,EAAiC,GAAA,EAAf,MAAM,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}
+{"version":3,"file":"VRadio.vue_vue_type_script_setup_true_lang.js","names":["$slots","props","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_withDirectives","_mergeProps","_vModelRadio","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","VFieldMessage","VFieldAnnouncer","VFieldAnnouncer_default","VFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","VRadio_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","useChoice","__props","model","useModel","exposed","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","createElementVNode","withDirectives","mergeProps","inputEl","_cache","$event","forwardedAttrs","describedBy","args","refuseWhenReadonly","vModelRadio","_ctx","renderSlot","createTextVNode","toDisplayString","createCommentVNode","createVNode","hintId","errorId"],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\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  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the 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  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\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` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/**\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\ndefineExpose(exposed)\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 || !!error || 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    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* 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  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\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  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\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    /*\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 a\n     * hover left winning would then paint its real grey over the system colour.\n     */\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,IAAM,EACJ,cACA,cACA,mBACA,WACA,YACA,gBACA,YACA,uBACA,eACE6B,EAAU5B,CAAK,GAMb8B,IAAQ7B,EAAsB4B,GAAA,YAAgB;SAOpDF,EAAaK,CAAO,cAIlB9B,EAAA,GAAAC,EA4BO,QAAA;GA3BL,OAAKC,EAAA,CAAC,oBACEC,EAAAgC,CAAA,CAAS,CAAA;GAChB,OAAK/B,EAAED,EAAAkC,CAAA,CAAS;GAChB,uBAAqBV,EAAA;GACrB,eAAaA,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;;GAEhCtB,EAiBQ,SAjBRc,GAiBQ;IAhBNb,EAAAD,EAWE,SAXFE,EAWE;KAVI,SAAA;KAAJ,KAAIkC;KACK,uBAAA,AAAAC,EAAA,QAAA,MAAA,EAAK,QAAAC;KACd,MAAK;KACL,OAAM;KACL,gBAAchB,EAAA,WAAO,CAAA,CAAMA,EAAA,SAAS,KAAA;IAC7B,GAAAxB,EAAAyC,CAAA,GAAc;KACrB,OAAOjB,EAAA;KACP,UAAUA,EAAA;KACV,oBAAkBxB,EAAA0C,CAAA;KAClB,SAAK,AAAAH,EAAA,QAAE,GAAAI,MAAA3C,EAAA4C,CAAA,KAAA5C,EAAA4C,CAAA,CAAA,CAAA,GAAAD,CAAA;IARC,CAAA,GAAA,MAAA,IAAA1B,CAAA,GAAA,CAAA,CAAAZ,GAAAoB,EAAA,KAAK,CAAA,CAAA;IAUhB,AAAAc,EAAA,OAAArC,EAA+C,QAAA;KAAzC,OAAM;KAAc,eAAY;;IAC1BR,EAAAA,OAAO,WAAW8B,EAAA,SAA9B3B,EAAA,GAAAC,EAEO,QAFPoB,GAEO,CADLZ,EAAwBwC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAfvC,EAAAC,EAAAgB,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA0B,EAAA,IAAA,EAAA;;GAGlBxC,EAAmFC,GAAA;IAAnE,MAAMa,EAAA;IAAO,OAAOA,EAAA;IAAQ,WAASxB,EAAAoD,CAAA;IAAS,YAAUpD,EAAAqD,CAAA;;;;;;;GACxE3C,EAAiCE,GAAA,EAAf,MAAMY,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}

package/dist/components/VRating/VRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"VRating.js","names":[],"sources":["../../../src/components/VRating/VRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A rating chosen among native radios, one per icon, grouped in a `<fieldset>`: the browser\n * provides the arrow keys, form submission and `required`. Read-only, the icons become one image\n * whose name says the value, which may then be fractional.\n */\nimport { computed, ref, useAttrs, useId } from 'vue'\n\nimport VFieldset from '../VFieldset/VFieldset.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { star as starIcon } from '../VIcon/icons/star'\nimport type { IconSource } from '../VIcon/types'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The size of the icons: 20, 24 or 32 pixels. */\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\n/** The colour of the filled icons. */\nexport type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral'\n\ninterface RatingProps {\n  /** How many icons, and the highest value. */\n  max?: number\n  /**\n   * The name of the group, shown as its legend. Without it, the group is named from the design\n   * system dictionary.\n   */\n  label?: string\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /** A line of help under the icons, read along with the group's name. */\n  hint?: string\n  /**\n   * A message saying what is wrong, shown in place of the hint and read along with the group's\n   * name. It is announced when it appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the rating as invalid, which colours the icons and tells assistive technology so. It\n   * is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Requires a rating before the form is sent. An asterisk follows the label. */\n  required?: boolean\n  /** The name the value is sent under in a form. */\n  name?: string\n  /**\n   * Lets the rating go back to none: clicking the current value again clears it, and a \"No\n   * rating\" choice comes first for the keyboard.\n   */\n  clearable?: boolean\n  /**\n   * Shows the value without letting it change. The icons become a single image, and a fractional\n   * value fills part of an icon.\n   */\n  readonly?: boolean\n  /** Makes the rating unusable. */\n  disabled?: boolean\n  /** The size of the icons. */\n  size?: RatingSize\n  /** The colour of the filled icons. */\n  tone?: RatingTone\n  /**\n   * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the\n   * tone. Its contrast with the background is yours to check.\n   */\n  color?: string\n  /**\n   * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled\n   * one with the icon's filled form.\n   */\n  icon?: IconSource\n}\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<RatingProps>(), {\n  max: 5,\n  label: undefined,\n  hideLabel: false,\n  hint: undefined,\n  error: undefined,\n  invalid: false,\n  required: false,\n  name: undefined,\n  clearable: false,\n  readonly: false,\n  disabled: false,\n  size: 'md',\n  tone: 'accent',\n  color: undefined,\n  icon: () => starIcon,\n})\n\n/** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */\nconst model = defineModel<number | null>({ default: null })\n\nconst attrs = useAttrs()\nconst m = useMessages()\nconst locale = useLocale()\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n// Radios group by name, so the group needs one even when the form does not.\nconst uid = useId()\nconst groupName = computed(() => props.name ?? uid)\n\nconst values = computed(() => Array.from({ length: props.max }, (_, index) => index + 1))\n\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }),\n)\n\nconst valueText = computed(() =>\n  m.value.rating.value(\n    numberFormat.value.format(clamp(model.value ?? 0, 0, props.max)),\n    numberFormat.value.format(props.max),\n  ),\n)\n\n/** How much of the icon for `value` is filled, from 0 to 1. */\nfunction fill(value: number): number {\n  return clamp((model.value ?? 0) - (value - 1), 0, 1)\n}\n\n// @core\n// A click on the checked radio fires no change; it clears instead. Only a pointer click does:\n// the keyboard reaches \"No rating\" with the arrows, and Space must not undo a choice.\nfunction onClick(value: number, event: MouseEvent) {\n  if (props.clearable && model.value === value && event.detail > 0) model.value = null\n}\n\nconst fieldset = ref<InstanceType<typeof VFieldset> | null>(null)\nconst rootEl = computed(() => fieldset.value?.el ?? null)\n\ndefineExpose({\n  /** Moves the focus to the checked radio, or to the first icon when there is no rating. */\n  focus: (options?: FocusOptions) =>\n    (\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input:checked') ??\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input')\n    )?.focus(options),\n  /** The `<fieldset>`, which also receives the consumer's attributes. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <VFieldset\n    ref=\"fieldset\"\n    class=\"v-rating v-tone\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :style=\"customColorStyle(color)\"\n    :data-size=\"size\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"isInvalid ? '' : undefined\"\n    :disabled=\"disabled\"\n    :aria-label=\"label ? undefined : m.rating.label\"\n    v-bind=\"attrs\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-legend=\"hideLabel\"\n  >\n    <span v-if=\"readonly\" class=\"v-rating-items\" role=\"img\" :aria-label=\"valueText\">\n      <span\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n      </span>\n    </span>\n\n    <span v-else class=\"v-rating-items\">\n      <label v-if=\"clearable\" class=\"v-rating-clear\">\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          value=\"\"\n          :checked=\"model === null\"\n          @change=\"model = null\"\n        />\n        <span class=\"v-visually-hidden\">{{ m.rating.empty }}</span>\n      </label>\n      <label\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          :value=\"value\"\n          :checked=\"model === value\"\n          :required=\"required\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @change=\"model = value\"\n          @click=\"onClick(value, $event)\"\n        />\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n        <span class=\"v-visually-hidden\">{{\n          m.rating.value(numberFormat.format(value), numberFormat.format(max))\n        }}</span>\n      </label>\n    </span>\n    <input v-if=\"readonly && name && model !== null\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </VFieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-rating[data-size='sm'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-sm);\n  }\n\n  .v-rating[data-size='md'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-md);\n  }\n\n  .v-rating[data-size='lg'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-lg);\n  }\n\n  /* Positioned: it holds the hidden \"No rating\" radio, which has no box of its own. */\n  .v-rating-items {\n    position: relative;\n    display: inline-flex;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* The padding widens the target around the icon: 24px at the smallest size. */\n  .v-rating-item {\n    --rating-shown: var(--rating-value);\n\n    position: relative;\n    display: inline-flex;\n    padding: calc(var(--vectis-space-1) / 2);\n  }\n\n  label.v-rating-item {\n    cursor: pointer;\n  }\n\n  /*\n   * Hovering previews the rating: the hovered icon and those before it fill, the others empty.\n   * The value is read from `--rating-value`, written inline, into `--rating-shown`, which these\n   * rules can override where the inline style could not be.\n   */\n  /* The emptying rule weighs (0,1,0) and the filling one (0,3,1), which wins where both match. */\n  :where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover)) > .v-rating-item {\n    --rating-shown: 0;\n  }\n\n  :where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover, :has(~ .v-rating-item:hover)) {\n    --rating-shown: 1;\n  }\n\n  .v-rating-icon {\n    display: inline-grid;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-rating-icon > .v-icon {\n    grid-area: 1 / 1;\n  }\n\n  .v-rating-empty {\n    color: var(--vectis-color-border-strong);\n  }\n\n  /* The filled icon is clipped from the end, so a fraction fills the start of the icon. */\n  .v-rating-filled {\n    color: var(--tone-bg-solid);\n    clip-path: inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0);\n  }\n\n  .v-rating-filled:dir(rtl) {\n    clip-path: inset(0 0 0 calc((1 - var(--rating-shown)) * 100%));\n  }\n\n  .v-rating-item .v-hidden-input:focus-visible + .v-rating-icon {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* \"No rating\" has no icon of its own: its focus rings the whole row. */\n  .v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible) {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-rating[data-invalid] .v-rating-empty {\n    color: var(--vectis-color-danger);\n  }\n\n  .v-rating:disabled .v-rating-empty {\n    color: var(--vectis-color-border);\n  }\n\n  .v-rating:disabled .v-rating-filled {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-rating:disabled label.v-rating-item {\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-rating-filled {\n      color: Highlight;\n    }\n\n    .v-rating:disabled .v-rating-filled {\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VRating.js","names":["_sfc_main","VRating_vue_vue_type_script_setup_true_lang_default","VRating_default"],"sources":["../../../src/components/VRating/VRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A rating chosen among native radios, one per icon, grouped in a `<fieldset>`: the browser\n * provides the arrow keys, form submission and `required`. Read-only, the icons become one image\n * whose name says the value, which may then be fractional.\n */\nimport { computed, ref, useAttrs, useId } from 'vue'\n\nimport VFieldset from '../VFieldset/VFieldset.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { star as starIcon } from '../VIcon/icons/star'\nimport type { IconSource } from '../VIcon/types'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The size of the icons: 20, 24 or 32 pixels. */\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\n/** The colour of the filled icons. */\nexport type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral'\n\ninterface RatingProps {\n  /** How many icons, and the highest value. */\n  max?: number\n  /**\n   * The name of the group, shown as its legend. Without it, the group is named from the design\n   * system dictionary.\n   */\n  label?: string\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /** A line of help under the icons, read along with the group's name. */\n  hint?: string\n  /**\n   * A message saying what is wrong, shown in place of the hint and read along with the group's\n   * name. It is announced when it appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the rating as invalid, which colours the icons and tells assistive technology so. It\n   * is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Requires a rating before the form is sent. An asterisk follows the label. */\n  required?: boolean\n  /** The name the value is sent under in a form. */\n  name?: string\n  /**\n   * Lets the rating go back to none: clicking the current value again clears it, and a \"No\n   * rating\" choice comes first for the keyboard.\n   */\n  clearable?: boolean\n  /**\n   * Shows the value without letting it change. The icons become a single image, and a fractional\n   * value fills part of an icon.\n   */\n  readonly?: boolean\n  /** Makes the rating unusable. */\n  disabled?: boolean\n  /** The size of the icons. */\n  size?: RatingSize\n  /** The colour of the filled icons. */\n  tone?: RatingTone\n  /**\n   * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the\n   * tone. Its contrast with the background is yours to check.\n   */\n  color?: string\n  /**\n   * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled\n   * one with the icon's filled form.\n   */\n  icon?: IconSource\n}\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<RatingProps>(), {\n  max: 5,\n  label: undefined,\n  hideLabel: false,\n  hint: undefined,\n  error: undefined,\n  invalid: false,\n  required: false,\n  name: undefined,\n  clearable: false,\n  readonly: false,\n  disabled: false,\n  size: 'md',\n  tone: 'accent',\n  color: undefined,\n  icon: () => starIcon,\n})\n\n/** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */\nconst model = defineModel<number | null>({ default: null })\n\nconst attrs = useAttrs()\nconst m = useMessages()\nconst locale = useLocale()\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n// Radios group by name, so the group needs one even when the form does not.\nconst uid = useId()\nconst groupName = computed(() => props.name ?? uid)\n\nconst values = computed(() => Array.from({ length: props.max }, (_, index) => index + 1))\n\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }),\n)\n\nconst valueText = computed(() =>\n  m.value.rating.value(\n    numberFormat.value.format(clamp(model.value ?? 0, 0, props.max)),\n    numberFormat.value.format(props.max),\n  ),\n)\n\n/** How much of the icon for `value` is filled, from 0 to 1. */\nfunction fill(value: number): number {\n  return clamp((model.value ?? 0) - (value - 1), 0, 1)\n}\n\n// @core\n// A click on the checked radio fires no change; it clears instead. Only a pointer click does:\n// the keyboard reaches \"No rating\" with the arrows, and Space must not undo a choice.\nfunction onClick(value: number, event: MouseEvent) {\n  if (props.clearable && model.value === value && event.detail > 0) model.value = null\n}\n\nconst fieldset = ref<InstanceType<typeof VFieldset> | null>(null)\nconst rootEl = computed(() => fieldset.value?.el ?? null)\n\ndefineExpose({\n  /** Moves the focus to the checked radio, or to the first icon when there is no rating. */\n  focus: (options?: FocusOptions) =>\n    (\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input:checked') ??\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input')\n    )?.focus(options),\n  /** The `<fieldset>`, which also receives the consumer's attributes. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <VFieldset\n    ref=\"fieldset\"\n    class=\"v-rating v-tone\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :style=\"customColorStyle(color)\"\n    :data-size=\"size\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"isInvalid ? '' : undefined\"\n    :disabled=\"disabled\"\n    :aria-label=\"label ? undefined : m.rating.label\"\n    v-bind=\"attrs\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-legend=\"hideLabel\"\n  >\n    <span v-if=\"readonly\" class=\"v-rating-items\" role=\"img\" :aria-label=\"valueText\">\n      <span\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n      </span>\n    </span>\n\n    <span v-else class=\"v-rating-items\">\n      <label v-if=\"clearable\" class=\"v-rating-clear\">\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          value=\"\"\n          :checked=\"model === null\"\n          @change=\"model = null\"\n        />\n        <span class=\"v-visually-hidden\">{{ m.rating.empty }}</span>\n      </label>\n      <label\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          :value=\"value\"\n          :checked=\"model === value\"\n          :required=\"required\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @change=\"model = value\"\n          @click=\"onClick(value, $event)\"\n        />\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n        <span class=\"v-visually-hidden\">{{\n          m.rating.value(numberFormat.format(value), numberFormat.format(max))\n        }}</span>\n      </label>\n    </span>\n    <input v-if=\"readonly && name && model !== null\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </VFieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-rating[data-size='sm'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-sm);\n  }\n\n  .v-rating[data-size='md'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-md);\n  }\n\n  .v-rating[data-size='lg'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-lg);\n  }\n\n  /* Positioned: it holds the hidden \"No rating\" radio, which has no box of its own. */\n  .v-rating-items {\n    position: relative;\n    display: inline-flex;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* The padding widens the target around the icon: 24px at the smallest size. */\n  .v-rating-item {\n    --rating-shown: var(--rating-value);\n\n    position: relative;\n    display: inline-flex;\n    padding: calc(var(--vectis-space-1) / 2);\n  }\n\n  label.v-rating-item {\n    cursor: pointer;\n  }\n\n  /*\n   * Hovering previews the rating: the hovered icon and those before it fill, the others empty.\n   * The value is read from `--rating-value`, written inline, into `--rating-shown`, which these\n   * rules can override where the inline style could not be.\n   */\n  /* The emptying rule weighs (0,1,0) and the filling one (0,3,1), which wins where both match. */\n  :where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover)) > .v-rating-item {\n    --rating-shown: 0;\n  }\n\n  :where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover, :has(~ .v-rating-item:hover)) {\n    --rating-shown: 1;\n  }\n\n  .v-rating-icon {\n    display: inline-grid;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-rating-icon > .v-icon {\n    grid-area: 1 / 1;\n  }\n\n  .v-rating-empty {\n    color: var(--vectis-color-border-strong);\n  }\n\n  /* The filled icon is clipped from the end, so a fraction fills the start of the icon. */\n  .v-rating-filled {\n    color: var(--tone-bg-solid);\n    clip-path: inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0);\n  }\n\n  .v-rating-filled:dir(rtl) {\n    clip-path: inset(0 0 0 calc((1 - var(--rating-shown)) * 100%));\n  }\n\n  .v-rating-item .v-hidden-input:focus-visible + .v-rating-icon {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* \"No rating\" has no icon of its own: its focus rings the whole row. */\n  .v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible) {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-rating[data-invalid] .v-rating-empty {\n    color: var(--vectis-color-danger);\n  }\n\n  .v-rating:disabled .v-rating-empty {\n    color: var(--vectis-color-border);\n  }\n\n  .v-rating:disabled .v-rating-filled {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-rating:disabled label.v-rating-item {\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-rating-filled {\n      color: Highlight;\n    }\n\n    .v-rating:disabled .v-rating-filled {\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VRating.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VRating/VRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A rating chosen among native radios, one per icon, grouped in a `<fieldset>`: the browser\n * provides the arrow keys, form submission and `required`. Read-only, the icons become one image\n * whose name says the value, which may then be fractional.\n */\nimport { computed, ref, useAttrs, useId } from 'vue'\n\nimport VFieldset from '../VFieldset/VFieldset.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { star as starIcon } from '../VIcon/icons/star'\nimport type { IconSource } from '../VIcon/types'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The size of the icons: 20, 24 or 32 pixels. */\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\n/** The colour of the filled icons. */\nexport type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral'\n\ninterface RatingProps {\n  /** How many icons, and the highest value. */\n  max?: number\n  /**\n   * The name of the group, shown as its legend. Without it, the group is named from the design\n   * system dictionary.\n   */\n  label?: string\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /** A line of help under the icons, read along with the group's name. */\n  hint?: string\n  /**\n   * A message saying what is wrong, shown in place of the hint and read along with the group's\n   * name. It is announced when it appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the rating as invalid, which colours the icons and tells assistive technology so. It\n   * is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Requires a rating before the form is sent. An asterisk follows the label. */\n  required?: boolean\n  /** The name the value is sent under in a form. */\n  name?: string\n  /**\n   * Lets the rating go back to none: clicking the current value again clears it, and a \"No\n   * rating\" choice comes first for the keyboard.\n   */\n  clearable?: boolean\n  /**\n   * Shows the value without letting it change. The icons become a single image, and a fractional\n   * value fills part of an icon.\n   */\n  readonly?: boolean\n  /** Makes the rating unusable. */\n  disabled?: boolean\n  /** The size of the icons. */\n  size?: RatingSize\n  /** The colour of the filled icons. */\n  tone?: RatingTone\n  /**\n   * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the\n   * tone. Its contrast with the background is yours to check.\n   */\n  color?: string\n  /**\n   * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled\n   * one with the icon's filled form.\n   */\n  icon?: IconSource\n}\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<RatingProps>(), {\n  max: 5,\n  label: undefined,\n  hideLabel: false,\n  hint: undefined,\n  error: undefined,\n  invalid: false,\n  required: false,\n  name: undefined,\n  clearable: false,\n  readonly: false,\n  disabled: false,\n  size: 'md',\n  tone: 'accent',\n  color: undefined,\n  icon: () => starIcon,\n})\n\n/** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */\nconst model = defineModel<number | null>({ default: null })\n\nconst attrs = useAttrs()\nconst m = useMessages()\nconst locale = useLocale()\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n// Radios group by name, so the group needs one even when the form does not.\nconst uid = useId()\nconst groupName = computed(() => props.name ?? uid)\n\nconst values = computed(() => Array.from({ length: props.max }, (_, index) => index + 1))\n\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }),\n)\n\nconst valueText = computed(() =>\n  m.value.rating.value(\n    numberFormat.value.format(clamp(model.value ?? 0, 0, props.max)),\n    numberFormat.value.format(props.max),\n  ),\n)\n\n/** How much of the icon for `value` is filled, from 0 to 1. */\nfunction fill(value: number): number {\n  return clamp((model.value ?? 0) - (value - 1), 0, 1)\n}\n\n// @core\n// A click on the checked radio fires no change; it clears instead. Only a pointer click does:\n// the keyboard reaches \"No rating\" with the arrows, and Space must not undo a choice.\nfunction onClick(value: number, event: MouseEvent) {\n  if (props.clearable && model.value === value && event.detail > 0) model.value = null\n}\n\nconst fieldset = ref<InstanceType<typeof VFieldset> | null>(null)\nconst rootEl = computed(() => fieldset.value?.el ?? null)\n\ndefineExpose({\n  /** Moves the focus to the checked radio, or to the first icon when there is no rating. */\n  focus: (options?: FocusOptions) =>\n    (\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input:checked') ??\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input')\n    )?.focus(options),\n  /** The `<fieldset>`, which also receives the consumer's attributes. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <VFieldset\n    ref=\"fieldset\"\n    class=\"v-rating v-tone\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :style=\"customColorStyle(color)\"\n    :data-size=\"size\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"isInvalid ? '' : undefined\"\n    :disabled=\"disabled\"\n    :aria-label=\"label ? undefined : m.rating.label\"\n    v-bind=\"attrs\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-legend=\"hideLabel\"\n  >\n    <span v-if=\"readonly\" class=\"v-rating-items\" role=\"img\" :aria-label=\"valueText\">\n      <span\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n      </span>\n    </span>\n\n    <span v-else class=\"v-rating-items\">\n      <label v-if=\"clearable\" class=\"v-rating-clear\">\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          value=\"\"\n          :checked=\"model === null\"\n          @change=\"model = null\"\n        />\n        <span class=\"v-visually-hidden\">{{ m.rating.empty }}</span>\n      </label>\n      <label\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          :value=\"value\"\n          :checked=\"model === value\"\n          :required=\"required\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @change=\"model = value\"\n          @click=\"onClick(value, $event)\"\n        />\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n        <span class=\"v-visually-hidden\">{{\n          m.rating.value(numberFormat.format(value), numberFormat.format(max))\n        }}</span>\n      </label>\n    </span>\n    <input v-if=\"readonly && name && model !== null\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </VFieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-rating[data-size='sm'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-sm);\n  }\n\n  .v-rating[data-size='md'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-md);\n  }\n\n  .v-rating[data-size='lg'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-lg);\n  }\n\n  /* Positioned: it holds the hidden \"No rating\" radio, which has no box of its own. */\n  .v-rating-items {\n    position: relative;\n    display: inline-flex;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* The padding widens the target around the icon: 24px at the smallest size. */\n  .v-rating-item {\n    --rating-shown: var(--rating-value);\n\n    position: relative;\n    display: inline-flex;\n    padding: calc(var(--vectis-space-1) / 2);\n  }\n\n  label.v-rating-item {\n    cursor: pointer;\n  }\n\n  /*\n   * Hovering previews the rating: the hovered icon and those before it fill, the others empty.\n   * The value is read from `--rating-value`, written inline, into `--rating-shown`, which these\n   * rules can override where the inline style could not be.\n   */\n  /* The emptying rule weighs (0,1,0) and the filling one (0,3,1), which wins where both match. */\n  :where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover)) > .v-rating-item {\n    --rating-shown: 0;\n  }\n\n  :where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover, :has(~ .v-rating-item:hover)) {\n    --rating-shown: 1;\n  }\n\n  .v-rating-icon {\n    display: inline-grid;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-rating-icon > .v-icon {\n    grid-area: 1 / 1;\n  }\n\n  .v-rating-empty {\n    color: var(--vectis-color-border-strong);\n  }\n\n  /* The filled icon is clipped from the end, so a fraction fills the start of the icon. */\n  .v-rating-filled {\n    color: var(--tone-bg-solid);\n    clip-path: inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0);\n  }\n\n  .v-rating-filled:dir(rtl) {\n    clip-path: inset(0 0 0 calc((1 - var(--rating-shown)) * 100%));\n  }\n\n  .v-rating-item .v-hidden-input:focus-visible + .v-rating-icon {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* \"No rating\" has no icon of its own: its focus rings the whole row. */\n  .v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible) {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-rating[data-invalid] .v-rating-empty {\n    color: var(--vectis-color-danger);\n  }\n\n  .v-rating:disabled .v-rating-empty {\n    color: var(--vectis-color-border);\n  }\n\n  .v-rating:disabled .v-rating-filled {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-rating:disabled label.v-rating-item {\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-rating-filled {\n      color: Highlight;\n    }\n\n    .v-rating:disabled .v-rating-filled {\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFA,IAAM,IAAQ,GAmBR,IAAQ,EAA0B,GAAA,YAAkB,GAEpD,IAAQ,EAAS,GACjB,IAAI,EAAY,GAChB,IAAS,EAAU,GAEnB,IAAY,QAAe,EAAM,WAAW,CAAC,CAAC,EAAM,KAAK,GAGzD,IAAM,EAAM,GACZ,IAAY,QAAe,EAAM,QAAQ,CAAG,GAE5C,IAAS,QAAe,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,IAAI,GAAG,MAAU,IAAQ,CAAC,CAAC,GAElF,IAAe,QACb,IAAI,KAAK,aAAa,EAAO,OAAO,EAAE,uBAAuB,EAAE,CAAC,CACxE,GAEM,IAAY,QAChB,EAAE,MAAM,OAAO,MACb,EAAa,MAAM,OAAO,EAAM,EAAM,SAAS,GAAG,GAAG,EAAM,GAAG,CAAC,GAC/D,EAAa,MAAM,OAAO,EAAM,GAAG,CACrC,CACF;EAGA,SAAS,EAAK,GAAuB;GACnC,OAAO,GAAO,EAAM,SAAS,MAAM,IAAQ,IAAI,GAAG,CAAC;EACrD;EAKA,SAAS,EAAQ,GAAe,GAAmB;GACjD,AAAI,EAAM,aAAa,EAAM,UAAU,KAAS,EAAM,SAAS,MAAG,EAAM,QAAQ;EAClF;EAEA,IAAM,IAAW,EAA2C,IAAI,GAC1D,IAAS,QAAe,EAAS,OAAO,MAAM,IAAI;SAExD,EAAa;GAEX,QAAQ,OAEJ,EAAO,OAAO,cAAgC,8BAA8B,KAC5E,EAAO,OAAO,cAAgC,sBAAsB,EAAA,EACnE,MAAM,CAAO;GAElB,IAAI;EACN,CAAC,mBAIC,EAuEY,GAvEZ,EAuEY;YAtEN;GAAJ,KAAI;GACJ,OAAM;GACL,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,OAAO,EAAA,CAAA,CAAgB,CAAC,EAAA,KAAK;GAC7B,aAAW,EAAA;GACX,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,gBAAc,EAAA,QAAS,KAAQ,KAAA;GAC/B,UAAU,EAAA;GACV,cAAY,EAAA,QAAQ,KAAA,IAAY,EAAA,CAAA,CAAC,CAAC,OAAO;KAClC,EAAA,CAAA,GAAK;GACZ,QAAQ,EAAA;GACR,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAU,EAAA;GACV,eAAa,EAAA;;oBAcP,CAZK,EAAA,YAAA,EAAA,GAAZ,EAYO,QAAA;;IAZe,OAAM;IAAiB,MAAK;IAAO,cAAY,EAAA;eACnE,EAUO,GAAA,MAAA,EATW,EAAA,QAAT,YADT,EAUO,QAAA;IARJ,KAAK;IACN,OAAM;IACL,OAAK,EAAA,EAAA,kBAAsB,EAAK,CAAK,EAAA,CAAA;OAEtC,EAGO,QAHP,GAGO,CAFL,EAAyD,GAAzD,EAAyD,EAAlD,OAAM,iBAAgB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,GACpD,EAAiE,GAAjE,EAAiE,EAA1D,OAAM,kBAAiB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,GAAA,EAAG,QAAA,GAAM,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA,4BAKpE,EAqCO,QArCP,GAqCO,CApCQ,EAAA,aAAA,EAAA,GAAb,EAUQ,SAVR,GAUQ,CATN,EAOE,SAAA;IANA,MAAK;IACL,OAAM;IACL,MAAM,EAAA;IACP,OAAM;IACL,SAAS,EAAA,UAAK;IACd,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAK;oBAEhB,EAA2D,QAA3D,GAA2D,EAAxB,EAAA,CAAA,CAAC,CAAC,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,GAEnD,EAwBQ,GAAA,MAAA,EAvBU,EAAA,QAAT,YADT,EAwBQ,SAAA;IAtBL,KAAK;IACN,OAAM;IACL,OAAK,EAAA,EAAA,kBAAsB,EAAK,CAAK,EAAA,CAAA;;IAEtC,EAUE,SAAA;KATA,MAAK;KACL,OAAM;KACL,MAAM,EAAA;KACC;KACP,SAAS,EAAA,UAAU;KACnB,UAAU,EAAA;KACV,gBAAc,EAAA,QAAS,SAAY,KAAA;KACnC,WAAM,MAAE,EAAA,QAAQ;KAChB,UAAK,MAAE,EAAQ,GAAO,CAAM;;IAE/B,EAGO,QAHP,GAGO,CAFL,EAAyD,GAAzD,EAAyD,EAAlD,OAAM,iBAAgB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,GACpD,EAAiE,GAAjE,EAAiE,EAA1D,OAAM,kBAAiB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,GAAA,EAAG,QAAA,GAAM,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA;IAEhE,EAES,QAFT,GAES,EADP,EAAA,CAAA,CAAC,CAAC,OAAO,MAAM,EAAA,MAAa,OAAO,CAAK,GAAG,EAAA,MAAa,OAAO,EAAA,GAAG,CAAA,CAAA,GAAA,CAAA;sBAI3D,EAAA,YAAY,EAAA,QAAQ,EAAA,UAAK,QAAA,EAAA,GAAtC,EAA6F,SAAA;;IAA5C,MAAK;IAAU,MAAM,EAAA;IAAO,OAAO,EAAA"}
+{"version":3,"file":"VRating.vue_vue_type_script_setup_true_lang.js","names":["starIcon","_useModel","_openBlock","_createBlock","VFieldset","_mergeProps","_unref","_withCtx","_createElementBlock","_Fragment","_renderList","_normalizeStyle","_createElementVNode","_createVNode","VIcon","_toDisplayString","_createCommentVNode","VIcon_default","VFieldset_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","VRating_vue_vue_type_script_setup_true_lang_default","star","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","attrs","useAttrs","m","useMessages","locale","useLocale","isInvalid","computed","uid","useId","groupName","values","index","numberFormat","valueText","clamp","fill","value","onClick","event","fieldset","ref","rootEl","options","openBlock","createBlock","mergeProps","unref","customColorStyle","withCtx","createElementBlock","Fragment","renderList","normalizeStyle","createElementVNode","createVNode","iconProps","_cache","toDisplayString","createCommentVNode","$event"],"sources":["../../../src/components/VRating/VRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A rating chosen among native radios, one per icon, grouped in a `<fieldset>`: the browser\n * provides the arrow keys, form submission and `required`. Read-only, the icons become one image\n * whose name says the value, which may then be fractional.\n */\nimport { computed, ref, useAttrs, useId } from 'vue'\n\nimport VFieldset from '../VFieldset/VFieldset.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { star as starIcon } from '../VIcon/icons/star'\nimport type { IconSource } from '../VIcon/types'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The size of the icons: 20, 24 or 32 pixels. */\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\n/** The colour of the filled icons. */\nexport type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral'\n\ninterface RatingProps {\n  /** How many icons, and the highest value. */\n  max?: number\n  /**\n   * The name of the group, shown as its legend. Without it, the group is named from the design\n   * system dictionary.\n   */\n  label?: string\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /** A line of help under the icons, read along with the group's name. */\n  hint?: string\n  /**\n   * A message saying what is wrong, shown in place of the hint and read along with the group's\n   * name. It is announced when it appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the rating as invalid, which colours the icons and tells assistive technology so. It\n   * is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Requires a rating before the form is sent. An asterisk follows the label. */\n  required?: boolean\n  /** The name the value is sent under in a form. */\n  name?: string\n  /**\n   * Lets the rating go back to none: clicking the current value again clears it, and a \"No\n   * rating\" choice comes first for the keyboard.\n   */\n  clearable?: boolean\n  /**\n   * Shows the value without letting it change. The icons become a single image, and a fractional\n   * value fills part of an icon.\n   */\n  readonly?: boolean\n  /** Makes the rating unusable. */\n  disabled?: boolean\n  /** The size of the icons. */\n  size?: RatingSize\n  /** The colour of the filled icons. */\n  tone?: RatingTone\n  /**\n   * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the\n   * tone. Its contrast with the background is yours to check.\n   */\n  color?: string\n  /**\n   * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled\n   * one with the icon's filled form.\n   */\n  icon?: IconSource\n}\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<RatingProps>(), {\n  max: 5,\n  label: undefined,\n  hideLabel: false,\n  hint: undefined,\n  error: undefined,\n  invalid: false,\n  required: false,\n  name: undefined,\n  clearable: false,\n  readonly: false,\n  disabled: false,\n  size: 'md',\n  tone: 'accent',\n  color: undefined,\n  icon: () => starIcon,\n})\n\n/** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */\nconst model = defineModel<number | null>({ default: null })\n\nconst attrs = useAttrs()\nconst m = useMessages()\nconst locale = useLocale()\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n// Radios group by name, so the group needs one even when the form does not.\nconst uid = useId()\nconst groupName = computed(() => props.name ?? uid)\n\nconst values = computed(() => Array.from({ length: props.max }, (_, index) => index + 1))\n\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }),\n)\n\nconst valueText = computed(() =>\n  m.value.rating.value(\n    numberFormat.value.format(clamp(model.value ?? 0, 0, props.max)),\n    numberFormat.value.format(props.max),\n  ),\n)\n\n/** How much of the icon for `value` is filled, from 0 to 1. */\nfunction fill(value: number): number {\n  return clamp((model.value ?? 0) - (value - 1), 0, 1)\n}\n\n// @core\n// A click on the checked radio fires no change; it clears instead. Only a pointer click does:\n// the keyboard reaches \"No rating\" with the arrows, and Space must not undo a choice.\nfunction onClick(value: number, event: MouseEvent) {\n  if (props.clearable && model.value === value && event.detail > 0) model.value = null\n}\n\nconst fieldset = ref<InstanceType<typeof VFieldset> | null>(null)\nconst rootEl = computed(() => fieldset.value?.el ?? null)\n\ndefineExpose({\n  /** Moves the focus to the checked radio, or to the first icon when there is no rating. */\n  focus: (options?: FocusOptions) =>\n    (\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input:checked') ??\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input')\n    )?.focus(options),\n  /** The `<fieldset>`, which also receives the consumer's attributes. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <VFieldset\n    ref=\"fieldset\"\n    class=\"v-rating v-tone\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :style=\"customColorStyle(color)\"\n    :data-size=\"size\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"isInvalid ? '' : undefined\"\n    :disabled=\"disabled\"\n    :aria-label=\"label ? undefined : m.rating.label\"\n    v-bind=\"attrs\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-legend=\"hideLabel\"\n  >\n    <span v-if=\"readonly\" class=\"v-rating-items\" role=\"img\" :aria-label=\"valueText\">\n      <span\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n      </span>\n    </span>\n\n    <span v-else class=\"v-rating-items\">\n      <label v-if=\"clearable\" class=\"v-rating-clear\">\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          value=\"\"\n          :checked=\"model === null\"\n          @change=\"model = null\"\n        />\n        <span class=\"v-visually-hidden\">{{ m.rating.empty }}</span>\n      </label>\n      <label\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          :value=\"value\"\n          :checked=\"model === value\"\n          :required=\"required\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @change=\"model = value\"\n          @click=\"onClick(value, $event)\"\n        />\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n        <span class=\"v-visually-hidden\">{{\n          m.rating.value(numberFormat.format(value), numberFormat.format(max))\n        }}</span>\n      </label>\n    </span>\n    <input v-if=\"readonly && name && model !== null\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </VFieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-rating[data-size='sm'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-sm);\n  }\n\n  .v-rating[data-size='md'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-md);\n  }\n\n  .v-rating[data-size='lg'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-lg);\n  }\n\n  /* Positioned: it holds the hidden \"No rating\" radio, which has no box of its own. */\n  .v-rating-items {\n    position: relative;\n    display: inline-flex;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* The padding widens the target around the icon: 24px at the smallest size. */\n  .v-rating-item {\n    --rating-shown: var(--rating-value);\n\n    position: relative;\n    display: inline-flex;\n    padding: calc(var(--vectis-space-1) / 2);\n  }\n\n  label.v-rating-item {\n    cursor: pointer;\n  }\n\n  /*\n   * Hovering previews the rating: the hovered icon and those before it fill, the others empty.\n   * The value is read from `--rating-value`, written inline, into `--rating-shown`, which these\n   * rules can override where the inline style could not be.\n   */\n  /* The emptying rule weighs (0,1,0) and the filling one (0,3,1), which wins where both match. */\n  :where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover)) > .v-rating-item {\n    --rating-shown: 0;\n  }\n\n  :where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover, :has(~ .v-rating-item:hover)) {\n    --rating-shown: 1;\n  }\n\n  .v-rating-icon {\n    display: inline-grid;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-rating-icon > .v-icon {\n    grid-area: 1 / 1;\n  }\n\n  .v-rating-empty {\n    color: var(--vectis-color-border-strong);\n  }\n\n  /* The filled icon is clipped from the end, so a fraction fills the start of the icon. */\n  .v-rating-filled {\n    color: var(--tone-bg-solid);\n    clip-path: inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0);\n  }\n\n  .v-rating-filled:dir(rtl) {\n    clip-path: inset(0 0 0 calc((1 - var(--rating-shown)) * 100%));\n  }\n\n  .v-rating-item .v-hidden-input:focus-visible + .v-rating-icon {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* \"No rating\" has no icon of its own: its focus rings the whole row. */\n  .v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible) {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-rating[data-invalid] .v-rating-empty {\n    color: var(--vectis-color-danger);\n  }\n\n  .v-rating:disabled .v-rating-empty {\n    color: var(--vectis-color-border);\n  }\n\n  .v-rating:disabled .v-rating-filled {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-rating:disabled label.v-rating-item {\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-rating-filled {\n      color: Highlight;\n    }\n\n    .v-rating:disabled .v-rating-filled {\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFA,IAAMkC,IAAQC,GAmBRC,IAAQnC,EAA0BkC,GAAA,YAAkB,GAEpDG,IAAQC,EAAS,GACjBC,IAAIC,EAAY,GAChBC,IAASC,EAAU,GAEnBC,IAAYC,QAAeX,EAAM,WAAW,CAAC,CAACA,EAAM,KAAK,GAGzDY,IAAMC,EAAM,GACZC,IAAYH,QAAeX,EAAM,QAAQY,CAAG,GAE5CG,IAASJ,QAAe,MAAM,KAAK,EAAE,QAAQX,EAAM,IAAI,IAAI,GAAG,MAAUgB,IAAQ,CAAC,CAAC,GAElFC,IAAeN,QACb,IAAI,KAAK,aAAaH,EAAO,OAAO,EAAE,uBAAuB,EAAE,CAAC,CACxE,GAEMU,IAAYP,QAChBL,EAAE,MAAM,OAAO,MACbW,EAAa,MAAM,OAAOE,EAAMjB,EAAM,SAAS,GAAG,GAAGF,EAAM,GAAG,CAAC,GAC/DiB,EAAa,MAAM,OAAOjB,EAAM,GAAG,CACrC,CACF;EAGA,SAASoB,EAAK,GAAuB;GACnC,OAAOD,GAAOjB,EAAM,SAAS,MAAMmB,IAAQ,IAAI,GAAG,CAAC;EACrD;EAKA,SAASC,EAAQ,GAAe,GAAmB;GACjD,AAAItB,EAAM,aAAaE,EAAM,UAAUmB,KAASE,EAAM,SAAS,MAAG,EAAM,QAAQ;EAClF;EAEA,IAAMC,IAAWC,EAA2C,IAAI,GAC1DC,IAASf,QAAea,EAAS,OAAO,MAAM,IAAI;SAExDzB,EAAa;GAEX,QAAQ,OAEJ2B,EAAO,OAAO,cAAgC,8BAA8B,KAC5EA,EAAO,OAAO,cAAgC,sBAAsB,EAAA,EACnE,MAAMC,CAAO;GAElB,IAAID;EACN,CAAC,cAIC1D,EAAA,GAAAC,EAuEYC,GAvEZC,EAuEY;GAtEN,SAAA;GAAJ,KAAIqD;GACJ,OAAM;GACL,aAAWvB,EAAA;GACX,eAAaA,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,OAAO7B,EAAA4D,CAAA,CAAgB,CAAC/B,EAAA,KAAK;GAC7B,aAAWA,EAAA;GACX,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;GAC/B,gBAAcS,EAAA,QAAS,KAAQ,KAAA;GAC/B,UAAUT,EAAA;GACV,cAAYA,EAAA,QAAQ,KAAA,IAAY7B,EAAAkC,CAAA,CAAC,CAAC,OAAO;EAClC,GAAAlC,EAAAgC,CAAA,GAAK;GACZ,QAAQH,EAAA;GACR,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,eAAaA,EAAA;;GAEd,SAAA5B,QAYO,CAZK4B,EAAA,YAAZjC,EAAA,GAAAM,EAYO,QAAA;;IAZe,OAAM;IAAiB,MAAK;IAAO,cAAY4C,EAAA;GACnElD,GAAAA,EAAAA,EAAA,EAAA,GAAAM,EAUOC,GAAA,MAAAC,EATWuC,EAAA,QAAT,OADT/C,EAAA,GAAAM,EAUO,QAAA;IARJ,KAAK+C;IACN,OAAM;IACL,OAAK5C,EAAA,EAAA,kBAAsB2C,EAAKC,CAAK,EAAA,CAAA;GAEtC3C,GAAAA,CAAAA,EAGO,QAHPQ,GAGO,CAFLP,EAAyDC,GAAzDT,EAAyD,EAAlD,OAAM,iBAAgB,GAAA,EAAA,SAAA,GAAA,GAASC,EAAAoE,CAAA,CAAS,CAACvC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,GACpDtB,EAAiEC,GAAjET,EAAiE,EAA1D,OAAM,kBAAiB,GAAA,EAAA,SAAA,GAAA,GAASC,EAAAoE,CAAA,CAAS,CAACvC,EAAA,IAAI,GAAA,EAAG,QAAA,GAAM,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAKpEjC,GAAAA,GAAAA,EAAAA,GAAAA,GAAAA,CAAAA,MAAAA,EAAA,GAAAM,EAqCO,QArCPa,GAqCO,CApCQc,EAAA,aAAbjC,EAAA,GAAAM,EAUQ,SAVRc,GAUQ,CATNV,EAOE,SAAA;IANA,MAAK;IACL,OAAM;IACL,MAAMoC,EAAA;IACP,OAAM;IACL,SAASZ,EAAA,UAAK;IACd,UAAM,AAAAuC,EAAA,QAAA,MAAE,EAAA,QAAK;GAEhB/D,GAAAA,MAAAA,IAAAA,CAAAA,GAAAA,EAA2D,QAA3DY,GAA2DT,EAAxBT,EAAAkC,CAAA,CAAC,CAAC,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,KAAAqC,EAAA,IAAA,EAAA,IAEnD3E,EAAA,EAAA,GAAAM,EAwBQC,GAAA,MAAAC,EAvBUuC,EAAA,QAAT,OADT/C,EAAA,GAAAM,EAwBQ,SAAA;IAtBL,KAAK+C;IACN,OAAM;IACL,OAAK5C,EAAA,EAAA,kBAAsB2C,EAAKC,CAAK,EAAA,CAAA;;IAEtC3C,EAUE,SAAA;KATA,MAAK;KACL,OAAM;KACL,MAAMoC,EAAA;KACC;KACP,SAASZ,EAAA,UAAUmB;KACnB,UAAUpB,EAAA;KACV,gBAAcS,EAAA,QAAS,SAAY,KAAA;KACnC,WAAM,MAAE,EAAA,QAAQW;KAChB,UAAK,MAAEC,EAAQD,GAAOuB,CAAM;;IAE/BlE,EAGO,QAHPc,GAGO,CAFLb,EAAyDC,GAAzDT,EAAyD,EAAlD,OAAM,iBAAgB,GAAA,EAAA,SAAA,GAAA,GAASC,EAAAoE,CAAA,CAAS,CAACvC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,GACpDtB,EAAiEC,GAAjET,EAAiE,EAA1D,OAAM,kBAAiB,GAAA,EAAA,SAAA,GAAA,GAASC,EAAAoE,CAAA,CAAS,CAACvC,EAAA,IAAI,GAAA,EAAG,QAAA,GAAM,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA;IAEhEvB,EAES,QAFTe,GAESZ,EADPT,EAAAkC,CAAA,CAAC,CAAC,OAAO,MAAMW,EAAA,MAAa,OAAOI,CAAK,GAAGJ,EAAA,MAAa,OAAOhB,EAAA,GAAG,CAAA,CAAA,GAAA,CAAA;SAI3D,GAAA,GAAA,EAAA,CAAA,IAAAA,EAAA,YAAYA,EAAA,QAAQC,EAAA,UAAK,QAAtClC,EAAA,GAAAM,EAA6F,SAAA;;IAA5C,MAAK;IAAU,MAAM2B,EAAA;IAAO,OAAOC,EAAA"}

package/dist/components/VResizable/VResizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"VResizable.js","names":[],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VResizable.js","names":["_sfc_main","VResizable_vue_vue_type_script_setup_true_lang_default","VResizable_default"],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VResizable/VResizable.vue_vue_type_script_setup_true_lang.js

@@ -106,8 +106,8 @@ var x = [
 			K(e, t), G(e, t) || w("change", e);
 		}
 		function de(e) {
-			let t = F(e), n = V.value[e];
-			return i((t && I.get(t)) ?? M.value[e], n.min, n.max);
+			let t = F(e), n = V.value[e], r = t && I.get(t);
+			return i(r ?? M.value[e], n.min, n.max);
 		}
 		function J(e, t, n) {
 			let r = V.value[e], i = (t ? r.collapsedSize : de(e)) - n[e];
@@ -129,7 +129,7 @@ var x = [
 					index: e,
 					collapsed: !t
 				}), r = V.value[e];
-				!r || s(n[e], r) === t || q(J(e, t, n), n);
+				r && s(n[e], r) !== t && q(J(e, t, n), n);
 			}
 		});
 		function fe(e, t) {
@@ -137,8 +137,10 @@ var x = [
 			let n = W(), i = Y(e), a = V.value[i], o = i === e ? 1 : -1, l = D.value && r(E.value), u = D.value ? l ? "ArrowRight" : "ArrowLeft" : "ArrowUp", d = D.value ? l ? "ArrowLeft" : "ArrowRight" : "ArrowDown", f;
 			if (t.key === u) f = c(n, e, -S.step, V.value, 1);
 			else if (t.key === d) f = c(n, e, S.step, V.value, 1);
-			else if (t.key === "Home") f = c(n, e, ((a.collapsible ? a.collapsedSize : a.min) - n[i]) * o, V.value, 1);
-			else if (t.key === "End") f = c(n, e, (a.max - n[i]) * o, V.value, 1);
+			else if (t.key === "Home") {
+				let t = a.collapsible ? a.collapsedSize : a.min;
+				f = c(n, e, (t - n[i]) * o, V.value, 1);
+			} else if (t.key === "End") f = c(n, e, (a.max - n[i]) * o, V.value, 1);
 			else if (t.key === "Enter" && a.collapsible) f = J(i, !s(n[i], a), n);
 			else return;
 			t.preventDefault(), q(f, n);
@@ -170,7 +172,7 @@ var x = [
 		}
 		function Q(e) {
 			let t = X.value;
-			!t || t.pointerId !== e.pointerId || (X.value = null, G(t.last, t.base) || w("change", t.last));
+			t && t.pointerId === e.pointerId && (X.value = null, G(t.last, t.base) || w("change", t.last));
 		}
 		let $ = f(() => k.value.slice(1).map((e, t) => {
 			let n = Y(t), r = k.value[n], i = V.value[n];