vectis-ui 0.1.0

package/dist/components/VPopover/VPopover.d.ts

@@ -0,0 +1,82 @@
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/**
+ * What the trigger has to carry for the browser to open the panel and for assistive
+ * technology to know what it controls. It is the disclosure pattern and nothing more:
+ * no role and no `aria-haspopup` are imposed, since only the consumer knows what kind
+ * of panel it is opening.
+ */
+export type PopoverTriggerProps = {
+    popovertarget: string;
+    'aria-expanded': boolean;
+    'aria-controls': string;
+};
+interface PopoverProps {
+    /**
+     * The id of the panel, which the trigger points at. One is generated when none is
+     * given, so this is only needed to tie the panel to something outside the
+     * component.
+     */
+    id?: string;
+    /**
+     * Where the panel is placed relative to its trigger. The browser flips it to the
+     * opposite side by itself when there is not enough room.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * How the panel closes. `auto` lets the browser dismiss it on a click outside or on
+     * Escape, and stack it with other panels; `manual` leaves everything to the
+     * consumer, which is what a panel with its own focus and dismissal rules needs.
+     */
+    mode?: 'auto' | 'manual';
+    /**
+     * The name of an anchor the consumer has set on its own control, written as a CSS
+     * dashed identifier such as `--tooltip-anchor`. Supplying it replaces the internal
+     * wrapper, which is the required route as soon as the trigger is a text input,
+     * where the browser's own `popovertarget` attribute is not allowed.
+     */
+    anchor?: string;
+    /**
+     * Gives the panel the look of a surface: background, border, shadow and rounded
+     * corners. Turn it off for a panel that brings its own, as VDatePicker does.
+     */
+    surface?: boolean;
+}
+type __VLS_Props = PopoverProps;
+type __VLS_Slots = {
+    /**
+     * The element that opens the panel. Bind the `triggerProps` it receives onto a
+     * button of your own: that is what wires the two together.
+     */
+    trigger?(props: {
+        triggerProps: PopoverTriggerProps;
+    }): unknown;
+    /** What the panel contains. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    show: (source?: HTMLElement) => void;
+    hide: () => void;
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    anchor: string;
+    id: string;
+    placement: PopoverPlacement;
+    mode: "auto" | "manual";
+    surface: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VPopover/VPopover.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VPopover.js","names":[],"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":""}

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

@@ -0,0 +1,65 @@
+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";
+//#region src/components/VPopover/VPopover.vue?vue&type=script&setup=true&lang.ts
+var g = ["data-trigger"], _ = [
+	"id",
+	"popover",
+	"data-placement"
+], v = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	__name: "VPopover",
+	props: /*@__PURE__*/ a({
+		id: { default: void 0 },
+		placement: { default: "bottom-start" },
+		mode: { default: "auto" },
+		anchor: { default: void 0 },
+		surface: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		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;
+		}
+		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", {
+			class: "v-popover",
+			"data-trigger": O.value ? "" : void 0
+		}, [u(e.$slots, "trigger", { triggerProps: k.value }), r("div", o({
+			id: C.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
+		}, e.$attrs, {
+			onBeforetoggle: t[0] ||= (...e) => d(T) && d(T)(...e),
+			onToggle: j
+		}), [u(e.$slots, "default")], 16, _)], 8, g));
+	}
+});
+//#endregion
+export { v 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

@@ -0,0 +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"}

package/dist/components/VProgressCircular/VProgressCircular.css

@@ -0,0 +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)}}}

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

