vectis-ui 0.12.0 → 0.14.0

package/dist/components/VMeter/VMeter.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-meter{--meter-thickness:var(--vectis-control-size-meter-thickness-md);--meter-fill:var(--tone-bg-solid);--meter-track:var(--tone-border-soft);gap:var(--vectis-space-1);min-inline-size:0;font-family:var(--vectis-text-family);flex-direction:column;display:flex}.v-meter[data-custom]{--meter-track:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 70%)}.v-meter[data-size=sm]{--meter-thickness:var(--vectis-control-size-meter-thickness-sm)}.v-meter[data-size=lg]{--meter-thickness:var(--vectis-control-size-meter-thickness-lg)}.v-meter-header{align-items:baseline;column-gap:var(--vectis-space-2);flex-wrap:wrap;display:flex}.v-meter-label{color:var(--vectis-color-text);font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading)}.v-meter-value{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading);font-variant-numeric:tabular-nums;margin-inline-start:auto}.v-meter[data-size=sm] .v-meter-label,.v-meter[data-size=sm] .v-meter-value{font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-caption-weight);line-height:var(--vectis-text-caption-leading)}.v-meter-track{gap:var(--vectis-control-size-meter-segment-gap);block-size:var(--meter-thickness);display:flex}.v-meter-segment{border-radius:var(--vectis-radius-pill);background:var(--meter-track);flex:1 1 0;position:relative}.v-meter-fill{inline-size:calc(100% * var(--meter-segment-fill));border-radius:inherit;background:var(--meter-fill);transition:inline-size var(--vectis-duration-base) var(--vectis-ease-default), background-color var(--vectis-duration-base) var(--vectis-ease-default);position:absolute;inset-block:0;inset-inline-start:0}@media (prefers-reduced-motion:reduce){.v-meter-fill{transition:none}}@media (forced-colors:active){.v-meter-segment{forced-color-adjust:none;box-shadow:inset 0 0 0 var(--vectis-control-border-width) CanvasText;background:canvas}.v-meter-fill{background:highlight}}}

package/dist/components/VMeter/VMeter.d.ts

