vectis-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSkeletonLoader.js","names":[],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The grey silhouette standing in for content that has not arrived yet: a line of\n * text, a button, an avatar. It is drawn entirely in CSS.\n *\n * The element rendered is a CONTAINER holding its silhouettes, and not itself the\n * painted shape — the opposite of VProgressLinear. That is what makes several lines\n * possible at no cost, and what keeps every rule below uniform: there is no\n * \"painted root\" case beside a \"painted child\" one. It carries the shared size class,\n * so a skeleton of a given size is exactly as tall as a button of that size.\n *\n * The component MEASURES nothing. It does not look at what it replaces to work out a\n * shape; the shape is declared. The three derived values are all the JavaScript there\n * is — no event, no lifecycle, no DOM.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\nexport type SkeletonShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\nexport type SkeletonAnimation = 'wave' | 'pulse' | 'none'\nexport type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /**\n   * What the silhouette stands for. Each value sets both a corner radius and a way of\n   * being sized:\n   *\n   * - `text` follows the typography around it, so several silhouettes occupy exactly\n   *   as many lines as the text they replace;\n   * - `control` takes the height of a control of the given size — a button, a field;\n   * - `pill` is that same height with fully rounded ends — a chip, a badge;\n   * - `circle` is that height in both dimensions — an avatar, a round icon button;\n   * - `surface` is a card or an image, with a height of its own.\n   */\n  shape?: SkeletonShape\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?: SkeletonSize\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 — `'100%'`, `'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\n   * than the others, and that single detail is what reads as a paragraph rather than\n   * 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?: SkeletonAnimation\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\n   * is decorative: a page holds a dozen of them, and a dozen competing announcements\n   * are unreadable. What should announce the wait is the container around them,\n   * marked as busy.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated —\n   * \"Loading the results\" — since a generic word is the reason the default is silence.\n   * It falls back to the design system dictionary.\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\n// NOTHING at all — an invisible skeleton nobody notices is missing — and a fractional\n// count would produce a surprising number of them.\nconst count = computed(() => Math.max(1, Math.trunc(props.lines)))\n\n// @a11y — silent by default, since a dozen silhouettes must not produce a dozen\n// announcements. Supplying a label counts as asking to be announced, otherwise that\n// prop would sit there doing nothing.\nconst announced = computed(() => props.announce || props.label !== undefined)\n\nconst m = useMessages()\n// TRAP — the dictionary must never be read directly in the body of `setup`: the value\n// would be 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 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-w': cssSize(width),\n      '--skeleton-h': cssSize(height),\n    }\"\n  >\n    <!--\n      TRAP — the label is rendered BEFORE the silhouettes, and that order is\n      structural. The rule shortening the last line of a paragraph asks for the last\n      CHILD, so a label rendered after them would quietly take that place and no line\n      would be shortened. A unit test locks the order.\n\n      It costs no layout: the class hiding it takes it out of the flow entirely, so it\n      is never one of the stacked items. And it is rendered only when something is\n      actually announced — inside a subtree hidden from screen readers it would be text\n      nobody can reach.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The whole geometry comes down to four variables. The shape table below sets them,\n   * and the dimension props overwrite them inline — which always wins over a rule\n   * targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton {\n    /* The grey has a token of its own. No existing colour role holds the right value in\n       BOTH themes: the muted surface is too pale in the light one for the pulse to be\n       visible at all, and the border colour has the right tone but the wrong meaning. */\n    --skeleton-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The lighter shade the animation sweeps across is DERIVED from the grey rather\n     * than named: it is that same colour, a little lighter.\n     *\n     * Expressing it as a lightness STEP is what makes one declaration correct in both\n     * themes. Mixing towards a target colour would not: in the light theme the\n     * silhouette is darker than the page, in the dark theme it is LIGHTER than it, so\n     * any fixed target would lighten in one and darken in the other. A step in\n     * lightness always goes the same way — and in the light theme it naturally stops at\n     * white, exactly the page's colour.\n     *\n     * It also follows a custom colour with nothing else to set. The step itself is a\n     * bare ratio, the same tolerance as the opacities.\n     */\n    --skeleton-highlight: oklch(from var(--skeleton-base) calc(l + 0.06) c h);\n    --skeleton-h: var(--control-height);\n    --skeleton-radius: var(--vectis-radius-interactive);\n    --skeleton-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above — unlike VProgressLinear's tones, which all sit at the\n     same level and depend on their sequence. */\n  .v-skeleton[data-custom] {\n    --skeleton-base: var(--custom-color);\n  }\n\n  .v-skeleton-item {\n    /* The animation's overlay is positioned against this box. */\n    position: relative;\n    /* The height from the shape table is a DEFAULT: inside a parent that has a height\n       of its own, the silhouette grows to fill it — a card fills its slot. */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-w, 100%);\n    block-size: var(--skeleton-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-radius);\n    background: var(--skeleton-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS,\n   * and it is centred in the line box the same way a line of text would be.\n   *\n   * The gap between lines and the padding around them are derived from that same line\n   * height, so that N silhouettes occupy exactly N lines of text: replacing them with\n   * the real content shifts nothing on the page. The floor guards against a parent\n   * whose lines are set tighter than its font size, where the gap would otherwise go\n   * negative.\n   */\n  .v-skeleton[data-shape='text'] {\n    --skeleton-h: 1em;\n    --skeleton-radius: var(--vectis-radius-pill);\n    --skeleton-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(max(0px, calc(1lh - 1em)) / 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[data-shape='text'] .v-skeleton-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a\n   * paragraph. Asking for a line PRECEDED by another is what guarantees it only\n   * applies from two lines up — a single line is not a paragraph — and the proportion\n   * is taken from the EFFECTIVE width, so it still works under a `width` prop.\n   */\n  .v-skeleton[data-shape='text'] .v-skeleton-item + .v-skeleton-item:last-child {\n    --skeleton-last-line: 0.6;\n    inline-size: calc(var(--skeleton-w, 100%) * var(--skeleton-last-line));\n  }\n\n  .v-skeleton[data-shape='pill'] {\n    --skeleton-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size\n   * alone changes the diameter and nothing has to be kept in step.\n   *\n   * The container sits inline, like the avatar it replaces, rather than spanning the\n   * whole width, and aligning to the start stops the silhouette from being stretched\n   * sideways — which is what keeps the circle round.\n   */\n  .v-skeleton[data-shape='circle'] {\n    --skeleton-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton[data-shape='circle'] .v-skeleton-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-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\n   * measuring the page, which this component deliberately never does. It takes a\n   * default from a token, which the `height` prop overrides, as does any consumer style\n   * (theirs sits outside our layers and therefore wins).\n   */\n  .v-skeleton[data-shape='surface'] {\n    --skeleton-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-radius: var(--vectis-radius-surface);\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette.\n   *\n   * Fading the silhouette itself would be shorter to write, and wrong: it would fade\n   * towards the PAGE, which means lightening in the light theme and DARKENING in the\n   * dark one — the opposite of what the wave does. Going through an overlay in the\n   * derived colour gives the same direction in both, and it is still only an opacity\n   * being animated, so it costs no layout.\n   */\n  .v-skeleton[data-animation='pulse'] .v-skeleton-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--skeleton-highlight);\n    animation: v-skeleton-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out) infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette.\n   *\n   * The gradient is SYMMETRIC — transparent, light, transparent — so the physical angle\n   * it is drawn at makes no observable difference, and there is nothing to mirror in a\n   * right-to-left page. All that matters is the DIRECTION of the run, and reversing the\n   * animation is enough for that. It is exact here because the run is linear, hence\n   * identical read backwards; the same argument VProgressLinear uses for its\n   * indeterminate bar.\n   *\n   * The band is moved by a transform, where VProgressLinear runs a logical property.\n   * The trade-off is genuinely reversed between the two: that component has a vertical\n   * orientation to serve and only ever draws one bar, whereas a page may hold a dozen\n   * skeletons, and here a movement the compositor can handle without laying anything\n   * out is no longer negotiable.\n   */\n  .v-skeleton[data-animation='wave'] .v-skeleton-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-image: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);\n    animation: v-skeleton-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[data-animation='wave']:dir(rtl) .v-skeleton-item::after {\n    animation-direction: reverse;\n  }\n\n  /* These keyframes serve this component alone, so they stay in its own stylesheet.\n     Only the spin shared by VSpinner and VProgressCircular is declared globally, in\n     styles/utilities.css. */\n  @keyframes v-skeleton-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-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     * The design system's rule for readers who ask for less motion is to slow down\n     * rather than to stop: a motionless placeholder no longer says that anything is in\n     * progress. But the wave is a TRANSLATION, which is exactly what those readers are\n     * flagging, so it FALLS BACK to the pulse — which keeps the signal without moving\n     * anything. Both are then slowed considerably.\n     *\n     * Since the two animations share the same overlay, all that is left to do is\n     * replace the moving gradient with the flat colour.\n     *\n     * TRAP — this rule has exactly the same specificity as the two it overrides, so it\n     * is its position at the END of the stylesheet that makes it win.\n     */\n    .v-skeleton:is([data-animation='wave'], [data-animation='pulse']) .v-skeleton-item::after {\n      background-image: none;\n      background-color: var(--skeleton-highlight);\n      animation: v-skeleton-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out) infinite;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,61 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { cssSize as t } from "../../utils/css.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, normalizeStyle as s, openBlock as c, renderList as l, toDisplayString as u, unref as d } from "vue";
+//#region src/components/VSkeletonLoader/VSkeletonLoader.vue?vue&type=script&setup=true&lang.ts
+var f = [
+	"data-shape",
+	"data-size",
+	"data-compact",
+	"data-animation",
+	"data-custom",
+	"role",
+	"aria-hidden"
+], p = {
+	key: 0,
+	class: "v-visually-hidden"
+}, m = /*@__PURE__*/ o({
+	__name: "VSkeletonLoader",
+	props: {
+		shape: { default: "text" },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: void 0 },
+		height: { default: void 0 },
+		lines: { default: 1 },
+		animation: { default: "wave" },
+		color: { default: void 0 },
+		announce: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 }
+	},
+	setup(o) {
+		let m = o, h = r(() => Math.max(1, Math.trunc(m.lines))), g = r(() => m.announce || m.label !== void 0), _ = e(), v = r(() => m.label ?? _.value.common.loading);
+		return (e, r) => (c(), a("span", {
+			class: "v-skeleton v-control",
+			"data-shape": o.shape,
+			"data-size": o.size,
+			"data-compact": o.compact ? "" : void 0,
+			"data-animation": o.animation,
+			"data-custom": o.color === void 0 ? void 0 : "",
+			role: g.value ? "status" : void 0,
+			"aria-hidden": g.value ? void 0 : "true",
+			style: s({
+				"--custom-color": o.color,
+				"--skeleton-w": d(t)(o.width),
+				"--skeleton-h": d(t)(o.height)
+			})
+		}, [g.value ? (c(), a("span", p, u(v.value), 1)) : i("", !0), (c(!0), a(n, null, l(h.value, (e) => (c(), a("span", {
+			key: e,
+			class: "v-skeleton-item"
+		}))), 128))], 12, f));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=VSkeletonLoader.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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 * The grey silhouette standing in for content that has not arrived yet: a line of\n * text, a button, an avatar. It is drawn entirely in CSS.\n *\n * The element rendered is a CONTAINER holding its silhouettes, and not itself the\n * painted shape — the opposite of VProgressLinear. That is what makes several lines\n * possible at no cost, and what keeps every rule below uniform: there is no\n * \"painted root\" case beside a \"painted child\" one. It carries the shared size class,\n * so a skeleton of a given size is exactly as tall as a button of that size.\n *\n * The component MEASURES nothing. It does not look at what it replaces to work out a\n * shape; the shape is declared. The three derived values are all the JavaScript there\n * is — no event, no lifecycle, no DOM.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\nexport type SkeletonShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\nexport type SkeletonAnimation = 'wave' | 'pulse' | 'none'\nexport type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /**\n   * What the silhouette stands for. Each value sets both a corner radius and a way of\n   * being sized:\n   *\n   * - `text` follows the typography around it, so several silhouettes occupy exactly\n   *   as many lines as the text they replace;\n   * - `control` takes the height of a control of the given size — a button, a field;\n   * - `pill` is that same height with fully rounded ends — a chip, a badge;\n   * - `circle` is that height in both dimensions — an avatar, a round icon button;\n   * - `surface` is a card or an image, with a height of its own.\n   */\n  shape?: SkeletonShape\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?: SkeletonSize\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 — `'100%'`, `'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\n   * than the others, and that single detail is what reads as a paragraph rather than\n   * 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?: SkeletonAnimation\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\n   * is decorative: a page holds a dozen of them, and a dozen competing announcements\n   * are unreadable. What should announce the wait is the container around them,\n   * marked as busy.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated —\n   * \"Loading the results\" — since a generic word is the reason the default is silence.\n   * It falls back to the design system dictionary.\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\n// NOTHING at all — an invisible skeleton nobody notices is missing — and a fractional\n// count would produce a surprising number of them.\nconst count = computed(() => Math.max(1, Math.trunc(props.lines)))\n\n// @a11y — silent by default, since a dozen silhouettes must not produce a dozen\n// announcements. Supplying a label counts as asking to be announced, otherwise that\n// prop would sit there doing nothing.\nconst announced = computed(() => props.announce || props.label !== undefined)\n\nconst m = useMessages()\n// TRAP — the dictionary must never be read directly in the body of `setup`: the value\n// would be 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 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-w': cssSize(width),\n      '--skeleton-h': cssSize(height),\n    }\"\n  >\n    <!--\n      TRAP — the label is rendered BEFORE the silhouettes, and that order is\n      structural. The rule shortening the last line of a paragraph asks for the last\n      CHILD, so a label rendered after them would quietly take that place and no line\n      would be shortened. A unit test locks the order.\n\n      It costs no layout: the class hiding it takes it out of the flow entirely, so it\n      is never one of the stacked items. And it is rendered only when something is\n      actually announced — inside a subtree hidden from screen readers it would be text\n      nobody can reach.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The whole geometry comes down to four variables. The shape table below sets them,\n   * and the dimension props overwrite them inline — which always wins over a rule\n   * targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton {\n    /* The grey has a token of its own. No existing colour role holds the right value in\n       BOTH themes: the muted surface is too pale in the light one for the pulse to be\n       visible at all, and the border colour has the right tone but the wrong meaning. */\n    --skeleton-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The lighter shade the animation sweeps across is DERIVED from the grey rather\n     * than named: it is that same colour, a little lighter.\n     *\n     * Expressing it as a lightness STEP is what makes one declaration correct in both\n     * themes. Mixing towards a target colour would not: in the light theme the\n     * silhouette is darker than the page, in the dark theme it is LIGHTER than it, so\n     * any fixed target would lighten in one and darken in the other. A step in\n     * lightness always goes the same way — and in the light theme it naturally stops at\n     * white, exactly the page's colour.\n     *\n     * It also follows a custom colour with nothing else to set. The step itself is a\n     * bare ratio, the same tolerance as the opacities.\n     */\n    --skeleton-highlight: oklch(from var(--skeleton-base) calc(l + 0.06) c h);\n    --skeleton-h: var(--control-height);\n    --skeleton-radius: var(--vectis-radius-interactive);\n    --skeleton-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above — unlike VProgressLinear's tones, which all sit at the\n     same level and depend on their sequence. */\n  .v-skeleton[data-custom] {\n    --skeleton-base: var(--custom-color);\n  }\n\n  .v-skeleton-item {\n    /* The animation's overlay is positioned against this box. */\n    position: relative;\n    /* The height from the shape table is a DEFAULT: inside a parent that has a height\n       of its own, the silhouette grows to fill it — a card fills its slot. */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-w, 100%);\n    block-size: var(--skeleton-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-radius);\n    background: var(--skeleton-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS,\n   * and it is centred in the line box the same way a line of text would be.\n   *\n   * The gap between lines and the padding around them are derived from that same line\n   * height, so that N silhouettes occupy exactly N lines of text: replacing them with\n   * the real content shifts nothing on the page. The floor guards against a parent\n   * whose lines are set tighter than its font size, where the gap would otherwise go\n   * negative.\n   */\n  .v-skeleton[data-shape='text'] {\n    --skeleton-h: 1em;\n    --skeleton-radius: var(--vectis-radius-pill);\n    --skeleton-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(max(0px, calc(1lh - 1em)) / 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[data-shape='text'] .v-skeleton-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a\n   * paragraph. Asking for a line PRECEDED by another is what guarantees it only\n   * applies from two lines up — a single line is not a paragraph — and the proportion\n   * is taken from the EFFECTIVE width, so it still works under a `width` prop.\n   */\n  .v-skeleton[data-shape='text'] .v-skeleton-item + .v-skeleton-item:last-child {\n    --skeleton-last-line: 0.6;\n    inline-size: calc(var(--skeleton-w, 100%) * var(--skeleton-last-line));\n  }\n\n  .v-skeleton[data-shape='pill'] {\n    --skeleton-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size\n   * alone changes the diameter and nothing has to be kept in step.\n   *\n   * The container sits inline, like the avatar it replaces, rather than spanning the\n   * whole width, and aligning to the start stops the silhouette from being stretched\n   * sideways — which is what keeps the circle round.\n   */\n  .v-skeleton[data-shape='circle'] {\n    --skeleton-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton[data-shape='circle'] .v-skeleton-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-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\n   * measuring the page, which this component deliberately never does. It takes a\n   * default from a token, which the `height` prop overrides, as does any consumer style\n   * (theirs sits outside our layers and therefore wins).\n   */\n  .v-skeleton[data-shape='surface'] {\n    --skeleton-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-radius: var(--vectis-radius-surface);\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette.\n   *\n   * Fading the silhouette itself would be shorter to write, and wrong: it would fade\n   * towards the PAGE, which means lightening in the light theme and DARKENING in the\n   * dark one — the opposite of what the wave does. Going through an overlay in the\n   * derived colour gives the same direction in both, and it is still only an opacity\n   * being animated, so it costs no layout.\n   */\n  .v-skeleton[data-animation='pulse'] .v-skeleton-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--skeleton-highlight);\n    animation: v-skeleton-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out) infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette.\n   *\n   * The gradient is SYMMETRIC — transparent, light, transparent — so the physical angle\n   * it is drawn at makes no observable difference, and there is nothing to mirror in a\n   * right-to-left page. All that matters is the DIRECTION of the run, and reversing the\n   * animation is enough for that. It is exact here because the run is linear, hence\n   * identical read backwards; the same argument VProgressLinear uses for its\n   * indeterminate bar.\n   *\n   * The band is moved by a transform, where VProgressLinear runs a logical property.\n   * The trade-off is genuinely reversed between the two: that component has a vertical\n   * orientation to serve and only ever draws one bar, whereas a page may hold a dozen\n   * skeletons, and here a movement the compositor can handle without laying anything\n   * out is no longer negotiable.\n   */\n  .v-skeleton[data-animation='wave'] .v-skeleton-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-image: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);\n    animation: v-skeleton-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[data-animation='wave']:dir(rtl) .v-skeleton-item::after {\n    animation-direction: reverse;\n  }\n\n  /* These keyframes serve this component alone, so they stay in its own stylesheet.\n     Only the spin shared by VSpinner and VProgressCircular is declared globally, in\n     styles/utilities.css. */\n  @keyframes v-skeleton-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-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     * The design system's rule for readers who ask for less motion is to slow down\n     * rather than to stop: a motionless placeholder no longer says that anything is in\n     * progress. But the wave is a TRANSLATION, which is exactly what those readers are\n     * flagging, so it FALLS BACK to the pulse — which keeps the signal without moving\n     * anything. Both are then slowed considerably.\n     *\n     * Since the two animations share the same overlay, all that is left to do is\n     * replace the moving gradient with the flat colour.\n     *\n     * TRAP — this rule has exactly the same specificity as the two it overrides, so it\n     * is its position at the END of the stylesheet that makes it win.\n     */\n    .v-skeleton:is([data-animation='wave'], [data-animation='pulse']) .v-skeleton-item::after {\n      background-image: none;\n      background-color: var(--skeleton-highlight);\n      animation: v-skeleton-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out) infinite;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFA,IAAM,IAAQ,GAgBR,IAAQ,QAAe,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,KAAK,CAAC,CAAC,GAK3D,IAAY,QAAe,EAAM,YAAY,EAAM,UAAU,KAAA,CAAS,GAEtE,IAAI,EAAY,GAGhB,IAAgB,QAAe,EAAM,SAAS,EAAE,MAAM,OAAO,OAAO;yBAIxE,EA4BO,QAAA;GA3BL,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;oBAA6B,EAAA,CAAA,CAAO,CAAC,EAAA,KAAK;oBAAyB,EAAA,CAAA,CAAO,CAAC,EAAA,MAAM;;MAiBvG,EAAA,SAAA,EAAA,GAAZ,EAA2E,QAA3E,GAA2E,EAAvB,EAAA,KAAa,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,GACjE,EAA4D,GAAA,MAAA,EAA1C,EAAA,QAAL,YAAb,EAA4D,QAAA;GAAlC,KAAK;GAAG,OAAM"}