@@ -0,0 +1,60 @@
+interface ProgressCircularProps {
+    /** How far along it is. Anything outside the range is brought back into it. */
+    value?: number;
+    /** What counts as finished. The other end is always zero. */
+    max?: number;
+    /**
+     * Says that the progress cannot be measured: the ring turns continuously and the
+     * value is ignored.
+     */
+    indeterminate?: boolean;
+    /** What the progress means, expressed as a colour. */
+    tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+    /**
+     * 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
+     * and the dark one.
+     */
+    color?: string;
+    /** The diameter, always IN PIXELS: `96` and `'96'` both give 96px. */
+    size?: number | string;
+    /** 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';
+    /**
+     * Writes the percentage in the middle of the ring. It is ignored while the progress is
+     * unmeasurable, there being no figure to write.
+     */
+    showValue?: boolean;
+}
+type __VLS_Slots = {
+    /**
+     * What to put in the middle of the ring instead of the percentage — a count of files,
+     * an icon, a shortened figure.
+     */
+    default?(props: {
+        value: number;
+        max: number;
+        percent: number;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<ProgressCircularProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProgressCircularProps> & Readonly<{}>, {
+    value: number;
+    size: number | string;
+    tone: "accent" | "success" | "warning" | "danger" | "neutral";
+    shape: "rounded" | "square";
+    color: string;
+    indeterminate: boolean;
+    max: number;
+    thickness: number | string;
+    showValue: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VProgressCircular/VProgressCircular.js

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,74 @@
+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";
+//#region src/components/VProgressCircular/VProgressCircular.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"aria-label",
+	"data-tone",
+	"data-custom",
+	"data-shape",
+	"data-indeterminate",
+	"aria-valuenow",
+	"aria-valuemax"
+], m = {
+	key: 0,
+	class: "v-progress-circular-label"
+}, h = /*@__PURE__*/ s({
+	__name: "VProgressCircular",
+	props: {
+		value: { default: 0 },
+		max: { default: 100 },
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		},
+		tone: { default: "accent" },
+		color: { default: void 0 },
+		size: { default: void 0 },
+		thickness: { default: void 0 },
+		shape: { default: "rounded" },
+		showValue: {
+			type: Boolean,
+			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",
+			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-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)
+			})
+		}, [n[0] ||= a("svg", {
+			class: "v-progress-circular-svg",
+			"aria-hidden": "true"
+		}, [a("circle", {
+			class: "v-progress-circular-track",
+			pathLength: "100"
+		}), a("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));
+	}
+});
+//#endregion
+export { h 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

@@ -0,0 +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"}

package/dist/components/VProgressLinear/VProgressLinear.css

@@ -0,0 +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)}}}

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

