vectis-ui 0.1.0 → 0.8.0

package/dist/components/VPopover/VPopover.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,26 @@
-import { usePopover as e } from "../../composables/usePopover.js";
-import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, unref as d, useId as f, useModel as p, useSlots as m, watch as h } from "vue";
+import { usePopover as e, usePopoverModel as t } from "../../composables/usePopover.js";
+import { computed as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, unref as d, useId as f, useModel as p, useSlots as m } from "vue";
 //#region src/components/VPopover/VPopover.vue?vue&type=script&setup=true&lang.ts
-var g = ["data-trigger"], _ = [
+var h = ["data-trigger"], g = [
 	"id",
 	"popover",
-	"data-placement"
-], v = /*@__PURE__*/ i({
+	"data-placement",
+	"data-match-trigger"
+], _ = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "VPopover",
-	props: /*@__PURE__*/ a({
+	props: /*@__PURE__*/ o({
 		id: { default: void 0 },
 		placement: { default: "bottom-start" },
 		mode: { default: "auto" },
 		anchor: { default: void 0 },
-		surface: {
+		bare: {
 			type: Boolean,
-			default: !0
+			default: !1
+		},
+		matchTrigger: {
+			type: Boolean,
+			default: !1
 		}
 	}, {
 		open: {
@@ -25,41 +30,42 @@ var g = ["data-trigger"], _ = [
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(i, { expose: a }) {
-		let v = i, y = p(i, "open"), b = m(), x = l(null), S = f(), C = t(() => v.id ?? S), { shown: w, syncShown: T, show: E, hide: D } = e(x), O = t(() => b.trigger !== void 0), k = t(() => ({
-			popovertarget: C.value,
-			"aria-expanded": y.value,
-			"aria-controls": C.value
-		})), A = t(() => v.anchor ? { "--anchor-name": v.anchor } : void 0);
-		function j(e) {
-			T(e), y.value = w.value;
+	setup(a, { expose: o }) {
+		let _ = a, v = p(a, "open"), y = m(), b = l(null), x = f(), S = n(() => _.id ?? x), { shown: C, syncShown: w, show: T, hide: E } = e(b);
+		function D() {
+			return y.trigger !== void 0;
+		}
+		let O = n(() => ({
+			popovertarget: S.value,
+			"aria-expanded": v.value,
+			"aria-controls": S.value
+		})), k = n(() => ({ "--popover-anchor-name": _.anchor ?? "--popover-anchor" }));
+		function A(e) {
+			w(e), v.value = C.value;
 		}
-		return h(y, (e) => {
-			e !== w.value && (e ? E() : D());
-		}), s(() => {
-			y.value && E();
-		}), a({
-			show: E,
-			hide: D,
-			el: x
-		}), (e, t) => (c(), n("span", {
+		return t(v, () => C.value, T, E), o({
+			show: T,
+			close: E,
+			el: b
+		}), (e, t) => (c(), r("span", {
 			class: "v-popover",
-			"data-trigger": O.value ? "" : void 0
-		}, [u(e.$slots, "trigger", { triggerProps: k.value }), r("div", o({
-			id: C.value,
+			"data-trigger": D() ? "" : void 0
+		}, [u(e.$slots, "trigger", { triggerProps: O.value }), i("div", s({
+			id: S.value,
 			ref_key: "panelEl",
-			ref: x,
-			popover: i.mode,
-			class: ["v-overlay v-popover-panel v-floating", { "v-panel": i.surface }],
-			"data-placement": i.placement,
-			style: A.value
+			ref: b,
+			popover: a.mode,
+			class: ["v-overlay v-popover-panel v-floating", { "v-panel": !a.bare }],
+			"data-placement": a.placement,
+			"data-match-trigger": a.matchTrigger ? "" : void 0,
+			style: k.value
 		}, e.$attrs, {
-			onBeforetoggle: t[0] ||= (...e) => d(T) && d(T)(...e),
-			onToggle: j
-		}), [u(e.$slots, "default")], 16, _)], 8, g));
+			onBeforetoggle: t[0] ||= (...e) => d(w) && d(w)(...e),
+			onToggle: A
+		}), [u(e.$slots, "default")], 16, g)], 8, h));
 	}
 });
 //#endregion
-export { v as default };
+export { _ as default };
 
 //# sourceMappingURL=VPopover.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VPopover.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/VPopover/VPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A panel that floats above the page, next to whatever opened it. It is built on the\n * browser's own popover support and positions itself entirely in CSS, so there is no\n * positioning library involved and no JavaScript measuring anything.\n *\n * What it carries is deliberately only the PLUMBING every panel of the design system\n * needs: the popover element and how it opens, the bridge between the browser's own\n * open state and `v-model:open`, the anchoring and the placement, and an optional\n * surface — the background, border and shadow of a panel.\n *\n * What it carries NOT is just as deliberate: no ARIA role, no keyboard, no focus\n * management and no rule about when to close. Those are exactly what makes a menu\n * different from a listbox or a tooltip, and they stay with the components building\n * on it — VTooltip, VCombobox, VDateInput, VTimeInput. Turning this into one panel\n * with a `role` prop would put all four sets of behaviour back into a single file.\n *\n * There are two ways of anchoring it, and they exclude one another:\n *\n * - the `#trigger` slot, where the component wraps the trigger and names that\n *   wrapper as the anchor. The name is shared by every instance and confined to each\n *   wrapper's own subtree, which is what makes a panel resolve ITS trigger rather\n *   than the last one named on the page — a real risk, since an open panel moves to\n *   the top layer and counts as coming after the whole document.\n * - the `anchor` prop, for a consumer that already owns its root and its control —\n *   VCombobox and the pickers do. They name the anchor themselves and pass the name\n *   in, and the wrapper then disappears from the layout entirely.\n *\n * The only JavaScript is the bridge between `v-model:open` and the browser's own\n * imperative popover methods.\n */\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport { usePopover } from '../../composables/usePopover'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/**\n * What the trigger has to carry for the browser to open the panel and for assistive\n * technology to know what it controls. It is the disclosure pattern and nothing more:\n * no role and no `aria-haspopup` are imposed, since only the consumer knows what kind\n * of panel it is opening.\n */\nexport type PopoverTriggerProps = {\n  popovertarget: string\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\ninterface PopoverProps {\n  /**\n   * The id of the panel, which the trigger points at. One is generated when none is\n   * given, so this is only needed to tie the panel to something outside the\n   * component.\n   */\n  id?: string\n  /**\n   * Where the panel is placed relative to its trigger. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: PopoverPlacement\n  /**\n   * How the panel closes. `auto` lets the browser dismiss it on a click outside or on\n   * Escape, and stack it with other panels; `manual` leaves everything to the\n   * consumer, which is what a panel with its own focus and dismissal rules needs.\n   */\n  mode?: 'auto' | 'manual'\n  /**\n   * The name of an anchor the consumer has set on its own control, written as a CSS\n   * dashed identifier such as `--tooltip-anchor`. Supplying it replaces the internal\n   * wrapper, which is the required route as soon as the trigger is a text input,\n   * where the browser's own `popovertarget` attribute is not allowed.\n   */\n  anchor?: string\n  /**\n   * Gives the panel the look of a surface: background, border, shadow and rounded\n   * corners. Turn it off for a panel that brings its own, as VDatePicker does.\n   */\n  surface?: boolean\n}\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n  id: undefined,\n  placement: 'bottom-start',\n  mode: 'auto',\n  anchor: undefined,\n  surface: true,\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = defineSlots<{\n  /**\n   * The element that opens the panel. Bind the `triggerProps` it receives onto a\n   * button of your own: that is what wires the two together.\n   */\n  trigger?(props: { triggerProps: PopoverTriggerProps }): unknown\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\n/*\n * Everything the consumer passes — the ARIA role, the aria-*, the data-*, class,\n * style and the listeners — goes on the PANEL rather than on the anchoring wrapper,\n * because the panel is what the consumer is really describing and styling.\n *\n * This is a deliberate departure from the design system's usual wrapper pattern,\n * which keeps class and style on the root; `useRootAttrs` therefore does not apply\n * here.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst panelEl = ref<HTMLElement | null>(null)\nconst generatedId = useId()\nconst panelId = computed(() => props.id ?? generatedId)\n\n// The open state and the guards that keep the calls idempotent live in usePopover.\n// The invariant to respect here: `shown` is fed by the panel's own events and never\n// assigned by hand, so the browser stays the source of truth — it can close the panel\n// without asking us.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\nconst hasTrigger = computed(() => slots.trigger !== undefined)\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n  popovertarget: panelId.value,\n  'aria-expanded': open.value,\n  'aria-controls': panelId.value,\n}))\n\n// Both anchoring modes are served by one CSS declaration: the panel reads this\n// variable, and falls back to the wrapper's own anchor name when it is not set.\nconst panelStyle = computed(() => (props.anchor ? { '--anchor-name': props.anchor } : undefined))\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  open.value = shown.value\n}\n\n// Opening and closing from the model. The guard is what keeps the two directions\n// from chasing each other: a panel closed by the browser has already updated `shown`,\n// and calling hide() again would be pointless at best.\nwatch(open, (value) => {\n  if (value === shown.value) return\n  if (value) show()\n  else hide()\n})\n\n// @ssr — a watcher does not run during the server render, so a panel asked to be\n// open from the start would never be told to open. Replaying the initial state on\n// mount is what covers that case.\nonMounted(() => {\n  if (open.value) show()\n})\n\ndefineExpose({ show, hide, el: panelEl })\n</script>\n\n<template>\n  <span class=\"v-popover\" :data-trigger=\"hasTrigger ? '' : undefined\">\n    <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    <div\n      :id=\"panelId\"\n      ref=\"panelEl\"\n      :popover=\"mode\"\n      class=\"v-overlay v-popover-panel v-floating\"\n      :class=\"{ 'v-panel': surface }\"\n      :data-placement=\"placement\"\n      :style=\"panelStyle\"\n      v-bind=\"$attrs\"\n      @beforetoggle=\"syncShown\"\n      @toggle=\"onToggle\"\n    >\n      <slot />\n    </div>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Without a trigger the wrapper has nothing to wrap, so `display: contents` takes\n   * it out of the layout entirely — the panel is positioned against the viewport and\n   * does not depend on it. Left as an empty inline-block it would still create a line\n   * box, and therefore add height, inside every component using this route.\n   */\n  .v-popover {\n    display: contents;\n  }\n\n  /*\n   * With a trigger the wrapper must generate a box, since that box is the ANCHOR —\n   * which is why `display: contents` stops at the rule above. It is FLEX rather than\n   * inline-block, the `.v-badge-host` and `.v-tooltip` form: both are inline-level\n   * atomic boxes, so text flows around them identically, but an inline-block opens an\n   * inline formatting context for the trigger, which then lands on a line box and adds\n   * the strut's descender to the wrapper. The wrapper being the anchor, that offsets\n   * the panel as well as the row.\n   *\n   * `align-items: center` covers the rest: a wrapper stretched by a parent in\n   * `align-items: stretch` would otherwise stretch the trigger with it, where the\n   * inline-block form left it at its natural height.\n   */\n  .v-popover[data-trigger] {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --popover-anchor;\n    /* Confining the name to this subtree is indispensable, not tidy: an open panel\n       moves to the top layer, where anchor resolution treats it as coming after the\n       whole document. Without the confinement every panel on the page would attach\n       itself to the LAST wrapper carrying this name. */\n    anchor-scope: --popover-anchor;\n  }\n\n  /*\n   * The panel gets this one declaration and no dimension whatsoever. Widths, heights\n   * and overflow differ from one consumer to the next, and since each component ships\n   * its own stylesheet, a declaration here would sit at equal specificity with theirs\n   * — leaving the winner to whichever order the consumer's bundler happens to\n   * produce.\n   */\n  .v-popover-panel {\n    position-anchor: var(--anchor-name, --popover-anchor);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FA,IAAM,IAAQ,GAQR,IAAO,EAAoB,GAAC,MAA0B,GAEtD,IAAQ,EAAA,GAqBR,IAAU,EAAwB,IAAI,GACtC,IAAc,EAAM,GACpB,IAAU,QAAe,EAAM,MAAM,CAAW,GAMhD,EAAE,UAAO,cAAW,SAAM,YAAS,EAAW,CAAO,GAErD,IAAa,QAAe,EAAM,YAAY,KAAA,CAAS,GAEvD,IAAe,SAAqC;GACxD,eAAe,EAAQ;GACvB,iBAAiB,EAAK;GACtB,iBAAiB,EAAQ;EAC3B,EAAE,GAII,IAAa,QAAgB,EAAM,SAAS,EAAE,iBAAiB,EAAM,OAAO,IAAI,KAAA,CAAU;EAEhG,SAAS,EAAS,GAAc;GAE9B,AADA,EAAU,CAAK,GACf,EAAK,QAAQ,EAAM;EACrB;SAKA,EAAM,IAAO,MAAU;GACjB,MAAU,EAAM,UAChB,IAAO,EAAK,IACX,EAAK;EACZ,CAAC,GAKD,QAAgB;GACd,AAAI,EAAK,SAAO,EAAK;EACvB,CAAC,GAED,EAAa;GAAE;GAAM;GAAM,IAAI;EAAQ,CAAC,mBAItC,EAgBO,QAAA;GAhBD,OAAM;GAAa,gBAAc,EAAA,QAAU,KAAQ,KAAA;MACvD,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GACjD,EAaM,OAbN,EAaM;GAZH,IAAI,EAAA;YACD;GAAJ,KAAI;GACH,SAAS,EAAA;GACV,OAAK,CAAC,wCAAsC,EAAA,WACvB,EAAA,QAAO,CAAA;GAC3B,kBAAgB,EAAA;GAChB,OAAO,EAAA;KACAA,EAAAA,QAAM;GACb,gBAAY,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACN;OAET,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VPopover.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/VPopover/VPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A panel that floats above the page, next to whatever opened it. It is built on the\n * browser's own popover support and positions itself entirely in CSS, so there is no\n * positioning library involved and no JavaScript measuring anything.\n *\n * What it carries is deliberately only the PLUMBING every panel of the design system\n * needs: the popover element and how it opens, the bridge between the browser's own\n * open state and `v-model:open`, the anchoring and the placement, and the surface a\n * panel is drawn on — its background, border and shadow, which `bare` strips away.\n *\n * What it carries NOT is just as deliberate: no ARIA role, no keyboard, no focus\n * management and no rule about when to close. Those are exactly what makes a menu\n * different from a listbox or a tooltip, and they stay with the components building\n * on it — VTooltip, VCombobox, VDateInput, VTimeInput. Turning this into one panel\n * with a `role` prop would put all four sets of behaviour back into a single file.\n *\n * There are two ways of anchoring it, and they exclude one another:\n *\n * - the `#trigger` slot, where the component wraps the trigger and names that\n *   wrapper as the anchor. The name is shared by every instance and confined to each\n *   wrapper's own subtree, which is what makes a panel resolve ITS trigger rather\n *   than the last one named on the page — a real risk, since an open panel moves to\n *   the top layer and counts as coming after the whole document.\n * - the `anchor` prop, for a consumer that already owns its root and its control —\n *   VCombobox and the pickers do. They name the anchor themselves and pass the name\n *   in, and the wrapper then disappears from the layout entirely.\n *\n * The only JavaScript is the bridge between `v-model:open` and the browser's own\n * imperative popover methods.\n */\nimport { computed, ref, useId } from 'vue'\n\nimport { usePopover, usePopoverModel } from '../../composables/usePopover'\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/**\n * What the trigger has to carry for the browser to open the panel and for assistive\n * technology to know what it controls. It is the disclosure pattern and nothing more:\n * no role and no `aria-haspopup` are imposed, since only the consumer knows what kind\n * of panel it is opening.\n */\nexport type PopoverTriggerProps = {\n  popovertarget: string\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\n/** Whether the browser dismisses the panel on its own. */\nexport type PopoverMode = 'auto' | 'manual'\n\ninterface PopoverProps {\n  /**\n   * The id of the panel, which the trigger points at. One is generated when none is\n   * given, so this is only needed to tie the panel to something outside the\n   * component.\n   */\n  id?: string\n  /**\n   * Where the panel is placed relative to its trigger. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: PopoverPlacement\n  /**\n   * How the panel closes. `auto` lets the browser dismiss it on a click outside or on\n   * Escape, and stack it with other panels; `manual` leaves everything to the\n   * consumer, which is what a panel with its own focus and dismissal rules needs.\n   */\n  mode?: PopoverMode\n  /**\n   * The name of an anchor the consumer has set on its own control, written as a CSS\n   * dashed identifier such as `--tooltip-anchor`. Supplying it replaces the internal\n   * wrapper, which is the required route as soon as the trigger is a text input,\n   * where the browser's own `popovertarget` attribute is not allowed.\n   */\n  anchor?: string\n  /**\n   * Strips the panel of the design system's surface: no background, no border, no\n   * shadow and no rounded corners. It is what a panel whose content brings its own\n   * asks for, as VDatePicker does.\n   */\n  bare?: boolean\n  /**\n   * Stops the panel being narrower than whatever it is anchored to. It is a FLOOR, so a\n   * panel with a width of its own still grows past it rather than being clamped to the\n   * trigger — which is what a list of long labels under a short field wants.\n   */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<PopoverProps>(), {\n  id: undefined,\n  placement: 'bottom-start',\n  mode: 'auto',\n  anchor: undefined,\n  bare: false,\n  matchTrigger: false,\n})\n\n/**\n * Whether the panel is showing. It starts closed and is BIDIRECTIONAL, fed from the DOM: in\n * `auto` mode the browser's own light dismiss writes back to it. Setting it opens and closes\n * the panel; a consumer needing the change to be synchronous uses the exposed `show`/`close`\n * instead, which is what VTooltip and the pickers do.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst slots = defineSlots<{\n  /**\n   * The element that opens the panel. Bind the `triggerProps` it receives onto a\n   * button of your own: that is what wires the two together.\n   */\n  trigger?(props: { triggerProps: PopoverTriggerProps }): unknown\n  /** What the panel contains. */\n  default(): unknown\n}>()\n\n/*\n * Everything the consumer passes — the ARIA role, the aria-*, the data-*, class,\n * style and the listeners — goes on the PANEL rather than on the anchoring wrapper,\n * because the panel is what the consumer is really describing and styling.\n *\n * This is a deliberate departure from the design system's usual wrapper pattern,\n * which keeps class and style on the root; `useRootAttrs` therefore does not apply\n * here.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst panelEl = ref<HTMLElement | null>(null)\nconst generatedId = useId()\nconst panelId = computed(() => props.id ?? generatedId)\n\n// The open state and the guards that keep the calls idempotent live in usePopover.\n// The invariant to respect here: `shown` is fed by the panel's own events and never\n// assigned by hand, so the browser stays the source of truth — it can close the panel\n// without asking us.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasTrigger() {\n  return slots.trigger !== undefined\n}\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n  popovertarget: panelId.value,\n  'aria-expanded': open.value,\n  'aria-controls': panelId.value,\n}))\n\n// Both anchoring modes are served by one CSS declaration: the panel reads this variable,\n// which names either the consumer's anchor or the wrapper's own.\n//\n// TRAP — it is set inline in BOTH modes, never left to a fallback. A custom property\n// INHERITS: left unset in the `#trigger` mode, the panel read whatever an ancestor had\n// set — a VPopover placed in VDateInput's `#footer` inherited the date field's anchor and\n// opened under the field instead of under its own trigger, with no error anywhere.\nconst panelStyle = computed(() => ({\n  '--popover-anchor-name': props.anchor ?? '--popover-anchor',\n}))\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  open.value = shown.value\n}\n\nusePopoverModel(open, () => shown.value, show, hide)\n\n// The imperative counterpart of `v-model:open`, for a consumer whose opening must be\n// SYNCHRONOUS: the model would insert a tick, which is exactly what VTooltip's delay and\n// the pickers' focus frame cannot afford.\ndefineExpose({\n  /** Opens the panel at once, without waiting for the model to come round. */\n  show,\n  /** Closes it at once. Safe to call on a panel that is already closed. */\n  close: hide,\n  /** The panel element itself, which is the popover. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <span class=\"v-popover\" :data-trigger=\"hasTrigger() ? '' : undefined\">\n    <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n    <div\n      :id=\"panelId\"\n      ref=\"panelEl\"\n      :popover=\"mode\"\n      class=\"v-overlay v-popover-panel v-floating\"\n      :class=\"{ 'v-panel': !bare }\"\n      :data-placement=\"placement\"\n      :data-match-trigger=\"matchTrigger ? '' : undefined\"\n      :style=\"panelStyle\"\n      v-bind=\"$attrs\"\n      @beforetoggle=\"syncShown\"\n      @toggle=\"onToggle\"\n    >\n      <slot />\n    </div>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Without a trigger the wrapper has nothing to wrap, so `display: contents` takes\n   * it out of the layout entirely — the panel is positioned against the viewport and\n   * does not depend on it. Left as an empty inline-block it would still create a line\n   * box, and therefore add height, inside every component using this route.\n   */\n  .v-popover {\n    display: contents;\n  }\n\n  /*\n   * With a trigger the wrapper must generate a box, since that box is the ANCHOR —\n   * which is why `display: contents` stops at the rule above. It is FLEX rather than\n   * inline-block, the `.v-badge-host` and `.v-tooltip` form: both are inline-level\n   * atomic boxes, so text flows around them identically, but an inline-block opens an\n   * inline formatting context for the trigger, which then lands on a line box and adds\n   * the strut's descender to the wrapper. The wrapper being the anchor, that offsets\n   * the panel as well as the row.\n   *\n   * `align-items: center` covers the rest: a wrapper stretched by a parent in\n   * `align-items: stretch` would otherwise stretch the trigger with it, where the\n   * inline-block form left it at its natural height.\n   */\n  .v-popover[data-trigger] {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --popover-anchor;\n    /* Confining the name to this subtree is indispensable, not tidy: an open panel\n       moves to the top layer, where anchor resolution treats it as coming after the\n       whole document. Without the confinement every panel on the page would attach\n       itself to the LAST wrapper carrying this name. */\n    anchor-scope: --popover-anchor;\n  }\n\n  /*\n   * The panel gets this one declaration and no dimension whatsoever. Widths, heights\n   * and overflow differ from one consumer to the next, and since each component ships\n   * its own stylesheet, a declaration here would sit at equal specificity with theirs\n   * — leaving the winner to whichever order the consumer's bundler happens to\n   * produce.\n   */\n  .v-popover-panel {\n    position-anchor: var(--popover-anchor-name);\n  }\n\n  /*\n   * The one dimension this sheet does carry, and it is a FLOOR rather than a size: a panel\n   * may not come out narrower than what it is anchored to. It is written here rather than in\n   * each consumer because `anchor-size()` resolves against `position-anchor`, which is the\n   * declaration above — the same reason the anchoring itself lives here.\n   *\n   * A minimum beats a maximum, so a consumer's own `max-inline-size` does not clamp it: a\n   * trigger wider than the ceiling widens the panel past it, which is intended. VMenu carries\n   * the twin of this rule, being deliberately outside VPopover, and answers to the same word.\n   */\n  .v-popover-panel[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwGA,IAAM,IAAQ,GAeR,IAAO,EAAoB,GAAC,MAA0B,GAEtD,IAAQ,EAAA,GAqBR,IAAU,EAAwB,IAAI,GACtC,IAAc,EAAM,GACpB,IAAU,QAAe,EAAM,MAAM,CAAW,GAMhD,EAAE,UAAO,cAAW,SAAM,YAAS,EAAW,CAAO;EAI3D,SAAS,IAAa;GACpB,OAAO,EAAM,YAAY,KAAA;EAC3B;EAEA,IAAM,IAAe,SAAqC;GACxD,eAAe,EAAQ;GACvB,iBAAiB,EAAK;GACtB,iBAAiB,EAAQ;EAC3B,EAAE,GASI,IAAa,SAAgB,EACjC,yBAAyB,EAAM,UAAU,mBAC3C,EAAE;EAEF,SAAS,EAAS,GAAc;GAE9B,AADA,EAAU,CAAK,GACf,EAAK,QAAQ,EAAM;EACrB;SAEA,EAAgB,SAAY,EAAM,OAAO,GAAM,CAAI,GAKnD,EAAa;GAEX;GAEA,OAAO;GAEP,IAAI;EACN,CAAC,mBAIC,EAiBO,QAAA;GAjBD,OAAM;GAAa,gBAAc,EAAU,IAAA,KAAU,KAAA;MACzD,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GACjD,EAcM,OAdN,EAcM;GAbH,IAAI,EAAA;YACD;GAAJ,KAAI;GACH,SAAS,EAAA;GACV,OAAK,CAAC,wCAAsC,EAAA,WAAA,CACtB,EAAA,KAAI,CAAA;GACzB,kBAAgB,EAAA;GAChB,sBAAoB,EAAA,eAAY,KAAQ,KAAA;GACxC,OAAO,EAAA;KACAA,EAAAA,QAAM;GACb,gBAAY,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACN;OAET,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VProgressCircular/VProgressCircular.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-progress-circular{--progress-diameter:var(--vectis-control-size-progress-circular-diameter);--progress-thickness:var(--vectis-control-size-progress-circular-thickness);inline-size:var(--progress-diameter);block-size:var(--progress-diameter);vertical-align:middle;display:inline-grid}.v-progress-circular-svg,.v-progress-circular-label{grid-area:1/1}.v-progress-circular-svg{block-size:100%;inline-size:100%;rotate:-90deg}.v-progress-circular:dir(rtl) .v-progress-circular-svg{scale:1 -1}.v-progress-circular-track,.v-progress-circular-bar{cx:calc(var(--progress-diameter) / 2);cy:calc(var(--progress-diameter) / 2);r:max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));fill:none;stroke-width:var(--progress-thickness)}.v-progress-circular-track{stroke:var(--progress-track)}.v-progress-circular-bar{stroke:var(--progress-fill);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - 100 * var(--fill-fraction));transition:stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default)}.v-progress-circular[data-shape=square] .v-progress-circular-bar{stroke-linecap:butt}.v-progress-circular[data-tone=accent]{--progress-fill:var(--vectis-color-accent);--progress-track:var(--vectis-color-accent-surface)}.v-progress-circular[data-tone=success]{--progress-fill:var(--vectis-color-success);--progress-track:var(--vectis-color-success-surface)}.v-progress-circular[data-tone=danger]{--progress-fill:var(--vectis-color-danger);--progress-track:var(--vectis-color-danger-surface)}.v-progress-circular[data-tone=warning]{--progress-fill:var(--vectis-color-warning);--progress-track:var(--vectis-color-warning-surface)}.v-progress-circular[data-tone=neutral]{--progress-fill:var(--vectis-color-text);--progress-track:var(--vectis-color-surface-muted)}.v-progress-circular[data-custom]{--progress-fill:var(--custom-color);--progress-track:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%)}.v-progress-circular-label{max-inline-size:calc(var(--progress-diameter) - var(--progress-thickness) * 2);color:var(--vectis-color-text);font-family:var(--vectis-text-family);font-size:max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);text-align:center;justify-content:center;place-self:center;align-items:center;display:flex}.v-progress-circular[data-indeterminate] .v-progress-circular-svg{animation:v-spin var(--vectis-duration-1000) linear infinite}.v-progress-circular[data-indeterminate] .v-progress-circular-bar{animation:v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default) infinite;transition:none}@keyframes v-progress-circular-dash{0%{stroke-dasharray:5 100;stroke-dashoffset:0}50%{stroke-dasharray:70 100;stroke-dashoffset:-20px}to{stroke-dasharray:5 100;stroke-dashoffset:-100px}}@media (prefers-reduced-motion:reduce){.v-progress-circular-bar{transition:none}.v-progress-circular[data-indeterminate] .v-progress-circular-svg{animation-duration:var(--vectis-duration-3000)}.v-progress-circular[data-indeterminate] .v-progress-circular-bar{animation-duration:var(--vectis-duration-5000)}}}
+@layer vectis.components{.v-progress-circular{--progress-diameter:var(--vectis-control-size-progress-circular-diameter);--progress-thickness:var(--vectis-control-size-progress-circular-thickness);--progress-fill:var(--tone-bg-solid);--progress-track:var(--tone-bg-soft);inline-size:var(--progress-diameter);block-size:var(--progress-diameter);vertical-align:middle;display:inline-grid}.v-progress-circular-svg,.v-progress-circular-label{grid-area:1/1}.v-progress-circular-svg{block-size:100%;inline-size:100%;rotate:-90deg}.v-progress-circular:dir(rtl) .v-progress-circular-svg{scale:1 -1}.v-progress-circular-track,.v-progress-circular-bar{cx:calc(var(--progress-diameter) / 2);cy:calc(var(--progress-diameter) / 2);r:max(0px, calc((var(--progress-diameter) - var(--progress-thickness)) / 2));fill:none;stroke-width:var(--progress-thickness)}.v-progress-circular-track{stroke:var(--progress-track)}.v-progress-circular-bar{stroke:var(--progress-fill);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - 100 * var(--fill-fraction));transition:stroke-dashoffset var(--vectis-duration-base) var(--vectis-ease-default)}.v-progress-circular[data-shape=square] .v-progress-circular-bar{stroke-linecap:butt}.v-progress-circular[data-custom]{--progress-fill:var(--custom-color);--progress-track:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%)}.v-progress-circular-label{max-inline-size:calc(var(--progress-diameter) - var(--progress-thickness) * 2);color:var(--vectis-color-text);font-family:var(--vectis-text-family);font-size:max(var(--vectis-text-caption-size), calc(var(--progress-diameter) / 4));font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);text-align:center;justify-content:center;place-self:center;align-items:center;display:flex}.v-progress-circular[data-indeterminate] .v-progress-circular-svg{animation:v-spin var(--vectis-duration-1000) linear infinite}.v-progress-circular[data-indeterminate] .v-progress-circular-bar{animation:v-progress-circular-dash var(--vectis-duration-1500) var(--vectis-ease-default) infinite;transition:none}@keyframes v-progress-circular-dash{0%{stroke-dasharray:5 100;stroke-dashoffset:0}50%{stroke-dasharray:70 100;stroke-dashoffset:-20px}to{stroke-dasharray:5 100;stroke-dashoffset:-100px}}@media (prefers-reduced-motion:reduce){.v-progress-circular-bar{transition:none}.v-progress-circular[data-indeterminate] .v-progress-circular-svg{animation-duration:var(--vectis-duration-3000)}.v-progress-circular[data-indeterminate] .v-progress-circular-bar{animation-duration:var(--vectis-duration-5000)}}}

package/dist/components/VProgressCircular/VProgressCircular.d.ts

@@ -1,6 +1,16 @@
+/** What the progress means, in colour. */
+export type ProgressCircularTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+/** How the arc ends. */
+export type ProgressCircularShape = 'rounded' | 'square';
 interface ProgressCircularProps {
     /** How far along it is. Anything outside the range is brought back into it. */
     value?: number;
+    /**
+     * What is progressing, in words, for screen readers. It draws nothing on screen, and falls
+     * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own
+     * takes precedence over it.
+     */
+    label?: string;
     /** What counts as finished. The other end is always zero. */
     max?: number;
     /**
@@ -9,7 +19,7 @@ interface ProgressCircularProps {
      */
     indeterminate?: boolean;
     /** What the progress means, expressed as a colour. */
-    tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+    tone?: ProgressCircularTone;
     /**
      * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The
      * unfilled ring's shade is derived from it against the theme, so it follows the light
@@ -21,7 +31,7 @@ interface ProgressCircularProps {
     /** How thick the ring is, always IN PIXELS: `8` and `'8'` both give 8px. */
     thickness?: number | string;
     /** Whether the ends of the drawn arc are rounded or cut square. */
-    shape?: 'rounded' | 'square';
+    shape?: ProgressCircularShape;
     /**
      * Writes the percentage in the middle of the ring. It is ignored while the progress is
      * unmeasurable, there being no figure to write.
@@ -40,10 +50,11 @@ type __VLS_Slots = {
     }): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<ProgressCircularProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProgressCircularProps> & Readonly<{}>, {
+    label: string;
     value: number;
     size: number | string;
-    tone: "accent" | "success" | "warning" | "danger" | "neutral";
-    shape: "rounded" | "square";
+    tone: ProgressCircularTone;
+    shape: ProgressCircularShape;
     color: string;
     indeterminate: boolean;
     max: number;

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

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

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

@@ -1,9 +1,10 @@
 import { useMessages as e } from "../../i18n/state.js";
 import { px as t } from "../../utils/css.js";
-import { useProgressValue as n } from "../../composables/useProgressValue.js";
-import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeStyle as c, openBlock as l, renderSlot as u, toDisplayString as d, unref as f } from "vue";
+import { useAriaLabel as n } from "../../composables/useAriaLabel.js";
+import { useProgressValue as r } from "../../composables/useProgressValue.js";
+import { createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeStyle as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p } from "vue";
 //#region src/components/VProgressCircular/VProgressCircular.vue?vue&type=script&setup=true&lang.ts
-var p = [
+var m = [
 	"aria-label",
 	"data-tone",
 	"data-custom",
@@ -11,13 +12,14 @@ var p = [
 	"data-indeterminate",
 	"aria-valuenow",
 	"aria-valuemax"
-], m = {
+], h = {
 	key: 0,
 	class: "v-progress-circular-label"
-}, h = /*@__PURE__*/ s({
+}, g = /*@__PURE__*/ c({
 	__name: "VProgressCircular",
 	props: {
 		value: { default: 0 },
+		label: { default: void 0 },
 		max: { default: 100 },
 		indeterminate: {
 			type: Boolean,
@@ -33,42 +35,42 @@ var p = [
 			default: !1
 		}
 	},
-	setup(s) {
-		let h = s, g = e(), { clamped: _, fraction: v } = n(() => h.value, () => h.max);
-		return (e, n) => (l(), i("span", {
-			class: "v-progress-circular",
+	setup(c) {
+		let g = c, _ = e(), { max: v, clamped: y, fraction: b, percent: x, roundedPercent: S } = r(() => g.value, () => g.max), C = n(() => g.label ?? _.value.progress.label);
+		return (e, n) => (u(), a("span", {
+			class: "v-progress-circular v-tone",
 			role: "progressbar",
-			"aria-label": f(g).progress.label,
-			"data-tone": s.tone,
-			"data-custom": s.color === void 0 ? void 0 : "",
-			"data-shape": s.shape,
-			"data-indeterminate": s.indeterminate ? "" : void 0,
-			"aria-valuenow": s.indeterminate ? void 0 : f(_),
+			"aria-label": p(C),
+			"data-tone": c.tone,
+			"data-custom": c.color === void 0 ? void 0 : "",
+			"data-shape": c.shape,
+			"data-indeterminate": c.indeterminate ? "" : void 0,
+			"aria-valuenow": c.indeterminate ? void 0 : p(y),
 			"aria-valuemin": "0",
-			"aria-valuemax": s.max,
-			style: c({
-				"--fill-fraction": String(f(v)),
-				"--custom-color": s.color,
-				"--progress-diameter": f(t)(s.size),
-				"--progress-thickness": f(t)(s.thickness)
+			"aria-valuemax": p(v),
+			style: l({
+				"--fill-fraction": String(p(b)),
+				"--custom-color": c.color,
+				"--progress-diameter": p(t)(c.size),
+				"--progress-thickness": p(t)(c.thickness)
 			})
-		}, [n[0] ||= a("svg", {
+		}, [n[0] ||= o("svg", {
 			class: "v-progress-circular-svg",
 			"aria-hidden": "true"
-		}, [a("circle", {
+		}, [o("circle", {
 			class: "v-progress-circular-track",
 			pathLength: "100"
-		}), a("circle", {
+		}), o("circle", {
 			class: "v-progress-circular-bar",
 			pathLength: "100"
-		})], -1), !s.indeterminate && (s.showValue || e.$slots.default) ? (l(), i("span", m, [u(e.$slots, "default", {
-			value: f(_),
-			max: s.max,
-			percent: f(v) * 100
-		}, () => [o(d(f(g).progress.percent(Math.round(f(v) * 100))), 1)])])) : r("", !0)], 12, p));
+		})], -1), !c.indeterminate && (c.showValue || e.$slots.default) ? (u(), a("span", h, [d(e.$slots, "default", {
+			value: p(y),
+			max: p(v),
+			percent: p(x)
+		}, () => [s(f(p(_).progress.percent(p(S))), 1)])])) : i("", !0)], 12, m));
 	}
 });
 //#endregion
-export { h as default };
+export { g as default };
 
 //# sourceMappingURL=VProgressCircular.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/components/VProgressLinear/VProgressLinear.css

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

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

@@ -1,6 +1,20 @@
+/** What the progress means, in colour. */
+export type ProgressLinearTone = 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+/** How the track and the fill end. */
+export type ProgressLinearShape = 'rounded' | 'square';
+/** Where the value sits along the bar. */
+export type ProgressLinearValuePosition = 'start' | 'center' | 'end';
+/** Which way the bar fills. */
+export type ProgressLinearOrientation = 'horizontal' | 'vertical';
 interface ProgressLinearProps {
     /** How far along it is. Anything outside the range is brought back into it. */
     value?: number;
+    /**
+     * What is progressing, in words, for screen readers. It draws nothing on screen, and falls
+     * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own
+     * takes precedence over it.
+     */
+    label?: string;
     /** What counts as finished. The other end is always zero. */
     max?: number;
     /**
@@ -10,7 +24,7 @@ interface ProgressLinearProps {
      */
     indeterminate?: boolean;
     /** What the progress means, expressed as a colour. */
-    tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+    tone?: ProgressLinearTone;
     /**
      * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The
      * track's own shade is derived from it against the theme, so it follows the light and
@@ -24,7 +38,7 @@ interface ProgressLinearProps {
      */
     thickness?: number | string;
     /** Whether the ends of the bar are rounded or square. */
-    shape?: 'rounded' | 'square';
+    shape?: ProgressLinearShape;
     /**
      * Writes the percentage inside the bar. It is ignored while the progress is
      * unmeasurable, there being no figure to write.
@@ -34,9 +48,9 @@ interface ProgressLinearProps {
      * Where that text sits along the bar. On a vertical bar the start is the zero end,
      * hence the bottom.
      */
-    valuePosition?: 'start' | 'center' | 'end';
+    valuePosition?: ProgressLinearValuePosition;
     /** Turns the bar upright, filling from the bottom up. */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: ProgressLinearOrientation;
 }
 type __VLS_Slots = {
     /**
@@ -53,16 +67,17 @@ type __VLS_Slots = {
     }): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<ProgressLinearProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProgressLinearProps> & Readonly<{}>, {
+    label: string;
     value: number;
-    tone: "accent" | "success" | "warning" | "danger" | "neutral";
-    orientation: "horizontal" | "vertical";
-    shape: "rounded" | "square";
+    tone: ProgressLinearTone;
+    orientation: ProgressLinearOrientation;
+    shape: ProgressLinearShape;
     color: string;
     indeterminate: boolean;
     max: number;
     thickness: number | string;
     showValue: boolean;
-    valuePosition: "start" | "center" | "end";
+    valuePosition: ProgressLinearValuePosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;