vectis-ui 0.11.0 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"VCarousel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VCarousel/VCarousel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @ssr @core\n/**\n * Native scroll snapping and CSS timelines drive slides. JavaScript supplies page measurements,\n * keyboard controls, autoplay and effects where browser support is absent.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  nextTick,\n  ref,\n  provide,\n  watch,\n  watchEffect,\n} from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { arrow_downward_alt as arrowDownwardAltIcon } from '../VIcon/icons/arrow_downward_alt'\nimport { arrow_left_alt as arrowLeftAltIcon } from '../VIcon/icons/arrow_left_alt'\nimport { arrow_right_alt as arrowRightAltIcon } from '../VIcon/icons/arrow_right_alt'\nimport { arrow_upward_alt as arrowUpwardAltIcon } from '../VIcon/icons/arrow_upward_alt'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { carouselKey } from './context'\n\nimport { cssSize } from '../../utils/css'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { isKeyboardFocus } from '../../utils/focus'\nimport { clamp } from '../../utils/number'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\n\n/** How one slide gives way to the next: sliding, fading in place, or scaling down. */\nexport type CarouselEffect = 'slide' | 'fade' | 'scale'\n/** Whether the carousel scrolls across the page or down it. */\nexport type CarouselOrientation = 'horizontal' | 'vertical'\n\n/** What the `#controls` slot receives. */\nexport interface CarouselControlsSlotProps {\n  /** Moves one position back. */\n  previous: () => void\n  /** Moves one position forward. */\n  next: () => void\n  /** Whether there is no position before this one (always false when looping). */\n  atStart: boolean\n  /** Whether there is no position after this one (always false when looping). */\n  atEnd: boolean\n  /** The current position, from 0. */\n  index: number\n  /** How many slides there are. */\n  count: number\n  /** How many positions the carousel can actually rest on, which is usually fewer. */\n  pageCount: number\n  /** Which way it scrolls: a bar of your own cannot choose its icons without knowing. */\n  orientation: CarouselOrientation\n}\n\n/** What the `#indicators` slot receives. */\nexport interface CarouselIndicatorsSlotProps {\n  /** The current position, from 0. */\n  index: number\n  /** How many slides there are. */\n  count: number\n  /** How many positions there are: render one control per position, not per slide. */\n  pageCount: number\n  /** Moves to a position. */\n  goTo: (index: number) => void\n  /** Which way the carousel scrolls. */\n  orientation: CarouselOrientation\n}\n\n/** What the `#indicator` slot receives. */\nexport interface CarouselIndicatorSlotProps {\n  /** The position this dot stands for, from 0. */\n  index: number\n  /** Whether it is the current one. */\n  active: boolean\n}\n/** Where the position dots go: nowhere, over the slides, or after them. */\nexport type CarouselIndicators = false | 'inside' | 'outside'\n/** Where the previous and next buttons go: nowhere, over the slides, or beside them. */\nexport type CarouselControls = false | 'inside' | 'outside'\n/** When those buttons are visible. */\nexport type CarouselControlsVisibility = 'always' | 'hover'\n\ninterface CarouselProps {\n  /**\n   * How many slides may be visible at once. It is a MAXIMUM and not a target: the floor below\n   * decides how many actually fit, which makes the whole thing responsive without a single\n   * breakpoint.\n   */\n  itemsPerView?: number\n  /**\n   * How small a slide is allowed to get. Once an equal share would fall below this, fewer\n   * slides fit and the carousel simply scrolls further instead.\n   */\n  itemMinSize?: number | string\n  /** How much of the NEXT slide is left showing, as a hint that there is more. */\n  peek?: number | string\n  /** The space between two slides. */\n  gap?: number | string\n  /** Whether the carousel scrolls across the page or down it. */\n  orientation?: CarouselOrientation\n  /**\n   * How one slide gives way to the next, driven by the scroll itself. Asked for otherwise, it\n   * falls back to sliding rather than degrading.\n   */\n  effect?: CarouselEffect\n  /** The height of the visible area. */\n  height?: number | string\n  /**\n   * Whether the carousel comes back round: past the last position it returns to the first, and\n   * before the first it goes to the last. Off by default, which stops it at both ends.\n   */\n  loop?: boolean\n  /**\n   * Whether a move of more than one page keeps the whole scroll instead of going straight\n   * there. Off by default: a dot five pages away lands at once and plays the transition once,\n   * on arrival.\n   */\n  noJump?: boolean\n  /**\n   * How long each slide is shown before the next one, in milliseconds; zero means it does not\n   * advance by itself.\n   */\n  autoplay?: number\n  /**\n   * Where the previous and next buttons go: over the slides, beside them, or nowhere. Placed\n   * beside, they sit at the ends of the scrolling axis and their room is reserved as padding,\n   * so the component's footprint is unchanged and the slides narrow instead.\n   */\n  controls?: CarouselControls\n  /**\n   * Where the position dots go: over the slides, after them, or nowhere. After them means\n   * below when the carousel scrolls across the page, and beside it when it scrolls down.\n   */\n  indicators?: CarouselIndicators\n  /**\n   * Whether those buttons are always visible, or appear when the pointer is over the carousel\n   * or the keyboard focus is inside it.\n   */\n  controlsVisibility?: CarouselControlsVisibility\n  /** The icon of the previous button. It follows the orientation by default. */\n  prevIcon?: IconSource\n  /** The icon of the next button. It follows the orientation by default. */\n  nextIcon?: IconSource\n  /** What the previous button does, in words. It falls back to the dictionary. */\n  prevLabel?: string\n  /** What the next button does, in words. It falls back to the dictionary. */\n  nextLabel?: string\n  /** What screen readers announce for the carousel as a whole. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CarouselProps>(), {\n  itemsPerView: 1,\n  itemMinSize: undefined,\n  peek: undefined,\n  gap: undefined,\n  orientation: 'horizontal',\n  effect: 'slide',\n  height: undefined,\n  loop: false,\n  noJump: false,\n  autoplay: 0,\n  controls: 'inside',\n  indicators: 'outside',\n  controlsVisibility: 'always',\n  prevIcon: undefined,\n  nextIcon: undefined,\n  prevLabel: undefined,\n  nextLabel: undefined,\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The slides. */\n  default(): unknown\n  controls?(props: CarouselControlsSlotProps): unknown\n  /** Replaces the whole bar of dots. */\n  indicators?(props: CarouselIndicatorsSlotProps): unknown\n  /**\n   * Replaces what is drawn INSIDE one dot. The button itself, and everything that makes it\n   * announce and behave correctly, stays the design system's.\n   */\n  indicator?(props: CarouselIndicatorSlotProps): unknown\n}>()\n\n/**\n * Which slide is current: the first one fully visible when several fit at once, which is also\n * the position the carousel has come to rest on.\n */\nconst model = defineModel<number>({ default: 0 })\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.carousel.label)\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? m.value.carousel.previous)\nconst resolvedNextLabel = computed(() => props.nextLabel ?? m.value.carousel.next)\nconst isVertical = computed(() => props.orientation === 'vertical')\n/* Arrows with a shaft rather than the chevrons VTabs and VPagination use, and the\n   difference is the surface they sit on: those two put their control in a dense bar,\n   where a chevron is exactly the right weight, while this pair is a round button laid\n   over whatever media the slides carry. A hairline chevron dissolves at the centre of\n   a 40px disc; a shaft fills it and reads at a glance. */\nconst resolvedPrevIcon = computed(\n  () => props.prevIcon ?? (isVertical.value ? arrowUpwardAltIcon : arrowLeftAltIcon),\n)\nconst resolvedNextIcon = computed(\n  () => props.nextIcon ?? (isVertical.value ? arrowDownwardAltIcon : arrowRightAltIcon),\n)\n\n// @ssr\n/*\n * The count comes from the slot's VNODES, never from a registry the items feed at mount: a\n * registry renders 0 slides on the server and N on the client; a guaranteed hydration mismatch,\n * and the very reason VTabs derives `hasPanels` from `slots` too. `cloneVNode` is then what\n * carries each slide its position: `setup()` order is deterministic on the first render but not\n * on a later insertion, so a self-incrementing counter would drift.\n */\nconst slides = useSlotNodes()\nconst count = computed(() => slides.value.length)\n\n// A functional component: it renders already-captured VNodes, which\n// <component :is> cannot do (it expects a definition). The VAvatarGroup idiom.\nconst Slides = () =>\n  slides.value.map((node, index) => cloneVNode(node, { index, key: node.key ?? index }))\n\n/*\n * A peek of ZERO is no peek: the sizing formula collapses exactly to the peekless one, so\n * `peek: 0` (or `'0px'`) must not cost the effect. A length `parseFloat` cannot read; a\n * `calc()`; is taken as a real strip, the side that never piles slides up.\n */\nconst hasPeek = computed(\n  () => props.peek !== undefined && Number.parseFloat(String(props.peek)) !== 0,\n)\nconst resolvedEffect = computed<CarouselEffect>(() =>\n  props.effect === 'fade' && (props.itemsPerView > 1 || hasPeek.value) ? 'slide' : props.effect,\n)\n\nprovide(carouselKey, {\n  get slideRoleDescription() {\n    return m.value.carousel.slideRoleDescription\n  },\n  slideLabel: (index: number) => m.value.carousel.slide(index + 1, count.value),\n})\n\n/*\n * The jump one-shot, which replaces the travel whenever the model moves by more than one page\n * (see `scrollToIndex`). Two pieces of state, both read from the sheet: `jumpPhase` alternates\n * between two IDENTICAL keyframe names, and that is the whole reason there are two.\n */\nconst jumpPhase = ref<'a' | 'b'>()\nconst jumpDirection = ref(1)\n\n/*\n * The one-shot is taken off once it has played. Left on the root, it would play again on every\n * slide mounted LATER (a lazy page, a re-keyed list): an animation starts when its element is\n * created with a name, and in `fade` the newcomers would flash in from zero.\n */\nfunction onAnimationEnd(event: AnimationEvent) {\n  if (!event.animationName.startsWith('v-carousel-jump-')) return\n  const owner = (event.target as Element | null)?.closest('.v-carousel')\n  if (owner === event.currentTarget) jumpPhase.value = undefined\n}\n\nconst rootStyle = computed<StyleValue>(() => ({\n  '--carousel-per-view': String(props.itemsPerView),\n  '--carousel-item-min': cssSize(props.itemMinSize),\n  '--carousel-peek': cssSize(props.peek),\n  '--carousel-gap': cssSize(props.gap),\n  '--carousel-viewport-block': cssSize(props.height),\n  '--carousel-jump-dir': String(jumpDirection.value),\n}))\n\nconst viewportEl = ref<HTMLElement | null>(null)\n\n/*\n * Raised while a programmatic scroll is in flight, so the read-back does not fight the request:\n * without it, asking for slide 4 is overwritten by 1, 2 and 3 as they pass under the port. A\n * `ref` and not a plain `let`, because LOWERING it must be able to re-run the sync.\n */\nconst settling = ref(false)\n\n/*\n * Lowering the guard alone hands that stale index to the watcher, which writes it while\n * `readBack` suppresses the correcting scroll: the dot then sits one page ahead, for good. It\n * is the CALL that removes the race, not its position; the sync watcher is a `pre` one, so both\n * writes land in the same flush and it runs once on the final values.\n */\nconst onScrollEnd = () => {\n  const port = viewportEl.value\n  if (port) measure(port)\n  settling.value = false\n}\n\n/*\n * `scrollToIndex`'s \"already there\" test does not cover it: that holds only at rest, and\n * mid-gesture the delta is real. Nothing needs writing anyway; the scroller is already where\n * the read-back read it.\n */\nlet readBack = false\n\n/**\n * How far slide `index`'s start edge sits from the port's, right now. `undefined` when\n * the slide is gone, which the deferred correction below has to ask again about: it runs\n * a frame later, and a consumer is free to have changed the slides in between.\n */\nfunction deltaTo(port: HTMLElement, index: number) {\n  const slide = port.querySelector<HTMLElement>(`:scope > [data-carousel-index='${index}']`)\n  if (!slide) return\n  const target = slide.getBoundingClientRect()\n  // The VIEWPORT's rect, not the stage's: every DOM read in this component is\n  // viewport-scoped, and the `outside` gutter is padding on the root, so nothing here\n  // has to know about it.\n  const origin = port.getBoundingClientRect()\n  return { left: target.left - origin.left, top: target.top - origin.top }\n}\n\n/** Under a pixel on both axes is the scroller already being where it was asked to go. */\nconst arrived = (delta: { left: number; top: number }) =>\n  Math.abs(delta.left) < 1 && Math.abs(delta.top) < 1\n\n/**\n * Writes the DOM from the model. A move of MORE than one is a JUMP: it scrolls `instant` and\n * plays a one-shot instead.\n */\nfunction scrollToIndex(index: number, from = index) {\n  const port = viewportEl.value\n  if (!port) return\n  const delta = deltaTo(port, index)\n  if (!delta) return\n  const { left, top } = delta\n  /*\n   * Already there; which a model change coming FROM the read-back looks like. Arming the guard\n   * here would be the other way to strand it: no movement means no `scrollend` to lower it\n   * again.\n   */\n  if (arrived(delta)) return\n\n  // `noJump` cancels the one-shot along with the cut, and has to: played over a travel\n  // still in flight it would hold `fade`'s opacity at its own value for 200ms while the\n  // scroller was several slides from where the animation says it has arrived.\n  const jump = !props.noJump && Math.abs(index - from) > 1\n  /*\n   * Armed after the guards, so a jump that scrolls nothing animates nothing; and armed here\n   * rather than in the watcher because the flush that carries these two writes to the DOM is a\n   * microtask, hence still ahead of the paint that shows the new position. Set them a frame\n   * later and `fade` flashes its destination at full opacity before dropping to zero to fade it\n   * back in.\n   */\n  if (jump) {\n    jumpDirection.value = index > from ? 1 : -1\n    jumpPhase.value = jumpPhase.value === 'a' ? 'b' : 'a'\n  }\n  settling.value = true\n  port.scrollBy?.(jump ? { left, top, behavior: 'instant' } : { left, top })\n\n  /*\n   * A jump measures once more, a frame later, and corrects. A relative delta read while another\n   * scroll is in flight is already stale: a smooth scroll is driven off the main thread, so the\n   * rects above lag the position the delta lands on by a frame or two, and `instant` then\n   * freezes the error in; the browser does not re-snap after an explicit programmatic scroll.\n   */\n  if (jump)\n    requestAnimationFrame(() => {\n      const again = deltaTo(port, index)\n      if (again && !arrived(again)) port.scrollBy?.({ ...again, behavior: 'instant' })\n    })\n}\n\nwatch(model, (index, previous) => {\n  // The guard is what stops the two directions chaining: without it the model write the\n  // read-back has just made comes straight back as a scroll, fighting the finger mid-drag.\n  // See the flag's own declaration for why `scrollToIndex`'s \"already there\" test does not\n  // cover it.\n  if (readBack) return\n  // The watcher's own previous value and not `observedIndex`: it is the last COMMITTED page,\n  // defined before the first measurement and immune to a reading in flight.\n  void nextTick(() => scrollToIndex(index, previous))\n})\n\nconst observedIndex = ref<number>()\nconst measuredPages = ref<number>()\n\n/** Slack, in pixels, on every comparison below. */\nconst SLACK = 2\n\n/*\n * The slides are the viewport's children, never its descendants. A carousel placed in a slide\n * carries the same attribute on its own slides, and a descendant query then reads the inner\n * slide 0 as the outer slide 1: the step measures 0, the page count and the read-back freeze,\n * and \"next\" scrolls to the inner slide.\n */\nconst SLIDES = ':scope > [data-carousel-index]'\n\n/**\n * Read slide positions directly: IntersectionObserver reports threshold crossings, so peek and\n * fractional layouts can leave ratios stale throughout a backward scroll.\n */\nfunction measure(port: HTMLElement) {\n  const boxes = port.querySelectorAll<HTMLElement>(SLIDES)\n  const first = boxes[0]?.getBoundingClientRect()\n  const second = boxes[1]?.getBoundingClientRect()\n  const last = boxes[boxes.length - 1]?.getBoundingClientRect()\n  if (!first || !second || !last) return\n  const origin = port.getBoundingClientRect()\n  const vertical = isVertical.value\n  const step = vertical ? Math.abs(second.top - first.top) : Math.abs(second.left - first.left)\n  // No layout at all (jsdom, a display:none ancestor). Writing a 0 here would drag\n  // every clamp down with it; the prop-derived fallback stays the answer until there\n  // IS a layout.\n  if (step <= 0) return\n  // How far the scroller has travelled: the first slide's start edge has left the\n  // port's by exactly that much.\n  const offset = vertical ? Math.abs(first.top - origin.top) : Math.abs(first.left - origin.left)\n  // Outer edge to outer edge, picked by comparison rather than by index: in RTL the last\n  // slide is the LEFTMOST box, so naming the sides would need a direction test.\n  const span = vertical\n    ? Math.max(first.bottom, last.bottom) - Math.min(first.top, last.top)\n    : Math.max(first.right, last.right) - Math.min(first.left, last.left)\n  const scrollable = span - (vertical ? port.clientHeight : port.clientWidth)\n\n  const starts = Math.floor((scrollable + SLACK) / step)\n  const residual = scrollable - starts * step\n  const pages = starts + 1 + (residual > SLACK ? 1 : 0)\n  // The end of the track is recognized by POSITION and not by rounding: it is the one page that\n  // is not a multiple of `step`, so rounding would name the start position it falls short of;\n  // the page the user has just left.\n  const page = offset >= scrollable - SLACK ? pages - 1 : Math.round(offset / step)\n\n  measuredPages.value = pages\n  /*\n   * Clamped against `pageCount` and not against the local `pages`, because that is the one\n   * which also caps at `count`, and the write above is what makes it fresh. A slide LARGER than\n   * the port is the case that needs it: `starts` already reaches the last slide there and the\n   * leftover still mints a page, so the raw answer names an index no slide carries;\n   * `scrollToIndex` would then silently do nothing and `settling` would never come back down.\n   */\n  observedIndex.value = clamp(page, 0, pageCount.value - 1)\n}\n\n// @ssr @fallback\n/** SSR, jsdom and the first paint. */\nconst pageCount = computed(() =>\n  count.value === 0\n    ? 0\n    : clamp(measuredPages.value ?? count.value - props.itemsPerView + 1, 1, count.value),\n)\n\n/*\n * Re-arm observers when slide keys change, even if the count stays equal: Vue replaces those\n * elements and observers on detached nodes stop reporting.\n */\nconst slideKeys = computed(() =>\n  JSON.stringify(slides.value.map((node, index) => String(node.key ?? index))),\n)\n\n/*\n * `1` must stay in `threshold`. Nothing READS a ratio, but the buckets still decide WHEN this\n * callback runs, and this observer is what makes the component cover a ROOT RESIZE; which an\n * IntersectionObserver does not do on its own, queueing an entry only on a threshold crossing.\n */\n/*\n * Started in `onMounted`, and so are the two watches further down that read the page count. A\n * watch evaluates its source at once, and every one of these reaches the slot through `slides`:\n * at setup that is a slot call outside the render, which Vue warns about for every slot passed\n * as a function (a render function, JSX).\n */\nonMounted(() =>\n  watch(\n    [viewportEl, slideKeys],\n    ([port], _previous, onCleanup) => {\n      // @fallback\n      // IntersectionObserver exists neither in SSR nor in jsdom: `scrollend` still\n      // measures there, and the whole loop is verified in the browser (play functions).\n      if (!port || typeof IntersectionObserver === 'undefined') return\n      const observer = new IntersectionObserver(\n        () => {\n          measure(port)\n          // The request has arrived, so there is nothing left to protect. This is also the only\n          // exit when the browser clamps a programmatic scroll to no movement at all;\n          // `scrollend` never fires there.\n          if (observedIndex.value === model.value) settling.value = false\n        },\n        { root: port, threshold: [0, 0.25, 0.5, 0.75, 1] },\n      )\n      for (const slide of port.querySelectorAll(SLIDES)) observer.observe(slide)\n      onCleanup(() => observer.disconnect())\n    },\n    { flush: 'post', immediate: true },\n  ),\n)\n\n// Watching `settling` as well as the reading is the whole point of making it a ref:\n// whichever of the two lands last, the sync runs.\nwatch([observedIndex, settling], () => {\n  const index = observedIndex.value\n  if (settling.value || index === undefined || index === model.value) return\n  readBack = true\n  model.value = index\n  /*\n   * The pre-flush watcher runs inside the flush this write schedules, a `nextTick` callback\n   * only after it; so it has read the flag by the time this lands.\n   */\n  void nextTick(() => (readBack = false))\n})\n\n/*\n * The `loop` prop, resolved once against what there is to loop through, because below two\n * positions it is not merely pointless but wrong twice over: the modulo would divide by zero on\n * an empty carousel, and on a single page it would hand the reader two enabled buttons that\n * move nothing; where the disabled pair says the truth. So the prop asks, and this is the\n * answer every consumer below reads.\n */\nconst looping = computed(() => props.loop && pageCount.value > 1)\n\n/*\n * Pure derivations, and they may be only because `pageCount` never over-counts: index 0 is\n * always reachable and so is `pageCount - 1`, by construction. That is the load-bearing\n * premise; an over-count makes `atEnd` false at the real end, and autoplay then re-arms its\n * timer on every bounce, forever.\n */\nconst atStart = computed(() => !looping.value && model.value <= 0)\nconst atEnd = computed(() => !looping.value && model.value >= pageCount.value - 1)\n\nfunction goTo(index: number) {\n  const pages = pageCount.value\n  /*\n   * The DOUBLE modulo. JS `%` keeps the sign of the dividend, so `previous()` at 0 gives\n   * `-1 % 5 === -1`; a single one hands the model an index no slide carries, `scrollToIndex`\n   * finds nothing, and the carousel stops dead with no error anywhere.\n   */\n  model.value = looping.value ? ((index % pages) + pages) % pages : clamp(index, 0, pages - 1)\n}\n// @core\n/*\n * Out of range, no dot is current, the live region announces a slide that does not exist, and\n * past the last page `settling` never comes back down: the browser clamps the scroll to no\n * movement, so no `scrollend` arrives to lower it.\n */\nonMounted(() =>\n  watch(\n    [model, pageCount],\n    ([index, pages]) => {\n      if (pages === 0) return\n      const bounded = Number.isFinite(index) ? clamp(Math.round(index), 0, pages - 1) : 0\n      if (bounded !== index) model.value = bounded\n    },\n    { immediate: true },\n  ),\n)\n\nconst previous = () => goTo(model.value - 1)\nconst next = () => goTo(model.value + 1)\n\n// @keyboard\n/** The one keyboard concession, and it is not the one it looks like. */\nfunction onKeydown(event: KeyboardEvent) {\n  const port = viewportEl.value\n  if (!port || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return\n  // A key typed INSIDE a slide belongs to what holds the focus there: a caret in a field,\n  // a nested VTabs or VSlider, another carousel. Only the viewport itself is ours.\n  if (event.target !== event.currentTarget || event.defaultPrevented) return\n\n  if (event.key === 'Home' || event.key === 'End') {\n    event.preventDefault()\n    goTo(event.key === 'Home' ? 0 : pageCount.value - 1)\n    return\n  }\n\n  // Only the axis the carousel actually scrolls: the other one must stay with the browser,\n  // which still scrolls a slide taller than the viewport.\n  const steps: Record<string, number | undefined> = isVertical.value\n    ? { ArrowUp: -1, ArrowDown: 1 }\n    : { ArrowLeft: -1, ArrowRight: 1 }\n  const step = steps[event.key]\n  if (step === undefined) return\n  event.preventDefault()\n  // The inline arrows are physical, hence inverted in RTL (the `arrowNav` rule); the block axis\n  // does not flip.\n  const rtl = !isVertical.value && isRtl(port)\n  goTo(model.value + (rtl ? -step : step))\n}\n\n// @a11y\n/*\n * A control that disables itself under the keyboard focus would drop it on `<body>`. It is\n * handed to the opposite control, or to the viewport when both ends are reached (a single\n * page).\n */\nonMounted(() =>\n  watch([atStart, atEnd], ([start, end], [wasStart, wasEnd]) => {\n    const port = viewportEl.value\n    const stage = port?.parentElement\n    if (!port || !stage) return\n    const [back, forward] = stage.querySelectorAll<HTMLElement>(\n      ':scope > .v-carousel-controls > .v-carousel-control',\n    )\n    const active = document.activeElement\n    if (start && !wasStart && active === back) (end ? port : forward)?.focus()\n    else if (end && !wasEnd && active === forward) (start ? port : back)?.focus()\n  }),\n)\n\nconst { start, cancel } = useTimer()\nconst hovered = ref(false)\n// @a11y\n// KEYBOARD focus, not any focus, hence `isKeyboardFocus` rather than a bare `focusin` flag.\n// Clicking `next` leaves the focus on it, and a plain flag would then pause the rotation for\n// good; the user has to click outside the carousel to get it going again, which is not a pause,\n// it is a trap.\nconst focused = ref(false)\n\nconst reducedMotion = ref(false)\n\n/*\n * `autoplay > 0` is a GUARD, not a default: `useTimer` runs a delay ≤ 0 synchronously (the DS\n * convention), and a synchronous callback bumping the model would recurse until the stack\n * blows. It is ALSO the consumer's stop control; the prop is reactive, so binding it to `0`\n * cancels the timer on the spot, which a pause button of your own would drive.\n */\nconst rotating = computed(\n  () =>\n    props.autoplay > 0 && !hovered.value && !focused.value && !reducedMotion.value && !atEnd.value,\n)\n\n// `immediate`: without it the first delay would only be armed by a LATER change,\n// so an autoplay that nobody touches would never advance at all. Started on MOUNT: a\n// server render never unmounts, so a timer armed there would outlive the request and\n// fire `next` on a dead instance.\nonMounted(() =>\n  watch(\n    [rotating, model],\n    () => {\n      cancel()\n      if (rotating.value) start(next, props.autoplay)\n    },\n    { immediate: true },\n  ),\n)\n\n// @a11y @ssr\n/*\n * The DS's second browser-preference read (after VHotkeys' `navigator`), and it\n * is not redundant with the CSS media query: that one stops a transition, never a\n * TIMER, and WCAG 2.2.2 is about the content moving at all. Client only, listener\n * released on unmount.\n */\nlet releaseMotionQuery: (() => void) | undefined\nonMounted(() => {\n  const query = window.matchMedia?.('(prefers-reduced-motion: reduce)')\n  if (!query) return\n  const sync = () => (reducedMotion.value = query.matches)\n  sync()\n  query.addEventListener('change', sync)\n  releaseMotionQuery = () => query.removeEventListener('change', sync)\n})\nonBeforeUnmount(() => releaseMotionQuery?.())\n\n// @a11y\n/*\n * Announced only at rest: narrating an auto-rotating carousel floods the screen reader, so the\n * region is `aria-live=\"off\"` while it rotates (APG). The TEXT always follows the model:\n * emptied while rotating instead, a hover that pauses the rotation would write it back and be\n * announced with nothing having moved.\n */\nconst liveMessage = computed(() =>\n  count.value === 0 ? '' : m.value.carousel.slide(model.value + 1, count.value),\n)\n\n// @devwarn\nif (isDev) {\n  // Once per instance each: the loop warning names the very binding it recommends, and\n  // that binding re-runs this effect on every pause and resume.\n  const warned = new Set<string>()\n  const warn = (id: string, message: string) => {\n    if (warned.has(id)) return\n    warned.add(id)\n    console.warn(message)\n  }\n  watchEffect(() => {\n    if (props.effect !== resolvedEffect.value)\n      warn(\n        'fade',\n        props.itemsPerView > 1\n          ? '[VCarousel] `fade` needs one item per view: over a single view timeline every slide is counter-translated onto the same spot, so they would pile up. Downgraded to `slide`.'\n          : '[VCarousel] `fade` and `peek` are mutually exclusive: the counter-translate parks every slide over the viewport, so the peeked strip is covered. Downgraded to `slide`.',\n      )\n    /*\n     * What it costs is the exemption the component leans on everywhere else: content that moves\n     * on its own needs a way to stop it, and the five-second grace only ever applied because\n     * the rotation ENDED. Looping, it does not, and hover and focus leave a touch user with\n     * nothing.\n     */\n    if (props.loop && props.autoplay > 0)\n      warn(\n        'loop',\n        '[VCarousel] `loop` with `autoplay` rotates for as long as the page is open, so WCAG 2.2.2 asks for a way to stop it. Bind `autoplay` to 0 from a control of your own.',\n      )\n    if (isVertical.value && props.height === undefined)\n      warn(\n        'height',\n        '[VCarousel] a vertical carousel needs a `height`: a percentage flex-basis has no definite reference on the block axis. Falling back to --vectis-control-size-carousel-block.',\n      )\n    if (!Number.isInteger(props.itemsPerView) || props.itemsPerView < 1)\n      warn(\n        'itemsPerView',\n        `[VCarousel] \\`itemsPerView\\` must be an integer ≥ 1, got ${props.itemsPerView}.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    class=\"v-carousel\"\n    role=\"region\"\n    :aria-roledescription=\"m.carousel.roleDescription\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-orientation=\"orientation\"\n    :data-effect=\"resolvedEffect\"\n    :data-jump=\"jumpPhase\"\n    :data-controls=\"controls || undefined\"\n    :data-indicators=\"indicators || undefined\"\n    :data-controls-visibility=\"controlsVisibility\"\n    @pointerenter=\"hovered = true\"\n    @pointerleave=\"hovered = false\"\n    @focusin=\"focused = isKeyboardFocus($event.target)\"\n    @focusout=\"focused = false\"\n    @animationend=\"onAnimationEnd\"\n  >\n    <!--\n      The stage holds the viewport and the controls; and NOTHING else. The indicator bar is a\n      sibling on purpose: inside this box it would join the height the controls are centred on,\n      and the pair would sit visibly below the middle of the slides.\n    -->\n    <div class=\"v-carousel-stage\">\n      <!--\n        It is also what makes the track the keyboard target of `onKeydown`; the browser's own\n        arrow scrolling is real, but mandatory snapping undoes it, see there. A focusable box\n        with an aria-label must carry a role, or axe reports `aria-prohibited-attr`.\n      -->\n      <div\n        ref=\"viewportEl\"\n        class=\"v-carousel-viewport\"\n        role=\"group\"\n        tabindex=\"0\"\n        :aria-label=\"m.carousel.slides\"\n        @keydown=\"onKeydown\"\n        @scrollend=\"onScrollEnd\"\n      >\n        <component :is=\"Slides\" />\n      </div>\n\n      <slot\n        name=\"controls\"\n        :previous=\"previous\"\n        :next=\"next\"\n        :at-start=\"atStart\"\n        :at-end=\"atEnd\"\n        :index=\"model\"\n        :count=\"count\"\n        :page-count=\"pageCount\"\n        :orientation=\"orientation\"\n      >\n        <div v-if=\"controls\" class=\"v-carousel-controls\">\n          <VIconButton\n            class=\"v-carousel-control\"\n            :label=\"resolvedPrevLabel\"\n            variant=\"ghost\"\n            tone=\"neutral\"\n            shape=\"circular\"\n            elevated\n            :disabled=\"atStart\"\n            @click=\"previous\"\n          >\n            <VIcon v-bind=\"iconProps(resolvedPrevIcon)\" :mirrored=\"!isVertical\" />\n          </VIconButton>\n          <VIconButton\n            class=\"v-carousel-control\"\n            :label=\"resolvedNextLabel\"\n            variant=\"ghost\"\n            tone=\"neutral\"\n            shape=\"circular\"\n            elevated\n            :disabled=\"atEnd\"\n            @click=\"next\"\n          >\n            <VIcon v-bind=\"iconProps(resolvedNextIcon)\" :mirrored=\"!isVertical\" />\n          </VIconButton>\n        </div>\n      </slot>\n    </div>\n\n    <slot\n      name=\"indicators\"\n      :index=\"model\"\n      :count=\"count\"\n      :page-count=\"pageCount\"\n      :go-to=\"goTo\"\n      :orientation=\"orientation\"\n    >\n      <div\n        v-if=\"indicators\"\n        class=\"v-carousel-indicators\"\n        role=\"group\"\n        :aria-label=\"m.carousel.indicators\"\n      >\n        <!--\n          One control per REACHABLE position, not per slide: with 6 slides three at a time the\n          scroller can only lead with 1 to 4, and dots 5 and 6 would scroll nowhere. With a\n          `peek` the last of them parks the scroller at the END of the track rather than on a\n          slide's start edge.\n        -->\n        <button\n          v-for=\"index in pageCount\"\n          :key=\"index\"\n          type=\"button\"\n          class=\"v-carousel-indicator\"\n          :aria-label=\"m.carousel.slide(index, count)\"\n          :aria-current=\"index - 1 === model ? 'true' : undefined\"\n          @click=\"goTo(index - 1)\"\n        >\n          <slot name=\"indicator\" :index=\"index - 1\" :active=\"index - 1 === model\">\n            <span class=\"v-carousel-dot\" />\n          </slot>\n        </button>\n      </div>\n    </slot>\n\n    <span class=\"v-visually-hidden\" role=\"status\" :aria-live=\"rotating ? 'off' : 'polite'\">{{\n      liveMessage\n    }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-carousel {\n    /*\n     * Geometry vector and direction sign. The effect keyframes are written on them once instead\n     * of being duplicated per orientation and per direction: `translate` is physical, and\n     * `calc(0 * -100%)` is a valid zero.\n     */\n    --carousel-axis-x: 1;\n    --carousel-axis-y: 0;\n    --carousel-dir: 1;\n\n    /*\n     * Effect constants: private, non-contractual geometry with no theming story,\n     * hence no --vectis-* token (the qualification rule still applies).\n     */\n    --carousel-scale-min: 0.75;\n\n    /*\n     * The jump one-shot's starting point, NEUTRAL on all three axes here: each effect below\n     * turns on the one dimension it owns, which lets a single pair of keyframes serve `slide`,\n     * `fade` and `scale` instead of one block each. The direction sign is written from the\n     * script, alongside the axis vector above.\n     */\n    --carousel-jump-opacity: 1;\n    --carousel-jump-scale: 1;\n    --carousel-jump-shift: 0%;\n    --carousel-jump-dir: 1;\n\n    /*\n     * Both names are re-set on every root, to `none`, because a custom property inherits: a\n     * carousel placed inside another's slide would otherwise play its host's effect and replay\n     * its host's jump. Each effect and each jump phase below sets them again on the root that\n     * carries the attribute.\n     */\n    --carousel-effect-name: none;\n    --carousel-jump-name: none;\n\n    --carousel-gap: var(--vectis-space-3);\n    --carousel-item-min: 0px;\n    --carousel-peek: 0px;\n    --carousel-viewport-block: var(--vectis-control-size-carousel-block);\n    /*\n     * Room reserved on the SCROLL axis for the `outside` controls. `0px` and never `0`: it\n     * feeds a `padding-*`, where a unitless zero is invalid; the `--carousel-peek` precedent\n     * three lines up.\n     */\n    --carousel-outset: 0px;\n\n    /*\n     * Positioning context of the `inside` indicator bar, which is deliberately not a child of\n     * the stage; see .v-carousel-stage.\n     */\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * That is what lets every `inside` inset below be written against the stage's edges with no\n   * compensation: an absolutely positioned box resolves against the PADDING box, the edges\n   * those insets pin to are on the cross axis (which this never touches), and the axis they\n   * centre on stays symmetric. Make this one-sided and the `inside` indicator bar goes\n   * off-centre with nothing to report it.\n   */\n  .v-carousel[data-orientation='horizontal'] {\n    padding-inline: var(--carousel-outset);\n  }\n\n  .v-carousel[data-orientation='vertical'] {\n    --carousel-axis-x: 0;\n    --carousel-axis-y: 1;\n\n    flex-direction: row;\n    padding-block: var(--carousel-outset);\n  }\n\n  /*\n   * `control-height-md` is the size the two VIconButtons actually render at: they pass no\n   * `size`, so they take VIconButton's own `md` default and their width is `--control-height`.\n   * The gutter is that button plus one gap, so the pair lands flush inside the root's border\n   * box and never covers a slide.\n   */\n  .v-carousel[data-controls='outside']:has(> .v-carousel-stage > .v-carousel-controls) {\n    --carousel-outset: calc(var(--vectis-control-height-md) + var(--vectis-space-2));\n  }\n\n  /*\n   * Scoped to `horizontal`: the block axis does not flip. `:dir()` and not a `[dir]` ancestor,\n   * so an LTR subtree inside an RTL page reads its own direction.\n   */\n  .v-carousel[data-orientation='horizontal']:dir(rtl) {\n    --carousel-dir: -1;\n  }\n\n  /*\n   * Positioning context of the controls; and of NOTHING else. The indicator bar is a SIBLING on\n   * purpose: inside this box it would join the height the controls are centred on, and an\n   * `inside` pair would sit visibly below the middle of the slides.\n   */\n  .v-carousel-stage {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n    min-block-size: 0;\n  }\n\n  /*\n   * Vertical only. The root is a `row` there, so the inline axis is the flex MAIN axis and the\n   * stage would shrink-wrap the widest slide's content; an `inside` bar's `inset-inline-end`\n   * would then land on the ROOT's edge instead of the slides'.\n   */\n  .v-carousel[data-orientation='vertical'] > .v-carousel-stage {\n    flex-grow: 1;\n  }\n\n  .v-carousel-viewport {\n    display: flex;\n    gap: var(--carousel-gap);\n    /*\n     * `auto` on both axes, never `auto hidden`: clipping the cross axis would crop the focus\n     * ring of any focusable slide content.\n     */\n    overflow: auto;\n    overscroll-behavior: contain;\n    /* Logical keyword: RTL and vertical need no second declaration. */\n    scroll-snap-type: inline mandatory;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    min-inline-size: 0;\n    min-block-size: 0;\n    border-radius: var(--vectis-radius-surface);\n  }\n\n  .v-carousel-viewport::-webkit-scrollbar {\n    display: none;\n  }\n\n  .v-carousel-viewport:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-carousel[data-orientation='vertical'] > .v-carousel-stage > .v-carousel-viewport {\n    flex-direction: column;\n    scroll-snap-type: block mandatory;\n    /*\n     * A percentage flex-basis resolves against the container's MAIN size, which on\n     * the block axis has nothing intrinsic here: without a definite one the basis\n     * falls back to `auto` and every slide collapses onto its content.\n     */\n    block-size: var(--carousel-viewport-block);\n  }\n\n  .v-carousel-slide {\n    /*\n     * `max()` makes itemMinSize a floor, never a cap, and IS the responsiveness: no breakpoint,\n     * no @container.\n     */\n    /*\n     * LONGHANDS, never the `flex` shorthand; the `animation` rule further down, for the same\n     * reason. A shorthand whose value contains `var()` becomes a PENDING SUBSTITUTION value: it\n     * cannot be expanded until computed-value time, and if any one of the four custom\n     * properties then resolves to something invalid the whole declaration is dropped and `flex`\n     * reverts to its initial `0 1 auto`; shrink 1 and basis auto, which sizes every slide on\n     * its content and destroys the snap grid.\n     */\n    flex-grow: 0;\n    flex-shrink: 0;\n    flex-basis: max(\n      var(--carousel-item-min),\n      calc(\n        (100% - (var(--carousel-per-view) - 1) * var(--carousel-gap) - var(--carousel-peek)) /\n          var(--carousel-per-view)\n      )\n    );\n    /* `auto` is a CONTENT-based floor that can push a flex item past its basis:\n       one unbreakable word would desynchronize the whole snap grid. */\n    min-inline-size: 0;\n    min-block-size: 0;\n    scroll-snap-align: start;\n    position: relative;\n  }\n\n  /*\n   * The last slide is aligned on its END edge, and that is what declares the end of the track\n   * as a snap position in its own right. As soon as a `peek` or an active `itemMinSize` makes\n   * the fit fractional, that slide's START-aligned position lies past\n   * `scrollWidth - clientWidth`, so the only position left near the end is a strip short of it\n   * and the last slide is never fully revealed.\n   */\n  .v-carousel-slide:last-child {\n    scroll-snap-align: end;\n  }\n\n  /*\n   * Each effect names the keyframes it is written on, and the two mechanisms that play them\n   * read the name from here rather than from a selector of their own; which keeps the animation\n   * LISTS below written exactly once.\n   */\n  .v-carousel[data-effect='fade'] {\n    --carousel-effect-name: v-carousel-fade;\n    --carousel-jump-opacity: 0;\n  }\n\n  .v-carousel[data-effect='scale'] {\n    --carousel-effect-name: v-carousel-scale;\n    /* Exactly where the scroll-driven effect holds a slide off the centre, so the\n       one-shot ends on the value that takes over from it. */\n    --carousel-jump-scale: var(--carousel-scale-min);\n  }\n\n  .v-carousel[data-effect='slide'] {\n    /*\n     * A FIFTH of the slide, not its width. Every inner box shifts at once, so a full one would\n     * park each over its neighbour and the overlap would paint the wrong slide for the length\n     * of the run; invisible at one item per view, plain at three.\n     */\n    --carousel-jump-shift: 20%;\n  }\n\n  /*\n   * The pair of names. `jumpPhase` alternates between two identical keyframe blocks because\n   * re-setting an attribute does not restart a running animation, and `animation-name` is the\n   * one thing that does.\n   */\n  .v-carousel-effect {\n    block-size: 100%;\n    animation-name: var(--carousel-jump-name, none);\n    animation-duration: var(--vectis-duration-base);\n    animation-timing-function: var(--vectis-ease-out);\n  }\n\n  .v-carousel[data-jump='a'] {\n    --carousel-jump-name: v-carousel-jump-a;\n  }\n\n  .v-carousel[data-jump='b'] {\n    --carousel-jump-name: v-carousel-jump-b;\n  }\n\n  /*\n   * Progressively enhance supported scroll timelines. Animate the inner box, never the snap\n   * area: transformed snap geometry would create a scroll-position feedback loop.\n   */\n  @supports (view-timeline-name: --v) and (animation-range: cover) {\n    .v-carousel:not([data-effect='slide'])\n      > .v-carousel-stage\n      > .v-carousel-viewport\n      > .v-carousel-slide {\n      view-timeline: --carousel-view inline;\n    }\n\n    .v-carousel[data-orientation='vertical']:not([data-effect='slide'])\n      > .v-carousel-stage\n      > .v-carousel-viewport\n      > .v-carousel-slide {\n      view-timeline: --carousel-view block;\n    }\n\n    .v-carousel-effect {\n      /*\n       * Longhands, never the `animation` shorthand: `animation-timeline` and\n       * `animation-duration` are reset-only sub-properties, so a shorthand written afterwards\n       * would silently put the timeline back to `auto` and the duration to 0s, and every effect\n       * would vanish with no error. six parallel lists, and their order is the arbitration.\n       */\n      animation-name: var(--carousel-effect-name, none), var(--carousel-jump-name, none);\n      animation-timeline: --carousel-view, auto;\n      animation-range: cover, normal;\n      animation-fill-mode: both, none;\n      animation-timing-function: linear, var(--vectis-ease-out);\n      /* `auto` is the whole timeline. A duration in seconds would be taken as a\n         PROPORTION of it, and the effect would end a fraction of the way in. */\n      animation-duration: auto, var(--vectis-duration-base);\n    }\n  }\n\n  /*\n   * Over the `cover` range a slide's origin travels the whole viewport+slide distance, so a\n   * counter-translate of ±100% of the slide's own size pins it on the scrollport when the two\n   * are equal; which is why `fade` is defined at one item per view only. The result is a true\n   * dissolve in place, gap included.\n   */\n  @keyframes v-carousel-fade {\n    0% {\n      opacity: 0;\n      translate: calc(var(--carousel-axis-x) * var(--carousel-dir) * -100%)\n        calc(var(--carousel-axis-y) * -100%);\n    }\n    50% {\n      opacity: 1;\n      translate: 0 0;\n    }\n    100% {\n      opacity: 0;\n      translate: calc(var(--carousel-axis-x) * var(--carousel-dir) * 100%)\n        calc(var(--carousel-axis-y) * 100%);\n    }\n  }\n\n  /*\n   * Geometry only, no opacity dimming; and that is an accessibility decision, not a taste one:\n   * a slide off the centre still holds real text, and fading it is a measurable contrast loss\n   * that axe rightly reports. The scale alone carries the depth.\n   */\n  @keyframes v-carousel-scale {\n    0%,\n    100% {\n      scale: var(--carousel-scale-min);\n    }\n    50% {\n      scale: 1;\n    }\n  }\n\n  /*\n   * Two IDENTICAL BLOCKS, and the duplication is the mechanism rather than an oversight:\n   * `jumpPhase` alternates between these names, because a CSS animation restarts on a change of\n   * `animation-name` and on nothing else. Edit one, edit both.\n   */\n  @keyframes v-carousel-jump-a {\n    from {\n      opacity: var(--carousel-jump-opacity);\n      scale: var(--carousel-jump-scale);\n      translate: calc(\n          var(--carousel-axis-x) * var(--carousel-dir) * var(--carousel-jump-dir) *\n            var(--carousel-jump-shift)\n        )\n        calc(var(--carousel-axis-y) * var(--carousel-jump-dir) * var(--carousel-jump-shift));\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n      translate: 0 0;\n    }\n  }\n\n  @keyframes v-carousel-jump-b {\n    from {\n      opacity: var(--carousel-jump-opacity);\n      scale: var(--carousel-jump-scale);\n      translate: calc(\n          var(--carousel-axis-x) * var(--carousel-dir) * var(--carousel-jump-dir) *\n            var(--carousel-jump-shift)\n        )\n        calc(var(--carousel-axis-y) * var(--carousel-jump-dir) * var(--carousel-jump-shift));\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n      translate: 0 0;\n    }\n  }\n\n  .v-carousel-controls {\n    display: flex;\n    /*\n     * A floor, not the layout; `space-between` places the pair. It only ever shows on a stage\n     * narrow enough to bring the two buttons together.\n     */\n    gap: var(--vectis-space-2);\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-carousel[data-orientation='vertical'] > .v-carousel-stage > .v-carousel-controls {\n    flex-direction: column;\n  }\n\n  /*\n   * `pointer-events` is handed back to the buttons alone, so the strip does not swallow a drag\n   * over the slides. Enumerated rather than a bare `[data-controls]`: a third placement has to\n   * opt in by hand (the VTabs `:is()` rule).\n   */\n  .v-carousel:is([data-controls='inside'], [data-controls='outside'])\n    > .v-carousel-stage\n    > .v-carousel-controls {\n    position: absolute;\n    inset: 0;\n    align-items: center;\n    justify-content: space-between;\n    pointer-events: none;\n  }\n\n  .v-carousel[data-controls='inside'] > .v-carousel-stage > .v-carousel-controls {\n    inset: var(--vectis-space-2);\n  }\n\n  /*\n   * `outside`: the pair is pulled out of the stage by exactly the gutter the root reserved, so\n   * each button sits in that padding, one gap clear of the slides, still centred on the stage's\n   * cross axis. RTL is FREE and needs no `--carousel-dir`: `inset-inline` is logical, the two\n   * insets are equal so the box is direction-symmetric, and `space-between` puts `previous` at\n   * the inline START; the right-hand side in RTL, where it belongs.\n   */\n  .v-carousel[data-controls='outside'] > .v-carousel-stage > .v-carousel-controls {\n    inset-inline: calc(-1 * var(--carousel-outset));\n  }\n\n  .v-carousel[data-orientation='vertical'][data-controls='outside']\n    > .v-carousel-stage\n    > .v-carousel-controls {\n    inset-inline: 0;\n    inset-block: calc(-1 * var(--carousel-outset));\n  }\n\n  /*\n   * `:has(:focus-visible)` and never `:focus-within`. A pointer click LEAVES focus on the\n   * control it hit, so reading any focus pins the pair revealed until the reader clicks outside\n   * the carousel entirely, long after the pointer has gone.\n   */\n  @media (hover: hover) {\n    .v-carousel[data-controls-visibility='hover'] > .v-carousel-stage > .v-carousel-controls {\n      opacity: 0;\n    }\n\n    .v-carousel[data-controls-visibility='hover']:hover > .v-carousel-stage > .v-carousel-controls,\n    .v-carousel[data-controls-visibility='hover']:has(:focus-visible)\n      > .v-carousel-stage\n      > .v-carousel-controls {\n      opacity: 1;\n    }\n  }\n\n  .v-carousel-control {\n    pointer-events: auto;\n  }\n\n  .v-carousel-indicators {\n    display: flex;\n    gap: var(--vectis-space-1);\n    align-items: center;\n    justify-content: center;\n  }\n\n  .v-carousel[data-orientation='vertical'] > .v-carousel-indicators {\n    flex-direction: column;\n  }\n\n  /*\n   * `inside`: centred on the block-end edge, with no surface of its own; a pill behind the dots\n   * covers a slice of the slide the whole time, which is a lot of media to spend on six 8px\n   * marks. The legibility moves into the dots instead (see below), where it costs their own\n   * footprint and nothing more.\n   */\n  .v-carousel[data-indicators='inside'] > .v-carousel-indicators {\n    position: absolute;\n    inset-block-end: var(--vectis-space-3);\n    inset-inline: 0;\n    margin-inline: auto;\n    inline-size: fit-content;\n  }\n\n  .v-carousel[data-orientation='vertical'][data-indicators='inside'] > .v-carousel-indicators {\n    inset-block: 0;\n    inset-inline: auto var(--vectis-space-3);\n    block-size: fit-content;\n    margin-block: auto;\n    margin-inline: 0;\n  }\n\n  /*\n   * The dot is 8px but the control is not: a 24px transparent hit area is what\n   * satisfies `target-size` without inflating the visual.\n   */\n  .v-carousel-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: var(--vectis-control-height-xs);\n    min-block-size: var(--vectis-control-height-xs);\n    padding: 0;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--vectis-radius-pill);\n  }\n\n  .v-carousel-indicator:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-carousel-dot {\n    display: block;\n    inline-size: var(--vectis-control-size-carousel-indicator);\n    block-size: var(--vectis-control-size-carousel-indicator);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition:\n      inline-size var(--vectis-duration-base) var(--vectis-ease-default),\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      background var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-carousel-indicator:hover .v-carousel-dot {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  .v-carousel-indicator[aria-current] .v-carousel-dot {\n    inline-size: var(--vectis-control-size-carousel-indicator-active);\n    background: var(--vectis-color-accent);\n  }\n\n  .v-carousel[data-orientation='vertical']\n    > .v-carousel-indicators\n    > .v-carousel-indicator[aria-current]\n    .v-carousel-dot {\n    inline-size: var(--vectis-control-size-carousel-indicator);\n    block-size: var(--vectis-control-size-carousel-indicator-active);\n  }\n\n  /*\n   * `surface-inverse` is the ring colour because it is dark in both themes, which is the\n   * property needed here. Drawn as a `box-shadow`, so it costs no layout and the dots stay 8px.\n   */\n  .v-carousel[data-indicators='inside'] > .v-carousel-indicators .v-carousel-dot {\n    background: color-mix(in oklab, var(--vectis-color-text-on-accent) 55%, transparent);\n    box-shadow: 0 0 0 1px color-mix(in oklab, var(--vectis-color-surface-inverse) 45%, transparent);\n  }\n\n  .v-carousel[data-indicators='inside']\n    > .v-carousel-indicators\n    > .v-carousel-indicator:hover\n    .v-carousel-dot,\n  .v-carousel[data-indicators='inside']\n    > .v-carousel-indicators\n    > .v-carousel-indicator[aria-current]\n    .v-carousel-dot {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /*\n   * Forced colours flatten a background to `Canvas` and drop every shadow, and a dot is made of\n   * nothing else: left alone, every dot and the current page's pill vanish. Each dot draws its\n   * own edge and the current one the system selection colour.\n   */\n  @media (forced-colors: active) {\n    .v-carousel-indicator\n      .v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 1px CanvasText;\n    }\n\n    .v-carousel-indicator:hover\n      .v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot {\n      box-shadow: inset 0 0 0 1px Highlight;\n    }\n\n    .v-carousel-indicator[aria-current]\n      .v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot {\n      background: Highlight;\n      box-shadow: none;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * `animation: none` and not `animation-name: none`: it also drops the timeline binding, so\n     * the effect stops sampling the scroller altogether. Being the shorthand is also what takes\n     * the jump one-shot with it, both animations living in the same list; a jump then simply\n     * lands, which the preference asks for and what `scroll-behavior: auto` below already does\n     * to the travel.\n     */\n    .v-carousel-effect {\n      animation: none;\n    }\n\n    .v-carousel-viewport {\n      scroll-behavior: auto;\n    }\n\n    .v-carousel-controls,\n    .v-carousel-dot {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VCarousel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VCarousel/VCarousel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @ssr @core\n/**\n * Native scroll snapping and CSS timelines drive slides. JavaScript supplies page measurements,\n * keyboard controls, autoplay and effects where browser support is absent.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  nextTick,\n  ref,\n  provide,\n  watch,\n  watchEffect,\n} from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { arrow_downward_alt as arrowDownwardAltIcon } from '../VIcon/icons/arrow_downward_alt'\nimport { arrow_left_alt as arrowLeftAltIcon } from '../VIcon/icons/arrow_left_alt'\nimport { arrow_right_alt as arrowRightAltIcon } from '../VIcon/icons/arrow_right_alt'\nimport { arrow_upward_alt as arrowUpwardAltIcon } from '../VIcon/icons/arrow_upward_alt'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { carouselKey } from './context'\n\nimport { cssSize } from '../../utils/css'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { isKeyboardFocus } from '../../utils/focus'\nimport { clamp } from '../../utils/number'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\n\n/** How one slide gives way to the next: sliding, fading in place, or scaling down. */\nexport type CarouselEffect = 'slide' | 'fade' | 'scale'\n/** Whether the carousel scrolls across the page or down it. */\nexport type CarouselOrientation = 'horizontal' | 'vertical'\n\n/** What the `#controls` slot receives. */\nexport interface CarouselControlsSlotProps {\n  /** Moves one position back. */\n  previous: () => void\n  /** Moves one position forward. */\n  next: () => void\n  /** Whether there is no position before this one (always false when looping). */\n  atStart: boolean\n  /** Whether there is no position after this one (always false when looping). */\n  atEnd: boolean\n  /** The current position, from 0. */\n  index: number\n  /** How many slides there are. */\n  count: number\n  /** How many positions the carousel can actually rest on, which is usually fewer. */\n  pageCount: number\n  /** Which way it scrolls: a bar of your own cannot choose its icons without knowing. */\n  orientation: CarouselOrientation\n}\n\n/** What the `#indicators` slot receives. */\nexport interface CarouselIndicatorsSlotProps {\n  /** The current position, from 0. */\n  index: number\n  /** How many slides there are. */\n  count: number\n  /** How many positions there are: render one control per position, not per slide. */\n  pageCount: number\n  /** Moves to a position. */\n  goTo: (index: number) => void\n  /** Which way the carousel scrolls. */\n  orientation: CarouselOrientation\n}\n\n/** What the `#indicator` slot receives. */\nexport interface CarouselIndicatorSlotProps {\n  /** The position this dot stands for, from 0. */\n  index: number\n  /** Whether it is the current one. */\n  active: boolean\n}\n/** Where the position dots go: nowhere, over the slides, or after them. */\nexport type CarouselIndicators = false | 'inside' | 'outside'\n/** Where the previous and next buttons go: nowhere, over the slides, or beside them. */\nexport type CarouselControls = false | 'inside' | 'outside'\n/** When those buttons are visible. */\nexport type CarouselControlsVisibility = 'always' | 'hover'\n\ninterface CarouselProps {\n  /**\n   * How many slides may be visible at once. It is a MAXIMUM and not a target: the floor below\n   * decides how many actually fit, which makes the whole thing responsive without a single\n   * breakpoint.\n   */\n  itemsPerView?: number\n  /**\n   * How small a slide is allowed to get. Once an equal share would fall below this, fewer\n   * slides fit and the carousel simply scrolls further instead.\n   */\n  itemMinSize?: number | string\n  /** How much of the NEXT slide is left showing, as a hint that there is more. */\n  peek?: number | string\n  /** The space between two slides. */\n  gap?: number | string\n  /** Whether the carousel scrolls across the page or down it. */\n  orientation?: CarouselOrientation\n  /**\n   * How one slide gives way to the next, driven by the scroll itself. Asked for otherwise, it\n   * falls back to sliding rather than degrading.\n   */\n  effect?: CarouselEffect\n  /** The height of the visible area. */\n  height?: number | string\n  /**\n   * Whether the carousel comes back round: past the last position it returns to the first, and\n   * before the first it goes to the last. Off by default, which stops it at both ends.\n   */\n  loop?: boolean\n  /**\n   * Whether a move of more than one page keeps the whole scroll instead of going straight\n   * there. Off by default: a dot five pages away lands at once and plays the transition once,\n   * on arrival.\n   */\n  noJump?: boolean\n  /**\n   * How long each slide is shown before the next one, in milliseconds; zero means it does not\n   * advance by itself.\n   */\n  autoplay?: number\n  /**\n   * Where the previous and next buttons go: over the slides, beside them, or nowhere. Placed\n   * beside, they sit at the ends of the scrolling axis and their room is reserved as padding,\n   * so the component's footprint is unchanged and the slides narrow instead.\n   */\n  controls?: CarouselControls\n  /**\n   * Where the position dots go: over the slides, after them, or nowhere. After them means\n   * below when the carousel scrolls across the page, and beside it when it scrolls down.\n   */\n  indicators?: CarouselIndicators\n  /**\n   * Whether those buttons are always visible, or appear when the pointer is over the carousel\n   * or the keyboard focus is inside it.\n   */\n  controlsVisibility?: CarouselControlsVisibility\n  /** The icon of the previous button. It follows the orientation by default. */\n  prevIcon?: IconSource\n  /** The icon of the next button. It follows the orientation by default. */\n  nextIcon?: IconSource\n  /** What the previous button does, in words. It falls back to the dictionary. */\n  prevLabel?: string\n  /** What the next button does, in words. It falls back to the dictionary. */\n  nextLabel?: string\n  /** What screen readers announce for the carousel as a whole. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CarouselProps>(), {\n  itemsPerView: 1,\n  itemMinSize: undefined,\n  peek: undefined,\n  gap: undefined,\n  orientation: 'horizontal',\n  effect: 'slide',\n  height: undefined,\n  loop: false,\n  noJump: false,\n  autoplay: 0,\n  controls: 'inside',\n  indicators: 'outside',\n  controlsVisibility: 'always',\n  prevIcon: undefined,\n  nextIcon: undefined,\n  prevLabel: undefined,\n  nextLabel: undefined,\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The slides. */\n  default(): unknown\n  controls?(props: CarouselControlsSlotProps): unknown\n  /** Replaces the whole bar of dots. */\n  indicators?(props: CarouselIndicatorsSlotProps): unknown\n  /**\n   * Replaces what is drawn INSIDE one dot. The button itself, and everything that makes it\n   * announce and behave correctly, stays the design system's.\n   */\n  indicator?(props: CarouselIndicatorSlotProps): unknown\n}>()\n\n/**\n * Which slide is current: the first one fully visible when several fit at once, which is also\n * the position the carousel has come to rest on.\n */\nconst model = defineModel<number>({ default: 0 })\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.carousel.label)\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? m.value.carousel.previous)\nconst resolvedNextLabel = computed(() => props.nextLabel ?? m.value.carousel.next)\nconst isVertical = computed(() => props.orientation === 'vertical')\n/* Arrows with a shaft rather than the chevrons VTabs and VPagination use, and the\n   difference is the surface they sit on: those two put their control in a dense bar,\n   where a chevron is exactly the right weight, while this pair is a round button laid\n   over whatever media the slides carry. A hairline chevron dissolves at the centre of\n   a 40px disc; a shaft fills it and reads at a glance. */\nconst resolvedPrevIcon = computed(\n  () => props.prevIcon ?? (isVertical.value ? arrowUpwardAltIcon : arrowLeftAltIcon),\n)\nconst resolvedNextIcon = computed(\n  () => props.nextIcon ?? (isVertical.value ? arrowDownwardAltIcon : arrowRightAltIcon),\n)\n\n// @ssr\n/*\n * The count comes from the slot's VNODES, never from a registry the items feed at mount: a\n * registry renders 0 slides on the server and N on the client; a guaranteed hydration mismatch,\n * and the very reason VTabs derives `hasPanels` from `slots` too. `cloneVNode` is then what\n * carries each slide its position: `setup()` order is deterministic on the first render but not\n * on a later insertion, so a self-incrementing counter would drift.\n */\nconst slides = useSlotNodes()\nconst count = computed(() => slides.value.length)\n\n// A functional component: it renders already-captured VNodes, which\n// <component :is> cannot do (it expects a definition). The VAvatarGroup idiom.\nconst Slides = () =>\n  slides.value.map((node, index) => cloneVNode(node, { index, key: node.key ?? index }))\n\n/*\n * A peek of ZERO is no peek: the sizing formula collapses exactly to the peekless one, so\n * `peek: 0` (or `'0px'`) must not cost the effect. A length `parseFloat` cannot read; a\n * `calc()`; is taken as a real strip, the side that never piles slides up.\n */\nconst hasPeek = computed(\n  () => props.peek !== undefined && Number.parseFloat(String(props.peek)) !== 0,\n)\nconst resolvedEffect = computed<CarouselEffect>(() =>\n  props.effect === 'fade' && (props.itemsPerView > 1 || hasPeek.value) ? 'slide' : props.effect,\n)\n\nprovide(carouselKey, {\n  get slideRoleDescription() {\n    return m.value.carousel.slideRoleDescription\n  },\n  slideLabel: (index: number) => m.value.carousel.slide(index + 1, count.value),\n})\n\n/*\n * The jump one-shot, which replaces the travel whenever the model moves by more than one page\n * (see `scrollToIndex`). Two pieces of state, both read from the sheet: `jumpPhase` alternates\n * between two IDENTICAL keyframe names, and that is the whole reason there are two.\n */\nconst jumpPhase = ref<'a' | 'b'>()\nconst jumpDirection = ref(1)\n\n/*\n * The one-shot is taken off once it has played. Left on the root, it would play again on every\n * slide mounted LATER (a lazy page, a re-keyed list): an animation starts when its element is\n * created with a name, and in `fade` the newcomers would flash in from zero.\n */\nfunction onAnimationEnd(event: AnimationEvent) {\n  if (!event.animationName.startsWith('v-carousel-jump-')) return\n  const owner = (event.target as Element | null)?.closest('.v-carousel')\n  if (owner === event.currentTarget) jumpPhase.value = undefined\n}\n\nconst rootStyle = computed<StyleValue>(() => ({\n  '--carousel-per-view': String(props.itemsPerView),\n  '--carousel-item-min': cssSize(props.itemMinSize),\n  '--carousel-peek': cssSize(props.peek),\n  '--carousel-gap': cssSize(props.gap),\n  '--carousel-viewport-block': cssSize(props.height),\n  '--carousel-jump-dir': String(jumpDirection.value),\n}))\n\nconst viewportEl = ref<HTMLElement | null>(null)\n\n/*\n * Raised while a programmatic scroll is in flight, so the read-back does not fight the request:\n * without it, asking for slide 4 is overwritten by 1, 2 and 3 as they pass under the port. A\n * `ref` and not a plain `let`, because LOWERING it must be able to re-run the sync.\n */\nconst settling = ref(false)\n\n/*\n * Lowering the guard alone hands that stale index to the watcher, which writes it while\n * `readBack` suppresses the correcting scroll: the dot then sits one page ahead, for good. It\n * is the CALL that removes the race, not its position; the sync watcher is a `pre` one, so both\n * writes land in the same flush and it runs once on the final values.\n */\nconst onScrollEnd = () => {\n  const port = viewportEl.value\n  if (port) measure(port)\n  settling.value = false\n}\n\n/*\n * `scrollToIndex`'s \"already there\" test does not cover it: that holds only at rest, and\n * mid-gesture the delta is real. Nothing needs writing anyway; the scroller is already where\n * the read-back read it.\n */\nlet readBack = false\n\n/**\n * How far slide `index`'s start edge sits from the port's, right now. `undefined` when\n * the slide is gone, which the deferred correction below has to ask again about: it runs\n * a frame later, and a consumer is free to have changed the slides in between.\n */\nfunction deltaTo(port: HTMLElement, index: number) {\n  const slide = port.querySelector<HTMLElement>(`:scope > [data-carousel-index='${index}']`)\n  if (!slide) return\n  const target = slide.getBoundingClientRect()\n  // The VIEWPORT's rect, not the stage's: every DOM read in this component is\n  // viewport-scoped, and the `outside` gutter is padding on the root, so nothing here\n  // has to know about it.\n  const origin = port.getBoundingClientRect()\n  return { left: target.left - origin.left, top: target.top - origin.top }\n}\n\n/** Under a pixel on both axes is the scroller already being where it was asked to go. */\nconst arrived = (delta: { left: number; top: number }) =>\n  Math.abs(delta.left) < 1 && Math.abs(delta.top) < 1\n\n/**\n * Writes the DOM from the model. A move of MORE than one is a JUMP: it scrolls `instant` and\n * plays a one-shot instead.\n */\nfunction scrollToIndex(index: number, from = index) {\n  const port = viewportEl.value\n  if (!port) return\n  const delta = deltaTo(port, index)\n  if (!delta) return\n  const { left, top } = delta\n  /*\n   * Already there; which a model change coming FROM the read-back looks like. Arming the guard\n   * here would be the other way to strand it: no movement means no `scrollend` to lower it\n   * again.\n   */\n  if (arrived(delta)) return\n\n  // `noJump` cancels the one-shot along with the cut, and has to: played over a travel\n  // still in flight it would hold `fade`'s opacity at its own value for 200ms while the\n  // scroller was several slides from where the animation says it has arrived.\n  const jump = !props.noJump && Math.abs(index - from) > 1\n  /*\n   * Armed after the guards, so a jump that scrolls nothing animates nothing; and armed here\n   * rather than in the watcher because the flush that carries these two writes to the DOM is a\n   * microtask, hence still ahead of the paint that shows the new position. Set them a frame\n   * later and `fade` flashes its destination at full opacity before dropping to zero to fade it\n   * back in.\n   */\n  if (jump) {\n    jumpDirection.value = index > from ? 1 : -1\n    jumpPhase.value = jumpPhase.value === 'a' ? 'b' : 'a'\n  }\n  settling.value = true\n  port.scrollBy?.(jump ? { left, top, behavior: 'instant' } : { left, top })\n\n  /*\n   * A jump measures once more, a frame later, and corrects. A relative delta read while another\n   * scroll is in flight is already stale: a smooth scroll is driven off the main thread, so the\n   * rects above lag the position the delta lands on by a frame or two, and `instant` then\n   * freezes the error in; the browser does not re-snap after an explicit programmatic scroll.\n   */\n  if (jump)\n    requestAnimationFrame(() => {\n      const again = deltaTo(port, index)\n      if (again && !arrived(again)) port.scrollBy?.({ ...again, behavior: 'instant' })\n    })\n}\n\nwatch(model, (index, previous) => {\n  // The guard is what stops the two directions chaining: without it the model write the\n  // read-back has just made comes straight back as a scroll, fighting the finger mid-drag.\n  // See the flag's own declaration for why `scrollToIndex`'s \"already there\" test does not\n  // cover it.\n  if (readBack) return\n  // The watcher's own previous value and not `observedIndex`: it is the last COMMITTED page,\n  // defined before the first measurement and immune to a reading in flight.\n  void nextTick(() => scrollToIndex(index, previous))\n})\n\nconst observedIndex = ref<number>()\nconst measuredPages = ref<number>()\n\n/** Slack, in pixels, on every comparison below. */\nconst SLACK = 2\n\n/*\n * The slides are the viewport's children, never its descendants. A carousel placed in a slide\n * carries the same attribute on its own slides, and a descendant query then reads the inner\n * slide 0 as the outer slide 1: the step measures 0, the page count and the read-back freeze,\n * and \"next\" scrolls to the inner slide.\n */\nconst SLIDES = ':scope > [data-carousel-index]'\n\n/**\n * Read slide positions directly: IntersectionObserver reports threshold crossings, so peek and\n * fractional layouts can leave ratios stale throughout a backward scroll.\n */\nfunction measure(port: HTMLElement) {\n  const boxes = port.querySelectorAll<HTMLElement>(SLIDES)\n  const first = boxes[0]?.getBoundingClientRect()\n  const second = boxes[1]?.getBoundingClientRect()\n  const last = boxes[boxes.length - 1]?.getBoundingClientRect()\n  if (!first || !second || !last) return\n  const origin = port.getBoundingClientRect()\n  const vertical = isVertical.value\n  const step = vertical ? Math.abs(second.top - first.top) : Math.abs(second.left - first.left)\n  // No layout at all (jsdom, a display:none ancestor). Writing a 0 here would drag\n  // every clamp down with it; the prop-derived fallback stays the answer until there\n  // IS a layout.\n  if (step <= 0) return\n  // How far the scroller has travelled: the first slide's start edge has left the\n  // port's by exactly that much.\n  const offset = vertical ? Math.abs(first.top - origin.top) : Math.abs(first.left - origin.left)\n  // Outer edge to outer edge, picked by comparison rather than by index: in RTL the last\n  // slide is the LEFTMOST box, so naming the sides would need a direction test.\n  const span = vertical\n    ? Math.max(first.bottom, last.bottom) - Math.min(first.top, last.top)\n    : Math.max(first.right, last.right) - Math.min(first.left, last.left)\n  const scrollable = span - (vertical ? port.clientHeight : port.clientWidth)\n\n  const starts = Math.floor((scrollable + SLACK) / step)\n  const residual = scrollable - starts * step\n  const pages = starts + 1 + (residual > SLACK ? 1 : 0)\n  // The end of the track is recognized by POSITION and not by rounding: it is the one page that\n  // is not a multiple of `step`, so rounding would name the start position it falls short of;\n  // the page the user has just left.\n  const page = offset >= scrollable - SLACK ? pages - 1 : Math.round(offset / step)\n\n  measuredPages.value = pages\n  /*\n   * Clamped against `pageCount` and not against the local `pages`, because that is the one\n   * which also caps at `count`, and the write above is what makes it fresh. A slide LARGER than\n   * the port is the case that needs it: `starts` already reaches the last slide there and the\n   * leftover still mints a page, so the raw answer names an index no slide carries;\n   * `scrollToIndex` would then silently do nothing and `settling` would never come back down.\n   */\n  observedIndex.value = clamp(page, 0, pageCount.value - 1)\n}\n\n// @ssr @fallback\n/** SSR, jsdom and the first paint. */\nconst pageCount = computed(() =>\n  count.value === 0\n    ? 0\n    : clamp(measuredPages.value ?? count.value - props.itemsPerView + 1, 1, count.value),\n)\n\n/*\n * Re-arm observers when slide keys change, even if the count stays equal: Vue replaces those\n * elements and observers on detached nodes stop reporting.\n */\nconst slideKeys = computed(() =>\n  JSON.stringify(slides.value.map((node, index) => String(node.key ?? index))),\n)\n\n/*\n * `1` must stay in `threshold`. Nothing READS a ratio, but the buckets still decide WHEN this\n * callback runs, and this observer is what makes the component cover a ROOT RESIZE; which an\n * IntersectionObserver does not do on its own, queueing an entry only on a threshold crossing.\n */\n/*\n * Started in `onMounted`, and so are the two watches further down that read the page count. A\n * watch evaluates its source at once, and every one of these reaches the slot through `slides`:\n * at setup that is a slot call outside the render, which Vue warns about for every slot passed\n * as a function (a render function, JSX).\n */\nonMounted(() =>\n  watch(\n    [viewportEl, slideKeys],\n    ([port], _previous, onCleanup) => {\n      // @fallback\n      // IntersectionObserver exists neither in SSR nor in jsdom: `scrollend` still\n      // measures there, and the whole loop is verified in the browser (play functions).\n      if (!port || typeof IntersectionObserver === 'undefined') return\n      const observer = new IntersectionObserver(\n        () => {\n          measure(port)\n          // The request has arrived, so there is nothing left to protect. This is also the only\n          // exit when the browser clamps a programmatic scroll to no movement at all;\n          // `scrollend` never fires there.\n          if (observedIndex.value === model.value) settling.value = false\n        },\n        { root: port, threshold: [0, 0.25, 0.5, 0.75, 1] },\n      )\n      for (const slide of port.querySelectorAll(SLIDES)) observer.observe(slide)\n      onCleanup(() => observer.disconnect())\n    },\n    { flush: 'post', immediate: true },\n  ),\n)\n\n// Watching `settling` as well as the reading is the whole point of making it a ref:\n// whichever of the two lands last, the sync runs.\nwatch([observedIndex, settling], () => {\n  const index = observedIndex.value\n  if (settling.value || index === undefined || index === model.value) return\n  readBack = true\n  model.value = index\n  /*\n   * The pre-flush watcher runs inside the flush this write schedules, a `nextTick` callback\n   * only after it; so it has read the flag by the time this lands.\n   */\n  void nextTick(() => (readBack = false))\n})\n\n/*\n * The `loop` prop, resolved once against what there is to loop through, because below two\n * positions it is not merely pointless but wrong twice over: the modulo would divide by zero on\n * an empty carousel, and on a single page it would hand the reader two enabled buttons that\n * move nothing; where the disabled pair says the truth. So the prop asks, and this is the\n * answer every consumer below reads.\n */\nconst looping = computed(() => props.loop && pageCount.value > 1)\n\n/*\n * Pure derivations, and they may be only because `pageCount` never over-counts: index 0 is\n * always reachable and so is `pageCount - 1`, by construction. That is the load-bearing\n * premise; an over-count makes `atEnd` false at the real end, and autoplay then re-arms its\n * timer on every bounce, forever.\n */\nconst atStart = computed(() => !looping.value && model.value <= 0)\nconst atEnd = computed(() => !looping.value && model.value >= pageCount.value - 1)\n\nfunction goTo(index: number) {\n  const pages = pageCount.value\n  /*\n   * The DOUBLE modulo. JS `%` keeps the sign of the dividend, so `previous()` at 0 gives\n   * `-1 % 5 === -1`; a single one hands the model an index no slide carries, `scrollToIndex`\n   * finds nothing, and the carousel stops dead with no error anywhere.\n   */\n  model.value = looping.value ? ((index % pages) + pages) % pages : clamp(index, 0, pages - 1)\n}\n// @core\n/*\n * Out of range, no dot is current, the live region announces a slide that does not exist, and\n * past the last page `settling` never comes back down: the browser clamps the scroll to no\n * movement, so no `scrollend` arrives to lower it.\n */\nonMounted(() =>\n  watch(\n    [model, pageCount],\n    ([index, pages]) => {\n      if (pages === 0) return\n      const bounded = Number.isFinite(index) ? clamp(Math.round(index), 0, pages - 1) : 0\n      if (bounded !== index) model.value = bounded\n    },\n    { immediate: true },\n  ),\n)\n\nconst previous = () => goTo(model.value - 1)\nconst next = () => goTo(model.value + 1)\n\n// @keyboard\n/** The one keyboard concession, and it is not the one it looks like. */\nfunction onKeydown(event: KeyboardEvent) {\n  const port = viewportEl.value\n  if (!port || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return\n  // A key typed INSIDE a slide belongs to what holds the focus there: a caret in a field,\n  // a nested VTabs or VSlider, another carousel. Only the viewport itself is ours.\n  if (event.target !== event.currentTarget || event.defaultPrevented) return\n\n  if (event.key === 'Home' || event.key === 'End') {\n    event.preventDefault()\n    goTo(event.key === 'Home' ? 0 : pageCount.value - 1)\n    return\n  }\n\n  // Only the axis the carousel actually scrolls: the other one must stay with the browser,\n  // which still scrolls a slide taller than the viewport.\n  const steps: Record<string, number | undefined> = isVertical.value\n    ? { ArrowUp: -1, ArrowDown: 1 }\n    : { ArrowLeft: -1, ArrowRight: 1 }\n  const step = steps[event.key]\n  if (step === undefined) return\n  event.preventDefault()\n  // The inline arrows are physical, hence inverted in RTL (the `arrowNav` rule); the block axis\n  // does not flip.\n  const rtl = !isVertical.value && isRtl(port)\n  goTo(model.value + (rtl ? -step : step))\n}\n\n// @a11y\n/*\n * A control that disables itself under the keyboard focus would drop it on `<body>`. It is\n * handed to the opposite control, or to the viewport when both ends are reached (a single\n * page).\n */\nonMounted(() =>\n  watch([atStart, atEnd], ([start, end], [wasStart, wasEnd]) => {\n    const port = viewportEl.value\n    const stage = port?.parentElement\n    if (!port || !stage) return\n    const [back, forward] = stage.querySelectorAll<HTMLElement>(\n      ':scope > .v-carousel-controls > .v-carousel-control',\n    )\n    const active = document.activeElement\n    if (start && !wasStart && active === back) (end ? port : forward)?.focus()\n    else if (end && !wasEnd && active === forward) (start ? port : back)?.focus()\n  }),\n)\n\nconst { start, cancel } = useTimer()\nconst hovered = ref(false)\n// @a11y\n// KEYBOARD focus, not any focus, hence `isKeyboardFocus` rather than a bare `focusin` flag.\n// Clicking `next` leaves the focus on it, and a plain flag would then pause the rotation for\n// good; the user has to click outside the carousel to get it going again, which is not a pause,\n// it is a trap.\nconst focused = ref(false)\n\nconst reducedMotion = ref(false)\n\n/*\n * `autoplay > 0` is a GUARD, not a default: `useTimer` runs a delay ≤ 0 synchronously (the DS\n * convention), and a synchronous callback bumping the model would recurse until the stack\n * blows. It is ALSO the consumer's stop control; the prop is reactive, so binding it to `0`\n * cancels the timer on the spot, which a pause button of your own would drive.\n */\nconst rotating = computed(\n  () =>\n    props.autoplay > 0 && !hovered.value && !focused.value && !reducedMotion.value && !atEnd.value,\n)\n\n// `immediate`: without it the first delay would only be armed by a LATER change,\n// so an autoplay that nobody touches would never advance at all. Started on MOUNT: a\n// server render never unmounts, so a timer armed there would outlive the request and\n// fire `next` on a dead instance.\nonMounted(() =>\n  watch(\n    [rotating, model],\n    () => {\n      cancel()\n      if (rotating.value) start(next, props.autoplay)\n    },\n    { immediate: true },\n  ),\n)\n\n// @a11y @ssr\n/*\n * The DS's second browser-preference read (after VHotkeys' `navigator`), and it\n * is not redundant with the CSS media query: that one stops a transition, never a\n * TIMER, and WCAG 2.2.2 is about the content moving at all. Client only, listener\n * released on unmount.\n */\nlet releaseMotionQuery: (() => void) | undefined\nonMounted(() => {\n  const query = window.matchMedia?.('(prefers-reduced-motion: reduce)')\n  if (!query) return\n  const sync = () => (reducedMotion.value = query.matches)\n  sync()\n  query.addEventListener('change', sync)\n  releaseMotionQuery = () => query.removeEventListener('change', sync)\n})\nonBeforeUnmount(() => releaseMotionQuery?.())\n\n// @a11y\n/*\n * Announced only at rest: narrating an auto-rotating carousel floods the screen reader, so the\n * region is `aria-live=\"off\"` while it rotates (APG). The TEXT always follows the model:\n * emptied while rotating instead, a hover that pauses the rotation would write it back and be\n * announced with nothing having moved.\n */\nconst liveMessage = computed(() =>\n  count.value === 0 ? '' : m.value.carousel.slide(model.value + 1, count.value),\n)\n\n// @devwarn\nif (isDev) {\n  // Once per instance each: the loop warning names the very binding it recommends, and\n  // that binding re-runs this effect on every pause and resume.\n  const warned = new Set<string>()\n  const warn = (id: string, message: string) => {\n    if (warned.has(id)) return\n    warned.add(id)\n    console.warn(message)\n  }\n  watchEffect(() => {\n    if (props.effect !== resolvedEffect.value)\n      warn(\n        'fade',\n        props.itemsPerView > 1\n          ? '[VCarousel] `fade` needs one item per view: over a single view timeline every slide is counter-translated onto the same spot, so they would pile up. Downgraded to `slide`.'\n          : '[VCarousel] `fade` and `peek` are mutually exclusive: the counter-translate parks every slide over the viewport, so the peeked strip is covered. Downgraded to `slide`.',\n      )\n    /*\n     * What it costs is the exemption the component leans on everywhere else: content that moves\n     * on its own needs a way to stop it, and the five-second grace only ever applied because\n     * the rotation ENDED. Looping, it does not, and hover and focus leave a touch user with\n     * nothing.\n     */\n    if (props.loop && props.autoplay > 0)\n      warn(\n        'loop',\n        '[VCarousel] `loop` with `autoplay` rotates for as long as the page is open, so WCAG 2.2.2 asks for a way to stop it. Bind `autoplay` to 0 from a control of your own.',\n      )\n    if (isVertical.value && props.height === undefined)\n      warn(\n        'height',\n        '[VCarousel] a vertical carousel needs a `height`: a percentage flex-basis has no definite reference on the block axis. Falling back to --vectis-control-size-carousel-block.',\n      )\n    if (!Number.isInteger(props.itemsPerView) || props.itemsPerView < 1)\n      warn(\n        'itemsPerView',\n        `[VCarousel] \\`itemsPerView\\` must be an integer ≥ 1, got ${props.itemsPerView}.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    class=\"v-carousel\"\n    role=\"region\"\n    :aria-roledescription=\"m.carousel.roleDescription\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-orientation=\"orientation\"\n    :data-effect=\"resolvedEffect\"\n    :data-jump=\"jumpPhase\"\n    :data-controls=\"controls || undefined\"\n    :data-indicators=\"indicators || undefined\"\n    :data-controls-visibility=\"controlsVisibility\"\n    @pointerenter=\"hovered = true\"\n    @pointerleave=\"hovered = false\"\n    @focusin=\"focused = isKeyboardFocus($event.target)\"\n    @focusout=\"focused = false\"\n    @animationend=\"onAnimationEnd\"\n  >\n    <!--\n      The stage holds the viewport and the controls; and NOTHING else. The indicator bar is a\n      sibling on purpose: inside this box it would join the height the controls are centred on,\n      and the pair would sit visibly below the middle of the slides.\n    -->\n    <div class=\"v-carousel-stage\">\n      <!--\n        It is also what makes the track the keyboard target of `onKeydown`; the browser's own\n        arrow scrolling is real, but mandatory snapping undoes it, see there. A focusable box\n        with an aria-label must carry a role, or axe reports `aria-prohibited-attr`.\n      -->\n      <div\n        ref=\"viewportEl\"\n        class=\"v-carousel-viewport\"\n        role=\"group\"\n        tabindex=\"0\"\n        :aria-label=\"m.carousel.slides\"\n        @keydown=\"onKeydown\"\n        @scrollend=\"onScrollEnd\"\n      >\n        <component :is=\"Slides\" />\n      </div>\n\n      <slot\n        name=\"controls\"\n        :previous=\"previous\"\n        :next=\"next\"\n        :at-start=\"atStart\"\n        :at-end=\"atEnd\"\n        :index=\"model\"\n        :count=\"count\"\n        :page-count=\"pageCount\"\n        :orientation=\"orientation\"\n      >\n        <div v-if=\"controls\" class=\"v-carousel-controls\">\n          <VIconButton\n            class=\"v-carousel-control\"\n            :label=\"resolvedPrevLabel\"\n            variant=\"ghost\"\n            tone=\"neutral\"\n            shape=\"circular\"\n            elevated\n            :disabled=\"atStart\"\n            @click=\"previous\"\n          >\n            <VIcon v-bind=\"iconProps(resolvedPrevIcon)\" :mirrored=\"!isVertical\" />\n          </VIconButton>\n          <VIconButton\n            class=\"v-carousel-control\"\n            :label=\"resolvedNextLabel\"\n            variant=\"ghost\"\n            tone=\"neutral\"\n            shape=\"circular\"\n            elevated\n            :disabled=\"atEnd\"\n            @click=\"next\"\n          >\n            <VIcon v-bind=\"iconProps(resolvedNextIcon)\" :mirrored=\"!isVertical\" />\n          </VIconButton>\n        </div>\n      </slot>\n    </div>\n\n    <slot\n      name=\"indicators\"\n      :index=\"model\"\n      :count=\"count\"\n      :page-count=\"pageCount\"\n      :go-to=\"goTo\"\n      :orientation=\"orientation\"\n    >\n      <div\n        v-if=\"indicators\"\n        class=\"v-carousel-indicators\"\n        role=\"group\"\n        :aria-label=\"m.carousel.indicators\"\n      >\n        <!--\n          One control per REACHABLE position, not per slide: with 6 slides three at a time the\n          scroller can only lead with 1 to 4, and dots 5 and 6 would scroll nowhere. With a\n          `peek` the last of them parks the scroller at the END of the track rather than on a\n          slide's start edge.\n        -->\n        <button\n          v-for=\"index in pageCount\"\n          :key=\"index\"\n          type=\"button\"\n          class=\"v-carousel-indicator\"\n          :aria-label=\"m.carousel.slide(index, count)\"\n          :aria-current=\"index - 1 === model ? 'true' : undefined\"\n          @click=\"goTo(index - 1)\"\n        >\n          <slot name=\"indicator\" :index=\"index - 1\" :active=\"index - 1 === model\">\n            <span class=\"v-carousel-dot\" />\n          </slot>\n        </button>\n      </div>\n    </slot>\n\n    <span class=\"v-visually-hidden\" role=\"status\" :aria-live=\"rotating ? 'off' : 'polite'\">{{\n      liveMessage\n    }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-carousel {\n    /*\n     * Geometry vector and direction sign. The effect keyframes are written on them once instead\n     * of being duplicated per orientation and per direction: `translate` is physical, and\n     * `calc(0 * -100%)` is a valid zero.\n     */\n    --carousel-axis-x: 1;\n    --carousel-axis-y: 0;\n    --carousel-dir: 1;\n\n    /*\n     * Effect constants: private, non-contractual geometry with no theming story,\n     * hence no --vectis-* token (the qualification rule still applies).\n     */\n    --carousel-scale-min: 0.75;\n\n    /*\n     * The jump one-shot's starting point, NEUTRAL on all three axes here: each effect below\n     * turns on the one dimension it owns, which lets a single pair of keyframes serve `slide`,\n     * `fade` and `scale` instead of one block each. The direction sign is written from the\n     * script, alongside the axis vector above.\n     */\n    --carousel-jump-opacity: 1;\n    --carousel-jump-scale: 1;\n    --carousel-jump-shift: 0%;\n    --carousel-jump-dir: 1;\n\n    /*\n     * Both names are re-set on every root, to `none`, because a custom property inherits: a\n     * carousel placed inside another's slide would otherwise play its host's effect and replay\n     * its host's jump. Each effect and each jump phase below sets them again on the root that\n     * carries the attribute.\n     */\n    --carousel-effect-name: none;\n    --carousel-jump-name: none;\n\n    --carousel-gap: var(--vectis-space-3);\n    --carousel-item-min: 0px;\n    --carousel-peek: 0px;\n    --carousel-viewport-block: var(--vectis-control-size-carousel-block);\n    /*\n     * Room reserved on the SCROLL axis for the `outside` controls. `0px` and never `0`: it\n     * feeds a `padding-*`, where a unitless zero is invalid; the `--carousel-peek` precedent\n     * three lines up.\n     */\n    --carousel-outset: 0px;\n\n    /*\n     * Positioning context of the `inside` indicator bar, which is deliberately not a child of\n     * the stage; see .v-carousel-stage.\n     */\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The outset is padding on BOTH sides of the axis, which lets every `inside` inset below be\n   * written against the stage's edges with no compensation: an absolutely positioned box\n   * resolves against the PADDING box, the edges\n   * those insets pin to are on the cross axis (which this never touches), and the axis they\n   * centre on stays symmetric. Make this one-sided and the `inside` indicator bar goes\n   * off-centre with nothing to report it.\n   */\n  .v-carousel[data-orientation='horizontal'] {\n    padding-inline: var(--carousel-outset);\n  }\n\n  .v-carousel[data-orientation='vertical'] {\n    --carousel-axis-x: 0;\n    --carousel-axis-y: 1;\n\n    flex-direction: row;\n    padding-block: var(--carousel-outset);\n  }\n\n  /*\n   * `control-height-md` is the size the two VIconButtons actually render at: they pass no\n   * `size`, so they take VIconButton's own `md` default and their width is `--control-height`.\n   * The gutter is that button plus one gap, so the pair lands flush inside the root's border\n   * box and never covers a slide.\n   */\n  .v-carousel[data-controls='outside']:has(> .v-carousel-stage > .v-carousel-controls) {\n    --carousel-outset: calc(var(--vectis-control-height-md) + var(--vectis-space-2));\n  }\n\n  /*\n   * Scoped to `horizontal`: the block axis does not flip. `:dir()` and not a `[dir]` ancestor,\n   * so an LTR subtree inside an RTL page reads its own direction.\n   */\n  .v-carousel[data-orientation='horizontal']:dir(rtl) {\n    --carousel-dir: -1;\n  }\n\n  /*\n   * Positioning context of the controls; and of NOTHING else. The indicator bar is a SIBLING on\n   * purpose: inside this box it would join the height the controls are centred on, and an\n   * `inside` pair would sit visibly below the middle of the slides.\n   */\n  .v-carousel-stage {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n    min-block-size: 0;\n  }\n\n  /*\n   * Vertical only. The root is a `row` there, so the inline axis is the flex MAIN axis and the\n   * stage would shrink-wrap the widest slide's content; an `inside` bar's `inset-inline-end`\n   * would then land on the ROOT's edge instead of the slides'.\n   */\n  .v-carousel[data-orientation='vertical'] > .v-carousel-stage {\n    flex-grow: 1;\n  }\n\n  .v-carousel-viewport {\n    display: flex;\n    gap: var(--carousel-gap);\n    /*\n     * `auto` on both axes, never `auto hidden`: clipping the cross axis would crop the focus\n     * ring of any focusable slide content.\n     */\n    overflow: auto;\n    overscroll-behavior: contain;\n    /* Logical keyword: RTL and vertical need no second declaration. */\n    scroll-snap-type: inline mandatory;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    min-inline-size: 0;\n    min-block-size: 0;\n    border-radius: var(--vectis-radius-surface);\n  }\n\n  .v-carousel-viewport::-webkit-scrollbar {\n    display: none;\n  }\n\n  .v-carousel-viewport:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-carousel[data-orientation='vertical'] > .v-carousel-stage > .v-carousel-viewport {\n    flex-direction: column;\n    scroll-snap-type: block mandatory;\n    /*\n     * A percentage flex-basis resolves against the container's MAIN size, which on\n     * the block axis has nothing intrinsic here: without a definite one the basis\n     * falls back to `auto` and every slide collapses onto its content.\n     */\n    block-size: var(--carousel-viewport-block);\n  }\n\n  .v-carousel-slide {\n    /*\n     * `max()` makes itemMinSize a floor, never a cap, and IS the responsiveness: no breakpoint,\n     * no @container.\n     */\n    /*\n     * LONGHANDS, never the `flex` shorthand; the `animation` rule further down, for the same\n     * reason. A shorthand whose value contains `var()` becomes a PENDING SUBSTITUTION value: it\n     * cannot be expanded until computed-value time, and if any one of the four custom\n     * properties then resolves to something invalid the whole declaration is dropped and `flex`\n     * reverts to its initial `0 1 auto`; shrink 1 and basis auto, which sizes every slide on\n     * its content and destroys the snap grid.\n     */\n    flex-grow: 0;\n    flex-shrink: 0;\n    flex-basis: max(\n      var(--carousel-item-min),\n      calc(\n        (100% - (var(--carousel-per-view) - 1) * var(--carousel-gap) - var(--carousel-peek)) /\n          var(--carousel-per-view)\n      )\n    );\n    /* `auto` is a CONTENT-based floor that can push a flex item past its basis:\n       one unbreakable word would desynchronize the whole snap grid. */\n    min-inline-size: 0;\n    min-block-size: 0;\n    scroll-snap-align: start;\n    position: relative;\n  }\n\n  /*\n   * The last slide is aligned on its END edge, and that is what declares the end of the track\n   * as a snap position in its own right. As soon as a `peek` or an active `itemMinSize` makes\n   * the fit fractional, that slide's START-aligned position lies past\n   * `scrollWidth - clientWidth`, so the only position left near the end is a strip short of it\n   * and the last slide is never fully revealed.\n   */\n  .v-carousel-slide:last-child {\n    scroll-snap-align: end;\n  }\n\n  /*\n   * Each effect names the keyframes it is written on, and the two mechanisms that play them\n   * read the name from here rather than from a selector of their own; which keeps the animation\n   * LISTS below written exactly once.\n   */\n  .v-carousel[data-effect='fade'] {\n    --carousel-effect-name: v-carousel-fade;\n    --carousel-jump-opacity: 0;\n  }\n\n  .v-carousel[data-effect='scale'] {\n    --carousel-effect-name: v-carousel-scale;\n    /* Exactly where the scroll-driven effect holds a slide off the centre, so the\n       one-shot ends on the value that takes over from it. */\n    --carousel-jump-scale: var(--carousel-scale-min);\n  }\n\n  .v-carousel[data-effect='slide'] {\n    /*\n     * A FIFTH of the slide, not its width. Every inner box shifts at once, so a full one would\n     * park each over its neighbour and the overlap would paint the wrong slide for the length\n     * of the run; invisible at one item per view, plain at three.\n     */\n    --carousel-jump-shift: 20%;\n  }\n\n  /*\n   * The pair of names. `jumpPhase` alternates between two identical keyframe blocks because\n   * re-setting an attribute does not restart a running animation, and `animation-name` is the\n   * one thing that does.\n   */\n  .v-carousel-effect {\n    block-size: 100%;\n    animation-name: var(--carousel-jump-name, none);\n    animation-duration: var(--vectis-duration-base);\n    animation-timing-function: var(--vectis-ease-out);\n  }\n\n  .v-carousel[data-jump='a'] {\n    --carousel-jump-name: v-carousel-jump-a;\n  }\n\n  .v-carousel[data-jump='b'] {\n    --carousel-jump-name: v-carousel-jump-b;\n  }\n\n  /*\n   * Progressively enhance supported scroll timelines. Animate the inner box, never the snap\n   * area: transformed snap geometry would create a scroll-position feedback loop.\n   */\n  @supports (view-timeline-name: --v) and (animation-range: cover) {\n    .v-carousel:not([data-effect='slide'])\n      > .v-carousel-stage\n      > .v-carousel-viewport\n      > .v-carousel-slide {\n      view-timeline: --carousel-view inline;\n    }\n\n    .v-carousel[data-orientation='vertical']:not([data-effect='slide'])\n      > .v-carousel-stage\n      > .v-carousel-viewport\n      > .v-carousel-slide {\n      view-timeline: --carousel-view block;\n    }\n\n    .v-carousel-effect {\n      /*\n       * Longhands, never the `animation` shorthand: `animation-timeline` and\n       * `animation-duration` are reset-only sub-properties, so a shorthand written afterwards\n       * would silently put the timeline back to `auto` and the duration to 0s, and every effect\n       * would vanish with no error. six parallel lists, and their order is the arbitration.\n       */\n      animation-name: var(--carousel-effect-name, none), var(--carousel-jump-name, none);\n      animation-timeline: --carousel-view, auto;\n      animation-range: cover, normal;\n      animation-fill-mode: both, none;\n      animation-timing-function: linear, var(--vectis-ease-out);\n      /* `auto` is the whole timeline. A duration in seconds would be taken as a\n         PROPORTION of it, and the effect would end a fraction of the way in. */\n      animation-duration: auto, var(--vectis-duration-base);\n    }\n  }\n\n  /*\n   * Over the `cover` range a slide's origin travels the whole viewport+slide distance, so a\n   * counter-translate of ±100% of the slide's own size pins it on the scrollport when the two\n   * are equal; which is why `fade` is defined at one item per view only. The result is a true\n   * dissolve in place, gap included.\n   */\n  @keyframes v-carousel-fade {\n    0% {\n      opacity: 0;\n      translate: calc(var(--carousel-axis-x) * var(--carousel-dir) * -100%)\n        calc(var(--carousel-axis-y) * -100%);\n    }\n    50% {\n      opacity: 1;\n      translate: 0 0;\n    }\n    100% {\n      opacity: 0;\n      translate: calc(var(--carousel-axis-x) * var(--carousel-dir) * 100%)\n        calc(var(--carousel-axis-y) * 100%);\n    }\n  }\n\n  /*\n   * Geometry only, no opacity dimming; and that is an accessibility decision, not a taste one:\n   * a slide off the centre still holds real text, and fading it is a measurable contrast loss\n   * that axe rightly reports. The scale alone carries the depth.\n   */\n  @keyframes v-carousel-scale {\n    0%,\n    100% {\n      scale: var(--carousel-scale-min);\n    }\n    50% {\n      scale: 1;\n    }\n  }\n\n  /*\n   * Two IDENTICAL BLOCKS, and the duplication is the mechanism rather than an oversight:\n   * `jumpPhase` alternates between these names, because a CSS animation restarts on a change of\n   * `animation-name` and on nothing else. Edit one, edit both.\n   */\n  @keyframes v-carousel-jump-a {\n    from {\n      opacity: var(--carousel-jump-opacity);\n      scale: var(--carousel-jump-scale);\n      translate: calc(\n          var(--carousel-axis-x) * var(--carousel-dir) * var(--carousel-jump-dir) *\n            var(--carousel-jump-shift)\n        )\n        calc(var(--carousel-axis-y) * var(--carousel-jump-dir) * var(--carousel-jump-shift));\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n      translate: 0 0;\n    }\n  }\n\n  @keyframes v-carousel-jump-b {\n    from {\n      opacity: var(--carousel-jump-opacity);\n      scale: var(--carousel-jump-scale);\n      translate: calc(\n          var(--carousel-axis-x) * var(--carousel-dir) * var(--carousel-jump-dir) *\n            var(--carousel-jump-shift)\n        )\n        calc(var(--carousel-axis-y) * var(--carousel-jump-dir) * var(--carousel-jump-shift));\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n      translate: 0 0;\n    }\n  }\n\n  .v-carousel-controls {\n    display: flex;\n    /*\n     * A floor, not the layout; `space-between` places the pair. It only ever shows on a stage\n     * narrow enough to bring the two buttons together.\n     */\n    gap: var(--vectis-space-2);\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-carousel[data-orientation='vertical'] > .v-carousel-stage > .v-carousel-controls {\n    flex-direction: column;\n  }\n\n  /*\n   * `pointer-events` is handed back to the buttons alone, so the strip does not swallow a drag\n   * over the slides. Enumerated rather than a bare `[data-controls]`: a third placement has to\n   * opt in by hand (the VTabs `:is()` rule).\n   */\n  .v-carousel:is([data-controls='inside'], [data-controls='outside'])\n    > .v-carousel-stage\n    > .v-carousel-controls {\n    position: absolute;\n    inset: 0;\n    align-items: center;\n    justify-content: space-between;\n    pointer-events: none;\n  }\n\n  .v-carousel[data-controls='inside'] > .v-carousel-stage > .v-carousel-controls {\n    inset: var(--vectis-space-2);\n  }\n\n  /*\n   * `outside`: the pair is pulled out of the stage by exactly the gutter the root reserved, so\n   * each button sits in that padding, one gap clear of the slides, still centred on the stage's\n   * cross axis. RTL is FREE and needs no `--carousel-dir`: `inset-inline` is logical, the two\n   * insets are equal so the box is direction-symmetric, and `space-between` puts `previous` at\n   * the inline START; the right-hand side in RTL, where it belongs.\n   */\n  .v-carousel[data-controls='outside'] > .v-carousel-stage > .v-carousel-controls {\n    inset-inline: calc(-1 * var(--carousel-outset));\n  }\n\n  .v-carousel[data-orientation='vertical'][data-controls='outside']\n    > .v-carousel-stage\n    > .v-carousel-controls {\n    inset-inline: 0;\n    inset-block: calc(-1 * var(--carousel-outset));\n  }\n\n  /*\n   * `:has(:focus-visible)` and never `:focus-within`. A pointer click LEAVES focus on the\n   * control it hit, so reading any focus pins the pair revealed until the reader clicks outside\n   * the carousel entirely, long after the pointer has gone.\n   */\n  @media (hover: hover) {\n    .v-carousel[data-controls-visibility='hover'] > .v-carousel-stage > .v-carousel-controls {\n      opacity: 0;\n    }\n\n    .v-carousel[data-controls-visibility='hover']:hover > .v-carousel-stage > .v-carousel-controls,\n    .v-carousel[data-controls-visibility='hover']:has(:focus-visible)\n      > .v-carousel-stage\n      > .v-carousel-controls {\n      opacity: 1;\n    }\n  }\n\n  .v-carousel-control {\n    pointer-events: auto;\n  }\n\n  .v-carousel-indicators {\n    display: flex;\n    gap: var(--vectis-space-1);\n    align-items: center;\n    justify-content: center;\n  }\n\n  .v-carousel[data-orientation='vertical'] > .v-carousel-indicators {\n    flex-direction: column;\n  }\n\n  /*\n   * `inside`: centred on the block-end edge, with no surface of its own; a pill behind the dots\n   * covers a slice of the slide the whole time, which is a lot of media to spend on six 8px\n   * marks. The legibility moves into the dots instead (see below), where it costs their own\n   * footprint and nothing more.\n   */\n  .v-carousel[data-indicators='inside'] > .v-carousel-indicators {\n    position: absolute;\n    inset-block-end: var(--vectis-space-3);\n    inset-inline: 0;\n    margin-inline: auto;\n    inline-size: fit-content;\n  }\n\n  .v-carousel[data-orientation='vertical'][data-indicators='inside'] > .v-carousel-indicators {\n    inset-block: 0;\n    inset-inline: auto var(--vectis-space-3);\n    block-size: fit-content;\n    margin-block: auto;\n    margin-inline: 0;\n  }\n\n  /*\n   * The dot is 8px but the control is not: a 24px transparent hit area is what\n   * satisfies `target-size` without inflating the visual.\n   */\n  .v-carousel-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: var(--vectis-control-height-xs);\n    min-block-size: var(--vectis-control-height-xs);\n    padding: 0;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--vectis-radius-pill);\n  }\n\n  .v-carousel-indicator:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-carousel-dot {\n    display: block;\n    inline-size: var(--vectis-control-size-carousel-indicator);\n    block-size: var(--vectis-control-size-carousel-indicator);\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    transition:\n      inline-size var(--vectis-duration-base) var(--vectis-ease-default),\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      background var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-carousel-indicator:hover .v-carousel-dot {\n    background: var(--vectis-color-text-subtle);\n  }\n\n  .v-carousel-indicator[aria-current] .v-carousel-dot {\n    inline-size: var(--vectis-control-size-carousel-indicator-active);\n    background: var(--vectis-color-accent);\n  }\n\n  .v-carousel[data-orientation='vertical']\n    > .v-carousel-indicators\n    > .v-carousel-indicator[aria-current]\n    .v-carousel-dot {\n    inline-size: var(--vectis-control-size-carousel-indicator);\n    block-size: var(--vectis-control-size-carousel-indicator-active);\n  }\n\n  /*\n   * `surface-inverse` is the ring colour because it is dark in both themes, which is the\n   * property needed here. Drawn as a `box-shadow`, so it costs no layout and the dots stay 8px.\n   */\n  .v-carousel[data-indicators='inside'] > .v-carousel-indicators .v-carousel-dot {\n    background: color-mix(in oklab, var(--vectis-color-text-on-accent) 55%, transparent);\n    box-shadow: 0 0 0 1px color-mix(in oklab, var(--vectis-color-surface-inverse) 45%, transparent);\n  }\n\n  .v-carousel[data-indicators='inside']\n    > .v-carousel-indicators\n    > .v-carousel-indicator:hover\n    .v-carousel-dot,\n  .v-carousel[data-indicators='inside']\n    > .v-carousel-indicators\n    > .v-carousel-indicator[aria-current]\n    .v-carousel-dot {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /*\n   * Forced colours flatten a background to `Canvas` and drop every shadow, and a dot is made of\n   * nothing else: left alone, every dot and the current page's pill vanish. Each dot draws its\n   * own edge and the current one the system selection colour.\n   */\n  @media (forced-colors: active) {\n    .v-carousel-indicator\n      .v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 1px CanvasText;\n    }\n\n    .v-carousel-indicator:hover\n      .v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot {\n      box-shadow: inset 0 0 0 1px Highlight;\n    }\n\n    .v-carousel-indicator[aria-current]\n      .v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot.v-carousel-dot {\n      background: Highlight;\n      box-shadow: none;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * `animation: none` and not `animation-name: none`: it also drops the timeline binding, so\n     * the effect stops sampling the scroller altogether. Being the shorthand is also what takes\n     * the jump one-shot with it, both animations living in the same list; a jump then simply\n     * lands, which the preference asks for and what `scroll-behavior: auto` below already does\n     * to the travel.\n     */\n    .v-carousel-effect {\n      animation: none;\n    }\n\n    .v-carousel-viewport {\n      scroll-behavior: auto;\n    }\n\n    .v-carousel-controls,\n    .v-carousel-dot {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VCheckbox/VCheckMark.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-check-mark{inline-size:var(--vectis-control-size-check);block-size:var(--vectis-control-size-check);border:var(--vectis-control-border-width) solid var(--vectis-color-border-strong);border-radius:min(var(--vectis-radius-interactive), calc(var(--vectis-control-size-check) / 4));color:var(--vectis-color-text-on-accent);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default);background:0 0;flex:none;place-items:center;display:inline-grid}.v-check-mark-glyph{inline-size:var(--vectis-control-size-check-mark);block-size:var(--vectis-control-size-check-mark)}.v-check-mark-tick,.v-check-mark-dash{opacity:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default)}@media (prefers-reduced-motion:reduce){.v-check-mark,.v-check-mark-tick,.v-check-mark-dash{transition:none}}}