@@ -0,0 +1,74 @@
+interface ProgressLinearProps {
+    /** How far along it is. Anything outside the range is brought back into it. */
+    value?: number;
+    /** What counts as finished. The other end is always zero. */
+    max?: number;
+    /**
+     * Says that the progress cannot be measured: the bar animates continuously and the
+     * value is ignored. It is what to use while waiting for a server that reports no
+     * percentage.
+     */
+    indeterminate?: boolean;
+    /** What the progress means, expressed as a colour. */
+    tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+    /**
+     * 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
+     * the dark one.
+     */
+    color?: string;
+    /**
+     * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px
+     * by default — bear in mind that showing text inside a bar that thin needs an
+     * explicit thickness.
+     */
+    thickness?: number | string;
+    /** Whether the ends of the bar are rounded or square. */
+    shape?: 'rounded' | 'square';
+    /**
+     * Writes the percentage inside the bar. It is ignored while the progress is
+     * unmeasurable, there being no figure to write.
+     */
+    showValue?: boolean;
+    /**
+     * Where that text sits along the bar. On a vertical bar the start is the zero end,
+     * hence the bottom.
+     */
+    valuePosition?: 'start' | 'center' | 'end';
+    /** Turns the bar upright, filling from the bottom up. */
+    orientation?: 'horizontal' | 'vertical';
+}
+type __VLS_Slots = {
+    /**
+     * What to write inside the bar instead of the percentage.
+     *
+     * TRAP — it is rendered TWICE, once over the empty track and once over the filled
+     * part in a colour that contrasts with it, each copy cut at the fill's edge. So
+     * whatever it renders must be pure: anything with a side effect would happen twice.
+     */
+    default?(props: {
+        value: number;
+        max: number;
+        percent: number;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<ProgressLinearProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProgressLinearProps> & Readonly<{}>, {
+    value: number;
+    tone: "accent" | "success" | "warning" | "danger" | "neutral";
+    orientation: "horizontal" | "vertical";
+    shape: "rounded" | "square";
+    color: string;
+    indeterminate: boolean;
+    max: number;
+    thickness: number | string;
+    showValue: boolean;
+    valuePosition: "start" | "center" | "end";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VProgressLinear/VProgressLinear.js

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

package/dist/components/VProgressLinear/VProgressLinear.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VProgressLinear.js","names":[],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — no behavioural JS at all: value normalization and the display string.\n/**\n * A bar filling up as something progresses. The element rendered IS the track, and the\n * whole geometry follows from a single number set on it — the fraction filled, with no\n * unit. Everything is written in logical properties, so turning the bar vertical needs\n * nothing but a change of writing direction.\n *\n * There is no behavioural JavaScript: the value is clamped and a percentage is\n * formatted, and that is all.\n *\n * On naming: pass an `aria-label` saying what is progressing. The text shown inside the\n * bar 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 ProgressLinearProps {\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 bar animates continuously and the\n   * value is ignored. It is what to use while waiting for a server that reports no\n   * percentage.\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   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px\n   * by default — bear in mind that showing text inside a bar that thin needs an\n   * explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: 'rounded' | 'square'\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: 'start' | 'center' | 'end'\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /**\n   * What to write inside the bar instead of the percentage.\n   *\n   * TRAP — it is rendered TWICE, once over the empty track and once over the filled\n   * part in a colour that contrasts with it, each copy cut at the fill's edge. So\n   * whatever it renders must be pure: anything with a side effect would happen twice.\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  <div\n    class=\"v-progress-linear\"\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-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n    :data-value-position=\"valuePosition\"\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-thickness': px(thickness),\n    }\"\n  >\n    <span class=\"v-progress-linear-fill\" />\n    <!--\n      The same text twice, each copy cut at the fill's edge so that the two complete\n      each other exactly: the first in the ordinary text colour over the empty track,\n      the second over the filled part, coloured to contrast with it. The second is\n      hidden from screen readers, being a duplicate of text already there.\n    -->\n    <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n      <span class=\"v-progress-linear-text\">\n        <slot :value=\"clamped\" :max=\"max\" :percent=\"fraction * 100\">\n          {{ m.progress.percent(Math.round(fraction * 100)) }}\n        </slot>\n      </span>\n      <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"max\" :percent=\"fraction * 100\">\n          {{ m.progress.percent(Math.round(fraction * 100)) }}\n        </slot>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The element IS the track, and it takes the whole length available. Sizing it is the\n   * consumer's business, through the parent or through a width of their own — a\n   * consumer's style sits outside our layers and always wins.\n   */\n  .v-progress-linear {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out\n     * again on every frame. Scaling it would be cheaper, but a scale is physical: it\n     * would have to be undone for the vertical orientation and again for a\n     * right-to-left page, where a logical length simply works.\n     *\n     * The duration and easing are repeated by the clip of the text over the fill, or the\n     * colour boundary would drift away from the fill's own edge for the length of the\n     * transition.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-linear[data-tone='accent'] {\n    --progress-fill: var(--vectis-color-accent);\n    --progress-track: var(--vectis-color-accent-surface);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-progress-linear[data-tone='success'] {\n    --progress-fill: var(--vectis-color-success);\n    --progress-track: var(--vectis-color-success-surface);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-progress-linear[data-tone='danger'] {\n    --progress-fill: var(--vectis-color-danger);\n    --progress-track: var(--vectis-color-danger-surface);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-progress-linear[data-tone='warning'] {\n    --progress-fill: var(--vectis-color-warning);\n    --progress-track: var(--vectis-color-warning-surface);\n    /* White does not reach the required contrast on amber, so this tone has a text\n       colour of its own. */\n    --tone-text-fallback: var(--vectis-color-text-on-warning);\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-linear[data-tone='neutral'] {\n    --progress-fill: var(--vectis-color-text);\n    --progress-track: var(--vectis-color-surface-muted);\n    --tone-text-fallback: var(--vectis-color-surface);\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-linear[data-custom] {\n    --progress-fill: var(--custom-color);\n    --progress-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  /* The text inside the bar, in two copies laid over the same box — the track's own,\n     which is why a cut expressed as a fraction of it lands exactly on the fill's edge.\n     Bear in mind that the default 4px thickness cannot hold text at all: showing any\n     implies asking for a thicker bar.\n\n     TRAP — the two copies are COMPLEMENTARY and never superimposed: this one is cut OUT\n     of the filled part, the other cut TO it, so every letter is painted exactly once.\n     Removing either clip raises no error and stays invisible for as long as both copies\n     resolve to the SAME colour, which is what happens wherever the adaptive colour\n     function is unsupported. Where it IS supported and the two disagree — black over an\n     accent fill against white text in the dark theme — the copy underneath shows its\n     antialiased edges all around the letters of the one on top, and the label reads as\n     a halo. */\n  .v-progress-linear-text {\n    /* The two insets of the cut: one on the edge the fill grows FROM, one on the edge it\n       grows towards. They are named after those roles rather than after physical sides,\n       so the three geometry rules further down — horizontal, right-to-left, vertical —\n       all read the same pair. This copy cuts on the start side; the one over the fill\n       swaps them. */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /* The large negative inset on the two sides that do NOT carry the cut is what stops\n       text taller or wider than the bar from being cropped by its own clip. */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /* The per-tone fallback colour. The adaptive one cannot simply be written as a\n       second declaration after it: because that declaration contains a var(), a browser\n       with no support does not reject it at parse time — it would win the cascade and\n       only then turn invalid, which resets the colour to inherited and leaves the\n       fallback never applied. The block below is the way round it, being evaluated\n       before any var() substitution. */\n    color: var(--tone-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /* In a right-to-left page the fill grows from the right, so the two insets change\n     physical sides — the variables themselves keep their meaning. */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /* Upright, the bar fills from the bottom.\n\n     Changing the writing direction on the element is enough to turn everything: the\n     axis the fill grows along becomes vertical, so the length and the thickness swap\n     places, and both the fill and the animation follow with no rule written twice.\n\n     TRAP — putting zero at the bottom is NOT done by reversing the direction, which\n     would also apply to the text of the two copies: bidirectional reordering would then\n     display \"50 %\" as \"% 50\". The fill is anchored to the far end of the axis instead.\n\n     The length comes from a token because there is nothing to inherit it from: in a\n     parent of automatic height the bar would collapse to nothing. A consumer's own\n     height overrides it, sitting outside our layers. */\n  .v-progress-linear[data-orientation='vertical'] {\n    writing-mode: vertical-lr;\n    inline-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /* The text now stacks along the vertical axis, whose start is the zero end — the\n     bottom of the bar. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /* The cut moves to the vertical axis: the fill rises from the bottom, which is that\n     axis' start. It is therefore the same in both reading directions, which means the\n     right-to-left rule further up has to be neutralized.\n\n     TRAP — the second selector is what neutralizes it, and it is written that way on\n     purpose: it is one step MORE specific than that rule, where the first selector alone\n     would merely tie with it and win by source order — a far more fragile arrangement. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /* When the progress cannot be measured, a bar of fixed size crosses the track from\n     just outside one end to just outside the other. At each extreme it is exactly flush\n     with the edge without ever pulling away from it, which is what makes the loop\n     invisible and keeps the track from ever looking empty — no second bar is needed.\n\n     The easing carries the whole impression: a gradual entry, a quick crossing, a damped\n     exit. A linear run, or an asymmetric curve, immediately reads as mechanical.\n\n     The movement is expressed in LOGICAL properties — a position and a size as\n     percentages of the track — rather than as a transform. One definition then serves\n     the horizontal, the vertical and the right-to-left cases, where a transform, being\n     physical, would need its own keyframes per axis and a flip per direction. */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /* The anchoring is put back at the start of the axis, vertical case included — where\n       a measurable progress anchors at the far end instead. */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /* Turned upright, the axis runs downwards, so the bar would travel from the top down —\n     the opposite of a measurable fill, which rises from the bottom. The same keyframes\n     are simply read backwards, which changes nothing else BECAUSE the easing curve is\n     symmetric; an asymmetric one would need a second set of keyframes.\n\n     Nothing is needed for a right-to-left page: the logical inset already follows the\n     reading direction. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\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-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n}\n</style>\n"],"mappings":""}