vectis-ui 0.13.0 → 0.15.0

package/dist/components/VSkeletonLoader/VSkeletonLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSkeletonLoader.js","names":[],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  compact: false,\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSkeletonLoader.js","names":["_sfc_main","VSkeletonLoader_vue_vue_type_script_setup_true_lang_default","VSkeletonLoader_default"],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  compact: false,\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  compact: false,\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAQ,GAgBR,IAAQ,QACZ,OAAO,SAAS,EAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,KAAK,CAAC,IAAI,CACxE,GAMM,IAAY,QAAe,EAAM,YAAY,EAAQ,EAAM,KAAM,GAEjE,IAAI,EAAY,GAGhB,IAAgB,QAAe,EAAM,SAAS,EAAE,MAAM,OAAO,OAAO;yBAIxE,EAsBO,QAAA;GArBL,OAAM;GACL,cAAY,EAAA;GACZ,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,kBAAgB,EAAA;GAChB,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,MAAM,EAAA,QAAS,WAAc,KAAA;GAC7B,eAAa,EAAA,QAAY,KAAA,IAAS;GAClC,OAAK,EAAA;sBAA4B,EAAA;2BAAoC,EAAA,CAAA,CAAO,CAAC,EAAA,KAAK;2BAAgC,EAAA,CAAA,CAAO,CAAC,EAAA,MAAM;;MAWrH,EAAA,SAAA,EAAA,GAAZ,EAA2E,QAA3E,GAA2E,EAAvB,EAAA,KAAa,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,GACjE,EAAmE,GAAA,MAAA,EAAjD,EAAA,QAAL,YAAb,EAAmE,QAAA;GAAzC,KAAK;GAAG,OAAM"}
+{"version":3,"file":"VSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_hoisted_1","_hoisted_2","VSkeletonLoader_vue_vue_type_script_setup_true_lang_default","props","__props","count","computed","announced","m","useMessages","resolvedLabel","openBlock","createElementBlock","normalizeStyle","unref","cssSize","toDisplayString","createCommentVNode","Fragment","renderList","n"],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  compact: false,\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAMW,IAAQC,GAgBRC,IAAQC,QACZ,OAAO,SAASH,EAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAMA,EAAM,KAAK,CAAC,IAAI,CACxE,GAMMI,IAAYD,QAAeH,EAAM,YAAY,EAAQA,EAAM,KAAM,GAEjEK,IAAIC,EAAY,GAGhBC,IAAgBJ,QAAeH,EAAM,SAASK,EAAE,MAAM,OAAO,OAAO;oBAIxEhB,EAAA,GAAAC,EAsBO,QAAA;GArBL,OAAM;GACL,cAAYW,EAAA;GACZ,aAAWA,EAAA;GACX,gBAAcA,EAAA,UAAO,KAAQ,KAAA;GAC7B,kBAAgBA,EAAA;GAChB,eAAaA,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,MAAMG,EAAA,QAAS,WAAc,KAAA;GAC7B,eAAaA,EAAA,QAAY,KAAA,IAAS;GAClC,OAAKb,EAAA;IAA4B,kBAAAU,EAAA;IAAoC,uBAAAT,EAAAoB,CAAA,CAAO,CAACX,EAAA,KAAK;IAAgC,uBAAAT,EAAAoB,CAAA,CAAO,CAACX,EAAA,MAAM;;EAWrH,GAAA,CAAAG,EAAA,SAAZf,EAAA,GAAAC,EAA2E,QAA3EQ,GAA2EL,EAAvBc,EAAA,KAAa,GAAA,CAAA,KAAAO,EAAA,IAAA,EAAA,IACjEzB,EAAA,EAAA,GAAAC,EAAmEK,GAAA,MAAAC,EAAjDM,EAAA,QAAL,OAAbb,EAAA,GAAAC,EAAmE,QAAA;GAAzC,KAAK2B;GAAG,OAAM"}