@@ -0,0 +1,77 @@
+/** The colour of the fill, which replaces the one chosen from `low`, `high` and `optimum`. */
+export type MeterTone = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
+/** The thickness of the bar, 4, 8 or 12 pixels, and the size of the text above it. */
+export type MeterSize = 'sm' | 'md' | 'lg';
+interface MeterProps {
+    /** The measurement. Anything outside the range is brought back into it. */
+    value?: number;
+    /** The lower bound of the range. */
+    min?: number;
+    /** The upper bound of the range. A bound below `min` is raised to it. */
+    max?: number;
+    /**
+     * The upper end of the low part of the range. With `high` and `optimum`, it decides whether
+     * the value is good, average or poor, which colours the bar.
+     */
+    low?: number;
+    /** The lower end of the high part of the range. */
+    high?: number;
+    /**
+     * The best value. In the low part, low values are good; in the high part, high values are;
+     * between `low` and `high`, the middle is good and both ends are average.
+     */
+    optimum?: number;
+    /**
+     * What is measured, shown above the bar and naming it for screen readers. Without it, the bar
+     * is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your own
+     * takes precedence.
+     */
+    label?: string;
+    /** Hides the label visually. It still names the bar for screen readers. */
+    hideLabel?: boolean;
+    /**
+     * The value as written above the bar and read by screen readers, such as "7.2 GB of 10 GB" or
+     * "Strong". It replaces the formatted value.
+     */
+    valueText?: string;
+    /**
+     * Formats the value for the current locale, such as a unit or a currency. Without it, the
+     * value is written as a percentage of the range.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Hides the value visually. Screen readers still read it from the bar. */
+    hideValue?: boolean;
+    /**
+     * The colour of the fill. Without it, the region of the value picks one when `low`, `high` or
+     * `optimum` is set: success, warning or danger; otherwise the accent.
+     */
+    tone?: MeterTone;
+    /**
+     * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The track is
+     * derived from it against the theme.
+     */
+    color?: string;
+    /** Splits the bar into this many equal parts, for a strength or a battery level. */
+    segments?: number;
+    /** The thickness of the bar and the size of the text above it. */
+    size?: MeterSize;
+}
+declare const __VLS_export: import('vue').DefineComponent<MeterProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MeterProps> & Readonly<{}>, {
+    label: string;
+    value: number;
+    size: MeterSize;
+    tone: MeterTone;
+    color: string;
+    hideLabel: boolean;
+    min: number;
+    max: number;
+    formatOptions: Intl.NumberFormatOptions;
+    valueText: string;
+    segments: number;
+    low: number;
+    high: number;
+    optimum: number;
+    hideValue: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VMeter/VMeter.js

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

package/dist/components/VMeter/VMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VMeter.js","names":[],"sources":["../../../src/components/VMeter/VMeter.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A measurement within a known range, drawn in CSS under the `meter` role. The native `<meter>`\n * is styled only through vendor pseudo-elements, which need one rule set per engine, does not\n * transition its fill in Firefox and cannot be split into segments; the role carries the same\n * semantics. As with the native element, `low`, `high` and `optimum` place the value in a\n * region, which picks the tone.\n */\nimport { computed, useId } from 'vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The colour of the fill, which replaces the one chosen from `low`, `high` and `optimum`. */\nexport type MeterTone = 'accent' | 'neutral' | 'success' | 'warning' | 'danger'\n\n/** The thickness of the bar, 4, 8 or 12 pixels, and the size of the text above it. */\nexport type MeterSize = 'sm' | 'md' | 'lg'\n\ninterface MeterProps {\n  /** The measurement. Anything outside the range is brought back into it. */\n  value?: number\n  /** The lower bound of the range. */\n  min?: number\n  /** The upper bound of the range. A bound below `min` is raised to it. */\n  max?: number\n  /**\n   * The upper end of the low part of the range. With `high` and `optimum`, it decides whether\n   * the value is good, average or poor, which colours the bar.\n   */\n  low?: number\n  /** The lower end of the high part of the range. */\n  high?: number\n  /**\n   * The best value. In the low part, low values are good; in the high part, high values are;\n   * between `low` and `high`, the middle is good and both ends are average.\n   */\n  optimum?: number\n  /**\n   * What is measured, shown above the bar and naming it for screen readers. Without it, the bar\n   * is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence.\n   */\n  label?: string\n  /** Hides the label visually. It still names the bar for screen readers. */\n  hideLabel?: boolean\n  /**\n   * The value as written above the bar and read by screen readers, such as \"7.2 GB of 10 GB\" or\n   * \"Strong\". It replaces the formatted value.\n   */\n  valueText?: string\n  /**\n   * Formats the value for the current locale, such as a unit or a currency. Without it, the\n   * value is written as a percentage of the range.\n   */\n  formatOptions?: Intl.NumberFormatOptions\n  /** Hides the value visually. Screen readers still read it from the bar. */\n  hideValue?: boolean\n  /**\n   * The colour of the fill. Without it, the region of the value picks one when `low`, `high` or\n   * `optimum` is set: success, warning or danger; otherwise the accent.\n   */\n  tone?: MeterTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The track is\n   * derived from it against the theme.\n   */\n  color?: string\n  /** Splits the bar into this many equal parts, for a strength or a battery level. */\n  segments?: number\n  /** The thickness of the bar and the size of the text above it. */\n  size?: MeterSize\n}\n\n// The root only lays out the text and the bar: the consumer's ARIA and other attributes belong\n// on the element carrying the role.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<MeterProps>(), {\n  value: 0,\n  min: 0,\n  max: 100,\n  low: undefined,\n  high: undefined,\n  optimum: undefined,\n  label: undefined,\n  hideLabel: false,\n  valueText: undefined,\n  formatOptions: undefined,\n  hideValue: false,\n  // Deliberately undefined: the region of the value then picks the tone.\n  tone: undefined,\n  color: undefined,\n  segments: 1,\n  size: 'md',\n})\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst locale = useLocale()\nconst labelId = useId()\n\n/* The normalization of the HTML `<meter>`: the bounds first, then each point brought into\n   them, `high` never below `low`. A value that is not a number reads as the minimum. */\nconst range = computed(() => {\n  const min = Number.isFinite(props.min) ? props.min : 0\n  const max = Number.isFinite(props.max) ? Math.max(props.max, min) : Math.max(100, min)\n  const fit = (point: number | undefined, from: number, fallback: number) =>\n    point === undefined || Number.isNaN(point) ? fallback : clamp(point, from, max)\n  const low = fit(props.low, min, min)\n  return {\n    min,\n    max,\n    value: fit(props.value, min, min),\n    low,\n    high: fit(props.high, low, max),\n    optimum: fit(props.optimum, min, (min + max) / 2),\n  }\n})\n\nconst fraction = computed(() => {\n  const { min, max, value } = range.value\n  return max > min ? (value - min) / (max - min) : 0\n})\n\n// @core\n// The regions of the HTML `<meter>`, with the boundaries Chromium draws: the part holding the\n// optimum is good, the part next to it average, and the far part, when the optimum sits beyond\n// `low` or `high`, poor.\nconst level = computed<'optimum' | 'suboptimal' | 'poor'>(() => {\n  const { value, low, high, optimum } = range.value\n  if (optimum >= low && optimum <= high)\n    return value >= low && value <= high ? 'optimum' : 'suboptimal'\n  if (optimum < low) return value < low ? 'optimum' : value <= high ? 'suboptimal' : 'poor'\n  return value > high ? 'optimum' : value >= low ? 'suboptimal' : 'poor'\n})\n\nconst LEVEL_TONES = { optimum: 'success', suboptimal: 'warning', poor: 'danger' } as const\n\nconst resolvedTone = computed<MeterTone>(() => {\n  if (props.tone) return props.tone\n  const graded = props.low !== undefined || props.high !== undefined || props.optimum !== undefined\n  return graded ? LEVEL_TONES[level.value] : 'accent'\n})\n\nconst text = computed(() => {\n  if (props.valueText !== undefined) return props.valueText\n  if (props.formatOptions)\n    return new Intl.NumberFormat(locale.value, props.formatOptions).format(range.value.value)\n  return m.value.progress.percent(Math.round(fraction.value * 100))\n})\n\nconst segmentCount = computed(() =>\n  Number.isFinite(props.segments) ? Math.max(1, Math.floor(props.segments)) : 1,\n)\n\n/** How much of segment `index` is filled, from 0 to 1. */\nconst segmentFill = (index: number) => clamp(fraction.value * segmentCount.value - index, 0, 1)\n\n// @a11y\n// A visible label names the bar by reference, unless the consumer named it themselves; without\n// one, the dictionary does.\nconst ariaLabel = useAriaLabel(() => (props.label ? undefined : m.value.meter.label))\nconst labelledBy = computed(() =>\n  props.label && attrs['aria-label'] == null && attrs['aria-labelledby'] == null\n    ? labelId\n    : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-meter v-tone\"\n    :class=\"rootClass\"\n    :style=\"[customColorStyle(color), rootStyle]\"\n    :data-tone=\"resolvedTone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-level=\"level\"\n    :data-size=\"size\"\n  >\n    <div v-if=\"(label && !hideLabel) || !hideValue\" class=\"v-meter-header\">\n      <span v-if=\"label && !hideLabel\" :id=\"labelId\" class=\"v-meter-label\">{{ label }}</span>\n      <!-- Read from the bar's `aria-valuetext`, so hidden here to avoid reading it twice. -->\n      <span v-if=\"!hideValue\" class=\"v-meter-value\" aria-hidden=\"true\">{{ text }}</span>\n    </div>\n    <span v-if=\"label && hideLabel\" :id=\"labelId\" class=\"v-visually-hidden\">{{ label }}</span>\n    <div\n      class=\"v-meter-track\"\n      role=\"meter\"\n      :aria-valuenow=\"range.value\"\n      :aria-valuemin=\"range.min\"\n      :aria-valuemax=\"range.max\"\n      :aria-valuetext=\"text\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"forwardedAttrs\"\n    >\n      <span\n        v-for=\"segment in segmentCount\"\n        :key=\"segment\"\n        class=\"v-meter-segment\"\n        :style=\"{ '--meter-segment-fill': String(segmentFill(segment - 1)) }\"\n      >\n        <span class=\"v-meter-fill\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-meter {\n    --meter-thickness: var(--vectis-control-size-meter-thickness-md);\n    /*\n     * Fill and track come from the shared tone table. The track takes the soft border rather than\n     * the soft background: the empty part must stay visible, since the reading is a proportion.\n     */\n    --meter-fill: var(--tone-bg-solid);\n    --meter-track: var(--tone-border-soft);\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The custom-colour row of the tone table defines no soft border; the tone's would show. */\n  .v-meter[data-custom] {\n    --meter-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 70%);\n  }\n\n  .v-meter[data-size='sm'] {\n    --meter-thickness: var(--vectis-control-size-meter-thickness-sm);\n  }\n\n  .v-meter[data-size='lg'] {\n    --meter-thickness: var(--vectis-control-size-meter-thickness-lg);\n  }\n\n  .v-meter-header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    column-gap: var(--vectis-space-2);\n  }\n\n  .v-meter-label {\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* Pushed to the end even without a label before it. */\n  .v-meter-value {\n    margin-inline-start: auto;\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-meter[data-size='sm'] .v-meter-label,\n  .v-meter[data-size='sm'] .v-meter-value {\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n  }\n\n  .v-meter-track {\n    display: flex;\n    gap: var(--vectis-control-size-meter-segment-gap);\n    block-size: var(--meter-thickness);\n  }\n\n  .v-meter-segment {\n    position: relative;\n    flex: 1 1 0;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--meter-track);\n  }\n\n  .v-meter-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--meter-segment-fill));\n    border-radius: inherit;\n    background: var(--meter-fill);\n    /* A logical length rather than a scale, which would have to be undone in right to left. */\n    transition:\n      inline-size var(--vectis-duration-base) var(--vectis-ease-default),\n      background-color var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-meter-fill {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .v-meter-segment {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-meter-fill {\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VMeter/VMeter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import { customColorStyle as n } from "../../utils/css.js";
+import { clamp as r } from "../../utils/number.js";
+import { useAriaLabel as i } from "../../composables/useAriaLabel.js";
+import { useRootAttrs as a } from "../../composables/useRootAttrs.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, openBlock as h, renderList as g, toDisplayString as _, unref as v, useId as y } from "vue";
+//#region src/components/VMeter/VMeter.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-tone",
+	"data-custom",
+	"data-level",
+	"data-size"
+], x = {
+	key: 0,
+	class: "v-meter-header"
+}, S = ["id"], C = {
+	key: 1,
+	class: "v-meter-value",
+	"aria-hidden": "true"
+}, w = ["id"], T = [
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext",
+	"aria-labelledby",
+	"aria-label"
+], E = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "VMeter",
+	props: {
+		value: { default: 0 },
+		min: { default: 0 },
+		max: { default: 100 },
+		low: { default: void 0 },
+		high: { default: void 0 },
+		optimum: { default: void 0 },
+		label: { default: void 0 },
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		valueText: { default: void 0 },
+		formatOptions: { default: void 0 },
+		hideValue: {
+			type: Boolean,
+			default: !1
+		},
+		tone: { default: void 0 },
+		color: { default: void 0 },
+		segments: { default: 1 },
+		size: { default: "md" }
+	},
+	setup(d) {
+		let E = d, { attrs: D, rootClass: O, rootStyle: k, forwardedAttrs: A } = a(), j = t(), M = e(), N = y(), P = s(() => {
+			let e = Number.isFinite(E.min) ? E.min : 0, t = Number.isFinite(E.max) ? Math.max(E.max, e) : Math.max(100, e), n = (e, n, i) => e === void 0 || Number.isNaN(e) ? i : r(e, n, t), i = n(E.low, e, e);
+			return {
+				min: e,
+				max: t,
+				value: n(E.value, e, e),
+				low: i,
+				high: n(E.high, i, t),
+				optimum: n(E.optimum, e, (e + t) / 2)
+			};
+		}), F = s(() => {
+			let { min: e, max: t, value: n } = P.value;
+			return t > e ? (n - e) / (t - e) : 0;
+		}), I = s(() => {
+			let { value: e, low: t, high: n, optimum: r } = P.value;
+			return r >= t && r <= n ? e >= t && e <= n ? "optimum" : "suboptimal" : r < t ? e < t ? "optimum" : e <= n ? "suboptimal" : "poor" : e > n ? "optimum" : e >= t ? "suboptimal" : "poor";
+		}), L = {
+			optimum: "success",
+			suboptimal: "warning",
+			poor: "danger"
+		}, R = s(() => E.tone ? E.tone : E.low !== void 0 || E.high !== void 0 || E.optimum !== void 0 ? L[I.value] : "accent"), z = s(() => E.valueText === void 0 ? E.formatOptions ? new Intl.NumberFormat(M.value, E.formatOptions).format(P.value.value) : j.value.progress.percent(Math.round(F.value * 100)) : E.valueText), B = s(() => Number.isFinite(E.segments) ? Math.max(1, Math.floor(E.segments)) : 1), V = (e) => r(F.value * B.value - e, 0, 1), H = i(() => E.label ? void 0 : j.value.meter.label), U = s(() => E.label && D["aria-label"] == null && D["aria-labelledby"] == null ? N : void 0);
+		return (e, t) => (h(), l("div", {
+			class: p(["v-meter v-tone", v(O)]),
+			style: m([v(n)(d.color), v(k)]),
+			"data-tone": R.value,
+			"data-custom": d.color === void 0 ? void 0 : "",
+			"data-level": I.value,
+			"data-size": d.size
+		}, [
+			d.label && !d.hideLabel || !d.hideValue ? (h(), l("div", x, [d.label && !d.hideLabel ? (h(), l("span", {
+				key: 0,
+				id: v(N),
+				class: "v-meter-label"
+			}, _(d.label), 9, S)) : c("", !0), d.hideValue ? c("", !0) : (h(), l("span", C, _(z.value), 1))])) : c("", !0),
+			d.label && d.hideLabel ? (h(), l("span", {
+				key: 1,
+				id: v(N),
+				class: "v-visually-hidden"
+			}, _(d.label), 9, w)) : c("", !0),
+			u("div", f({
+				class: "v-meter-track",
+				role: "meter",
+				"aria-valuenow": P.value.value,
+				"aria-valuemin": P.value.min,
+				"aria-valuemax": P.value.max,
+				"aria-valuetext": z.value,
+				"aria-labelledby": U.value,
+				"aria-label": v(H)
+			}, v(A)), [(h(!0), l(o, null, g(B.value, (e) => (h(), l("span", {
+				key: e,
+				class: "v-meter-segment",
+				style: m({ "--meter-segment-fill": String(V(e - 1)) })
+			}, [...t[0] ||= [u("span", { class: "v-meter-fill" }, null, -1)]], 4))), 128))], 16, T)
+		], 14, b));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=VMeter.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VMeter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMeter/VMeter.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A measurement within a known range, drawn in CSS under the `meter` role. The native `<meter>`\n * is styled only through vendor pseudo-elements, which need one rule set per engine, does not\n * transition its fill in Firefox and cannot be split into segments; the role carries the same\n * semantics. As with the native element, `low`, `high` and `optimum` place the value in a\n * region, which picks the tone.\n */\nimport { computed, useId } from 'vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The colour of the fill, which replaces the one chosen from `low`, `high` and `optimum`. */\nexport type MeterTone = 'accent' | 'neutral' | 'success' | 'warning' | 'danger'\n\n/** The thickness of the bar, 4, 8 or 12 pixels, and the size of the text above it. */\nexport type MeterSize = 'sm' | 'md' | 'lg'\n\ninterface MeterProps {\n  /** The measurement. Anything outside the range is brought back into it. */\n  value?: number\n  /** The lower bound of the range. */\n  min?: number\n  /** The upper bound of the range. A bound below `min` is raised to it. */\n  max?: number\n  /**\n   * The upper end of the low part of the range. With `high` and `optimum`, it decides whether\n   * the value is good, average or poor, which colours the bar.\n   */\n  low?: number\n  /** The lower end of the high part of the range. */\n  high?: number\n  /**\n   * The best value. In the low part, low values are good; in the high part, high values are;\n   * between `low` and `high`, the middle is good and both ends are average.\n   */\n  optimum?: number\n  /**\n   * What is measured, shown above the bar and naming it for screen readers. Without it, the bar\n   * is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence.\n   */\n  label?: string\n  /** Hides the label visually. It still names the bar for screen readers. */\n  hideLabel?: boolean\n  /**\n   * The value as written above the bar and read by screen readers, such as \"7.2 GB of 10 GB\" or\n   * \"Strong\". It replaces the formatted value.\n   */\n  valueText?: string\n  /**\n   * Formats the value for the current locale, such as a unit or a currency. Without it, the\n   * value is written as a percentage of the range.\n   */\n  formatOptions?: Intl.NumberFormatOptions\n  /** Hides the value visually. Screen readers still read it from the bar. */\n  hideValue?: boolean\n  /**\n   * The colour of the fill. Without it, the region of the value picks one when `low`, `high` or\n   * `optimum` is set: success, warning or danger; otherwise the accent.\n   */\n  tone?: MeterTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The track is\n   * derived from it against the theme.\n   */\n  color?: string\n  /** Splits the bar into this many equal parts, for a strength or a battery level. */\n  segments?: number\n  /** The thickness of the bar and the size of the text above it. */\n  size?: MeterSize\n}\n\n// The root only lays out the text and the bar: the consumer's ARIA and other attributes belong\n// on the element carrying the role.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<MeterProps>(), {\n  value: 0,\n  min: 0,\n  max: 100,\n  low: undefined,\n  high: undefined,\n  optimum: undefined,\n  label: undefined,\n  hideLabel: false,\n  valueText: undefined,\n  formatOptions: undefined,\n  hideValue: false,\n  // Deliberately undefined: the region of the value then picks the tone.\n  tone: undefined,\n  color: undefined,\n  segments: 1,\n  size: 'md',\n})\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst locale = useLocale()\nconst labelId = useId()\n\n/* The normalization of the HTML `<meter>`: the bounds first, then each point brought into\n   them, `high` never below `low`. A value that is not a number reads as the minimum. */\nconst range = computed(() => {\n  const min = Number.isFinite(props.min) ? props.min : 0\n  const max = Number.isFinite(props.max) ? Math.max(props.max, min) : Math.max(100, min)\n  const fit = (point: number | undefined, from: number, fallback: number) =>\n    point === undefined || Number.isNaN(point) ? fallback : clamp(point, from, max)\n  const low = fit(props.low, min, min)\n  return {\n    min,\n    max,\n    value: fit(props.value, min, min),\n    low,\n    high: fit(props.high, low, max),\n    optimum: fit(props.optimum, min, (min + max) / 2),\n  }\n})\n\nconst fraction = computed(() => {\n  const { min, max, value } = range.value\n  return max > min ? (value - min) / (max - min) : 0\n})\n\n// @core\n// The regions of the HTML `<meter>`, with the boundaries Chromium draws: the part holding the\n// optimum is good, the part next to it average, and the far part, when the optimum sits beyond\n// `low` or `high`, poor.\nconst level = computed<'optimum' | 'suboptimal' | 'poor'>(() => {\n  const { value, low, high, optimum } = range.value\n  if (optimum >= low && optimum <= high)\n    return value >= low && value <= high ? 'optimum' : 'suboptimal'\n  if (optimum < low) return value < low ? 'optimum' : value <= high ? 'suboptimal' : 'poor'\n  return value > high ? 'optimum' : value >= low ? 'suboptimal' : 'poor'\n})\n\nconst LEVEL_TONES = { optimum: 'success', suboptimal: 'warning', poor: 'danger' } as const\n\nconst resolvedTone = computed<MeterTone>(() => {\n  if (props.tone) return props.tone\n  const graded = props.low !== undefined || props.high !== undefined || props.optimum !== undefined\n  return graded ? LEVEL_TONES[level.value] : 'accent'\n})\n\nconst text = computed(() => {\n  if (props.valueText !== undefined) return props.valueText\n  if (props.formatOptions)\n    return new Intl.NumberFormat(locale.value, props.formatOptions).format(range.value.value)\n  return m.value.progress.percent(Math.round(fraction.value * 100))\n})\n\nconst segmentCount = computed(() =>\n  Number.isFinite(props.segments) ? Math.max(1, Math.floor(props.segments)) : 1,\n)\n\n/** How much of segment `index` is filled, from 0 to 1. */\nconst segmentFill = (index: number) => clamp(fraction.value * segmentCount.value - index, 0, 1)\n\n// @a11y\n// A visible label names the bar by reference, unless the consumer named it themselves; without\n// one, the dictionary does.\nconst ariaLabel = useAriaLabel(() => (props.label ? undefined : m.value.meter.label))\nconst labelledBy = computed(() =>\n  props.label && attrs['aria-label'] == null && attrs['aria-labelledby'] == null\n    ? labelId\n    : undefined,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-meter v-tone\"\n    :class=\"rootClass\"\n    :style=\"[customColorStyle(color), rootStyle]\"\n    :data-tone=\"resolvedTone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-level=\"level\"\n    :data-size=\"size\"\n  >\n    <div v-if=\"(label && !hideLabel) || !hideValue\" class=\"v-meter-header\">\n      <span v-if=\"label && !hideLabel\" :id=\"labelId\" class=\"v-meter-label\">{{ label }}</span>\n      <!-- Read from the bar's `aria-valuetext`, so hidden here to avoid reading it twice. -->\n      <span v-if=\"!hideValue\" class=\"v-meter-value\" aria-hidden=\"true\">{{ text }}</span>\n    </div>\n    <span v-if=\"label && hideLabel\" :id=\"labelId\" class=\"v-visually-hidden\">{{ label }}</span>\n    <div\n      class=\"v-meter-track\"\n      role=\"meter\"\n      :aria-valuenow=\"range.value\"\n      :aria-valuemin=\"range.min\"\n      :aria-valuemax=\"range.max\"\n      :aria-valuetext=\"text\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"forwardedAttrs\"\n    >\n      <span\n        v-for=\"segment in segmentCount\"\n        :key=\"segment\"\n        class=\"v-meter-segment\"\n        :style=\"{ '--meter-segment-fill': String(segmentFill(segment - 1)) }\"\n      >\n        <span class=\"v-meter-fill\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-meter {\n    --meter-thickness: var(--vectis-control-size-meter-thickness-md);\n    /*\n     * Fill and track come from the shared tone table. The track takes the soft border rather than\n     * the soft background: the empty part must stay visible, since the reading is a proportion.\n     */\n    --meter-fill: var(--tone-bg-solid);\n    --meter-track: var(--tone-border-soft);\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The custom-colour row of the tone table defines no soft border; the tone's would show. */\n  .v-meter[data-custom] {\n    --meter-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 70%);\n  }\n\n  .v-meter[data-size='sm'] {\n    --meter-thickness: var(--vectis-control-size-meter-thickness-sm);\n  }\n\n  .v-meter[data-size='lg'] {\n    --meter-thickness: var(--vectis-control-size-meter-thickness-lg);\n  }\n\n  .v-meter-header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    column-gap: var(--vectis-space-2);\n  }\n\n  .v-meter-label {\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* Pushed to the end even without a label before it. */\n  .v-meter-value {\n    margin-inline-start: auto;\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-meter[data-size='sm'] .v-meter-label,\n  .v-meter[data-size='sm'] .v-meter-value {\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n  }\n\n  .v-meter-track {\n    display: flex;\n    gap: var(--vectis-control-size-meter-segment-gap);\n    block-size: var(--meter-thickness);\n  }\n\n  .v-meter-segment {\n    position: relative;\n    flex: 1 1 0;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--meter-track);\n  }\n\n  .v-meter-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--meter-segment-fill));\n    border-radius: inherit;\n    background: var(--meter-fill);\n    /* A logical length rather than a scale, which would have to be undone in right to left. */\n    transition:\n      inline-size var(--vectis-duration-base) var(--vectis-ease-default),\n      background-color var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-meter-fill {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .v-meter-segment {\n      forced-color-adjust: none;\n      background: Canvas;\n      box-shadow: inset 0 0 0 var(--vectis-control-border-width) CanvasText;\n    }\n\n    .v-meter-fill {\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VNumberInput/VNumberInput.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-number-input .v-input-control{font-variant-numeric:tabular-nums}.v-number-input .v-input-control[data-controls=split]{text-align:center}.v-separator[data-orientation=vertical].v-number-input-divider{block-size:var(--control-action-size);align-self:center}.v-number-input-step:disabled{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-number-input-stack{--vectis-icon-size:calc((var(--control-height) - 2px) / 2);border-inline-start:1px solid var(--vectis-color-border);flex-direction:column;align-self:stretch;display:flex}.v-number-input-stack:last-child{margin-inline-end:calc(-1 * var(--control-padding-inline-field))}.v-number-input-stack:not(:last-child){border-inline-end:1px solid var(--vectis-color-border)}.v-number-input-stack>.v-number-input-step{block-size:auto;inline-size:var(--control-action-size);border-radius:0;flex:1 1 0;margin:0}.v-number-input-stack>.v-number-input-step+.v-number-input-step{border-block-start:1px solid var(--vectis-color-border)}}

package/dist/components/VNumberInput/VNumberInput.d.ts

@@ -0,0 +1,114 @@
+import { FieldLabelPosition } from '../VField/VField.js';
+import { InputSize } from '../VInput/VInput.js';
+/**
+ * Where the step buttons sit: a minus at the start and a plus at the end, both stacked at the
+ * end, or none.
+ */
+export type NumberInputControls = 'split' | 'stacked' | 'none';
+interface NumberInputProps {
+    /** The smallest value. A typed value below it is raised to it when committed. */
+    min?: number;
+    /** The largest value. A typed value above it is lowered to it when committed. */
+    max?: number;
+    /**
+     * How far the arrow keys and the buttons move the value, on a grid that starts at `min`, or at
+     * 0 without one. Page Up and Page Down move it ten steps.
+     */
+    step?: number;
+    /**
+     * How the value is shown while the field is not being edited: the options of
+     * `Intl.NumberFormat`, for a currency, a unit, a percentage or a number of decimals. With
+     * `style: 'percent'`, the value 0.25 shows and is typed as 25.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The locale the number is written and read in. It defaults to the design system's. */
+    locale?: string;
+    /** Where the step buttons sit. Whatever their place, they stay out of the tab order. */
+    controls?: NumberInputControls;
+    /** What the plus button does, in words. It falls back to the design system dictionary. */
+    incrementLabel?: string;
+    /** What the minus button does, in words. It falls back to the design system dictionary. */
+    decrementLabel?: string;
+    /** The height of the field: 32, 40 or 48 pixels. */
+    size?: InputSize;
+    /** Takes 4px off the height. */
+    compact?: boolean;
+    /** The label above the field, tied to it. */
+    label?: string;
+    /** A line of help under the field, read out along with the label. */
+    hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint. It marks the
+     * field invalid and is announced when it appears or changes.
+     */
+    error?: string;
+    /** Marks the field as required: an asterisk follows the label, and the field is `required`. */
+    required?: boolean;
+    /** Hides the label visually. It still names the field for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the field (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
+    /** Marks the field as invalid whatever the browser thinks. */
+    invalid?: boolean;
+    /** Makes the field unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /** Shows the value without allowing it to be changed, by typing or by stepping. */
+    readonly?: boolean;
+    /** Offers a cross that empties the field, setting the value to `null`. */
+    clearable?: boolean;
+    /** What the clear button does, in words. It falls back to the design system dictionary. */
+    clearLabel?: string;
+    /** Shows a spinner at the end of the field. */
+    loading?: boolean;
+    /** What screen readers announce while the spinner turns. */
+    loadingText?: string;
+}
+type __VLS_Props = NumberInputProps;
+type __VLS_ModelProps = {
+    /** The value, `null` while the field is empty. */
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the real input. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** Selects everything in the field. */
+    select: () => void | undefined;
+    /** The real `<input>`. */
+    el: import('vue').ComputedRef<HTMLInputElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {
+    loading: boolean;
+    label: string;
+    error: string;
+    size: InputSize;
+    compact: boolean;
+    disabled: boolean;
+    required: boolean;
+    step: number;
+    controls: NumberInputControls;
+    invalid: boolean;
+    hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
+    readonly: boolean;
+    loadingText: string;
+    clearable: boolean;
+    clearLabel: string;
+    min: number;
+    max: number;
+    formatOptions: Intl.NumberFormatOptions;
+    locale: string;
+    incrementLabel: string;
+    decrementLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VNumberInput/VNumberInput.js

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

package/dist/components/VNumberInput/VNumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VNumberInput.js","names":[],"sources":["../../../src/components/VNumberInput/VNumberInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A text field announced as a spinbutton rather than a native number input: only a text field\n * can show a number formatted for its locale (separators, currency, unit, percent), which\n * `type=\"number\"` refuses. The keyboard of a spinbutton, the parsing and the stepping are\n * therefore rebuilt here; the typed value is committed on blur and on Enter, so that a minimum\n * never interrupts the typing of a number that would have reached it.\n */\nimport { computed, inject, ref, useAttrs, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { add as addIcon } from '../VIcon/icons/add'\nimport { expand_less as expandLessIcon } from '../VIcon/icons/expand_less'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { remove as removeIcon } from '../VIcon/icons/remove'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport type { InputSize } from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VSeparator from '../VSeparator/VSeparator.vue'\n\nimport { canClear } from '../../composables/useClearable'\nimport { partitionAttrs } from '../../utils/attrs'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\nimport { clamp, numberSeparators, parseNumber, scale, stepValue } from './number'\n\n/**\n * Where the step buttons sit: a minus at the start and a plus at the end, both stacked at the\n * end, or none.\n */\nexport type NumberInputControls = 'split' | 'stacked' | 'none'\n\ninterface NumberInputProps {\n  /** The smallest value. A typed value below it is raised to it when committed. */\n  min?: number\n  /** The largest value. A typed value above it is lowered to it when committed. */\n  max?: number\n  /**\n   * How far the arrow keys and the buttons move the value, on a grid that starts at `min`, or at\n   * 0 without one. Page Up and Page Down move it ten steps.\n   */\n  step?: number\n  /**\n   * How the value is shown while the field is not being edited: the options of\n   * `Intl.NumberFormat`, for a currency, a unit, a percentage or a number of decimals. With\n   * `style: 'percent'`, the value 0.25 shows and is typed as 25.\n   */\n  formatOptions?: Intl.NumberFormatOptions\n  /** The locale the number is written and read in. It defaults to the design system's. */\n  locale?: string\n  /** Where the step buttons sit. Whatever their place, they stay out of the tab order. */\n  controls?: NumberInputControls\n  /** What the plus button does, in words. It falls back to the design system dictionary. */\n  incrementLabel?: string\n  /** What the minus button does, in words. It falls back to the design system dictionary. */\n  decrementLabel?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** The label above the field, tied to it. */\n  label?: string\n  /** A line of help under the field, read out along with the label. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint. It marks the\n   * field invalid and is announced when it appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows the value without allowing it to be changed, by typing or by stepping. */\n  readonly?: boolean\n  /** Offers a cross that empties the field, setting the value to `null`. */\n  clearable?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /** Shows a spinner at the end of the field. */\n  loading?: boolean\n  /** What screen readers announce while the spinner turns. */\n  loadingText?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n  min: undefined,\n  max: undefined,\n  step: 1,\n  formatOptions: undefined,\n  locale: undefined,\n  controls: 'split',\n  incrementLabel: undefined,\n  decrementLabel: undefined,\n  size: 'md',\n  compact: false,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  clearable: false,\n  clearLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The clear button was pressed. The value is already `null`. */\n  clear: []\n}>()\n\n/** The value, `null` while the field is empty. */\nconst model = defineModel<number | null>({ default: null })\n\nconst m = useMessages()\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst incrementText = computed(() => props.incrementLabel ?? m.value.numberInput.increment)\nconst decrementText = computed(() => props.decrementLabel ?? m.value.numberInput.decrement)\n\nconst group = inject(inputGroupKey, null)\nconst { disabled: resolvedDisabled } = useControlShape(props, group)\n\n// @a11y\n// Everything goes down to VInput, which keeps `class` and `style` on its wrapper; except `name`\n// and `form`, which move to a hidden input carrying the bare number: the visible field holds\n// formatted text (\"1 234,50 €\"), which is not what a form should submit.\nconst attrs = useAttrs()\nconst split = computed(() => partitionAttrs(attrs, ['name', 'form']))\nconst fieldAttrs = computed(() => split.value.rest)\nconst formName = computed(() => split.value.picked.name as string | undefined)\nconst formOwner = computed(() => split.value.picked.form as string | undefined)\n\nconst percent = computed(() => props.formatOptions?.style === 'percent')\nconst separators = computed(() => numberSeparators(resolvedLocale.value))\nconst displayFormat = computed(\n  () => new Intl.NumberFormat(resolvedLocale.value, props.formatOptions),\n)\n// The value as it is edited: no grouping, no symbol, every decimal it has.\nconst editFormat = computed(\n  () =>\n    new Intl.NumberFormat(resolvedLocale.value, {\n      useGrouping: false,\n      maximumFractionDigits: 20,\n    }),\n)\n\nconst display = (value: number | null) => (value === null ? '' : displayFormat.value.format(value))\nconst editable = (value: number | null) =>\n  value === null ? '' : editFormat.value.format(percent.value ? scale(value, 100) : value)\n\n/** What was typed, read as a value: `null` when empty, `NaN` when not a number. */\nfunction typedValue(): number | null {\n  const value = parseNumber(text.value, separators.value)\n  return value === null || Number.isNaN(value) || !percent.value ? value : scale(value, 0.01)\n}\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst hiddenEl = ref<HTMLInputElement | null>(null)\nconst focused = ref(false)\nconst text = ref(display(model.value))\n\nfunction syncText() {\n  text.value = focused.value ? editable(model.value) : display(model.value)\n}\n\nwatch([model, displayFormat, editFormat], syncText)\n\nfunction setValue(value: number | null) {\n  model.value = value\n  syncText()\n  // @core\n  // Enter submits a form as the default action of the very keydown that commits the value,\n  // before Vue renders: the hidden input is written now, or the previous number is submitted.\n  if (hiddenEl.value) hiddenEl.value.value = value === null ? '' : String(value)\n}\n\n/** Commits what was typed: empty is `null`, a number is kept within bounds, text is undone. */\nfunction commit() {\n  const value = typedValue()\n  if (Number.isNaN(value)) syncText()\n  else setValue(value === null ? null : clamp(value, props.min, props.max))\n}\n\nconst editableField = computed(() => !resolvedDisabled.value && !props.readonly)\n/**\n * Whether the field's own controls follow the plus button: the clear cross, which VInput shows by\n * the same rule, or the spinner. A rule then sets the plus apart from them.\n */\nconst endControls = computed(\n  () => props.loading || canClear(props, resolvedDisabled.value, text.value !== ''),\n)\nconst atMin = computed(\n  () => model.value !== null && props.min !== undefined && model.value <= props.min,\n)\nconst atMax = computed(\n  () => model.value !== null && props.max !== undefined && model.value >= props.max,\n)\n\n/**\n * Moves the value by a number of steps, from what is typed when it reads as a number. An empty\n * field starts from 0, or from the nearest bound when 0 is out of range.\n */\nfunction stepBy(steps: number) {\n  if (!editableField.value) return\n  const typed = focused.value ? typedValue() : model.value\n  const current = typed === null || Number.isNaN(typed) ? model.value : typed\n  if (current === null) return setValue(clamp(0, props.min, props.max))\n  const step = props.step > 0 ? props.step : 1\n  setValue(clamp(stepValue(current, steps, step, props.min ?? 0), props.min, props.max))\n}\n\n// @keyboard\n// The keys of the APG spinbutton. Home and End only take a value when there is a bound to go\n// to; otherwise they keep moving the caret, as in any text field.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  const steps: Record<string, number> = { ArrowUp: 1, ArrowDown: -1, PageUp: 10, PageDown: -10 }\n  if (event.key in steps) {\n    event.preventDefault()\n    stepBy(steps[event.key]!)\n  } else if (event.key === 'Home' && props.min !== undefined && editableField.value) {\n    event.preventDefault()\n    setValue(props.min)\n  } else if (event.key === 'End' && props.max !== undefined && editableField.value) {\n    event.preventDefault()\n    setValue(props.max)\n  } else if (event.key === 'Enter') {\n    commit()\n  }\n}\n\nfunction onFocus() {\n  focused.value = true\n  syncText()\n}\n\nfunction onBlur() {\n  focused.value = false\n  commit()\n}\n\nfunction onClear() {\n  setValue(null)\n  emit('clear')\n}\n\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects everything in the field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>`. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VInput\n    ref=\"inputRef\"\n    v-model=\"text\"\n    class=\"v-number-input\"\n    role=\"spinbutton\"\n    inputmode=\"decimal\"\n    autocomplete=\"off\"\n    :aria-valuenow=\"model ?? undefined\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuetext=\"model === null ? undefined : display(model)\"\n    :data-controls=\"controls\"\n    v-bind=\"fieldAttrs\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n    :invalid=\"invalid\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :clearable=\"clearable\"\n    :clear-label=\"clearLabel\"\n    :loading=\"loading\"\n    :loading-text=\"loadingText\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n    @keydown=\"onKeydown\"\n    @clear=\"onClear\"\n  >\n    <!--\n      The buttons stay out of the tab order: the arrow keys do what they do, from the field. A\n      press does not take the focus either, so the field keeps it while the value moves.\n    -->\n    <template v-if=\"controls === 'split'\" #start>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"v-field-action v-number-input-step\"\n        :aria-label=\"decrementText\"\n        :disabled=\"!editableField || atMin\"\n        @mousedown.prevent\n        @click=\"stepBy(-1)\"\n      >\n        <VIcon :name=\"removeIcon\" />\n      </button>\n    </template>\n    <template v-if=\"controls === 'split'\" #value-end>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"v-field-action v-number-input-step\"\n        :aria-label=\"incrementText\"\n        :disabled=\"!editableField || atMax\"\n        @mousedown.prevent\n        @click=\"stepBy(1)\"\n      >\n        <VIcon :name=\"addIcon\" />\n      </button>\n      <VSeparator v-if=\"endControls\" orientation=\"vertical\" class=\"v-number-input-divider\" />\n    </template>\n    <template v-else-if=\"controls === 'stacked'\" #value-end>\n      <span class=\"v-number-input-stack\">\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"v-field-action v-number-input-step\"\n          :aria-label=\"incrementText\"\n          :disabled=\"!editableField || atMax\"\n          @mousedown.prevent\n          @click=\"stepBy(1)\"\n        >\n          <VIcon :name=\"expandLessIcon\" />\n        </button>\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"v-field-action v-number-input-step\"\n          :aria-label=\"decrementText\"\n          :disabled=\"!editableField || atMin\"\n          @mousedown.prevent\n          @click=\"stepBy(-1)\"\n        >\n          <VIcon :name=\"expandMoreIcon\" />\n        </button>\n      </span>\n    </template>\n  </VInput>\n  <input\n    v-if=\"formName\"\n    ref=\"hiddenEl\"\n    type=\"hidden\"\n    :name=\"formName\"\n    :form=\"formOwner\"\n    :value=\"model ?? ''\"\n    :disabled=\"resolvedDisabled\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-number-input .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* Between a minus and a plus, the number reads as the thing they act on. */\n  .v-number-input .v-input-control[data-controls='split'] {\n    text-align: center;\n  }\n\n  /*\n   * The rule between the plus button and the field's own controls, as VTimeInput draws after\n   * AM/PM: icon height rather than the full height a vertical VSeparator stretches to, which\n   * would read as a division of the box rather than a break in the row.\n   */\n  .v-separator[data-orientation='vertical'].v-number-input-divider {\n    align-self: center;\n    block-size: var(--control-action-size);\n  }\n\n  .v-number-input-step:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /*\n   * The stacked pair fills the field's height, set apart from the value by a divider. Each half\n   * takes its icon size from the height it has: the field's, less its two 1px borders.\n   */\n  .v-number-input-stack {\n    --vectis-icon-size: calc((var(--control-height) - 2px) / 2);\n\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    border-inline-start: 1px solid var(--vectis-color-border);\n  }\n\n  /*\n   * Last in the field, the pair reaches over the field's padding to its end edge. Followed by the\n   * clear cross or the spinner, it stays in the flow and a second divider sets it apart from them.\n   */\n  .v-number-input-stack:last-child {\n    margin-inline-end: calc(-1 * var(--control-padding-inline-field));\n  }\n\n  .v-number-input-stack:not(:last-child) {\n    border-inline-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-number-input-stack > .v-number-input-step {\n    flex: 1 1 0;\n    block-size: auto;\n    inline-size: var(--control-action-size);\n    margin: 0;\n    border-radius: 0;\n  }\n\n  .v-number-input-stack > .v-number-input-step + .v-number-input-step {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n}\n</style>\n"],"mappings":""}