package/dist/components/VSlider/VSlider.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-slider{--slider-thumb:var(--vectis-control-size-slider-thumb);--slider-track:var(--vectis-control-size-slider-track);align-items:center;column-gap:var(--vectis-space-2);row-gap:var(--vectis-space-1);width:100%;font-family:var(--vectis-text-family);grid-template-columns:minmax(0,1fr);grid-template-areas:"rail";display:grid}.v-slider:has(.v-slider-labels){grid-template-areas:"rail""labels"}.v-slider:has(.v-slider-field-end){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rail field-end"}.v-slider:has(.v-slider-field-end):has(.v-slider-labels){grid-template-areas:"rail field-end""labels."}.v-slider:has(.v-slider-field-start){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"field-start rail field-end"}.v-slider:has(.v-slider-field-start):has(.v-slider-labels){grid-template-areas:"field-start rail field-end"".labels."}.v-slider-rail{block-size:var(--slider-thumb);grid-area:rail;position:relative}.v-slider-control{position:absolute;inset:0}.v-slider-track{block-size:var(--slider-track);border-radius:var(--vectis-radius-full);background:var(--vectis-color-border);margin-block:auto;position:absolute;inset-block:0;inset-inline:0;overflow:hidden}.v-slider-fill{inline-size:calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--end-fraction));background:var(--vectis-color-accent);position:absolute;inset-block:0;inset-inline-start:0}.v-slider[data-range] .v-slider-fill{inline-size:calc((100% - var(--slider-thumb)) * (var(--end-fraction) - var(--start-fraction)));inset-inline-start:calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--start-fraction))}.v-slider-tick{--slider-tick:calc(var(--slider-track) / 3 * 2);inline-size:var(--slider-tick);block-size:var(--slider-tick);border-radius:var(--vectis-radius-full);background:var(--vectis-color-border-strong);margin-block:auto;position:absolute;inset-block:0;inset-inline-start:calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction) - var(--slider-tick) / 2)}.v-slider-tick[data-filled]{background:var(--vectis-color-text-on-accent)}.v-slider-input{appearance:none;pointer-events:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.v-slider:not([data-range]) .v-slider-input{pointer-events:auto;cursor:pointer}.v-slider-input::-webkit-slider-thumb{appearance:none;pointer-events:auto;width:var(--slider-thumb);height:var(--slider-thumb);border-radius:var(--vectis-radius-full);background:var(--vectis-color-surface);border:var(--vectis-control-border-width) solid var(--vectis-color-accent);box-shadow:var(--vectis-shadow-xs);cursor:pointer;transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default)}.v-slider-input::-moz-range-thumb{pointer-events:auto;width:var(--slider-thumb);height:var(--slider-thumb);border-radius:var(--vectis-radius-full);background:var(--vectis-color-surface);border:var(--vectis-control-border-width) solid var(--vectis-color-accent);box-shadow:var(--vectis-shadow-xs);cursor:pointer;transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default)}.v-slider-input:hover:not(:disabled)::-webkit-slider-thumb{background:var(--vectis-color-accent-surface)}.v-slider-input:active:not(:disabled)::-webkit-slider-thumb{background:var(--vectis-color-accent-surface)}.v-slider-input:hover:not(:disabled)::-moz-range-thumb{background:var(--vectis-color-accent-surface)}.v-slider-input:active:not(:disabled)::-moz-range-thumb{background:var(--vectis-color-accent-surface)}.v-slider-input:focus-visible{outline:none}.v-slider-input:focus-visible::-webkit-slider-thumb{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-slider-input:focus-visible::-moz-range-thumb{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-slider-tooltip{opacity:0;visibility:hidden;inline-size:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default), visibility var(--vectis-duration-fast) var(--vectis-ease-default);justify-content:center;display:flex;position:absolute;inset-block-end:calc(100% + var(--vectis-space-2));inset-inline-start:calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction))}.v-slider:has(.v-slider-input-start:active) .v-slider-tooltip-start,.v-slider:has(.v-slider-input-start:focus-visible) .v-slider-tooltip-start,.v-slider:has(.v-slider-input-end:active) .v-slider-tooltip-end,.v-slider:has(.v-slider-input-end:focus-visible) .v-slider-tooltip-end{opacity:1;visibility:visible}.v-slider-tooltip-bubble{padding:var(--vectis-space-1) var(--vectis-space-2);background:var(--vectis-color-surface-inverse);color:var(--vectis-color-text-on-inverse);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);border-radius:var(--vectis-radius-sm);box-shadow:var(--vectis-shadow-sm);white-space:nowrap}.v-slider-labels{min-block-size:var(--vectis-icon-size-md);--vectis-icon-size:var(--vectis-icon-size-md);font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted);grid-area:labels;position:relative}.v-slider-label{white-space:nowrap;justify-content:center;inline-size:0;display:flex;position:absolute;inset-block-start:0;inset-inline-start:calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction))}.v-slider-field.v-input{inline-size:var(--vectis-control-size-slider-field)}.v-slider-field-start{grid-area:field-start}.v-slider-field-end{grid-area:field-end}.v-slider[data-orientation=vertical]{grid-template-columns:none;grid-template-areas:"rail";justify-items:center;inline-size:fit-content}.v-slider[data-orientation=vertical]:has(.v-slider-labels){grid-template-columns:auto auto;grid-template-areas:"rail labels"}.v-slider[data-orientation=vertical]:has(.v-slider-field-end){grid-template-columns:none;grid-template-areas:"field-end""rail"}.v-slider[data-orientation=vertical]:has(.v-slider-field-end):has(.v-slider-labels){grid-template-columns:auto auto;grid-template-areas:"field-end.""rail labels"}.v-slider[data-orientation=vertical]:has(.v-slider-field-start){grid-template-columns:none;grid-template-areas:"field-end""rail""field-start"}.v-slider[data-orientation=vertical]:has(.v-slider-field-start):has(.v-slider-labels){grid-template-columns:auto auto;grid-template-areas:"field-end.""rail labels""field-start."}.v-slider[data-orientation=vertical] .v-slider-rail{inline-size:var(--slider-thumb);block-size:var(--vectis-control-size-slider-length)}.v-slider[data-orientation=vertical] .v-slider-control{writing-mode:vertical-lr;direction:rtl}.v-slider[data-orientation=vertical] .v-slider-tooltip{justify-content:flex-end;align-items:center;block-size:0;inline-size:auto;inset-block-end:calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction));inset-inline-start:auto;inset-inline-end:calc(100% + var(--vectis-space-2))}.v-slider[data-orientation=vertical] .v-slider-labels{align-self:stretch;min-block-size:auto}.v-slider[data-orientation=vertical] .v-slider-label{justify-content:flex-start;align-items:center;block-size:0;inline-size:auto;inset-block-start:auto;inset-block-end:calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction));inset-inline-start:0}.v-slider[data-disabled]{cursor:not-allowed}.v-slider[data-disabled] .v-slider-track{background:var(--vectis-color-surface-muted)}.v-slider[data-disabled] .v-slider-fill,.v-slider[data-disabled] .v-slider-tick{background:var(--vectis-color-text-subtle)}.v-slider[data-disabled] .v-slider-tick[data-filled]{background:var(--vectis-color-surface-muted)}.v-slider[data-disabled] .v-slider-labels{color:var(--vectis-color-text-subtle)}.v-slider[data-disabled] .v-slider-input{cursor:not-allowed}.v-slider[data-disabled] .v-slider-input::-webkit-slider-thumb{background:var(--vectis-color-surface-muted);border-color:var(--vectis-color-text-subtle);box-shadow:none;cursor:not-allowed}.v-slider[data-disabled] .v-slider-input::-moz-range-thumb{background:var(--vectis-color-surface-muted);border-color:var(--vectis-color-text-subtle);box-shadow:none;cursor:not-allowed}@media (prefers-reduced-motion:reduce){.v-slider-input::-webkit-slider-thumb{transition:none}.v-slider-input::-moz-range-thumb{transition:none}.v-slider-tooltip{transition:none}}}

package/dist/components/VSlider/VSlider.d.ts

@@ -0,0 +1,82 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * A value chosen by sliding a thumb along a track, and optionally a range between two
+ * of them.
+ *
+ * Underneath is the browser's own range control, which brings the keyboard, the correct
+ * announcement to screen readers and the form behaviour with it. The JavaScript covers
+ * only what it cannot: stopping the two values from crossing over each other — there is
+ * no native control with two thumbs, so a range is two of them superimposed — feeding
+ * the optional number fields, which the native element does not validate, and computing
+ * the positions of the ticks, the labels and the tooltip.
+ *
+ * Those positions are handed to the stylesheet as plain fractions written inline, and
+ * that is the only binding between the two. They matter because a thumb's centre does
+ * NOT travel the full width of the track: it runs from half a thumb in to half a thumb
+ * from the end, and everything meant to line up with it has to follow that same run.
+ */
+export type SliderLabel = string | {
+    icon: IconSource;
+    label: string;
+};
+interface SliderProps {
+    /** The lowest value the thumb can reach. */
+    min?: number;
+    /** The highest value the thumb can reach. */
+    max?: number;
+    /** The gap between two values it can stop on. */
+    step?: number;
+    /** Offers two thumbs to pick a range, which makes the v-model a pair of values. */
+    range?: boolean;
+    /** Makes the slider unusable. */
+    disabled?: boolean;
+    /**
+     * What screen readers announce for the slider. In range mode the two thumbs are
+     * announced as the start and the end of it.
+     */
+    label?: string;
+    /** Turns the slider upright, with the lowest value at the bottom. */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Adds a number field beside the slider for setting the value exactly — one, or one
+     * per end in range mode. Sliding is quick but imprecise; this is the way out.
+     */
+    inputs?: boolean;
+    /**
+     * Marks each step on the track. Providing labels implies it. Past fifty steps the
+     * marks would be an unreadable comb and are not drawn at all.
+     */
+    ticks?: boolean;
+    /**
+     * A label for every step, in order — a piece of text, or an icon with the words that
+     * name it for screen readers. They also become what a screen reader announces in
+     * place of the raw number.
+     */
+    labels?: SliderLabel[];
+    /** Shows the value in a bubble above the thumb while it is being moved or focused. */
+    tooltip?: boolean;
+}
+type __VLS_Props = SliderProps;
+type __VLS_ModelProps = {
+    modelValue?: number | [number, number];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | [number, number]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
+}>, {
+    label: string;
+    range: boolean;
+    orientation: "horizontal" | "vertical";
+    disabled: boolean;
+    tooltip: boolean;
+    max: number;
+    step: number;
+    inputs: boolean;
+    min: number;
+    ticks: boolean;
+    labels: SliderLabel[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VSlider/VSlider.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSlider.js","names":[],"sources":["../../../src/components/VSlider/VSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\n\nimport { isDev } from '../../utils/env'\nimport { useMessages } from '../../i18n/state'\n\n// @core\n/**\n * A value chosen by sliding a thumb along a track, and optionally a range between two\n * of them.\n *\n * Underneath is the browser's own range control, which brings the keyboard, the correct\n * announcement to screen readers and the form behaviour with it. The JavaScript covers\n * only what it cannot: stopping the two values from crossing over each other — there is\n * no native control with two thumbs, so a range is two of them superimposed — feeding\n * the optional number fields, which the native element does not validate, and computing\n * the positions of the ticks, the labels and the tooltip.\n *\n * Those positions are handed to the stylesheet as plain fractions written inline, and\n * that is the only binding between the two. They matter because a thumb's centre does\n * NOT travel the full width of the track: it runs from half a thumb in to half a thumb\n * from the end, and everything meant to line up with it has to follow that same run.\n */\nexport type SliderLabel = string | { icon: IconSource; label: string }\n\ninterface SliderProps {\n  /** The lowest value the thumb can reach. */\n  min?: number\n  /** The highest value the thumb can reach. */\n  max?: number\n  /** The gap between two values it can stop on. */\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   * What screen readers announce for the slider. In range mode the two thumbs are\n   * announced as the start and the end of it.\n   */\n  label?: string\n  /** Turns the slider upright, with the lowest value at the bottom. */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * Adds a number field beside the slider for setting the value exactly — one, or one\n   * per end in range mode. Sliding is quick but imprecise; this is the way out.\n   */\n  inputs?: boolean\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\nconst props = withDefaults(defineProps<SliderProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  range: false,\n  disabled: false,\n  label: undefined,\n  orientation: 'horizontal',\n  inputs: false,\n  ticks: false,\n  labels: undefined,\n  tooltip: false,\n})\n\nconst model = defineModel<number | [number, number]>({ default: 0 })\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\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) => Math.min(1, Math.max(0, (v - props.min) / (props.max - props.min || 1)))\n\n// @core — what stops the two values from crossing. A range is two native controls laid\n// over one another, and there is no dual-thumb control to inherit this behaviour from.\nfunction onStartInput(event: Event) {\n  const el = event.target as HTMLInputElement\n  const clamped = Math.min(Number(el.value), endValue.value)\n  el.value = String(clamped)\n  model.value = [clamped, endValue.value]\n}\n\nfunction onEndInput(event: Event) {\n  const el = event.target as HTMLInputElement\n  if (!props.range) {\n    model.value = Number(el.value)\n    return\n  }\n  const clamped = Math.max(Number(el.value), startValue.value)\n  el.value = String(clamped)\n  model.value = [startValue.value, clamped]\n}\n\n/**\n * How many whole steps the thumb can actually stop on. It matters when the range does\n * not divide evenly by the step: the native control stops at the last step that fits,\n * short of the maximum, and the ticks have to agree with it.\n */\nconst stepCount = computed(() => Math.floor((props.max - props.min) / props.step + 1e-9))\n\nconst showTicks = computed(\n  () =>\n    (props.ticks || props.labels !== undefined) && stepCount.value >= 1 && stepCount.value <= 50,\n)\n\nconst tickItems = computed(() => {\n  if (!showTicks.value) return []\n  return Array.from({ length: stepCount.value + 1 }, (_, i) => {\n    const value = props.min + i * props.step\n    const filled = props.range\n      ? value >= startValue.value && value <= endValue.value\n      : value <= endValue.value\n    return { f: frac(value), filled }\n  })\n})\n\nconst labelFraction = (index: number) => frac(props.min + index * props.step)\n\n/** What a value is called, if the consumer named its step; failing that, the number itself. */\nfunction labelTextAt(value: number): string {\n  const item = props.labels?.[Math.round((value - props.min) / props.step)]\n  if (item === undefined) return String(value)\n  return typeof item === 'string' ? item : item.label\n}\n\n// @a11y\n/* What each thumb is announced as. There is no prop for the two halves: the wording\n   comes from the dictionary, which is also where it is changed.\n\n   With a single thumb there is nothing to distinguish: that thumb IS the value, so it\n   simply takes the consumer's label, and is left unnamed when none was given. The\n   generic fallback applies to the NUMBER FIELD alone, which cannot go unnamed — a bare\n   field in a form has to say what it holds. */\nconst m = useMessages()\nconst startLabel = computed(() =>\n  props.label ? m.value.slider.rangeStart(props.label) : m.value.slider.start,\n)\nconst endLabel = computed(() =>\n  props.label ? m.value.slider.rangeEnd(props.label) : m.value.slider.end,\n)\nconst rangeEndLabel = computed(() => (props.range ? endLabel.value : props.label))\nconst fieldEndLabel = computed(() =>\n  props.range ? endLabel.value : (props.label ?? m.value.slider.value),\n)\n\nconst startValueText = computed(() => (props.labels ? labelTextAt(startValue.value) : undefined))\nconst endValueText = computed(() => (props.labels ? labelTextAt(endValue.value) : undefined))\n\n// @devwarn\nif (isDev) {\n  if ((props.ticks || props.labels) && stepCount.value > 50)\n    console.warn(`[VSlider] ${stepCount.value} steps — ticks/labels not rendered past 50.`)\n  if (props.labels && props.labels.length !== stepCount.value + 1)\n    console.warn(\n      `[VSlider] ${props.labels.length} labels for ${stepCount.value + 1} steps — one label per step expected.`,\n    )\n}\n\n// The text held by the number fields, kept apart from the slider's own value.\n//\n// It is typed as text OR a number because these are number fields, whose value Vue\n// converts to a number as soon as it can be read as one — while an empty field, or one\n// holding a half-typed \"1-\", stays text. That is why the value is turned back into text\n// when it is committed.\nconst startFieldText = ref<string | number>(String(startValue.value))\nconst endFieldText = ref<string | number>(String(endValue.value))\n\n// Sliding the thumb keeps the fields in step, continuously.\nwatch(startValue, (v) => (startFieldText.value = String(v)))\nwatch(endValue, (v) => (endFieldText.value = String(v)))\n\n/**\n * Takes what was typed in a field and makes it the value — but only once the reader has\n * finished, on leaving the field or on Enter. Reading it as they type would clamp the\n * \"1\" of \"15\" to the minimum before the 5 was ever pressed.\n *\n * Anything unreadable, an empty field included, silently puts the previous value back.\n */\nfunction commitField(which: 'start' | 'end') {\n  const raw = which === 'start' ? startFieldText.value : endFieldText.value\n  // TRAP — parsed rather than converted: an empty string parses to nothing, which is\n  // what triggers the revert below, where converting it would give ZERO and quietly\n  // overwrite the value with it.\n  const parsed = Number.parseFloat(String(raw))\n  if (Number.isNaN(parsed)) {\n    resyncFields()\n    return\n  }\n  const clamped = Math.min(props.max, Math.max(props.min, parsed))\n  // Brought onto the nearest step. The rounding that follows removes the noise decimal\n  // steps leave behind — a tenth cannot be represented exactly, so 0.1 × 3 comes out as\n  // 0.30000000000000004.\n  let value = props.min + Math.round((clamped - props.min) / props.step) * props.step\n  value = Math.min(props.max, Math.round(value * 1e10) / 1e10)\n  if (!props.range) {\n    model.value = value\n  } else if (which === 'start') {\n    model.value = [Math.min(value, endValue.value), endValue.value]\n  } else {\n    model.value = [startValue.value, Math.max(value, startValue.value)]\n  }\n  // Put back explicitly, because a commit that does not change the value — typing 200\n  // where the maximum is 100 — changes nothing for the watchers to react to, and the\n  // field would go on showing what was typed.\n  resyncFields()\n}\n\nfunction resyncFields() {\n  startFieldText.value = String(startValue.value)\n  endFieldText.value = String(endValue.value)\n}\n</script>\n\n<template>\n  <div\n    class=\"v-slider\"\n    :data-range=\"range ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n    :style=\"{\n      '--start-fraction': String(frac(startValue)),\n      '--end-fraction': String(frac(endValue)),\n    }\"\n  >\n    <VInput\n      v-if=\"inputs && range\"\n      v-model=\"startFieldText\"\n      class=\"v-slider-field v-slider-field-start\"\n      type=\"number\"\n      size=\"sm\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :disabled=\"disabled\"\n      :aria-label=\"startLabel\"\n      @change=\"commitField('start')\"\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 tickItems\"\n            :key=\"i\"\n            class=\"v-slider-tick\"\n            :data-filled=\"tick.filled ? '' : undefined\"\n            :style=\"{ '--fill-fraction': String(tick.f) }\"\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=\"disabled\"\n          :value=\"startValue\"\n          :aria-label=\"startLabel\"\n          :aria-valuetext=\"startValueText\"\n          @input=\"onStartInput\"\n        />\n        <input\n          type=\"range\"\n          class=\"v-slider-input v-slider-input-end\"\n          :min=\"min\"\n          :max=\"max\"\n          :step=\"step\"\n          :disabled=\"disabled\"\n          :value=\"endValue\"\n          :aria-label=\"rangeEndLabel\"\n          :aria-valuetext=\"endValueText\"\n          @input=\"onEndInput\"\n        />\n      </span>\n      <span\n        v-if=\"tooltip && range\"\n        class=\"v-slider-tooltip v-slider-tooltip-start\"\n        aria-hidden=\"true\"\n        :style=\"{ '--fill-fraction': String(frac(startValue)) }\"\n      >\n        <span class=\"v-slider-tooltip-bubble\">{{ startValueText ?? startValue }}</span>\n      </span>\n      <span\n        v-if=\"tooltip\"\n        class=\"v-slider-tooltip v-slider-tooltip-end\"\n        aria-hidden=\"true\"\n        :style=\"{ '--fill-fraction': String(frac(endValue)) }\"\n      >\n        <span class=\"v-slider-tooltip-bubble\">{{ endValueText ?? 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=\"{ '--fill-fraction': String(labelFraction(i)) }\"\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    <VInput\n      v-if=\"inputs\"\n      v-model=\"endFieldText\"\n      class=\"v-slider-field v-slider-field-end\"\n      type=\"number\"\n      size=\"sm\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :disabled=\"disabled\"\n      :aria-label=\"fieldEndLabel\"\n      @change=\"commitField('end')\"\n    />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-slider {\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    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-slider:has(.v-slider-labels) {\n    grid-template-areas: 'rail' 'labels';\n  }\n\n  .v-slider:has(.v-slider-field-end) {\n    grid-template-areas: 'rail field-end';\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n\n  .v-slider:has(.v-slider-field-end):has(.v-slider-labels) {\n    grid-template-areas: 'rail field-end' 'labels .';\n  }\n\n  .v-slider:has(.v-slider-field-start) {\n    grid-template-areas: 'field-start rail field-end';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider:has(.v-slider-field-start):has(.v-slider-labels) {\n    grid-template-areas: 'field-start rail field-end' '. labels .';\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-full);\n    background: var(--vectis-color-border);\n    overflow: hidden;\n  }\n\n  .v-slider-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--end-fraction));\n    background: var(--vectis-color-accent);\n  }\n\n  .v-slider[data-range] .v-slider-fill {\n    inset-inline-start: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--start-fraction)\n    );\n    inline-size: calc((100% - var(--slider-thumb)) * (var(--end-fraction) - var(--start-fraction)));\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(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction) -\n        var(--slider-tick) / 2\n    );\n    inline-size: var(--slider-tick);\n    block-size: var(--slider-tick);\n    border-radius: var(--vectis-radius-full);\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  /* The two controls lie exactly on top of one another, so only their thumbs are allowed\n     to receive the pointer. Without that, the one on top would swallow every click and\n     the other thumb could never be grabbed. */\n  .v-slider-input {\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  /* With a single thumb there is nothing underneath to protect, so the whole control\n     takes the pointer again — which is what makes clicking the track jump the value\n     there and start dragging at once, natively and with no code at all. The accepted\n     side effect is that the thumb lights up when the pointer is anywhere over the\n     track. */\n  .v-slider:not([data-range]) .v-slider-input {\n    pointer-events: auto;\n    cursor: pointer;\n  }\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-full);\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-accent);\n    box-shadow: var(--vectis-shadow-xs);\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\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-full);\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-accent);\n    box-shadow: var(--vectis-shadow-xs);\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The thumb tints as the pointer rests on it or drags it. TRAP — the state is read on\n     the control and the thumb is then addressed, never the reverse: a state pseudo-class\n     written after the thumb's own pseudo-element is unreliable across browsers. */\n  .v-slider-input:hover:not(:disabled)::-webkit-slider-thumb,\n  .v-slider-input:active:not(:disabled)::-webkit-slider-thumb {\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-slider-input:hover:not(:disabled)::-moz-range-thumb,\n  .v-slider-input:active:not(:disabled)::-moz-range-thumb {\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-slider-input:focus-visible {\n    outline: none;\n  }\n\n  .v-slider-input:focus-visible::-webkit-slider-thumb {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-slider-input:focus-visible::-moz-range-thumb {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* The bubble showing the value. It looks like a VTooltip but is placed by arithmetic\n     rather than anchored to the thumb: a native thumb is a pseudo-element, and the\n     browser's anchoring cannot attach anything to one. */\n  .v-slider-tooltip {\n    position: absolute;\n    inset-block-end: calc(100% + var(--vectis-space-2));\n    inset-inline-start: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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:has(.v-slider-input-start:active) .v-slider-tooltip-start,\n  .v-slider:has(.v-slider-input-start:focus-visible) .v-slider-tooltip-start,\n  .v-slider:has(.v-slider-input-end:active) .v-slider-tooltip-end,\n  .v-slider: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: var(--vectis-radius-sm);\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    --vectis-icon-size: var(--vectis-icon-size-md);\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: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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  .v-slider-field-start {\n    grid-area: field-start;\n  }\n\n  .v-slider-field-end {\n    grid-area: field-end;\n  }\n\n  .v-slider[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[data-orientation='vertical']:has(.v-slider-labels) {\n    grid-template-areas: 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-end) {\n    grid-template-areas: 'field-end' 'rail';\n    grid-template-columns: none;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-end):has(.v-slider-labels) {\n    grid-template-areas: 'field-end .' 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-start) {\n    grid-template-areas: 'field-end' 'rail' 'field-start';\n    grid-template-columns: none;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-start):has(.v-slider-labels) {\n    grid-template-areas: 'field-end .' 'rail labels' 'field-start .';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider[data-orientation='vertical'] .v-slider-rail {\n    inline-size: var(--slider-thumb);\n    block-size: var(--vectis-control-size-slider-length);\n  }\n\n  /* Only this inner box is turned upright, and that is the whole trick: the track, the\n     fill and the ticks are all placed with logical properties, so they follow the change\n     of axis with no rule written a second time — while the bubbles and the labels stay\n     outside that box, and therefore keep their text horizontal.\n\n     The direction is reversed with it so that the lowest value ends up at the bottom. */\n  .v-slider[data-orientation='vertical'] .v-slider-control {\n    writing-mode: vertical-lr;\n    direction: rtl;\n  }\n\n  .v-slider[data-orientation='vertical'] .v-slider-tooltip {\n    inset-block-end: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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[data-orientation='vertical'] .v-slider-labels {\n    align-self: stretch;\n    min-block-size: auto;\n  }\n\n  .v-slider[data-orientation='vertical'] .v-slider-label {\n    inset-block-start: auto;\n    inset-block-end: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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  /* A disabled slider greys out through the colour tokens, the same ones VCheckbox and\n     VSwitch use, and never through opacity. */\n  .v-slider[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  .v-slider[data-disabled] .v-slider-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider[data-disabled] .v-slider-fill {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider[data-disabled] .v-slider-tick {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  /* A tick sitting on the greyed fill takes the light colour back, so that it stays\n     visible against it — the same inversion VCheckbox applies to its disabled tick. */\n  .v-slider[data-disabled] .v-slider-tick[data-filled] {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider[data-disabled] .v-slider-labels {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider[data-disabled] .v-slider-input {\n    cursor: not-allowed;\n  }\n\n  .v-slider[data-disabled] .v-slider-input::-webkit-slider-thumb {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-text-subtle);\n    box-shadow: none;\n    cursor: not-allowed;\n  }\n\n  .v-slider[data-disabled] .v-slider-input::-moz-range-thumb {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-text-subtle);\n    box-shadow: none;\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-slider-input::-webkit-slider-thumb {\n      transition: none;\n    }\n\n    .v-slider-input::-moz-range-thumb {\n      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

@@ -0,0 +1,220 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import r from "../VInput/VInput.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useModel as b, watch as x } from "vue";
+//#region src/components/VSlider/VSlider.vue?vue&type=script&setup=true&lang.ts
+var S = [
+	"data-range",
+	"data-disabled",
+	"data-orientation"
+], C = { class: "v-slider-rail" }, w = { class: "v-slider-control" }, T = {
+	class: "v-slider-track",
+	"aria-hidden": "true"
+}, E = ["data-filled"], D = [
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"value",
+	"aria-label",
+	"aria-valuetext"
+], O = [
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"value",
+	"aria-label",
+	"aria-valuetext"
+], k = { class: "v-slider-tooltip-bubble" }, A = { class: "v-slider-tooltip-bubble" }, j = {
+	key: 1,
+	class: "v-slider-labels"
+}, M = /*@__PURE__*/ d({
+	__name: "VSlider",
+	props: /*@__PURE__*/ f({
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		range: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		orientation: { default: "horizontal" },
+		inputs: {
+			type: Boolean,
+			default: !1
+		},
+		ticks: {
+			type: Boolean,
+			default: !1
+		},
+		labels: { default: void 0 },
+		tooltip: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d) {
+		let f = d, M = b(d, "modelValue"), N = a(() => Array.isArray(M.value) ? M.value[0] : f.min), P = a(() => Array.isArray(M.value) ? M.value[1] : M.value), F = (e) => Math.min(1, Math.max(0, (e - f.min) / (f.max - f.min || 1)));
+		function I(e) {
+			let t = e.target, n = Math.min(Number(t.value), P.value);
+			t.value = String(n), M.value = [n, P.value];
+		}
+		function L(e) {
+			let t = e.target;
+			if (!f.range) {
+				M.value = Number(t.value);
+				return;
+			}
+			let n = Math.max(Number(t.value), N.value);
+			t.value = String(n), M.value = [N.value, n];
+		}
+		let R = a(() => Math.floor((f.max - f.min) / f.step + 1e-9)), z = a(() => (f.ticks || f.labels !== void 0) && R.value >= 1 && R.value <= 50), B = a(() => z.value ? Array.from({ length: R.value + 1 }, (e, t) => {
+			let n = f.min + t * f.step, r = f.range ? n >= N.value && n <= P.value : n <= P.value;
+			return {
+				f: F(n),
+				filled: r
+			};
+		}) : []), V = (e) => F(f.min + e * f.step);
+		function H(e) {
+			let t = f.labels?.[Math.round((e - f.min) / f.step)];
+			return t === void 0 ? String(e) : typeof t == "string" ? t : t.label;
+		}
+		let U = e(), W = a(() => f.label ? U.value.slider.rangeStart(f.label) : U.value.slider.start), G = a(() => f.label ? U.value.slider.rangeEnd(f.label) : U.value.slider.end), K = a(() => f.range ? G.value : f.label), q = a(() => f.range ? G.value : f.label ?? U.value.slider.value), J = a(() => f.labels ? H(N.value) : void 0), Y = a(() => f.labels ? H(P.value) : void 0), X = g(String(N.value)), Z = g(String(P.value));
+		x(N, (e) => X.value = String(e)), x(P, (e) => Z.value = String(e));
+		function Q(e) {
+			let t = e === "start" ? X.value : Z.value, n = Number.parseFloat(String(t));
+			if (Number.isNaN(n)) {
+				$();
+				return;
+			}
+			let r = Math.min(f.max, Math.max(f.min, n)), i = f.min + Math.round((r - f.min) / f.step) * f.step;
+			i = Math.min(f.max, Math.round(i * 1e10) / 1e10), f.range ? e === "start" ? M.value = [Math.min(i, P.value), P.value] : M.value = [N.value, Math.max(i, N.value)] : M.value = i, $();
+		}
+		function $() {
+			X.value = String(N.value), Z.value = String(P.value);
+		}
+		return (e, a) => (h(), c("div", {
+			class: "v-slider",
+			"data-range": d.range ? "" : void 0,
+			"data-disabled": d.disabled ? "" : void 0,
+			"data-orientation": d.orientation === "vertical" ? "vertical" : void 0,
+			style: m({
+				"--start-fraction": String(F(N.value)),
+				"--end-fraction": String(F(P.value))
+			})
+		}, [
+			d.inputs && d.range ? (h(), o(r, {
+				key: 0,
+				modelValue: X.value,
+				"onUpdate:modelValue": a[0] ||= (e) => X.value = e,
+				class: "v-slider-field v-slider-field-start",
+				type: "number",
+				size: "sm",
+				min: d.min,
+				max: d.max,
+				step: d.step,
+				disabled: d.disabled,
+				"aria-label": W.value,
+				onChange: a[1] ||= (e) => Q("start")
+			}, null, 8, [
+				"modelValue",
+				"min",
+				"max",
+				"step",
+				"disabled",
+				"aria-label"
+			])) : s("", !0),
+			l("div", C, [
+				l("span", w, [
+					l("span", T, [a[4] ||= l("span", { class: "v-slider-fill" }, null, -1), (h(!0), c(i, null, _(B.value, (e, t) => (h(), c("span", {
+						key: t,
+						class: "v-slider-tick",
+						"data-filled": e.filled ? "" : void 0,
+						style: m({ "--fill-fraction": String(e.f) })
+					}, null, 12, E))), 128))]),
+					d.range ? (h(), c("input", {
+						key: 0,
+						type: "range",
+						class: "v-slider-input v-slider-input-start",
+						min: d.min,
+						max: d.max,
+						step: d.step,
+						disabled: d.disabled,
+						value: N.value,
+						"aria-label": W.value,
+						"aria-valuetext": J.value,
+						onInput: I
+					}, null, 40, D)) : s("", !0),
+					l("input", {
+						type: "range",
+						class: "v-slider-input v-slider-input-end",
+						min: d.min,
+						max: d.max,
+						step: d.step,
+						disabled: d.disabled,
+						value: P.value,
+						"aria-label": K.value,
+						"aria-valuetext": Y.value,
+						onInput: L
+					}, null, 40, O)
+				]),
+				d.tooltip && d.range ? (h(), c("span", {
+					key: 0,
+					class: "v-slider-tooltip v-slider-tooltip-start",
+					"aria-hidden": "true",
+					style: m({ "--fill-fraction": String(F(N.value)) })
+				}, [l("span", k, v(J.value ?? N.value), 1)], 4)) : s("", !0),
+				d.tooltip ? (h(), c("span", {
+					key: 1,
+					class: "v-slider-tooltip v-slider-tooltip-end",
+					"aria-hidden": "true",
+					style: m({ "--fill-fraction": String(F(P.value)) })
+				}, [l("span", A, v(Y.value ?? P.value), 1)], 4)) : s("", !0)
+			]),
+			d.labels ? (h(), c("div", j, [(h(!0), c(i, null, _(d.labels, (e, r) => (h(), c("span", {
+				key: r,
+				class: "v-slider-label",
+				style: m({ "--fill-fraction": String(V(r)) })
+			}, [typeof e == "string" ? (h(), c(i, { key: 0 }, [u(v(e), 1)], 64)) : (h(), o(t, p({
+				key: 1,
+				ref_for: !0
+			}, y(n)(e.icon), { label: e.label }), null, 16, ["label"]))], 4))), 128))])) : s("", !0),
+			d.inputs ? (h(), o(r, {
+				key: 2,
+				modelValue: Z.value,
+				"onUpdate:modelValue": a[2] ||= (e) => Z.value = e,
+				class: "v-slider-field v-slider-field-end",
+				type: "number",
+				size: "sm",
+				min: d.min,
+				max: d.max,
+				step: d.step,
+				disabled: d.disabled,
+				"aria-label": q.value,
+				onChange: a[3] ||= (e) => Q("end")
+			}, null, 8, [
+				"modelValue",
+				"min",
+				"max",
+				"step",
+				"disabled",
+				"aria-label"
+			])) : s("", !0)
+		], 12, S));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=VSlider.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSlider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSlider/VSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\n\nimport { isDev } from '../../utils/env'\nimport { useMessages } from '../../i18n/state'\n\n// @core\n/**\n * A value chosen by sliding a thumb along a track, and optionally a range between two\n * of them.\n *\n * Underneath is the browser's own range control, which brings the keyboard, the correct\n * announcement to screen readers and the form behaviour with it. The JavaScript covers\n * only what it cannot: stopping the two values from crossing over each other — there is\n * no native control with two thumbs, so a range is two of them superimposed — feeding\n * the optional number fields, which the native element does not validate, and computing\n * the positions of the ticks, the labels and the tooltip.\n *\n * Those positions are handed to the stylesheet as plain fractions written inline, and\n * that is the only binding between the two. They matter because a thumb's centre does\n * NOT travel the full width of the track: it runs from half a thumb in to half a thumb\n * from the end, and everything meant to line up with it has to follow that same run.\n */\nexport type SliderLabel = string | { icon: IconSource; label: string }\n\ninterface SliderProps {\n  /** The lowest value the thumb can reach. */\n  min?: number\n  /** The highest value the thumb can reach. */\n  max?: number\n  /** The gap between two values it can stop on. */\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   * What screen readers announce for the slider. In range mode the two thumbs are\n   * announced as the start and the end of it.\n   */\n  label?: string\n  /** Turns the slider upright, with the lowest value at the bottom. */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * Adds a number field beside the slider for setting the value exactly — one, or one\n   * per end in range mode. Sliding is quick but imprecise; this is the way out.\n   */\n  inputs?: boolean\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\nconst props = withDefaults(defineProps<SliderProps>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  range: false,\n  disabled: false,\n  label: undefined,\n  orientation: 'horizontal',\n  inputs: false,\n  ticks: false,\n  labels: undefined,\n  tooltip: false,\n})\n\nconst model = defineModel<number | [number, number]>({ default: 0 })\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\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) => Math.min(1, Math.max(0, (v - props.min) / (props.max - props.min || 1)))\n\n// @core — what stops the two values from crossing. A range is two native controls laid\n// over one another, and there is no dual-thumb control to inherit this behaviour from.\nfunction onStartInput(event: Event) {\n  const el = event.target as HTMLInputElement\n  const clamped = Math.min(Number(el.value), endValue.value)\n  el.value = String(clamped)\n  model.value = [clamped, endValue.value]\n}\n\nfunction onEndInput(event: Event) {\n  const el = event.target as HTMLInputElement\n  if (!props.range) {\n    model.value = Number(el.value)\n    return\n  }\n  const clamped = Math.max(Number(el.value), startValue.value)\n  el.value = String(clamped)\n  model.value = [startValue.value, clamped]\n}\n\n/**\n * How many whole steps the thumb can actually stop on. It matters when the range does\n * not divide evenly by the step: the native control stops at the last step that fits,\n * short of the maximum, and the ticks have to agree with it.\n */\nconst stepCount = computed(() => Math.floor((props.max - props.min) / props.step + 1e-9))\n\nconst showTicks = computed(\n  () =>\n    (props.ticks || props.labels !== undefined) && stepCount.value >= 1 && stepCount.value <= 50,\n)\n\nconst tickItems = computed(() => {\n  if (!showTicks.value) return []\n  return Array.from({ length: stepCount.value + 1 }, (_, i) => {\n    const value = props.min + i * props.step\n    const filled = props.range\n      ? value >= startValue.value && value <= endValue.value\n      : value <= endValue.value\n    return { f: frac(value), filled }\n  })\n})\n\nconst labelFraction = (index: number) => frac(props.min + index * props.step)\n\n/** What a value is called, if the consumer named its step; failing that, the number itself. */\nfunction labelTextAt(value: number): string {\n  const item = props.labels?.[Math.round((value - props.min) / props.step)]\n  if (item === undefined) return String(value)\n  return typeof item === 'string' ? item : item.label\n}\n\n// @a11y\n/* What each thumb is announced as. There is no prop for the two halves: the wording\n   comes from the dictionary, which is also where it is changed.\n\n   With a single thumb there is nothing to distinguish: that thumb IS the value, so it\n   simply takes the consumer's label, and is left unnamed when none was given. The\n   generic fallback applies to the NUMBER FIELD alone, which cannot go unnamed — a bare\n   field in a form has to say what it holds. */\nconst m = useMessages()\nconst startLabel = computed(() =>\n  props.label ? m.value.slider.rangeStart(props.label) : m.value.slider.start,\n)\nconst endLabel = computed(() =>\n  props.label ? m.value.slider.rangeEnd(props.label) : m.value.slider.end,\n)\nconst rangeEndLabel = computed(() => (props.range ? endLabel.value : props.label))\nconst fieldEndLabel = computed(() =>\n  props.range ? endLabel.value : (props.label ?? m.value.slider.value),\n)\n\nconst startValueText = computed(() => (props.labels ? labelTextAt(startValue.value) : undefined))\nconst endValueText = computed(() => (props.labels ? labelTextAt(endValue.value) : undefined))\n\n// @devwarn\nif (isDev) {\n  if ((props.ticks || props.labels) && stepCount.value > 50)\n    console.warn(`[VSlider] ${stepCount.value} steps — ticks/labels not rendered past 50.`)\n  if (props.labels && props.labels.length !== stepCount.value + 1)\n    console.warn(\n      `[VSlider] ${props.labels.length} labels for ${stepCount.value + 1} steps — one label per step expected.`,\n    )\n}\n\n// The text held by the number fields, kept apart from the slider's own value.\n//\n// It is typed as text OR a number because these are number fields, whose value Vue\n// converts to a number as soon as it can be read as one — while an empty field, or one\n// holding a half-typed \"1-\", stays text. That is why the value is turned back into text\n// when it is committed.\nconst startFieldText = ref<string | number>(String(startValue.value))\nconst endFieldText = ref<string | number>(String(endValue.value))\n\n// Sliding the thumb keeps the fields in step, continuously.\nwatch(startValue, (v) => (startFieldText.value = String(v)))\nwatch(endValue, (v) => (endFieldText.value = String(v)))\n\n/**\n * Takes what was typed in a field and makes it the value — but only once the reader has\n * finished, on leaving the field or on Enter. Reading it as they type would clamp the\n * \"1\" of \"15\" to the minimum before the 5 was ever pressed.\n *\n * Anything unreadable, an empty field included, silently puts the previous value back.\n */\nfunction commitField(which: 'start' | 'end') {\n  const raw = which === 'start' ? startFieldText.value : endFieldText.value\n  // TRAP — parsed rather than converted: an empty string parses to nothing, which is\n  // what triggers the revert below, where converting it would give ZERO and quietly\n  // overwrite the value with it.\n  const parsed = Number.parseFloat(String(raw))\n  if (Number.isNaN(parsed)) {\n    resyncFields()\n    return\n  }\n  const clamped = Math.min(props.max, Math.max(props.min, parsed))\n  // Brought onto the nearest step. The rounding that follows removes the noise decimal\n  // steps leave behind — a tenth cannot be represented exactly, so 0.1 × 3 comes out as\n  // 0.30000000000000004.\n  let value = props.min + Math.round((clamped - props.min) / props.step) * props.step\n  value = Math.min(props.max, Math.round(value * 1e10) / 1e10)\n  if (!props.range) {\n    model.value = value\n  } else if (which === 'start') {\n    model.value = [Math.min(value, endValue.value), endValue.value]\n  } else {\n    model.value = [startValue.value, Math.max(value, startValue.value)]\n  }\n  // Put back explicitly, because a commit that does not change the value — typing 200\n  // where the maximum is 100 — changes nothing for the watchers to react to, and the\n  // field would go on showing what was typed.\n  resyncFields()\n}\n\nfunction resyncFields() {\n  startFieldText.value = String(startValue.value)\n  endFieldText.value = String(endValue.value)\n}\n</script>\n\n<template>\n  <div\n    class=\"v-slider\"\n    :data-range=\"range ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n    :style=\"{\n      '--start-fraction': String(frac(startValue)),\n      '--end-fraction': String(frac(endValue)),\n    }\"\n  >\n    <VInput\n      v-if=\"inputs && range\"\n      v-model=\"startFieldText\"\n      class=\"v-slider-field v-slider-field-start\"\n      type=\"number\"\n      size=\"sm\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :disabled=\"disabled\"\n      :aria-label=\"startLabel\"\n      @change=\"commitField('start')\"\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 tickItems\"\n            :key=\"i\"\n            class=\"v-slider-tick\"\n            :data-filled=\"tick.filled ? '' : undefined\"\n            :style=\"{ '--fill-fraction': String(tick.f) }\"\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=\"disabled\"\n          :value=\"startValue\"\n          :aria-label=\"startLabel\"\n          :aria-valuetext=\"startValueText\"\n          @input=\"onStartInput\"\n        />\n        <input\n          type=\"range\"\n          class=\"v-slider-input v-slider-input-end\"\n          :min=\"min\"\n          :max=\"max\"\n          :step=\"step\"\n          :disabled=\"disabled\"\n          :value=\"endValue\"\n          :aria-label=\"rangeEndLabel\"\n          :aria-valuetext=\"endValueText\"\n          @input=\"onEndInput\"\n        />\n      </span>\n      <span\n        v-if=\"tooltip && range\"\n        class=\"v-slider-tooltip v-slider-tooltip-start\"\n        aria-hidden=\"true\"\n        :style=\"{ '--fill-fraction': String(frac(startValue)) }\"\n      >\n        <span class=\"v-slider-tooltip-bubble\">{{ startValueText ?? startValue }}</span>\n      </span>\n      <span\n        v-if=\"tooltip\"\n        class=\"v-slider-tooltip v-slider-tooltip-end\"\n        aria-hidden=\"true\"\n        :style=\"{ '--fill-fraction': String(frac(endValue)) }\"\n      >\n        <span class=\"v-slider-tooltip-bubble\">{{ endValueText ?? 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=\"{ '--fill-fraction': String(labelFraction(i)) }\"\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    <VInput\n      v-if=\"inputs\"\n      v-model=\"endFieldText\"\n      class=\"v-slider-field v-slider-field-end\"\n      type=\"number\"\n      size=\"sm\"\n      :min=\"min\"\n      :max=\"max\"\n      :step=\"step\"\n      :disabled=\"disabled\"\n      :aria-label=\"fieldEndLabel\"\n      @change=\"commitField('end')\"\n    />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-slider {\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    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-slider:has(.v-slider-labels) {\n    grid-template-areas: 'rail' 'labels';\n  }\n\n  .v-slider:has(.v-slider-field-end) {\n    grid-template-areas: 'rail field-end';\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n\n  .v-slider:has(.v-slider-field-end):has(.v-slider-labels) {\n    grid-template-areas: 'rail field-end' 'labels .';\n  }\n\n  .v-slider:has(.v-slider-field-start) {\n    grid-template-areas: 'field-start rail field-end';\n    grid-template-columns: auto minmax(0, 1fr) auto;\n  }\n\n  .v-slider:has(.v-slider-field-start):has(.v-slider-labels) {\n    grid-template-areas: 'field-start rail field-end' '. labels .';\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-full);\n    background: var(--vectis-color-border);\n    overflow: hidden;\n  }\n\n  .v-slider-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--end-fraction));\n    background: var(--vectis-color-accent);\n  }\n\n  .v-slider[data-range] .v-slider-fill {\n    inset-inline-start: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--start-fraction)\n    );\n    inline-size: calc((100% - var(--slider-thumb)) * (var(--end-fraction) - var(--start-fraction)));\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(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction) -\n        var(--slider-tick) / 2\n    );\n    inline-size: var(--slider-tick);\n    block-size: var(--slider-tick);\n    border-radius: var(--vectis-radius-full);\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  /* The two controls lie exactly on top of one another, so only their thumbs are allowed\n     to receive the pointer. Without that, the one on top would swallow every click and\n     the other thumb could never be grabbed. */\n  .v-slider-input {\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  /* With a single thumb there is nothing underneath to protect, so the whole control\n     takes the pointer again — which is what makes clicking the track jump the value\n     there and start dragging at once, natively and with no code at all. The accepted\n     side effect is that the thumb lights up when the pointer is anywhere over the\n     track. */\n  .v-slider:not([data-range]) .v-slider-input {\n    pointer-events: auto;\n    cursor: pointer;\n  }\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-full);\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-accent);\n    box-shadow: var(--vectis-shadow-xs);\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\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-full);\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-accent);\n    box-shadow: var(--vectis-shadow-xs);\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The thumb tints as the pointer rests on it or drags it. TRAP — the state is read on\n     the control and the thumb is then addressed, never the reverse: a state pseudo-class\n     written after the thumb's own pseudo-element is unreliable across browsers. */\n  .v-slider-input:hover:not(:disabled)::-webkit-slider-thumb,\n  .v-slider-input:active:not(:disabled)::-webkit-slider-thumb {\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-slider-input:hover:not(:disabled)::-moz-range-thumb,\n  .v-slider-input:active:not(:disabled)::-moz-range-thumb {\n    background: var(--vectis-color-accent-surface);\n  }\n\n  .v-slider-input:focus-visible {\n    outline: none;\n  }\n\n  .v-slider-input:focus-visible::-webkit-slider-thumb {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-slider-input:focus-visible::-moz-range-thumb {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* The bubble showing the value. It looks like a VTooltip but is placed by arithmetic\n     rather than anchored to the thumb: a native thumb is a pseudo-element, and the\n     browser's anchoring cannot attach anything to one. */\n  .v-slider-tooltip {\n    position: absolute;\n    inset-block-end: calc(100% + var(--vectis-space-2));\n    inset-inline-start: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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:has(.v-slider-input-start:active) .v-slider-tooltip-start,\n  .v-slider:has(.v-slider-input-start:focus-visible) .v-slider-tooltip-start,\n  .v-slider:has(.v-slider-input-end:active) .v-slider-tooltip-end,\n  .v-slider: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: var(--vectis-radius-sm);\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    --vectis-icon-size: var(--vectis-icon-size-md);\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: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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  .v-slider-field-start {\n    grid-area: field-start;\n  }\n\n  .v-slider-field-end {\n    grid-area: field-end;\n  }\n\n  .v-slider[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[data-orientation='vertical']:has(.v-slider-labels) {\n    grid-template-areas: 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-end) {\n    grid-template-areas: 'field-end' 'rail';\n    grid-template-columns: none;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-end):has(.v-slider-labels) {\n    grid-template-areas: 'field-end .' 'rail labels';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-start) {\n    grid-template-areas: 'field-end' 'rail' 'field-start';\n    grid-template-columns: none;\n  }\n\n  .v-slider[data-orientation='vertical']:has(.v-slider-field-start):has(.v-slider-labels) {\n    grid-template-areas: 'field-end .' 'rail labels' 'field-start .';\n    grid-template-columns: auto auto;\n  }\n\n  .v-slider[data-orientation='vertical'] .v-slider-rail {\n    inline-size: var(--slider-thumb);\n    block-size: var(--vectis-control-size-slider-length);\n  }\n\n  /* Only this inner box is turned upright, and that is the whole trick: the track, the\n     fill and the ticks are all placed with logical properties, so they follow the change\n     of axis with no rule written a second time — while the bubbles and the labels stay\n     outside that box, and therefore keep their text horizontal.\n\n     The direction is reversed with it so that the lowest value ends up at the bottom. */\n  .v-slider[data-orientation='vertical'] .v-slider-control {\n    writing-mode: vertical-lr;\n    direction: rtl;\n  }\n\n  .v-slider[data-orientation='vertical'] .v-slider-tooltip {\n    inset-block-end: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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[data-orientation='vertical'] .v-slider-labels {\n    align-self: stretch;\n    min-block-size: auto;\n  }\n\n  .v-slider[data-orientation='vertical'] .v-slider-label {\n    inset-block-start: auto;\n    inset-block-end: calc(\n      var(--slider-thumb) / 2 + (100% - var(--slider-thumb)) * var(--fill-fraction)\n    );\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  /* A disabled slider greys out through the colour tokens, the same ones VCheckbox and\n     VSwitch use, and never through opacity. */\n  .v-slider[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  .v-slider[data-disabled] .v-slider-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider[data-disabled] .v-slider-fill {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider[data-disabled] .v-slider-tick {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  /* A tick sitting on the greyed fill takes the light colour back, so that it stays\n     visible against it — the same inversion VCheckbox applies to its disabled tick. */\n  .v-slider[data-disabled] .v-slider-tick[data-filled] {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-slider[data-disabled] .v-slider-labels {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-slider[data-disabled] .v-slider-input {\n    cursor: not-allowed;\n  }\n\n  .v-slider[data-disabled] .v-slider-input::-webkit-slider-thumb {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-text-subtle);\n    box-shadow: none;\n    cursor: not-allowed;\n  }\n\n  .v-slider[data-disabled] .v-slider-input::-moz-range-thumb {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-text-subtle);\n    box-shadow: none;\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-slider-input::-webkit-slider-thumb {\n      transition: none;\n    }\n\n    .v-slider-input::-moz-range-thumb {\n      transition: none;\n    }\n\n    .v-slider-tooltip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VSnackbar/VSnackbar.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-snackbar-host{width:fit-content;bottom:var(--vectis-space-4);--banner-enter-y:var(--vectis-space-4);background:0 0;border:none;margin:0;padding:0;overflow:visible}.v-snackbar-host[data-placement=bottom-left]{left:var(--vectis-space-4)}.v-snackbar-host[data-placement=bottom-right]{right:var(--vectis-space-4)}.v-snackbar-host[data-placement=bottom-center]{margin-inline:auto;left:0;right:0}.v-snackbar-host{opacity:1;transition:opacity var(--vectis-duration-base) var(--vectis-ease-default), overlay var(--vectis-duration-base) allow-discrete, display var(--vectis-duration-base) allow-discrete}.v-snackbar-host:not(:popover-open){opacity:0}@starting-style{.v-snackbar-host:popover-open{opacity:0}}@media (prefers-reduced-motion:reduce){.v-snackbar-host{transition:none}}.v-snackbar{padding-block:var(--vectis-space-3);padding-inline:var(--vectis-space-4);min-inline-size:var(--vectis-control-size-snackbar-min);max-inline-size:min(var(--vectis-control-size-snackbar-max), calc(100vw - 2 * var(--vectis-space-4)));background:var(--tone-bg-solid);color:var(--tone-text-solid);align-items:center}.v-snackbar-icon{--vectis-icon-size:var(--vectis-icon-size-md)}.v-snackbar-message{overflow-wrap:anywhere;flex:1;min-width:0}.v-snackbar .v-snackbar-action[data-tone]{--tone-text-tinted:currentcolor;--tone-bg-soft:color-mix(in oklab, currentcolor, transparent 85%)}.v-snackbar-action{--snackbar-action-height:var(--vectis-control-height-sm);margin-block:calc((var(--banner-line) - var(--snackbar-action-height)) / 2);margin-inline-end:calc(-1 * var(--vectis-space-2))}}