package/dist/components/VCheckbox/VCheckMark.js

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

package/dist/components/VCheckbox/VCheckMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCheckMark.js","names":[],"sources":["../../../src/components/VCheckbox/VCheckMark.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The box drawn for a checkbox, for VCheckbox and the checkable rows of VTreeView. It draws the\n * unchecked box and carries both marks, hidden: each consumer paints the checked and mixed states\n * from wherever that state lives, the native input's pseudo-classes or the row's `aria-checked`.\n * The rules here weigh (0,1,0), so any qualified state rule overrides them.\n */\n</script>\n\n<template>\n  <span class=\"v-check-mark\" aria-hidden=\"true\">\n    <svg class=\"v-check-mark-glyph\" viewBox=\"0 0 12 12\">\n      <path\n        class=\"v-check-mark-tick\"\n        d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        stroke-width=\"1.75\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        class=\"v-check-mark-dash\"\n        d=\"M3 6h6\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        stroke-width=\"1.75\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A pill override on --vectis-radius-interactive would otherwise turn the box into a disc,\n   * and a round checkbox reads as a radio.\n   */\n  .v-check-mark {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-control-size-check);\n    block-size: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--vectis-control-size-check) / 4)\n    );\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-check-mark-glyph {\n    inline-size: var(--vectis-control-size-check-mark);\n    block-size: var(--vectis-control-size-check-mark);\n  }\n\n  .v-check-mark-tick,\n  .v-check-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-check-mark,\n    .v-check-mark-tick,\n    .v-check-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VCheckbox/VCheckMark.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { createElementBlock as e, createElementVNode as t, defineComponent as n, openBlock as r } from "vue";
+//#region src/components/VCheckbox/VCheckMark.vue?vue&type=script&setup=true&lang.ts
+var i = {
+	class: "v-check-mark",
+	"aria-hidden": "true"
+}, a = /*@__PURE__*/ n({
+	__name: "VCheckMark",
+	setup(n) {
+		return (n, a) => (r(), e("span", i, [...a[0] ||= [t("svg", {
+			class: "v-check-mark-glyph",
+			viewBox: "0 0 12 12"
+		}, [t("path", {
+			class: "v-check-mark-tick",
+			d: "M2.5 6.5l2.5 2.5 4.5-5.5",
+			fill: "none",
+			stroke: "currentcolor",
+			"stroke-width": "1.75",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round"
+		}), t("path", {
+			class: "v-check-mark-dash",
+			d: "M3 6h6",
+			fill: "none",
+			stroke: "currentcolor",
+			"stroke-width": "1.75",
+			"stroke-linecap": "round"
+		})], -1)]]));
+	}
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=VCheckMark.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VCheckbox/VCheckMark.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCheckMark.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VCheckbox/VCheckMark.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The box drawn for a checkbox, for VCheckbox and the checkable rows of VTreeView. It draws the\n * unchecked box and carries both marks, hidden: each consumer paints the checked and mixed states\n * from wherever that state lives, the native input's pseudo-classes or the row's `aria-checked`.\n * The rules here weigh (0,1,0), so any qualified state rule overrides them.\n */\n</script>\n\n<template>\n  <span class=\"v-check-mark\" aria-hidden=\"true\">\n    <svg class=\"v-check-mark-glyph\" viewBox=\"0 0 12 12\">\n      <path\n        class=\"v-check-mark-tick\"\n        d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        stroke-width=\"1.75\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        class=\"v-check-mark-dash\"\n        d=\"M3 6h6\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        stroke-width=\"1.75\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A pill override on --vectis-radius-interactive would otherwise turn the box into a disc,\n   * and a round checkbox reads as a radio.\n   */\n  .v-check-mark {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-control-size-check);\n    block-size: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--vectis-control-size-check) / 4)\n    );\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-check-mark-glyph {\n    inline-size: var(--vectis-control-size-check-mark);\n    block-size: var(--vectis-control-size-check-mark);\n  }\n\n  .v-check-mark-tick,\n  .v-check-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-check-mark,\n    .v-check-mark-tick,\n    .v-check-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;yBAUE,EAoBO,QApBP,GAoBO,CAAA,GAAA,AAAA,EAAA,OAAA,CAnBL,EAkBM,OAAA;GAlBD,OAAM;GAAqB,SAAQ;MACtC,EAQE,QAAA;GAPA,OAAM;GACN,GAAE;GACF,MAAK;GACL,QAAO;GACP,gBAAa;GACb,kBAAe;GACf,mBAAgB;MAElB,EAOE,QAAA;GANA,OAAM;GACN,GAAE;GACF,MAAK;GACL,QAAO;GACP,gBAAa;GACb,kBAAe"}

package/dist/components/VCheckbox/VCheckbox.css

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

package/dist/components/VCheckbox/VCheckbox.d.ts

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

package/dist/components/VCheckbox/VCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"VCheckbox.js","names":[],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native checkbox for focus, forms and validity. Keep hints outside its label and\n * synchronize indeterminate after rendering.\n */\n\nimport { ref, watchEffect } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\n/** Which side of the box the label sits on. */\nexport type CheckboxLabelPosition = 'start' | 'end'\n\ninterface CheckboxProps {\n  /** The text beside the box, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the checkbox for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Shows the box as partially checked, a dash instead of a tick. */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the state without allowing it to be changed. The checkbox can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  label: undefined,\n  hint: undefined,\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The root element is a layout box, so the attributes the consumer passes must be\n// redirected: `name`, `value`, `required` and the aria-* belong on the input, and left on\n// the wrapper they would take part in neither the form nor the accessibility tree.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * Whether the box is ticked. It starts unticked. `indeterminate` is a separate prop: the\n * dash is a third appearance, never a third value of this one.\n */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @ssr @core\n// The effect alone is not enough. Activating a checkbox CLEARS the property as part of the\n// gesture, and the prop it reads has not moved, so nothing re-runs it and the dash never comes\n// back.\nfunction syncIndeterminate() {\n  if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n}\n\nwatchEffect(syncIndeterminate, { flush: 'post' })\n\n// @core\n// The native `readonly` attribute does nothing on a checkbox. Cancelling the click is what\n// refuses the change: the browser then puts `checked` and `indeterminate` back as they were and\n// fires no `change`, so the v-model never hears of it.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real checkbox.\ndefineExpose({\n  /** Moves the focus to the real checkbox. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"checkbox\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-checkbox v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <!--\n        `aria-describedby` comes after the forwarded attributes, which lets the aggregated list,\n        the consumer's references plus the hint, replace theirs.\n      -->\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        class=\"v-checkbox-input v-hidden-input\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n        @change=\"syncIndeterminate\"\n      />\n      <span class=\"v-checkbox-box\" aria-hidden=\"true\">\n        <svg class=\"v-checkbox-mark\" viewBox=\"0 0 12 12\">\n          <path\n            class=\"v-checkbox-mark-check\"\n            d=\"M2.5 6.5l2.5 2.5 4.5-5.5\"\n            fill=\"none\"\n            stroke=\"currentcolor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            class=\"v-checkbox-mark-dash\"\n            d=\"M3 6h6\"\n            fill=\"none\"\n            stroke=\"currentcolor\"\n            stroke-width=\"1.75\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </span>\n      <span v-if=\"$slots.default || label\" class=\"v-checkbox-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-checkbox-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * A pill override on --vectis-radius-interactive would otherwise turn the box into a disc,\n   * and a round checkbox reads as a radio.\n   */\n  .v-checkbox-box {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--vectis-control-size-check) / 4)\n    );\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-checkbox-mark {\n    width: var(--vectis-control-size-check-mark);\n    height: var(--vectis-control-size-check-mark);\n  }\n\n  .v-checkbox-mark-check,\n  .v-checkbox-mark-dash {\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled, :checked, :indeterminate, :user-invalid, [aria-invalid='true'])\n    + .v-checkbox-box {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:is(:checked, :indeterminate) + .v-checkbox-box {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled, :user-invalid, [aria-invalid='true']):is(\n      :checked,\n      :indeterminate\n    )\n    + .v-checkbox-box {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * The mark takes the surface colour, which contrasts with that fill in both themes, where\n   * white would vanish against the light grey of the dark theme. `:where()` keeps both rules at\n   * the weight of the states they sit between.\n   */\n  :where(.v-checkbox[data-readonly]) .v-checkbox-input + .v-checkbox-box {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-checkbox[data-readonly])\n    .v-checkbox-input:is(:checked, :indeterminate)\n    + .v-checkbox-box {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-checkbox-input:user-invalid + .v-checkbox-box,\n  .v-checkbox-input[aria-invalid='true'] + .v-checkbox-box {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-checkbox-input:disabled + .v-checkbox-box {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * The two rules below are (0,4,0) and `checked` and `indeterminate` are INDEPENDENT DOM\n   * properties, so a box can be both at once. Nothing but the source order decides what such a\n   * box shows: the second rule hides the tick and the dash wins.\n   */\n  .v-checkbox-input:checked + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-check {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-checkbox-box .v-checkbox-mark-dash {\n    opacity: 1;\n  }\n\n  @media (forced-colors: active) {\n    /*\n     * The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     * cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and a\n     * hover left winning would then paint its real grey over the system colour.\n     */\n    .v-checkbox-input.v-checkbox-input.v-checkbox-input.v-checkbox-input.v-checkbox-input:is(\n        :checked,\n        :indeterminate\n      ):not(:disabled)\n      + .v-checkbox-box {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-checkbox-box,\n    .v-checkbox-mark-check,\n    .v-checkbox-mark-dash {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VCheckbox.js","names":[],"sources":["../../../src/components/VCheckbox/VCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native checkbox for focus, forms and validity. Keep hints outside its label and\n * synchronize indeterminate after rendering.\n */\n\nimport { watchEffect } from 'vue'\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\nimport VCheckMark from './VCheckMark.vue'\n\nimport { useChoice } from '../../composables/useChoice'\n\n/** Which side of the box the label sits on. */\nexport type CheckboxLabelPosition = 'start' | 'end'\n\ninterface CheckboxProps {\n  /** The text beside the box, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the checkbox for assistive technology,\n   * so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Shows the box as partially checked, a dash instead of a tick. */\n  indeterminate?: boolean\n  /** Which side of the box the label sits on. */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Pushes the label and the box to opposite ends of the line, the row taking the\n   * full width available. This is the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the box and tells assistive technology\n   * so. Use it for a rule the browser cannot check by itself; native validity is\n   * already handled without it.\n   */\n  invalid?: boolean\n  /** Makes the checkbox unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the state without allowing it to be changed. The checkbox can still be\n   * focused, is announced as read-only and is still submitted with its form; a click\n   * or the Space key simply changes nothing.\n   */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  indeterminate: false,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/**\n * Whether the box is ticked. It starts unticked. `indeterminate` is a separate prop: the\n * dash is a third appearance, never a third value of this one.\n */\nconst model = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\n// @ssr @core\n// The effect alone is not enough. Activating a checkbox CLEARS the property as part of the\n// gesture, and the prop it reads has not moved, so nothing re-runs it and the dash never comes\n// back.\nfunction syncIndeterminate() {\n  if (inputEl.value) inputEl.value.indeterminate = props.indeterminate\n}\n\nwatchEffect(syncIndeterminate, { flush: 'post' })\n\ndefineExpose(exposed)\n</script>\n\n<template>\n  <span\n    class=\"v-checkbox v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <!--\n        `aria-describedby` comes after the forwarded attributes, which lets the aggregated list,\n        the consumer's references plus the hint, replace theirs.\n      -->\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        class=\"v-checkbox-input v-hidden-input\"\n        :aria-invalid=\"invalid || !!error || undefined\"\n        :aria-readonly=\"readonly || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n        @change=\"syncIndeterminate\"\n      />\n      <VCheckMark />\n      <span v-if=\"$slots.default || label\" class=\"v-checkbox-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled, :checked, :indeterminate, :user-invalid, [aria-invalid='true'])\n    + .v-check-mark {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-checkbox-input:is(:checked, :indeterminate) + .v-check-mark {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-checkbox:not([data-readonly])\n    .v-choice-row:hover\n    .v-checkbox-input:not(:disabled, :user-invalid, [aria-invalid='true']):is(\n      :checked,\n      :indeterminate\n    )\n    + .v-check-mark {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * The mark takes the surface colour, which contrasts with that fill in both themes, where\n   * white would vanish against the light grey of the dark theme. `:where()` keeps both rules at\n   * the weight of the states they sit between.\n   */\n  :where(.v-checkbox[data-readonly]) .v-checkbox-input + .v-check-mark {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-checkbox[data-readonly])\n    .v-checkbox-input:is(:checked, :indeterminate)\n    + .v-check-mark {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-checkbox-input:user-invalid + .v-check-mark,\n  .v-checkbox-input[aria-invalid='true'] + .v-check-mark {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-checkbox-input:disabled + .v-check-mark {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * The two rules below are (0,4,0) and `checked` and `indeterminate` are INDEPENDENT DOM\n   * properties, so a box can be both at once. Nothing but the source order decides what such a\n   * box shows: the second rule hides the tick and the dash wins.\n   */\n  .v-checkbox-input:checked + .v-check-mark .v-check-mark-tick {\n    opacity: 1;\n  }\n\n  .v-checkbox-input:indeterminate + .v-check-mark .v-check-mark-tick {\n    opacity: 0;\n  }\n\n  .v-checkbox-input:indeterminate + .v-check-mark .v-check-mark-dash {\n    opacity: 1;\n  }\n\n  @media (forced-colors: active) {\n    /*\n     * The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     * cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and a\n     * hover left winning would then paint its real grey over the system colour.\n     */\n    .v-checkbox-input.v-checkbox-input.v-checkbox-input.v-checkbox-input.v-checkbox-input:is(\n        :checked,\n        :indeterminate\n      ):not(:disabled)\n      + .v-check-mark {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}