package/dist/components/VSlider/VSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSlider.js","names":[],"sources":["../../../src/components/VSlider/VSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native range inputs own thumb interaction. JavaScript keeps range endpoints ordered and\n * synchronizes optional number fields, labels and ARIA values.\n */\n\nimport { computed, inject, ref, watchEffect } from 'vue'\nimport VField from '../VField/VField.vue'\nimport type { FieldControlProps, FieldLabelPosition } from '../VField/VField.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { inputGroupKey } from '../VInput/context'\nimport VNumberInput from '../VNumberInput/VNumberInput.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/**\n * What one step of the track is called: a piece of text, or an icon paired with the words that\n * name it, which a screen reader reads in place of the raw number.\n */\nexport type SliderLabel = string | { icon: IconSource; label: string }\n\n/** The value of a slider: one number, or an ordered pair of them in range mode. */\nexport type SliderValue = number | [number, number]\n\n/** Which way the track runs. */\nexport type SliderOrientation = 'horizontal' | 'vertical'\n\n/** The height of the number fields: 32, 40 or 48 pixels. */\nexport type SliderSize = 'sm' | 'md' | 'lg'\n\n/**\n * Where the number fields sit: none, at the ends of the track, or in a row above or below\n * it. On an upright slider, above and below become the two sides of it.\n */\nexport type SliderInputs = false | 'ends' | 'top' | 'bottom'\n\ninterface SliderProps {\n  /** The lowest value the thumb can reach. It is 0 by default. */\n  min?: number\n  /** The highest value the thumb can reach. It is 100 by default. */\n  max?: number\n  /**\n   * The gap between two values the thumb can stop on, 1 by default. It is also what the\n   * arrow keys move by, and what a value typed into the companion field is snapped to.\n   */\n  step?: number\n  /** Offers two thumbs to pick a range, which makes the v-model a pair of values. */\n  range?: boolean\n  /** Makes the slider unusable. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The thumbs can still be focused and\n   * are announced as read-only, but neither the pointer nor the keyboard moves them, and the\n   * number fields turn read-only with them.\n   */\n  readonly?: boolean\n  /**\n   * Marks the value as invalid, which colours the thumbs and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /**\n   * The height of the number fields `inputs` adds. Inside a VInputGroup the group's size\n   * wins, as it does for every field of the row.\n   */\n  size?: SliderSize\n  /**\n   * The label above the slider, which also names its thumbs: in range mode they are announced\n   * as the start and the end of it.\n   */\n  label?: string\n  /** Hides the label visually. It still names the thumbs for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the slider (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * A line of help under the track, stating what the numbers mean or where they may go. It\n   * is tied to the slider for assistive technology, so it is read out after the name rather\n   * 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  /** Turns the slider upright, with the lowest value at the bottom. */\n  orientation?: SliderOrientation\n  /**\n   * Adds a number field for setting the value exactly: one, or one per end in range mode. No\n   * field is drawn by default.\n   */\n  inputs?: SliderInputs\n  /**\n   * Marks each step on the track. Providing labels implies it. Past fifty steps the\n   * marks would be an unreadable comb and are not drawn at all.\n   */\n  ticks?: boolean\n  /**\n   * A label for every step, in order: a piece of text, or an icon with the words that\n   * name it for screen readers. They also become what a screen reader announces in\n   * place of the raw number.\n   */\n  labels?: SliderLabel[]\n  /** Shows the value in a bubble above the thumb while it is being moved or focused. */\n  tooltip?: boolean\n  /**\n   * How the value is written in the bubble, the number fields and what the thumbs announce: the\n   * options of `Intl.NumberFormat`, for a price, a unit or a percentage. `min`, `max` and `step`\n   * stay in the model's unit: with `style: 'percent'`, 0.25 is written 25%.\n   */\n  formatOptions?: Intl.NumberFormatOptions\n  /** The locale the value is written and read in. It defaults to the design system's. */\n  locale?: string\n}\n\nconst props = withDefaults(defineProps<SliderProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  range: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  size: 'md',\n  label: undefined,\n  hideLabel: false,\n  labelPosition: 'top',\n  hint: undefined,\n  error: undefined,\n  orientation: 'horizontal',\n  inputs: false,\n  ticks: false,\n  labels: undefined,\n  tooltip: false,\n  formatOptions: undefined,\n  locale: undefined,\n})\n\n/** The value: a single number, 0 to begin with, or an ordered pair once `range` is set. */\nconst model = defineModel<SliderValue>({ default: 0 })\n\nconst emit = defineEmits<{\n  /** The value is BEING changed: every step of a drag, and every key that moves a thumb. */\n  input: [value: SliderValue]\n  /**\n   * The reader has SETTLED on a value: a thumb was released or moved by a key, or a number\n   * field was committed.\n   */\n  change: [value: SliderValue]\n}>()\n\n// The number fields are fields of a VInputGroup row like any other, so the row's size and\n// its disabled state reach them through the same arbitration. A slider has no `compact` of\n// its own: only the row's can apply.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(\n  {\n    get size() {\n      return props.size\n    },\n    compact: false,\n    get disabled() {\n      return props.disabled\n    },\n  },\n  group,\n)\n\ntype Thumb = 'start' | 'end'\n\nconst startValue = computed(() => (Array.isArray(model.value) ? model.value[0] : props.min))\nconst endValue = computed(() =>\n  Array.isArray(model.value) ? model.value[1] : (model.value as number),\n)\n\nconst thumbValue = (which: Thumb) => (which === 'start' ? startValue.value : endValue.value)\n\n/**\n * Where a value sits along the run, as a fraction between 0 and 1. The guard covers a\n * slider whose two bounds are equal, which would otherwise divide by zero.\n */\nconst frac = (v: number) => clamp((v - props.min) / (props.max - props.min || 1), 0, 1)\n\n// @core\n// The thumb being held PUSHES its sibling; it must not stop against it. Two thumbs resting on\n// the same value are one thumb as far as the pointer is concerned, the end one being last in\n// the DOM and therefore the only one it can reach; so a range stopped at `[100, 100]` could\n// only ever be raised, and at the maximum it could not move at all.\nfunction writeThumb(which: Thumb, n: number): SliderValue {\n  const next: SliderValue = !props.range\n    ? n\n    : which === 'start'\n      ? [n, Math.max(n, endValue.value)]\n      : [Math.min(n, startValue.value), n]\n  model.value = next\n  return next\n}\n\nconst writtenFor = (value: SliderValue, which: Thumb) =>\n  Array.isArray(value) ? value[which === 'start' ? 0 : 1] : value\n\nfunction onThumbInput(which: Thumb, event: Event) {\n  const el = event.target as HTMLInputElement\n  // @core\n  // A drag or a click on the track has ALREADY moved the native thumb when `input` fires,\n  // and the event cannot be cancelled: putting the value back is the only refusal there is.\n  // It lands before the browser paints, so the thumb never visibly leaves its place, and\n  // since the value at release is the one it started from, no `change` follows either.\n  if (props.readonly) {\n    el.value = String(thumbValue(which))\n    return\n  }\n  const next = writeThumb(which, Number(el.value))\n  el.value = String(writtenFor(next, which))\n  emit('input', next)\n}\n\n// @keyboard @core\n// The keys that move a range input, cancelled before the browser applies them when the\n// slider is read-only. Tab and every other key pass, so the thumbs stay reachable.\nconst VALUE_KEYS = new Set([\n  'ArrowUp',\n  'ArrowDown',\n  'ArrowLeft',\n  'ArrowRight',\n  'Home',\n  'End',\n  'PageUp',\n  'PageDown',\n])\n\nfunction onThumbKeydown(event: KeyboardEvent) {\n  if (props.readonly && VALUE_KEYS.has(event.key)) event.preventDefault()\n}\n\n// @core\n/*\n * The settled value is read off the THUMB, never off the model. A key press fires `input` and\n * `change` back to back in one task, and under a parent `v-model` the model's local copy only\n * catches up when the parent re-renders, so it would still hold the value from before the key.\n */\nfunction onThumbChange(which: Thumb, event: Event) {\n  if (props.readonly) return\n  const value = Number((event.target as HTMLInputElement).value)\n  if (!props.range) emit('change', value)\n  else if (which === 'start') emit('change', [value, Math.max(value, endValue.value)])\n  else emit('change', [Math.min(value, startValue.value), value])\n}\n\n/** How many whole steps the thumb can actually stop on. */\nconst stepCount = computed(() =>\n  props.step > 0 ? Math.floor((props.max - props.min) / props.step + 1e-9) : 0,\n)\n\n/**\n * The highest value a thumb can actually stop on, which is the last whole step and not\n * necessarily the maximum: with `min=0 max=95 step=10` the native control stops at 90.\n */\nconst lastStop = computed(() =>\n  props.step > 0 ? props.min + stepCount.value * props.step : props.max,\n)\n\nconst showTicks = computed(\n  () =>\n    (props.ticks || props.labels !== undefined) && stepCount.value >= 1 && stepCount.value <= 50,\n)\n\n/** Each step's value and the style that places it, shared by the ticks and the labels. */\nconst stepPlaces = computed(() => {\n  const length = Math.max(showTicks.value ? stepCount.value + 1 : 0, props.labels?.length ?? 0)\n  return Array.from({ length }, (_, i) => {\n    const value = props.min + i * props.step\n    return { value, style: { '--fill-fraction': String(frac(value)) } }\n  })\n})\n\nconst tickPlaces = computed(() =>\n  showTicks.value ? stepPlaces.value.slice(0, stepCount.value + 1) : [],\n)\n\nconst isFilled = (value: number) =>\n  props.range ? value >= startValue.value && value <= endValue.value : value <= endValue.value\n\n// Resolved once here and handed to the number fields as the result, so the fields and the\n// bubble can never read the value in two different languages.\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(resolvedLocale.value, props.formatOptions),\n)\nconst formatValue = (value: number) => numberFormat.value.format(value)\n\n/** What a value is called, if the consumer named its step; failing that, the number written. */\nfunction labelTextAt(value: number): string {\n  const item = props.labels?.[Math.round((value - props.min) / props.step)]\n  if (item === undefined) return formatValue(value)\n  return typeof item === 'string' ? item : item.label\n}\n\n// @a11y\n/*\n * Resolve the label against consumer ARIA attributes before deriving distinct range-thumb\n * names; an undefined prop must not erase their accessible name.\n */\nconst m = useMessages()\nconst resolvedLabel = useAriaLabel(() => props.label)\nconst startLabel = computed(() =>\n  resolvedLabel.value ? m.value.slider.rangeStart(resolvedLabel.value) : m.value.slider.start,\n)\nconst endLabel = computed(() =>\n  resolvedLabel.value ? m.value.slider.rangeEnd(resolvedLabel.value) : m.value.slider.end,\n)\nconst thumbEndLabel = computed(() => (props.range ? endLabel.value : resolvedLabel.value))\nconst fieldEndLabel = computed(() =>\n  props.range ? endLabel.value : (resolvedLabel.value ?? m.value.slider.value),\n)\n\n// @a11y\n// Said only when it adds something to the bare number a range announces: a step label, or a\n// value written with `formatOptions` (\"120 €\" rather than \"120\").\nconst spokenText = (value: number) =>\n  props.labels || props.formatOptions ? labelTextAt(value) : undefined\nconst startValueText = computed(() => (props.range ? spokenText(startValue.value) : undefined))\nconst endValueText = computed(() => spokenText(endValue.value))\n\n// @a11y\n/*\n * The wrapper-root split. The root here is a layout box holding the labels, the track and the\n * optional number fields, so a consumer's `name`, `id`, `required` and `aria-*` have to be\n * redirected onto the real `<input type=\"range\">`; left on the wrapper, a `name` submits\n * nothing and a `<label for>` points at a div.\n */\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n/**\n * What reaches the end thumb from VField: the consumer's attributes and the description. The\n * thumbs are named by `aria-label`, carrying the label's words, so VField's reference to the\n * label text gives way to the consumer's own `aria-labelledby`, if any. A `required` attribute\n * is VField's prop on the way, which group mode keeps for its asterisk: it is handed on here.\n */\nfunction thumbAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return {\n    ...fieldProps,\n    'aria-labelledby': attrs['aria-labelledby'] as string | undefined,\n    required: attrs.required as true | undefined,\n  }\n}\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n/**\n * Where the fields go, `ends` standing in for any other truthy value: a bare `inputs`\n * attribute reaches the component as `true`, the prop being part boolean.\n */\nconst inputsPlace = computed(() =>\n  props.inputs === 'top' || props.inputs === 'bottom' ? props.inputs : props.inputs && 'ends',\n)\n\n// @devwarn\n/*\n * Every guard here describes something that fails SILENTLY. They sit in an effect, so a\n * bound that only becomes wrong on a later render is still caught, and each sentence is\n * given once per instance: the same warning repeated on every keystroke is how a warning\n * stops being read (the `useFileField` arrangement).\n */\nif (isDev) {\n  // Keyed by a short id rather than by the sentence: each of these embeds a count, so the\n  // same guard reported twice would read as two different messages and warn again.\n  const warned = new Set<string>()\n  const warn = (id: string, message: string) => {\n    if (warned.has(id)) return\n    warned.add(id)\n    console.warn(`[VSlider] ${message}`)\n  }\n  watchEffect(() => {\n    if (props.step <= 0)\n      warn(\n        'step',\n        `step=\"${props.step}\" cannot move a thumb: the arrow keys do nothing and a value typed into a field is committed as it stands. Give a positive step.`,\n      )\n    if ((props.ticks || props.labels) && stepCount.value > 50)\n      warn(\n        'ticks',\n        `${stepCount.value} steps: no tick is drawn past 50, the comb being unreadable.`,\n      )\n    if (props.labels && props.labels.length !== stepCount.value + 1)\n      warn(\n        'labels',\n        `${props.labels.length} labels for ${stepCount.value + 1} steps: one label per step expected.`,\n      )\n    if (props.inputs !== false && props.inputs !== inputsPlace.value)\n      warn(\n        'inputs',\n        `inputs=\"${String(props.inputs)}\" is not a placement: the fields are drawn at the ends. Write inputs=\"ends\", \"top\" or \"bottom\".`,\n      )\n    if (props.range && attrs.name !== undefined)\n      warn(\n        'name',\n        `name=\"${String(attrs.name)}\" on a range: only the end thumb carries it, so the form receives one value of the two. Bind the model to two inputs of your own instead.`,\n      )\n  })\n}\n\n// @a11y\n/*\n * The fields are rendered in the order they are SEEN, before or after the track, so that\n * the tab order follows the screen. Laid out by the grid alone from a fixed DOM order, a\n * row of fields above the track would be reached one on each side of the thumbs.\n */\nconst fieldsBefore = computed<Thumb[]>(() => {\n  if (inputsPlace.value === 'ends') return props.range ? ['start'] : []\n  if (inputsPlace.value === 'top') return props.range ? ['start', 'end'] : ['end']\n  return []\n})\nconst fieldsAfter = computed<Thumb[]>(() => {\n  if (inputsPlace.value === 'ends') return ['end']\n  if (inputsPlace.value === 'bottom') return props.range ? ['start', 'end'] : ['end']\n  return []\n})\n\nconst fieldLabel = (which: Thumb) => (which === 'start' ? startLabel.value : fieldEndLabel.value)\n\n// @core\n/**\n * What a number field commits, on leaving it or on Enter. VNumberInput has already parsed and\n * bounded it, and puts its text back to the value it is given when this refuses or changes\n * what was typed; an emptied field is refused.\n */\nfunction commitField(which: Thumb, typed: number | null) {\n  if (typed === null) return\n  // The ceiling is the last step that FITS, never `max` itself: a native range stops there\n  // (what `stepCount` counts), so a value past it would put the thumb, the fill and the number\n  // out of step.\n  const snapped =\n    props.step > 0 ? props.min + Math.round((typed - props.min) / props.step) * props.step : typed\n  const value = Math.min(lastStop.value, Math.round(snapped * 1e10) / 1e10)\n  const previous = thumbValue(which)\n  const next = writeThumb(which, value)\n  // Emitted only when the value MOVED, as a native range emits nothing for a key that cannot\n  // move its thumb; and the payload is `next`, the model's local copy lagging a parent\n  // `v-model` (see `onThumbChange`).\n  if (writtenFor(next, which) !== previous) emit('change', next)\n}\n\nconst endThumbEl = ref<HTMLInputElement | null>(null)\n\n// Both members point at the END thumb: it is the one always rendered, and the one the\n// consumer's `id` lands on, so `focus()` goes where a `<label for>` would send it.\ndefineExpose({\n  /** Moves the focus to the end thumb, the only thumb outside range mode. */\n  focus: (options?: FocusOptions) => endThumbEl.value?.focus(options),\n  /** The end thumb's real `<input type=\"range\">`, for what `focus` does not cover. */\n  el: endThumbEl,\n})\n</script>\n\n<template>\n  <VField\n    v-bind=\"forwardedAttrs\"\n    class=\"v-slider\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :disabled=\"resolvedDisabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n    group\n  >\n    <!-- The label is text only: the thumbs carry the same words as their accessible names. -->\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-slider-body\"\n        :data-range=\"range ? '' : undefined\"\n        :data-disabled=\"resolvedDisabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n        :data-invalid=\"isInvalid ? '' : undefined\"\n        :data-size=\"resolvedSize\"\n        :data-orientation=\"orientation\"\n        :data-inputs=\"inputsPlace || undefined\"\n        :style=\"{\n          '--slider-start-fraction': range ? String(frac(startValue)) : undefined,\n          '--slider-end-fraction': String(frac(endValue)),\n        }\"\n      >\n        <VNumberInput\n          v-for=\"which in fieldsBefore\"\n          :key=\"which\"\n          :model-value=\"thumbValue(which)\"\n          :class=\"['v-slider-field', `v-slider-field-${which}`]\"\n          controls=\"none\"\n          :format-options=\"formatOptions\"\n          :locale=\"resolvedLocale\"\n          :size=\"resolvedSize\"\n          :compact=\"resolvedCompact\"\n          :min=\"min\"\n          :max=\"max\"\n          :step=\"step\"\n          :disabled=\"resolvedDisabled\"\n          :readonly=\"readonly\"\n          :invalid=\"isInvalid\"\n          :aria-label=\"fieldLabel(which)\"\n          @update:model-value=\"commitField(which, $event)\"\n        />\n        <div class=\"v-slider-rail\">\n          <span class=\"v-slider-control\">\n            <span class=\"v-slider-track\" aria-hidden=\"true\">\n              <span class=\"v-slider-fill\" />\n              <span\n                v-for=\"(tick, i) in tickPlaces\"\n                :key=\"i\"\n                class=\"v-slider-tick\"\n                :data-filled=\"isFilled(tick.value) ? '' : undefined\"\n                :style=\"tick.style\"\n              />\n            </span>\n            <input\n              v-if=\"range\"\n              type=\"range\"\n              class=\"v-slider-input v-slider-input-start\"\n              :min=\"min\"\n              :max=\"max\"\n              :step=\"step\"\n              :disabled=\"resolvedDisabled\"\n              :value=\"startValue\"\n              :aria-label=\"startLabel\"\n              :aria-valuetext=\"startValueText\"\n              :aria-invalid=\"isInvalid || undefined\"\n              :aria-readonly=\"readonly || undefined\"\n              @keydown=\"onThumbKeydown\"\n              @input=\"onThumbInput('start', $event)\"\n              @change=\"onThumbChange('start', $event)\"\n            />\n            <!--\n          The consumer's attributes come first, so what the component decides for itself; the\n          bounds, the value and the disabled state; cannot be overwritten by one of them, and so\n          that an ARIA state the consumer sets is not erased by an `undefined` of ours.\n          `aria-valuetext` is one of those: the component has one to say only when `labels` or\n          `formatOptions` was given.\n        -->\n            <input\n              ref=\"endThumbEl\"\n              :aria-invalid=\"isInvalid || undefined\"\n              :aria-readonly=\"readonly || undefined\"\n              :aria-valuetext=\"endValueText\"\n              v-bind=\"thumbAttrs(fieldProps)\"\n              type=\"range\"\n              class=\"v-slider-input v-slider-input-end\"\n              :min=\"min\"\n              :max=\"max\"\n              :step=\"step\"\n              :disabled=\"resolvedDisabled\"\n              :value=\"endValue\"\n              :aria-label=\"thumbEndLabel\"\n              @keydown=\"onThumbKeydown\"\n              @input=\"onThumbInput('end', $event)\"\n              @change=\"onThumbChange('end', $event)\"\n            />\n          </span>\n          <span\n            v-if=\"tooltip && range\"\n            class=\"v-slider-tooltip v-slider-tooltip-start\"\n            aria-hidden=\"true\"\n          >\n            <span class=\"v-slider-tooltip-bubble\">{{ labelTextAt(startValue) }}</span>\n          </span>\n          <span v-if=\"tooltip\" class=\"v-slider-tooltip v-slider-tooltip-end\" aria-hidden=\"true\">\n            <span class=\"v-slider-tooltip-bubble\">{{ labelTextAt(endValue) }}</span>\n          </span>\n        </div>\n        <div v-if=\"labels\" class=\"v-slider-labels\">\n          <span\n            v-for=\"(item, i) in labels\"\n            :key=\"i\"\n            class=\"v-slider-label\"\n            :style=\"stepPlaces[i]?.style\"\n          >\n            <template v-if=\"typeof item === 'string'\">{{ item }}</template>\n            <VIcon v-else v-bind=\"iconProps(item.icon)\" :label=\"item.label\" />\n          </span>\n        </div>\n        <VNumberInput\n          v-for=\"which in fieldsAfter\"\n          :key=\"which\"\n          :model-value=\"thumbValue(which)\"\n          :class=\"['v-slider-field', `v-slider-field-${which}`]\"\n          controls=\"none\"\n          :format-options=\"formatOptions\"\n          :locale=\"resolvedLocale\"\n          :size=\"resolvedSize\"\n          :compact=\"resolvedCompact\"\n          :min=\"min\"\n          :max=\"max\"\n          :step=\"step\"\n          :disabled=\"resolvedDisabled\"\n          :readonly=\"readonly\"\n          :invalid=\"isInvalid\"\n          :aria-label=\"fieldLabel(which)\"\n          @update:model-value=\"commitField(which, $event)\"\n        />\n      </div>\n    </template>\n  </VField>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-slider-body {\n    --slider-thumb: var(--vectis-control-size-slider-thumb);\n    --slider-track: var(--vectis-control-size-slider-track);\n    display: grid;\n    grid-template-areas: 'rail';\n    grid-template-columns: minmax(0, 1fr);\n    align-items: center;\n    column-gap: var(--vectis-space-2);\n    row-gap: var(--vectis-space-1);\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * Each combination is written with exactly the conditions that define it, so a richer one\n   * always carries one condition more than the poorer ones it also matches and wins on WEIGHT,\n   * never on source order: `[data-inputs='ends'][data-range]:has(.v-slider-labels)` is (0,4,0)\n   * against the (0,3,0) of the two it builds on. `:has()` weighs its argument.\n   */\n  .v-slider-body:has(.v-slider-labels) {\n    grid-template-areas: 'rail' 'labels';\n  }\n\n  .v-slider-body[data-inputs='ends'] {\n    grid-template-areas: 'rail field-end';\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='ends']:has(.v-slider-labels) {\n    grid-template-areas: 'rail field-end' 'labels .';\n  }\n\n  .v-slider-body[data-inputs='ends'][data-range] {\n    grid-template-areas: 'field-start rail field-end';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='ends'][data-range]:has(.v-slider-labels) {\n    grid-template-areas: 'field-start rail field-end' '. labels .';\n  }\n\n  .v-slider-body[data-inputs='top'] {\n    grid-template-areas: 'field-start . field-end' 'rail rail rail';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='top']:has(.v-slider-labels) {\n    grid-template-areas: 'field-start . field-end' 'rail rail rail' 'labels labels labels';\n  }\n\n  .v-slider-body[data-inputs='bottom'] {\n    grid-template-areas: 'rail rail rail' 'field-start . field-end';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='bottom']:has(.v-slider-labels) {\n    grid-template-areas: 'rail rail rail' 'labels labels labels' 'field-start . field-end';\n  }\n\n  .v-slider-rail {\n    grid-area: rail;\n    position: relative;\n    block-size: var(--slider-thumb);\n  }\n\n  .v-slider-control {\n    position: absolute;\n    inset: 0;\n  }\n\n  .v-slider-track {\n    position: absolute;\n    inset-inline: 0;\n    inset-block: 0;\n    margin-block: auto;\n    block-size: var(--slider-track);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border);\n    overflow: hidden;\n  }\n\n  /*\n   * It must be declared on the element that CARRIES the fraction, never on an ancestor. A\n   * custom property's `var()` is resolved where the property is declared, so set on the root it\n   * would read a `--fill-fraction` the root does not have and turn invalid, and every tick,\n   * label and bubble would drop to its static position at the start of the track, with no\n   * error.\n   */\n  .v-slider-fill,\n  .v-slider-tick,\n  .v-slider-tooltip,\n  .v-slider-label {\n    --slider-at: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\n  }\n\n  .v-slider-fill {\n    --fill-fraction: var(--slider-end-fraction);\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: var(--slider-at);\n    background: var(--vectis-color-accent);\n  }\n\n  .v-slider-body[data-range] .v-slider-fill {\n    --fill-fraction: var(--slider-start-fraction);\n    inset-inline-start: var(--slider-at);\n    inline-size: calc(\n      (100% - var(--slider-thumb)) * (var(--slider-end-fraction) - var(--slider-start-fraction))\n    );\n  }\n\n  .v-slider-tick {\n    --slider-tick: calc(var(--slider-track) / 3 * 2);\n    position: absolute;\n    inset-block: 0;\n    margin-block: auto;\n    inset-inline-start: calc(var(--slider-at) - var(--slider-tick) / 2);\n    inline-size: var(--slider-tick);\n    block-size: var(--slider-tick);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n  }\n\n  .v-slider-tick[data-filled] {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /*\n   * Without that, the one on top would swallow every click and the other thumb could never be\n   * grabbed. The thumb's paint lives in variables set here, on the control, and read once by\n   * each vendor pseudo-element below.\n   */\n  .v-slider-input {\n    --slider-thumb-bg: var(--vectis-color-text-on-accent);\n    --slider-thumb-border: var(--vectis-color-accent);\n    --slider-thumb-shadow: var(--vectis-shadow-xs);\n    --slider-thumb-outline: none;\n    --slider-thumb-cursor: pointer;\n    --slider-thumb-transition: background-color var(--vectis-duration-fast)\n      var(--vectis-ease-default);\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    appearance: none;\n    background: transparent;\n    pointer-events: none;\n  }\n\n  /*\n   * With a single thumb there is nothing underneath to protect, so the whole control takes the\n   * pointer again; which makes clicking the track jump the value there and start dragging at\n   * once, natively and with no code at all. The accepted side effect is that the thumb lights\n   * up when the pointer is anywhere over the track.\n   */\n  .v-slider-body:not([data-range]) .v-slider-input {\n    pointer-events: auto;\n    cursor: pointer;\n  }\n\n  /*\n   * The two vendor pseudo-elements stay in two separate rules. A selector list holding one a\n   * browser does not know is dropped whole, so merged, each engine would throw away the other's\n   * thumb and draw its native one.\n   */\n  .v-slider-input::-webkit-slider-thumb {\n    appearance: none;\n    pointer-events: auto;\n    width: var(--slider-thumb);\n    height: var(--slider-thumb);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--slider-thumb-bg);\n    border: var(--vectis-control-border-width) solid var(--slider-thumb-border);\n    box-shadow: var(--slider-thumb-shadow);\n    outline: var(--slider-thumb-outline);\n    outline-offset: var(--vectis-focus-ring-offset);\n    cursor: var(--slider-thumb-cursor);\n    transition: var(--slider-thumb-transition);\n  }\n\n  .v-slider-input::-moz-range-thumb {\n    pointer-events: auto;\n    width: var(--slider-thumb);\n    height: var(--slider-thumb);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--slider-thumb-bg);\n    border: var(--vectis-control-border-width) solid var(--slider-thumb-border);\n    box-shadow: var(--slider-thumb-shadow);\n    outline: var(--slider-thumb-outline);\n    outline-offset: var(--vectis-focus-ring-offset);\n    cursor: var(--slider-thumb-cursor);\n    transition: var(--slider-thumb-transition);\n  }\n\n  /* The states, all at (0,3,0) but the base, so their ORDER arbitrates them: hover, then\n     read-only, invalid and disabled, each overriding what came before on a thumb that is\n     several at once.\n\n     The hover tint is mixed from the thumb's own white rather than read from\n     `accent-surface`: that token turns dark in the dark theme, and a white thumb would\n     flash nearly black under the pointer. */\n  .v-slider-input:is(:hover, :active):not(:disabled) {\n    --slider-thumb-bg: color-mix(\n      in oklab,\n      var(--vectis-color-text-on-accent),\n      var(--vectis-color-accent) 10%\n    );\n  }\n\n  .v-slider-input:focus-visible {\n    --slider-thumb-outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline: none;\n  }\n\n  .v-slider-body[data-readonly] .v-slider-input {\n    --slider-thumb-bg: var(--vectis-color-surface);\n    --slider-thumb-border: var(--vectis-color-text-muted);\n    --slider-thumb-cursor: default;\n    cursor: default;\n  }\n\n  .v-slider-body[data-readonly] .v-slider-fill {\n    background: var(--vectis-color-text-muted);\n  }\n\n  .v-slider-body[data-readonly] .v-slider-tick[data-filled] {\n    background: var(--vectis-color-surface);\n  }\n\n  .v-slider-body[data-invalid] .v-slider-input {\n    --slider-thumb-border: var(--vectis-color-danger);\n  }\n\n  /*\n   * It looks like a VTooltip but is placed by arithmetic rather than anchored to the thumb: a\n   * native thumb is a pseudo-element, and the browser's anchoring cannot attach anything to\n   * one. The fraction it follows is the one the root already carries for the fill.\n   */\n  .v-slider-tooltip {\n    position: absolute;\n    inset-block-end: calc(100% + var(--vectis-space-2));\n    inset-inline-start: var(--slider-at);\n    inline-size: 0;\n    display: flex;\n    justify-content: center;\n    opacity: 0;\n    visibility: hidden;\n    transition:\n      opacity var(--vectis-duration-fast) var(--vectis-ease-default),\n      visibility var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-slider-tooltip-start {\n    --fill-fraction: var(--slider-start-fraction);\n  }\n\n  .v-slider-tooltip-end {\n    --fill-fraction: var(--slider-end-fraction);\n  }\n\n  .v-slider-body:has(.v-slider-input-start:active) .v-slider-tooltip-start,\n  .v-slider-body:has(.v-slider-input-start:focus-visible) .v-slider-tooltip-start,\n  .v-slider-body:has(.v-slider-input-end:active) .v-slider-tooltip-end,\n  .v-slider-body:has(.v-slider-input-end:focus-visible) .v-slider-tooltip-end {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .v-slider-tooltip-bubble {\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    background: var(--vectis-color-surface-inverse);\n    color: var(--vectis-color-text-on-inverse);\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n    border-radius: min(var(--vectis-radius-interactive), calc(0.5lh + var(--vectis-space-1)));\n    box-shadow: var(--vectis-shadow-sm);\n    white-space: nowrap;\n  }\n\n  .v-slider-labels {\n    grid-area: labels;\n    position: relative;\n    /* The labels are positioned individually and therefore contribute no height of\n       their own; this reserves enough room for either kind, a small line of text or an\n       icon. */\n    min-block-size: var(--vectis-icon-size-md);\n    /* The pair travels together, as it does in every `[data-size]` block of\n       control-size.css: the size applies to every source, the optical size only to the\n       ligature, and setting one without the other draws a 20px glyph cut for 24. */\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A box of zero width placed exactly on the step: its content then overflows equally\n     on both sides, which centres it there. Centring it with a transform would be the\n     usual trick, but a transform is physical and would have to be undone for the\n     vertical orientation and again for a right-to-left page. */\n  .v-slider-label {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: var(--slider-at);\n    inline-size: 0;\n    display: flex;\n    justify-content: center;\n    white-space: nowrap;\n  }\n\n  .v-slider-field.v-input {\n    inline-size: var(--vectis-control-size-slider-field);\n  }\n\n  /* Qualify number-field selectors so their layout cannot depend on VInput stylesheet order. */\n  .v-slider-field-start.v-input {\n    grid-area: field-start;\n  }\n\n  .v-slider-field-end.v-input {\n    grid-area: field-end;\n  }\n\n  .v-slider-body[data-orientation='vertical'] {\n    grid-template-areas: 'rail';\n    grid-template-columns: none;\n    inline-size: fit-content;\n    justify-items: center;\n  }\n\n  .v-slider-body[data-orientation='vertical']:has(.v-slider-labels) {\n    grid-template-areas: 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends'] {\n    grid-template-areas: 'field-end' 'rail';\n    grid-template-columns: none;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends']:has(.v-slider-labels) {\n    grid-template-areas: 'field-end .' 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends'][data-range] {\n    grid-template-areas: 'field-end' 'rail' 'field-start';\n    grid-template-columns: none;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends'][data-range]:has(\n      .v-slider-labels\n    ) {\n    grid-template-areas: 'field-end .' 'rail labels' 'field-start .';\n    grid-template-columns: auto auto;\n  }\n\n  /*\n   * Upright, `top` and `bottom` become the two SIDES, the inline start and the inline end: the\n   * fields stack in a column beside the track, the end field level with its top and the start\n   * field with its bottom, where the values they hold sit. The track spans the three rows and\n   * gives them their height, the middle one taking whatever the fields leave.\n   */\n  .v-slider-body[data-orientation='vertical'][data-inputs='top'] {\n    grid-template-areas: 'field-end rail' '. rail' 'field-start rail';\n    grid-template-columns: auto auto;\n    grid-template-rows: auto 1fr auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='top']:has(.v-slider-labels) {\n    grid-template-areas:\n      'field-end rail labels'\n      '. rail labels'\n      'field-start rail labels';\n    grid-template-columns: auto auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='bottom'] {\n    grid-template-areas: 'rail field-end' 'rail .' 'rail field-start';\n    grid-template-columns: auto auto;\n    grid-template-rows: auto 1fr auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='bottom']:has(.v-slider-labels) {\n    grid-template-areas:\n      'rail labels field-end'\n      'rail labels .'\n      'rail labels field-start';\n    grid-template-columns: auto auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-rail {\n    inline-size: var(--slider-thumb);\n    block-size: var(--vectis-control-size-slider-length);\n  }\n\n  /*\n   * Rotate only the track box and reverse its direction; labels remain horizontal and the\n   * minimum value stays at the bottom.\n   */\n  .v-slider-body[data-orientation='vertical'] .v-slider-control {\n    writing-mode: vertical-lr;\n    direction: rtl;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-tooltip {\n    inset-block-end: var(--slider-at);\n    inset-inline-start: auto;\n    inset-inline-end: calc(100% + var(--vectis-space-2));\n    inline-size: auto;\n    block-size: 0;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-labels {\n    align-self: stretch;\n    min-block-size: auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-label {\n    inset-block-start: auto;\n    inset-block-end: var(--slider-at);\n    inset-inline-start: 0;\n    inline-size: auto;\n    block-size: 0;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  /*\n   * A disabled slider greys out through the colour tokens, the same ones VCheckbox and VSwitch\n   * use, and never through opacity. It comes last among the states, so a slider both disabled\n   * and read-only or invalid is drawn disabled.\n   */\n  .v-slider-body[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  .v-slider-body[data-disabled] .v-slider-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-fill {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-tick {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * A tick sitting on the greyed fill takes the light colour back, so that it stays visible\n   * against it; the same inversion VCheckbox applies to its disabled tick.\n   */\n  .v-slider-body[data-disabled] .v-slider-tick[data-filled] {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-labels {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-input {\n    --slider-thumb-bg: var(--vectis-color-surface-muted);\n    --slider-thumb-border: var(--vectis-color-text-subtle);\n    --slider-thumb-shadow: none;\n    --slider-thumb-cursor: not-allowed;\n    cursor: not-allowed;\n  }\n\n  /*\n   * Forced colours erase background-only tracks and ticks. Restore the track edge and use\n   * system Highlight/HighlightText for selected portions.\n   */\n  @media (forced-colors: active) {\n    .v-slider-body .v-slider-track {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-slider-body .v-slider-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .v-slider-body .v-slider-tick {\n      forced-color-adjust: none;\n      background: CanvasText;\n    }\n\n    .v-slider-body .v-slider-tick[data-filled] {\n      background: HighlightText;\n    }\n\n    .v-slider-body .v-slider-input {\n      forced-color-adjust: none;\n      --slider-thumb-bg: Canvas;\n      --slider-thumb-border: CanvasText;\n      --slider-thumb-shadow: none;\n    }\n\n    .v-slider-body[data-disabled] .v-slider-track {\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) GrayText;\n    }\n\n    .v-slider-body[data-disabled] .v-slider-fill,\n    .v-slider-body[data-disabled] .v-slider-tick {\n      background: GrayText;\n    }\n\n    .v-slider-body[data-disabled] .v-slider-input {\n      --slider-thumb-border: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-slider-input {\n      --slider-thumb-transition: none;\n    }\n\n    .v-slider-tooltip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSlider.js","names":["_sfc_main","VSlider_vue_vue_type_script_setup_true_lang_default","VSlider_default"],"sources":["../../../src/components/VSlider/VSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Native range inputs own thumb interaction. JavaScript keeps range endpoints ordered and\n * synchronizes optional number fields, labels and ARIA values.\n */\n\nimport { computed, inject, ref, watchEffect } from 'vue'\nimport VField from '../VField/VField.vue'\nimport type { FieldControlProps, FieldLabelPosition } from '../VField/VField.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { inputGroupKey } from '../VInput/context'\nimport VNumberInput from '../VNumberInput/VNumberInput.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/**\n * What one step of the track is called: a piece of text, or an icon paired with the words that\n * name it, which a screen reader reads in place of the raw number.\n */\nexport type SliderLabel = string | { icon: IconSource; label: string }\n\n/** The value of a slider: one number, or an ordered pair of them in range mode. */\nexport type SliderValue = number | [number, number]\n\n/** Which way the track runs. */\nexport type SliderOrientation = 'horizontal' | 'vertical'\n\n/** The height of the number fields: 32, 40 or 48 pixels. */\nexport type SliderSize = 'sm' | 'md' | 'lg'\n\n/**\n * Where the number fields sit: none, at the ends of the track, or in a row above or below\n * it. On an upright slider, above and below become the two sides of it.\n */\nexport type SliderInputs = false | 'ends' | 'top' | 'bottom'\n\ninterface SliderProps {\n  /** The lowest value the thumb can reach. It is 0 by default. */\n  min?: number\n  /** The highest value the thumb can reach. It is 100 by default. */\n  max?: number\n  /**\n   * The gap between two values the thumb can stop on, 1 by default. It is also what the\n   * arrow keys move by, and what a value typed into the companion field is snapped to.\n   */\n  step?: number\n  /** Offers two thumbs to pick a range, which makes the v-model a pair of values. */\n  range?: boolean\n  /** Makes the slider unusable. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The thumbs can still be focused and\n   * are announced as read-only, but neither the pointer nor the keyboard moves them, and the\n   * number fields turn read-only with them.\n   */\n  readonly?: boolean\n  /**\n   * Marks the value as invalid, which colours the thumbs and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /**\n   * The height of the number fields `inputs` adds. Inside a VInputGroup the group's size\n   * wins, as it does for every field of the row.\n   */\n  size?: SliderSize\n  /**\n   * The label above the slider, which also names its thumbs: in range mode they are announced\n   * as the start and the end of it.\n   */\n  label?: string\n  /** Hides the label visually. It still names the thumbs for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the slider (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /**\n   * A line of help under the track, stating what the numbers mean or where they may go. It\n   * is tied to the slider for assistive technology, so it is read out after the name rather\n   * 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  /** Turns the slider upright, with the lowest value at the bottom. */\n  orientation?: SliderOrientation\n  /**\n   * Adds a number field for setting the value exactly: one, or one per end in range mode. No\n   * field is drawn by default.\n   */\n  inputs?: SliderInputs\n  /**\n   * Marks each step on the track. Providing labels implies it. Past fifty steps the\n   * marks would be an unreadable comb and are not drawn at all.\n   */\n  ticks?: boolean\n  /**\n   * A label for every step, in order: a piece of text, or an icon with the words that\n   * name it for screen readers. They also become what a screen reader announces in\n   * place of the raw number.\n   */\n  labels?: SliderLabel[]\n  /** Shows the value in a bubble above the thumb while it is being moved or focused. */\n  tooltip?: boolean\n  /**\n   * How the value is written in the bubble, the number fields and what the thumbs announce: the\n   * options of `Intl.NumberFormat`, for a price, a unit or a percentage. `min`, `max` and `step`\n   * stay in the model's unit: with `style: 'percent'`, 0.25 is written 25%.\n   */\n  formatOptions?: Intl.NumberFormatOptions\n  /** The locale the value is written and read in. It defaults to the design system's. */\n  locale?: string\n}\n\nconst props = withDefaults(defineProps<SliderProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  range: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  size: 'md',\n  label: undefined,\n  hideLabel: false,\n  labelPosition: 'top',\n  hint: undefined,\n  error: undefined,\n  orientation: 'horizontal',\n  inputs: false,\n  ticks: false,\n  labels: undefined,\n  tooltip: false,\n  formatOptions: undefined,\n  locale: undefined,\n})\n\n/** The value: a single number, 0 to begin with, or an ordered pair once `range` is set. */\nconst model = defineModel<SliderValue>({ default: 0 })\n\nconst emit = defineEmits<{\n  /** The value is BEING changed: every step of a drag, and every key that moves a thumb. */\n  input: [value: SliderValue]\n  /**\n   * The reader has SETTLED on a value: a thumb was released or moved by a key, or a number\n   * field was committed.\n   */\n  change: [value: SliderValue]\n}>()\n\n// The number fields are fields of a VInputGroup row like any other, so the row's size and\n// its disabled state reach them through the same arbitration. A slider has no `compact` of\n// its own: only the row's can apply.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(\n  {\n    get size() {\n      return props.size\n    },\n    compact: false,\n    get disabled() {\n      return props.disabled\n    },\n  },\n  group,\n)\n\ntype Thumb = 'start' | 'end'\n\nconst startValue = computed(() => (Array.isArray(model.value) ? model.value[0] : props.min))\nconst endValue = computed(() =>\n  Array.isArray(model.value) ? model.value[1] : (model.value as number),\n)\n\nconst thumbValue = (which: Thumb) => (which === 'start' ? startValue.value : endValue.value)\n\n/**\n * Where a value sits along the run, as a fraction between 0 and 1. The guard covers a\n * slider whose two bounds are equal, which would otherwise divide by zero.\n */\nconst frac = (v: number) => clamp((v - props.min) / (props.max - props.min || 1), 0, 1)\n\n// @core\n// The thumb being held PUSHES its sibling; it must not stop against it. Two thumbs resting on\n// the same value are one thumb as far as the pointer is concerned, the end one being last in\n// the DOM and therefore the only one it can reach; so a range stopped at `[100, 100]` could\n// only ever be raised, and at the maximum it could not move at all.\nfunction writeThumb(which: Thumb, n: number): SliderValue {\n  const next: SliderValue = !props.range\n    ? n\n    : which === 'start'\n      ? [n, Math.max(n, endValue.value)]\n      : [Math.min(n, startValue.value), n]\n  model.value = next\n  return next\n}\n\nconst writtenFor = (value: SliderValue, which: Thumb) =>\n  Array.isArray(value) ? value[which === 'start' ? 0 : 1] : value\n\nfunction onThumbInput(which: Thumb, event: Event) {\n  const el = event.target as HTMLInputElement\n  // @core\n  // A drag or a click on the track has ALREADY moved the native thumb when `input` fires,\n  // and the event cannot be cancelled: putting the value back is the only refusal there is.\n  // It lands before the browser paints, so the thumb never visibly leaves its place, and\n  // since the value at release is the one it started from, no `change` follows either.\n  if (props.readonly) {\n    el.value = String(thumbValue(which))\n    return\n  }\n  const next = writeThumb(which, Number(el.value))\n  el.value = String(writtenFor(next, which))\n  emit('input', next)\n}\n\n// @keyboard @core\n// The keys that move a range input, cancelled before the browser applies them when the\n// slider is read-only. Tab and every other key pass, so the thumbs stay reachable.\nconst VALUE_KEYS = new Set([\n  'ArrowUp',\n  'ArrowDown',\n  'ArrowLeft',\n  'ArrowRight',\n  'Home',\n  'End',\n  'PageUp',\n  'PageDown',\n])\n\nfunction onThumbKeydown(event: KeyboardEvent) {\n  if (props.readonly && VALUE_KEYS.has(event.key)) event.preventDefault()\n}\n\n// @core\n/*\n * The settled value is read off the THUMB, never off the model. A key press fires `input` and\n * `change` back to back in one task, and under a parent `v-model` the model's local copy only\n * catches up when the parent re-renders, so it would still hold the value from before the key.\n */\nfunction onThumbChange(which: Thumb, event: Event) {\n  if (props.readonly) return\n  const value = Number((event.target as HTMLInputElement).value)\n  if (!props.range) emit('change', value)\n  else if (which === 'start') emit('change', [value, Math.max(value, endValue.value)])\n  else emit('change', [Math.min(value, startValue.value), value])\n}\n\n/** How many whole steps the thumb can actually stop on. */\nconst stepCount = computed(() =>\n  props.step > 0 ? Math.floor((props.max - props.min) / props.step + 1e-9) : 0,\n)\n\n/**\n * The highest value a thumb can actually stop on, which is the last whole step and not\n * necessarily the maximum: with `min=0 max=95 step=10` the native control stops at 90.\n */\nconst lastStop = computed(() =>\n  props.step > 0 ? props.min + stepCount.value * props.step : props.max,\n)\n\nconst showTicks = computed(\n  () =>\n    (props.ticks || props.labels !== undefined) && stepCount.value >= 1 && stepCount.value <= 50,\n)\n\n/** Each step's value and the style that places it, shared by the ticks and the labels. */\nconst stepPlaces = computed(() => {\n  const length = Math.max(showTicks.value ? stepCount.value + 1 : 0, props.labels?.length ?? 0)\n  return Array.from({ length }, (_, i) => {\n    const value = props.min + i * props.step\n    return { value, style: { '--fill-fraction': String(frac(value)) } }\n  })\n})\n\nconst tickPlaces = computed(() =>\n  showTicks.value ? stepPlaces.value.slice(0, stepCount.value + 1) : [],\n)\n\nconst isFilled = (value: number) =>\n  props.range ? value >= startValue.value && value <= endValue.value : value <= endValue.value\n\n// Resolved once here and handed to the number fields as the result, so the fields and the\n// bubble can never read the value in two different languages.\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(resolvedLocale.value, props.formatOptions),\n)\nconst formatValue = (value: number) => numberFormat.value.format(value)\n\n/** What a value is called, if the consumer named its step; failing that, the number written. */\nfunction labelTextAt(value: number): string {\n  const item = props.labels?.[Math.round((value - props.min) / props.step)]\n  if (item === undefined) return formatValue(value)\n  return typeof item === 'string' ? item : item.label\n}\n\n// @a11y\n/*\n * Resolve the label against consumer ARIA attributes before deriving distinct range-thumb\n * names; an undefined prop must not erase their accessible name.\n */\nconst m = useMessages()\nconst resolvedLabel = useAriaLabel(() => props.label)\nconst startLabel = computed(() =>\n  resolvedLabel.value ? m.value.slider.rangeStart(resolvedLabel.value) : m.value.slider.start,\n)\nconst endLabel = computed(() =>\n  resolvedLabel.value ? m.value.slider.rangeEnd(resolvedLabel.value) : m.value.slider.end,\n)\nconst thumbEndLabel = computed(() => (props.range ? endLabel.value : resolvedLabel.value))\nconst fieldEndLabel = computed(() =>\n  props.range ? endLabel.value : (resolvedLabel.value ?? m.value.slider.value),\n)\n\n// @a11y\n// Said only when it adds something to the bare number a range announces: a step label, or a\n// value written with `formatOptions` (\"120 €\" rather than \"120\").\nconst spokenText = (value: number) =>\n  props.labels || props.formatOptions ? labelTextAt(value) : undefined\nconst startValueText = computed(() => (props.range ? spokenText(startValue.value) : undefined))\nconst endValueText = computed(() => spokenText(endValue.value))\n\n// @a11y\n/*\n * The wrapper-root split. The root here is a layout box holding the labels, the track and the\n * optional number fields, so a consumer's `name`, `id`, `required` and `aria-*` have to be\n * redirected onto the real `<input type=\"range\">`; left on the wrapper, a `name` submits\n * nothing and a `<label for>` points at a div.\n */\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n/**\n * What reaches the end thumb from VField: the consumer's attributes and the description. The\n * thumbs are named by `aria-label`, carrying the label's words, so VField's reference to the\n * label text gives way to the consumer's own `aria-labelledby`, if any. A `required` attribute\n * is VField's prop on the way, which group mode keeps for its asterisk: it is handed on here.\n */\nfunction thumbAttrs(fieldProps: FieldControlProps): FieldControlProps {\n  return {\n    ...fieldProps,\n    'aria-labelledby': attrs['aria-labelledby'] as string | undefined,\n    required: attrs.required as true | undefined,\n  }\n}\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n/**\n * Where the fields go, `ends` standing in for any other truthy value: a bare `inputs`\n * attribute reaches the component as `true`, the prop being part boolean.\n */\nconst inputsPlace = computed(() =>\n  props.inputs === 'top' || props.inputs === 'bottom' ? props.inputs : props.inputs && 'ends',\n)\n\n// @devwarn\n/*\n * Every guard here describes something that fails SILENTLY. They sit in an effect, so a\n * bound that only becomes wrong on a later render is still caught, and each sentence is\n * given once per instance: the same warning repeated on every keystroke is how a warning\n * stops being read (the `useFileField` arrangement).\n */\nif (isDev) {\n  // Keyed by a short id rather than by the sentence: each of these embeds a count, so the\n  // same guard reported twice would read as two different messages and warn again.\n  const warned = new Set<string>()\n  const warn = (id: string, message: string) => {\n    if (warned.has(id)) return\n    warned.add(id)\n    console.warn(`[VSlider] ${message}`)\n  }\n  watchEffect(() => {\n    if (props.step <= 0)\n      warn(\n        'step',\n        `step=\"${props.step}\" cannot move a thumb: the arrow keys do nothing and a value typed into a field is committed as it stands. Give a positive step.`,\n      )\n    if ((props.ticks || props.labels) && stepCount.value > 50)\n      warn(\n        'ticks',\n        `${stepCount.value} steps: no tick is drawn past 50, the comb being unreadable.`,\n      )\n    if (props.labels && props.labels.length !== stepCount.value + 1)\n      warn(\n        'labels',\n        `${props.labels.length} labels for ${stepCount.value + 1} steps: one label per step expected.`,\n      )\n    if (props.inputs !== false && props.inputs !== inputsPlace.value)\n      warn(\n        'inputs',\n        `inputs=\"${String(props.inputs)}\" is not a placement: the fields are drawn at the ends. Write inputs=\"ends\", \"top\" or \"bottom\".`,\n      )\n    if (props.range && attrs.name !== undefined)\n      warn(\n        'name',\n        `name=\"${String(attrs.name)}\" on a range: only the end thumb carries it, so the form receives one value of the two. Bind the model to two inputs of your own instead.`,\n      )\n  })\n}\n\n// @a11y\n/*\n * The fields are rendered in the order they are SEEN, before or after the track, so that\n * the tab order follows the screen. Laid out by the grid alone from a fixed DOM order, a\n * row of fields above the track would be reached one on each side of the thumbs.\n */\nconst fieldsBefore = computed<Thumb[]>(() => {\n  if (inputsPlace.value === 'ends') return props.range ? ['start'] : []\n  if (inputsPlace.value === 'top') return props.range ? ['start', 'end'] : ['end']\n  return []\n})\nconst fieldsAfter = computed<Thumb[]>(() => {\n  if (inputsPlace.value === 'ends') return ['end']\n  if (inputsPlace.value === 'bottom') return props.range ? ['start', 'end'] : ['end']\n  return []\n})\n\nconst fieldLabel = (which: Thumb) => (which === 'start' ? startLabel.value : fieldEndLabel.value)\n\n// @core\n/**\n * What a number field commits, on leaving it or on Enter. VNumberInput has already parsed and\n * bounded it, and puts its text back to the value it is given when this refuses or changes\n * what was typed; an emptied field is refused.\n */\nfunction commitField(which: Thumb, typed: number | null) {\n  if (typed === null) return\n  // The ceiling is the last step that FITS, never `max` itself: a native range stops there\n  // (what `stepCount` counts), so a value past it would put the thumb, the fill and the number\n  // out of step.\n  const snapped =\n    props.step > 0 ? props.min + Math.round((typed - props.min) / props.step) * props.step : typed\n  const value = Math.min(lastStop.value, Math.round(snapped * 1e10) / 1e10)\n  const previous = thumbValue(which)\n  const next = writeThumb(which, value)\n  // Emitted only when the value MOVED, as a native range emits nothing for a key that cannot\n  // move its thumb; and the payload is `next`, the model's local copy lagging a parent\n  // `v-model` (see `onThumbChange`).\n  if (writtenFor(next, which) !== previous) emit('change', next)\n}\n\nconst endThumbEl = ref<HTMLInputElement | null>(null)\n\n// Both members point at the END thumb: it is the one always rendered, and the one the\n// consumer's `id` lands on, so `focus()` goes where a `<label for>` would send it.\ndefineExpose({\n  /** Moves the focus to the end thumb, the only thumb outside range mode. */\n  focus: (options?: FocusOptions) => endThumbEl.value?.focus(options),\n  /** The end thumb's real `<input type=\"range\">`, for what `focus` does not cover. */\n  el: endThumbEl,\n})\n</script>\n\n<template>\n  <VField\n    v-bind=\"forwardedAttrs\"\n    class=\"v-slider\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :disabled=\"resolvedDisabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n    group\n  >\n    <!-- The label is text only: the thumbs carry the same words as their accessible names. -->\n    <template #default=\"{ fieldProps }\">\n      <div\n        class=\"v-slider-body\"\n        :data-range=\"range ? '' : undefined\"\n        :data-disabled=\"resolvedDisabled ? '' : undefined\"\n        :data-readonly=\"readonly ? '' : undefined\"\n        :data-invalid=\"isInvalid ? '' : undefined\"\n        :data-size=\"resolvedSize\"\n        :data-orientation=\"orientation\"\n        :data-inputs=\"inputsPlace || undefined\"\n        :style=\"{\n          '--slider-start-fraction': range ? String(frac(startValue)) : undefined,\n          '--slider-end-fraction': String(frac(endValue)),\n        }\"\n      >\n        <VNumberInput\n          v-for=\"which in fieldsBefore\"\n          :key=\"which\"\n          :model-value=\"thumbValue(which)\"\n          :class=\"['v-slider-field', `v-slider-field-${which}`]\"\n          controls=\"none\"\n          :format-options=\"formatOptions\"\n          :locale=\"resolvedLocale\"\n          :size=\"resolvedSize\"\n          :compact=\"resolvedCompact\"\n          :min=\"min\"\n          :max=\"max\"\n          :step=\"step\"\n          :disabled=\"resolvedDisabled\"\n          :readonly=\"readonly\"\n          :invalid=\"isInvalid\"\n          :aria-label=\"fieldLabel(which)\"\n          @update:model-value=\"commitField(which, $event)\"\n        />\n        <div class=\"v-slider-rail\">\n          <span class=\"v-slider-control\">\n            <span class=\"v-slider-track\" aria-hidden=\"true\">\n              <span class=\"v-slider-fill\" />\n              <span\n                v-for=\"(tick, i) in tickPlaces\"\n                :key=\"i\"\n                class=\"v-slider-tick\"\n                :data-filled=\"isFilled(tick.value) ? '' : undefined\"\n                :style=\"tick.style\"\n              />\n            </span>\n            <input\n              v-if=\"range\"\n              type=\"range\"\n              class=\"v-slider-input v-slider-input-start\"\n              :min=\"min\"\n              :max=\"max\"\n              :step=\"step\"\n              :disabled=\"resolvedDisabled\"\n              :value=\"startValue\"\n              :aria-label=\"startLabel\"\n              :aria-valuetext=\"startValueText\"\n              :aria-invalid=\"isInvalid || undefined\"\n              :aria-readonly=\"readonly || undefined\"\n              @keydown=\"onThumbKeydown\"\n              @input=\"onThumbInput('start', $event)\"\n              @change=\"onThumbChange('start', $event)\"\n            />\n            <!--\n          The consumer's attributes come first, so what the component decides for itself; the\n          bounds, the value and the disabled state; cannot be overwritten by one of them, and so\n          that an ARIA state the consumer sets is not erased by an `undefined` of ours.\n          `aria-valuetext` is one of those: the component has one to say only when `labels` or\n          `formatOptions` was given.\n        -->\n            <input\n              ref=\"endThumbEl\"\n              :aria-invalid=\"isInvalid || undefined\"\n              :aria-readonly=\"readonly || undefined\"\n              :aria-valuetext=\"endValueText\"\n              v-bind=\"thumbAttrs(fieldProps)\"\n              type=\"range\"\n              class=\"v-slider-input v-slider-input-end\"\n              :min=\"min\"\n              :max=\"max\"\n              :step=\"step\"\n              :disabled=\"resolvedDisabled\"\n              :value=\"endValue\"\n              :aria-label=\"thumbEndLabel\"\n              @keydown=\"onThumbKeydown\"\n              @input=\"onThumbInput('end', $event)\"\n              @change=\"onThumbChange('end', $event)\"\n            />\n          </span>\n          <span\n            v-if=\"tooltip && range\"\n            class=\"v-slider-tooltip v-slider-tooltip-start\"\n            aria-hidden=\"true\"\n          >\n            <span class=\"v-slider-tooltip-bubble\">{{ labelTextAt(startValue) }}</span>\n          </span>\n          <span v-if=\"tooltip\" class=\"v-slider-tooltip v-slider-tooltip-end\" aria-hidden=\"true\">\n            <span class=\"v-slider-tooltip-bubble\">{{ labelTextAt(endValue) }}</span>\n          </span>\n        </div>\n        <div v-if=\"labels\" class=\"v-slider-labels\">\n          <span\n            v-for=\"(item, i) in labels\"\n            :key=\"i\"\n            class=\"v-slider-label\"\n            :style=\"stepPlaces[i]?.style\"\n          >\n            <template v-if=\"typeof item === 'string'\">{{ item }}</template>\n            <VIcon v-else v-bind=\"iconProps(item.icon)\" :label=\"item.label\" />\n          </span>\n        </div>\n        <VNumberInput\n          v-for=\"which in fieldsAfter\"\n          :key=\"which\"\n          :model-value=\"thumbValue(which)\"\n          :class=\"['v-slider-field', `v-slider-field-${which}`]\"\n          controls=\"none\"\n          :format-options=\"formatOptions\"\n          :locale=\"resolvedLocale\"\n          :size=\"resolvedSize\"\n          :compact=\"resolvedCompact\"\n          :min=\"min\"\n          :max=\"max\"\n          :step=\"step\"\n          :disabled=\"resolvedDisabled\"\n          :readonly=\"readonly\"\n          :invalid=\"isInvalid\"\n          :aria-label=\"fieldLabel(which)\"\n          @update:model-value=\"commitField(which, $event)\"\n        />\n      </div>\n    </template>\n  </VField>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-slider-body {\n    --slider-thumb: var(--vectis-control-size-slider-thumb);\n    --slider-track: var(--vectis-control-size-slider-track);\n    display: grid;\n    grid-template-areas: 'rail';\n    grid-template-columns: minmax(0, 1fr);\n    align-items: center;\n    column-gap: var(--vectis-space-2);\n    row-gap: var(--vectis-space-1);\n    inline-size: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * Each combination is written with exactly the conditions that define it, so a richer one\n   * always carries one condition more than the poorer ones it also matches and wins on WEIGHT,\n   * never on source order: `[data-inputs='ends'][data-range]:has(.v-slider-labels)` is (0,4,0)\n   * against the (0,3,0) of the two it builds on. `:has()` weighs its argument.\n   */\n  .v-slider-body:has(.v-slider-labels) {\n    grid-template-areas: 'rail' 'labels';\n  }\n\n  .v-slider-body[data-inputs='ends'] {\n    grid-template-areas: 'rail field-end';\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='ends']:has(.v-slider-labels) {\n    grid-template-areas: 'rail field-end' 'labels .';\n  }\n\n  .v-slider-body[data-inputs='ends'][data-range] {\n    grid-template-areas: 'field-start rail field-end';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='ends'][data-range]:has(.v-slider-labels) {\n    grid-template-areas: 'field-start rail field-end' '. labels .';\n  }\n\n  .v-slider-body[data-inputs='top'] {\n    grid-template-areas: 'field-start . field-end' 'rail rail rail';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='top']:has(.v-slider-labels) {\n    grid-template-areas: 'field-start . field-end' 'rail rail rail' 'labels labels labels';\n  }\n\n  .v-slider-body[data-inputs='bottom'] {\n    grid-template-areas: 'rail rail rail' 'field-start . field-end';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider-body[data-inputs='bottom']:has(.v-slider-labels) {\n    grid-template-areas: 'rail rail rail' 'labels labels labels' 'field-start . field-end';\n  }\n\n  .v-slider-rail {\n    grid-area: rail;\n    position: relative;\n    block-size: var(--slider-thumb);\n  }\n\n  .v-slider-control {\n    position: absolute;\n    inset: 0;\n  }\n\n  .v-slider-track {\n    position: absolute;\n    inset-inline: 0;\n    inset-block: 0;\n    margin-block: auto;\n    block-size: var(--slider-track);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border);\n    overflow: hidden;\n  }\n\n  /*\n   * It must be declared on the element that CARRIES the fraction, never on an ancestor. A\n   * custom property's `var()` is resolved where the property is declared, so set on the root it\n   * would read a `--fill-fraction` the root does not have and turn invalid, and every tick,\n   * label and bubble would drop to its static position at the start of the track, with no\n   * error.\n   */\n  .v-slider-fill,\n  .v-slider-tick,\n  .v-slider-tooltip,\n  .v-slider-label {\n    --slider-at: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\n  }\n\n  .v-slider-fill {\n    --fill-fraction: var(--slider-end-fraction);\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: var(--slider-at);\n    background: var(--vectis-color-accent);\n  }\n\n  .v-slider-body[data-range] .v-slider-fill {\n    --fill-fraction: var(--slider-start-fraction);\n    inset-inline-start: var(--slider-at);\n    inline-size: calc(\n      (100% - var(--slider-thumb)) * (var(--slider-end-fraction) - var(--slider-start-fraction))\n    );\n  }\n\n  .v-slider-tick {\n    --slider-tick: calc(var(--slider-track) / 3 * 2);\n    position: absolute;\n    inset-block: 0;\n    margin-block: auto;\n    inset-inline-start: calc(var(--slider-at) - var(--slider-tick) / 2);\n    inline-size: var(--slider-tick);\n    block-size: var(--slider-tick);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n  }\n\n  .v-slider-tick[data-filled] {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /*\n   * Without that, the one on top would swallow every click and the other thumb could never be\n   * grabbed. The thumb's paint lives in variables set here, on the control, and read once by\n   * each vendor pseudo-element below.\n   */\n  .v-slider-input {\n    --slider-thumb-bg: var(--vectis-color-text-on-accent);\n    --slider-thumb-border: var(--vectis-color-accent);\n    --slider-thumb-shadow: var(--vectis-shadow-xs);\n    --slider-thumb-outline: none;\n    --slider-thumb-cursor: pointer;\n    --slider-thumb-transition: background-color var(--vectis-duration-fast)\n      var(--vectis-ease-default);\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    appearance: none;\n    background: transparent;\n    pointer-events: none;\n  }\n\n  /*\n   * With a single thumb there is nothing underneath to protect, so the whole control takes the\n   * pointer again; which makes clicking the track jump the value there and start dragging at\n   * once, natively and with no code at all. The accepted side effect is that the thumb lights\n   * up when the pointer is anywhere over the track.\n   */\n  .v-slider-body:not([data-range]) .v-slider-input {\n    pointer-events: auto;\n    cursor: pointer;\n  }\n\n  /*\n   * The two vendor pseudo-elements stay in two separate rules. A selector list holding one a\n   * browser does not know is dropped whole, so merged, each engine would throw away the other's\n   * thumb and draw its native one.\n   */\n  .v-slider-input::-webkit-slider-thumb {\n    appearance: none;\n    pointer-events: auto;\n    width: var(--slider-thumb);\n    height: var(--slider-thumb);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--slider-thumb-bg);\n    border: var(--vectis-control-border-width) solid var(--slider-thumb-border);\n    box-shadow: var(--slider-thumb-shadow);\n    outline: var(--slider-thumb-outline);\n    outline-offset: var(--vectis-focus-ring-offset);\n    cursor: var(--slider-thumb-cursor);\n    transition: var(--slider-thumb-transition);\n  }\n\n  .v-slider-input::-moz-range-thumb {\n    pointer-events: auto;\n    width: var(--slider-thumb);\n    height: var(--slider-thumb);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--slider-thumb-bg);\n    border: var(--vectis-control-border-width) solid var(--slider-thumb-border);\n    box-shadow: var(--slider-thumb-shadow);\n    outline: var(--slider-thumb-outline);\n    outline-offset: var(--vectis-focus-ring-offset);\n    cursor: var(--slider-thumb-cursor);\n    transition: var(--slider-thumb-transition);\n  }\n\n  /* The states, all at (0,3,0) but the base, so their ORDER arbitrates them: hover, then\n     read-only, invalid and disabled, each overriding what came before on a thumb that is\n     several at once.\n\n     The hover tint is mixed from the thumb's own white rather than read from\n     `accent-surface`: that token turns dark in the dark theme, and a white thumb would\n     flash nearly black under the pointer. */\n  .v-slider-input:is(:hover, :active):not(:disabled) {\n    --slider-thumb-bg: color-mix(\n      in oklab,\n      var(--vectis-color-text-on-accent),\n      var(--vectis-color-accent) 10%\n    );\n  }\n\n  .v-slider-input:focus-visible {\n    --slider-thumb-outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline: none;\n  }\n\n  .v-slider-body[data-readonly] .v-slider-input {\n    --slider-thumb-bg: var(--vectis-color-surface);\n    --slider-thumb-border: var(--vectis-color-text-muted);\n    --slider-thumb-cursor: default;\n    cursor: default;\n  }\n\n  .v-slider-body[data-readonly] .v-slider-fill {\n    background: var(--vectis-color-text-muted);\n  }\n\n  .v-slider-body[data-readonly] .v-slider-tick[data-filled] {\n    background: var(--vectis-color-surface);\n  }\n\n  .v-slider-body[data-invalid] .v-slider-input {\n    --slider-thumb-border: var(--vectis-color-danger);\n  }\n\n  /*\n   * It looks like a VTooltip but is placed by arithmetic rather than anchored to the thumb: a\n   * native thumb is a pseudo-element, and the browser's anchoring cannot attach anything to\n   * one. The fraction it follows is the one the root already carries for the fill.\n   */\n  .v-slider-tooltip {\n    position: absolute;\n    inset-block-end: calc(100% + var(--vectis-space-2));\n    inset-inline-start: var(--slider-at);\n    inline-size: 0;\n    display: flex;\n    justify-content: center;\n    opacity: 0;\n    visibility: hidden;\n    transition:\n      opacity var(--vectis-duration-fast) var(--vectis-ease-default),\n      visibility var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-slider-tooltip-start {\n    --fill-fraction: var(--slider-start-fraction);\n  }\n\n  .v-slider-tooltip-end {\n    --fill-fraction: var(--slider-end-fraction);\n  }\n\n  .v-slider-body:has(.v-slider-input-start:active) .v-slider-tooltip-start,\n  .v-slider-body:has(.v-slider-input-start:focus-visible) .v-slider-tooltip-start,\n  .v-slider-body:has(.v-slider-input-end:active) .v-slider-tooltip-end,\n  .v-slider-body:has(.v-slider-input-end:focus-visible) .v-slider-tooltip-end {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .v-slider-tooltip-bubble {\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    background: var(--vectis-color-surface-inverse);\n    color: var(--vectis-color-text-on-inverse);\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n    border-radius: min(var(--vectis-radius-interactive), calc(0.5lh + var(--vectis-space-1)));\n    box-shadow: var(--vectis-shadow-sm);\n    white-space: nowrap;\n  }\n\n  .v-slider-labels {\n    grid-area: labels;\n    position: relative;\n    /* The labels are positioned individually and therefore contribute no height of\n       their own; this reserves enough room for either kind, a small line of text or an\n       icon. */\n    min-block-size: var(--vectis-icon-size-md);\n    /* The pair travels together, as it does in every `[data-size]` block of\n       control-size.css: the size applies to every source, the optical size only to the\n       ligature, and setting one without the other draws a 20px glyph cut for 24. */\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A box of zero width placed exactly on the step: its content then overflows equally\n     on both sides, which centres it there. Centring it with a transform would be the\n     usual trick, but a transform is physical and would have to be undone for the\n     vertical orientation and again for a right-to-left page. */\n  .v-slider-label {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: var(--slider-at);\n    inline-size: 0;\n    display: flex;\n    justify-content: center;\n    white-space: nowrap;\n  }\n\n  .v-slider-field.v-input {\n    inline-size: var(--vectis-control-size-slider-field);\n  }\n\n  /* Qualify number-field selectors so their layout cannot depend on VInput stylesheet order. */\n  .v-slider-field-start.v-input {\n    grid-area: field-start;\n  }\n\n  .v-slider-field-end.v-input {\n    grid-area: field-end;\n  }\n\n  .v-slider-body[data-orientation='vertical'] {\n    grid-template-areas: 'rail';\n    grid-template-columns: none;\n    inline-size: fit-content;\n    justify-items: center;\n  }\n\n  .v-slider-body[data-orientation='vertical']:has(.v-slider-labels) {\n    grid-template-areas: 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends'] {\n    grid-template-areas: 'field-end' 'rail';\n    grid-template-columns: none;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends']:has(.v-slider-labels) {\n    grid-template-areas: 'field-end .' 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends'][data-range] {\n    grid-template-areas: 'field-end' 'rail' 'field-start';\n    grid-template-columns: none;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='ends'][data-range]:has(\n      .v-slider-labels\n    ) {\n    grid-template-areas: 'field-end .' 'rail labels' 'field-start .';\n    grid-template-columns: auto auto;\n  }\n\n  /*\n   * Upright, `top` and `bottom` become the two SIDES, the inline start and the inline end: the\n   * fields stack in a column beside the track, the end field level with its top and the start\n   * field with its bottom, where the values they hold sit. The track spans the three rows and\n   * gives them their height, the middle one taking whatever the fields leave.\n   */\n  .v-slider-body[data-orientation='vertical'][data-inputs='top'] {\n    grid-template-areas: 'field-end rail' '. rail' 'field-start rail';\n    grid-template-columns: auto auto;\n    grid-template-rows: auto 1fr auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='top']:has(.v-slider-labels) {\n    grid-template-areas:\n      'field-end rail labels'\n      '. rail labels'\n      'field-start rail labels';\n    grid-template-columns: auto auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='bottom'] {\n    grid-template-areas: 'rail field-end' 'rail .' 'rail field-start';\n    grid-template-columns: auto auto;\n    grid-template-rows: auto 1fr auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'][data-inputs='bottom']:has(.v-slider-labels) {\n    grid-template-areas:\n      'rail labels field-end'\n      'rail labels .'\n      'rail labels field-start';\n    grid-template-columns: auto auto auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-rail {\n    inline-size: var(--slider-thumb);\n    block-size: var(--vectis-control-size-slider-length);\n  }\n\n  /*\n   * Rotate only the track box and reverse its direction; labels remain horizontal and the\n   * minimum value stays at the bottom.\n   */\n  .v-slider-body[data-orientation='vertical'] .v-slider-control {\n    writing-mode: vertical-lr;\n    direction: rtl;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-tooltip {\n    inset-block-end: var(--slider-at);\n    inset-inline-start: auto;\n    inset-inline-end: calc(100% + var(--vectis-space-2));\n    inline-size: auto;\n    block-size: 0;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-labels {\n    align-self: stretch;\n    min-block-size: auto;\n  }\n\n  .v-slider-body[data-orientation='vertical'] .v-slider-label {\n    inset-block-start: auto;\n    inset-block-end: var(--slider-at);\n    inset-inline-start: 0;\n    inline-size: auto;\n    block-size: 0;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  /*\n   * A disabled slider greys out through the colour tokens, the same ones VCheckbox and VSwitch\n   * use, and never through opacity. It comes last among the states, so a slider both disabled\n   * and read-only or invalid is drawn disabled.\n   */\n  .v-slider-body[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  .v-slider-body[data-disabled] .v-slider-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-fill {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-tick {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * A tick sitting on the greyed fill takes the light colour back, so that it stays visible\n   * against it; the same inversion VCheckbox applies to its disabled tick.\n   */\n  .v-slider-body[data-disabled] .v-slider-tick[data-filled] {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-labels {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider-body[data-disabled] .v-slider-input {\n    --slider-thumb-bg: var(--vectis-color-surface-muted);\n    --slider-thumb-border: var(--vectis-color-text-subtle);\n    --slider-thumb-shadow: none;\n    --slider-thumb-cursor: not-allowed;\n    cursor: not-allowed;\n  }\n\n  /*\n   * Forced colours erase background-only tracks and ticks. Restore the track edge and use\n   * system Highlight/HighlightText for selected portions.\n   */\n  @media (forced-colors: active) {\n    .v-slider-body .v-slider-track {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-slider-body .v-slider-fill {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .v-slider-body .v-slider-tick {\n      forced-color-adjust: none;\n      background: CanvasText;\n    }\n\n    .v-slider-body .v-slider-tick[data-filled] {\n      background: HighlightText;\n    }\n\n    .v-slider-body .v-slider-input {\n      forced-color-adjust: none;\n      --slider-thumb-bg: Canvas;\n      --slider-thumb-border: CanvasText;\n      --slider-thumb-shadow: none;\n    }\n\n    .v-slider-body[data-disabled] .v-slider-track {\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) GrayText;\n    }\n\n    .v-slider-body[data-disabled] .v-slider-fill,\n    .v-slider-body[data-disabled] .v-slider-tick {\n      background: GrayText;\n    }\n\n    .v-slider-body[data-disabled] .v-slider-input {\n      --slider-thumb-border: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-slider-input {\n      --slider-thumb-transition: none;\n    }\n\n    .v-slider-tooltip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSlider/VSlider.vue_vue_type_script_setup_true_lang.js

@@ -107,7 +107,7 @@ var de = [
 	}),
 	emits: /*@__PURE__*/ m(["input", "change"], ["update:modelValue"]),
 	setup(p, { expose: m, emit: S }) {
-		let C = p, w = ce(p, "modelValue"), T = S, { size: E, compact: D, disabled: O } = ee({
+		let C = p, w = ce(p, "modelValue"), T = S, Ce = oe(ie, null), { size: E, compact: D, disabled: O } = ee({
 			get size() {
 				return C.size;
 			},
@@ -115,7 +115,7 @@ var de = [
 			get disabled() {
 				return C.disabled;
 			}
-		}, oe(ie, null)), k = c(() => Array.isArray(w.value) ? w.value[0] : C.min), A = c(() => Array.isArray(w.value) ? w.value[1] : w.value), j = (e) => e === "start" ? k.value : A.value, M = (e) => a((e - C.min) / (C.max - C.min || 1), 0, 1);
+		}, Ce), k = c(() => Array.isArray(w.value) ? w.value[0] : C.min), A = c(() => Array.isArray(w.value) ? w.value[1] : w.value), j = (e) => e === "start" ? k.value : A.value, M = (e) => a((e - C.min) / (C.max - C.min || 1), 0, 1);
 		function N(e, t) {
 			let n = C.range ? e === "start" ? [t, Math.max(t, A.value)] : [Math.min(t, k.value), t] : t;
 			return w.value = n, n;
@@ -130,7 +130,7 @@ var de = [
 			let r = N(e, Number(n.value));
 			n.value = String(P(r, e)), T("input", r);
 		}
-		let Ce = /* @__PURE__ */ new Set([
+		let we = /* @__PURE__ */ new Set([
 			"ArrowUp",
 			"ArrowDown",
 			"ArrowLeft",
@@ -141,14 +141,14 @@ var de = [
 			"PageDown"
 		]);
 		function I(e) {
-			C.readonly && Ce.has(e.key) && e.preventDefault();
+			C.readonly && we.has(e.key) && e.preventDefault();
 		}
 		function L(e, t) {
 			if (C.readonly) return;
 			let n = Number(t.target.value);
 			C.range ? e === "start" ? T("change", [n, Math.max(n, A.value)]) : T("change", [Math.min(n, k.value), n]) : T("change", n);
 		}
-		let R = c(() => C.step > 0 ? Math.floor((C.max - C.min) / C.step + 1e-9) : 0), we = c(() => C.step > 0 ? C.min + R.value * C.step : C.max), z = c(() => (C.ticks || C.labels !== void 0) && R.value >= 1 && R.value <= 50), B = c(() => {
+		let R = c(() => C.step > 0 ? Math.floor((C.max - C.min) / C.step + 1e-9) : 0), Te = c(() => C.step > 0 ? C.min + R.value * C.step : C.max), z = c(() => (C.ticks || C.labels !== void 0) && R.value >= 1 && R.value <= 50), B = c(() => {
 			let e = Math.max(z.value ? R.value + 1 : 0, C.labels?.length ?? 0);
 			return Array.from({ length: e }, (e, t) => {
 				let n = C.min + t * C.step;
@@ -157,13 +157,13 @@ var de = [
 					style: { "--fill-fraction": String(M(n)) }
 				};
 			});
-		}), Te = c(() => z.value ? B.value.slice(0, R.value + 1) : []), Ee = (e) => C.range ? e >= k.value && e <= A.value : e <= A.value, V = n(() => C.locale), De = c(() => new Intl.NumberFormat(V.value, C.formatOptions)), Oe = (e) => De.value.format(e);
+		}), Ee = c(() => z.value ? B.value.slice(0, R.value + 1) : []), De = (e) => C.range ? e >= k.value && e <= A.value : e <= A.value, V = n(() => C.locale), Oe = c(() => new Intl.NumberFormat(V.value, C.formatOptions)), ke = (e) => Oe.value.format(e);
 		function H(e) {
 			let t = C.labels?.[Math.round((e - C.min) / C.step)];
-			return t === void 0 ? Oe(e) : typeof t == "string" ? t : t.label;
+			return t === void 0 ? ke(e) : typeof t == "string" ? t : t.label;
 		}
-		let U = t(), W = te(() => C.label), G = c(() => W.value ? U.value.slider.rangeStart(W.value) : U.value.slider.start), K = c(() => W.value ? U.value.slider.rangeEnd(W.value) : U.value.slider.end), ke = c(() => C.range ? K.value : W.value), Ae = c(() => C.range ? K.value : W.value ?? U.value.slider.value), q = (e) => C.labels || C.formatOptions ? H(e) : void 0, je = c(() => C.range ? q(k.value) : void 0), Me = c(() => q(A.value)), { attrs: J, rootClass: Ne, rootStyle: Pe, forwardedAttrs: Fe } = ne();
-		function Ie(e) {
+		let U = t(), W = te(() => C.label), G = c(() => W.value ? U.value.slider.rangeStart(W.value) : U.value.slider.start), K = c(() => W.value ? U.value.slider.rangeEnd(W.value) : U.value.slider.end), Ae = c(() => C.range ? K.value : W.value), je = c(() => C.range ? K.value : W.value ?? U.value.slider.value), q = (e) => C.labels || C.formatOptions ? H(e) : void 0, Me = c(() => C.range ? q(k.value) : void 0), Ne = c(() => q(A.value)), { attrs: J, rootClass: Pe, rootStyle: Fe, forwardedAttrs: Ie } = ne();
+		function Le(e) {
 			return {
 				...e,
 				"aria-labelledby": J["aria-labelledby"],
@@ -179,19 +179,19 @@ var de = [
 				C.step <= 0 && t("step", `step="${C.step}" cannot move a thumb: the arrow keys do nothing and a value typed into a field is committed as it stands. Give a positive step.`), (C.ticks || C.labels) && R.value > 50 && t("ticks", `${R.value} steps: no tick is drawn past 50, the comb being unreadable.`), C.labels && C.labels.length !== R.value + 1 && t("labels", `${C.labels.length} labels for ${R.value + 1} steps: one label per step expected.`), C.inputs !== !1 && C.inputs !== X.value && t("inputs", `inputs="${String(C.inputs)}" is not a placement: the fields are drawn at the ends. Write inputs="ends", "top" or "bottom".`), C.range && J.name !== void 0 && t("name", `name="${String(J.name)}" on a range: only the end thumb carries it, so the form receives one value of the two. Bind the model to two inputs of your own instead.`);
 			});
 		}
-		let Le = c(() => X.value === "ends" ? C.range ? ["start"] : [] : X.value === "top" ? C.range ? ["start", "end"] : ["end"] : []), Re = c(() => X.value === "ends" ? ["end"] : X.value === "bottom" ? C.range ? ["start", "end"] : ["end"] : []), Z = (e) => e === "start" ? G.value : Ae.value;
+		let Re = c(() => X.value === "ends" ? C.range ? ["start"] : [] : X.value === "top" ? C.range ? ["start", "end"] : ["end"] : []), ze = c(() => X.value === "ends" ? ["end"] : X.value === "bottom" ? C.range ? ["start", "end"] : ["end"] : []), Z = (e) => e === "start" ? G.value : je.value;
 		function Q(e, t) {
 			if (t === null) return;
-			let n = C.step > 0 ? C.min + Math.round((t - C.min) / C.step) * C.step : t, r = Math.min(we.value, Math.round(n * 1e10) / 1e10), i = j(e), a = N(e, r);
+			let n = C.step > 0 ? C.min + Math.round((t - C.min) / C.step) * C.step : t, r = Math.min(Te.value, Math.round(n * 1e10) / 1e10), i = j(e), a = N(e, r);
 			P(a, e) !== i && T("change", a);
 		}
 		let $ = se(null);
 		return m({
 			focus: (e) => $.value?.focus(e),
 			el: $
-		}), (e, t) => (v(), l(re, h(x(Fe), {
-			class: ["v-slider", x(Ne)],
-			style: x(Pe),
+		}), (e, t) => (v(), l(re, h(x(Ie), {
+			class: ["v-slider", x(Pe)],
+			style: x(Fe),
 			label: p.label,
 			hint: p.hint,
 			error: p.error,
@@ -214,7 +214,7 @@ var de = [
 					"--slider-end-fraction": String(M(A.value))
 				})
 			}, [
-				(v(!0), d(s, null, y(Le.value, (e) => (v(), l(o, {
+				(v(!0), d(s, null, y(Re.value, (e) => (v(), l(o, {
 					key: e,
 					"model-value": j(e),
 					class: g(["v-slider-field", `v-slider-field-${e}`]),
@@ -249,10 +249,10 @@ var de = [
 				]))), 128)),
 				f("div", fe, [
 					f("span", pe, [
-						f("span", me, [t[4] ||= f("span", { class: "v-slider-fill" }, null, -1), (v(!0), d(s, null, y(Te.value, (e, t) => (v(), d("span", {
+						f("span", me, [t[4] ||= f("span", { class: "v-slider-fill" }, null, -1), (v(!0), d(s, null, y(Ee.value, (e, t) => (v(), d("span", {
 							key: t,
 							class: "v-slider-tick",
-							"data-filled": Ee(e.value) ? "" : void 0,
+							"data-filled": De(e.value) ? "" : void 0,
 							style: _(e.style)
 						}, null, 12, he))), 128))]),
 						p.range ? (v(), d("input", {
@@ -265,7 +265,7 @@ var de = [
 							disabled: x(O),
 							value: k.value,
 							"aria-label": G.value,
-							"aria-valuetext": je.value,
+							"aria-valuetext": Me.value,
 							"aria-invalid": Y.value || void 0,
 							"aria-readonly": p.readonly || void 0,
 							onKeydown: I,
@@ -277,8 +277,8 @@ var de = [
 							ref: $,
 							"aria-invalid": Y.value || void 0,
 							"aria-readonly": p.readonly || void 0,
-							"aria-valuetext": Me.value
-						}, Ie(e), {
+							"aria-valuetext": Ne.value
+						}, Le(e), {
 							type: "range",
 							class: "v-slider-input v-slider-input-end",
 							min: p.min,
@@ -286,7 +286,7 @@ var de = [
 							step: p.step,
 							disabled: x(O),
 							value: A.value,
-							"aria-label": ke.value,
+							"aria-label": Ae.value,
 							onKeydown: I,
 							onInput: t[2] ||= (e) => F("end", e),
 							onChange: t[3] ||= (e) => L("end", e)
@@ -303,7 +303,7 @@ var de = [
 					key: 1,
 					ref_for: !0
 				}, x(r)(e.icon), { label: e.label }), null, 16, ["label"]))], 4))), 128))])) : u("", !0),
-				(v(!0), d(s, null, y(Re.value, (e) => (v(), l(o, {
+				(v(!0), d(s, null, y(ze.value, (e) => (v(), l(o, {
 					key: e,
 					"model-value": j(e),
 					class: g(["v-slider-field", `v-slider-field-${e}`]),