vectis-ui 0.12.0 → 0.14.0

package/dist/components/VProgressLinear/VProgressLinear.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,37 @@
 import { useMessages as e } from "../../i18n/state.js";
 import { px as t } from "../../utils/css.js";
 import { useAriaLabel as n } from "../../composables/useAriaLabel.js";
-import { useProgressValue as r } from "../../composables/useProgressValue.js";
-import { Fragment as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeStyle as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m } from "vue";
+import { useRootAttrs as r } from "../../composables/useRootAttrs.js";
+import { useProgressValue as i } from "../../composables/useProgressValue.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, useId as y } from "vue";
 //#region src/components/VProgressLinear/VProgressLinear.vue?vue&type=script&setup=true&lang.ts
-var h = [
-	"aria-label",
+var b = [
 	"data-tone",
 	"data-custom",
+	"data-orientation"
+], x = ["id"], S = [
+	"aria-labelledby",
+	"aria-label",
 	"data-shape",
 	"data-orientation",
 	"data-value-position",
 	"data-indeterminate",
 	"aria-valuenow",
 	"aria-valuemax"
-], g = { class: "v-progress-linear-text" }, _ = {
+], C = { class: "v-progress-linear-text" }, w = {
 	class: "v-progress-linear-text",
 	"data-on-fill": "",
 	"aria-hidden": "true"
-}, v = /*@__PURE__*/ l({
+}, T = /*@__PURE__*/ d({
+	inheritAttrs: !1,
 	__name: "VProgressLinear",
 	props: {
 		value: { default: 0 },
 		label: { default: void 0 },
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
 		max: { default: 100 },
 		indeterminate: {
 			type: Boolean,
@@ -39,38 +48,47 @@ var h = [
 		valuePosition: { default: "center" },
 		orientation: { default: "horizontal" }
 	},
-	setup(l) {
-		let v = l, y = e(), { max: b, clamped: x, fraction: S, percent: C, roundedPercent: w } = r(() => v.value, () => v.max), T = n(() => v.label ?? y.value.progress.label);
-		return (e, n) => (d(), o("div", {
-			class: "v-progress-linear v-tone",
+	setup(d) {
+		let T = d, E = e(), { max: D, clamped: O, fraction: k, percent: A, roundedPercent: j } = i(() => T.value, () => T.max), { attrs: M, rootClass: N, rootStyle: P, forwardedAttrs: F } = r(), I = y(), L = n(() => T.label ? void 0 : E.value.progress.label), R = o(() => T.label && M["aria-label"] == null && M["aria-labelledby"] == null ? I : void 0);
+		return (e, n) => (h(), c("div", {
+			class: p(["v-progress-linear-field v-tone", v(N)]),
+			"data-tone": d.tone,
+			"data-custom": d.color === void 0 ? void 0 : "",
+			"data-orientation": d.orientation,
+			style: m([{
+				"--custom-color": d.color,
+				"--progress-thickness": v(t)(d.thickness)
+			}, v(P)])
+		}, [d.label ? (h(), c("span", {
+			key: 0,
+			id: v(I),
+			class: p(["v-progress-linear-label", { "v-visually-hidden": d.hideLabel }])
+		}, _(d.label), 11, x)) : s("", !0), l("div", f({
+			class: "v-progress-linear",
 			role: "progressbar",
-			"aria-label": m(T),
-			"data-tone": l.tone,
-			"data-custom": l.color === void 0 ? void 0 : "",
-			"data-shape": l.shape,
-			"data-orientation": l.orientation,
-			"data-value-position": l.valuePosition,
-			"data-indeterminate": l.indeterminate ? "" : void 0,
-			"aria-valuenow": l.indeterminate ? void 0 : m(x),
+			"aria-labelledby": R.value,
+			"aria-label": v(L)
+		}, v(F), {
+			"data-shape": d.shape,
+			"data-orientation": d.orientation,
+			"data-value-position": d.valuePosition,
+			"data-indeterminate": d.indeterminate ? "" : void 0,
+			"aria-valuenow": d.indeterminate ? void 0 : v(O),
 			"aria-valuemin": "0",
-			"aria-valuemax": m(b),
-			style: u({
-				"--fill-fraction": String(m(S)),
-				"--custom-color": l.color,
-				"--progress-thickness": m(t)(l.thickness)
-			})
-		}, [n[0] ||= s("span", { class: "v-progress-linear-fill" }, null, -1), !l.indeterminate && (l.showValue || e.$slots.default) ? (d(), o(i, { key: 0 }, [s("span", g, [f(e.$slots, "default", {
-			value: m(x),
-			max: m(b),
-			percent: m(C)
-		}, () => [c(p(m(y).progress.percent(m(w))), 1)])]), s("span", _, [f(e.$slots, "default", {
-			value: m(x),
-			max: m(b),
-			percent: m(C)
-		}, () => [c(p(m(y).progress.percent(m(w))), 1)])])], 64)) : a("", !0)], 12, h));
+			"aria-valuemax": v(D),
+			style: { "--fill-fraction": String(v(k)) }
+		}), [n[0] ||= l("span", { class: "v-progress-linear-fill" }, null, -1), !d.indeterminate && (d.showValue || e.$slots.default) ? (h(), c(a, { key: 0 }, [l("span", C, [g(e.$slots, "default", {
+			value: v(O),
+			max: v(D),
+			percent: v(A)
+		}, () => [u(_(v(E).progress.percent(v(j))), 1)])]), l("span", w, [g(e.$slots, "default", {
+			value: v(O),
+			max: v(D),
+			percent: v(A)
+		}, () => [u(_(v(E).progress.percent(v(j))), 1)])])], 64)) : s("", !0)], 16, S)], 14, b));
 	}
 });
 //#endregion
-export { v as default };
+export { T as default };
 
 //# sourceMappingURL=VProgressLinear.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VProgressLinear.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the fill. JavaScript normalizes values shared by geometry, slots and progressbar\n * ARIA attributes.\n */\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\n/** What the default slot receives. */\nexport interface ProgressLinearSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, in words, for screen readers. It draws nothing on screen, and falls\n   * back to the design system dictionary; an `aria-label` or `aria-labelledby` of your own\n   * takes precedence over it.\n   */\n  label?: string\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /** It is what to use while waiting for a server that reports no percentage. */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\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 by\n   * default, and showing text inside a bar that thin needs an explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\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?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\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  /** What to write inside the bar instead of the percentage. */\n  default?(props: ProgressLinearSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// @a11y\n// The canonical cascade: a consumer's `aria-labelledby`, then their `aria-label`, then the\n// `label` prop, then the dictionary. An indicator takes no name from the text inside it, so\n// without the last step it would have none at all.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.progress.label)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear v-tone\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-orientation=\"orientation\"\n    :data-value-position=\"valuePosition\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"normalizedMax\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-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=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n      <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\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 consumer's style\n   * sits outside our layers and always wins.\n   */\n  .v-progress-linear {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\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 again on\n     * every frame. Scaling it would be cheaper, but a scale is physical: it would have to be\n     * undone for the vertical orientation and again for a right-to-left page, where a logical\n     * length simply works.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /*\n   * The two copies are COMPLEMENTARY and never superimposed: this one is cut OUT of the filled\n   * part, the other cut TO it, so every letter is painted exactly once. Removing either clip\n   * raises no error and stays invisible for as long as both copies resolve to the same colour,\n   * which happens wherever the adaptive colour function is unsupported.\n   */\n  .v-progress-linear-text {\n    /*\n     * The two insets of the cut: one on the edge the fill grows FROM, one on the edge it grows\n     * towards. They are named after those roles rather than after physical sides, so the three\n     * geometry rules further down; horizontal, right-to-left, vertical; all read the same pair.\n     */\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    /*\n     * The large negative inset on the two sides that do not carry the cut is what stops text\n     * taller or wider than the bar from being cropped by its own clip.\n     */\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    /*\n     * The per-tone fallback colour. The adaptive one cannot simply be written as a second\n     * declaration after it: because that declaration contains a var(), a browser with no\n     * support does not reject it at parse time; it would win the cascade and only then turn\n     * invalid, which resets the colour to inherited and leaves the fallback never applied.\n     */\n    color: var(--progress-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  /*\n   * In a right-to-left page the fill grows from the right, so the two insets change physical\n   * sides; the variables themselves keep their meaning.\n   */\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  /*\n   * Putting zero at the bottom is not done by reversing the direction, which would also apply\n   * to the text of the two copies: bidirectional reordering would then display \"50 %\" as \"%\n   * 50\". The fill is anchored to the far end of the axis instead.\n   */\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  /*\n   * A right-to-left page reverses the inline axis of a vertical writing mode too: `vertical-lr`\n   * then runs from the bottom up, so the far end anchored above is the TOP. The fill goes back\n   * to the start of the axis, which is now the bottom.\n   */\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-fill {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n  }\n\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  /*\n   * The second selector is what neutralizes it, and it is written that way on purpose: it is\n   * one step MORE specific than that rule, where the first selector alone would merely tie with\n   * it and win by source order; a far more fragile arrangement.\n   */\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  /*\n   * At each extreme it is exactly flush with the edge without ever pulling away from it, which\n   * makes the loop invisible and keeps the track from ever looking empty; no second bar is\n   * needed. The easing carries the whole impression: a gradual entry, a quick crossing, a\n   * damped exit.\n   */\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    /*\n     * The anchoring is put back at the start of the axis, vertical case included; where a\n     * measurable progress anchors at the far end instead.\n     */\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  /*\n   * The same keyframes are simply read backwards, which changes nothing else BECAUSE the easing\n   * curve is symmetric; an asymmetric one would need a second set of keyframes. A horizontal\n   * right-to-left page needs nothing: the logical inset already follows the reading direction.\n   */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  /* On a right-to-left page the vertical axis already runs upwards (see the trap above),\n     so the keyframes are read forwards again. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate]:dir(rtl)\n    .v-progress-linear-fill {\n    animation-direction: normal;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* `forced-color-adjust` inherits, so both copies of the text are given their colour here too. */\n  @media (forced-colors: active) {\n    .v-progress-linear {\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-progress-linear-fill {\n      background: Highlight;\n    }\n\n    .v-progress-linear-text {\n      color: CanvasText;\n    }\n\n    .v-progress-linear-text[data-on-fill] {\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ,GAsBR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAMM,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK;yBAIxE,EAsCM,OAAA;GArCJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,oBAAkB,EAAA;GAClB,uBAAqB,EAAA;GACrB,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA,CAAA;GACf,OAAK,EAAA;uBAA6B,OAAO,EAAA,CAAA,CAAQ;sBAA2B,EAAA;4BAAqC,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;;eAM9H,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAAA,CAOnB,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAvD,EAWW,GAAA,EAAA,KAAA,EAAA,GAAA,CAVT,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGxC,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VProgressLinear.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS draws the fill. JavaScript normalizes values shared by geometry, slots and progressbar\n * ARIA attributes.\n */\nimport { computed, useId } from 'vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\n/** What the progress means, in colour. */\nexport type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\n/** How the track and the fill end. */\nexport type ProgressLinearShape = 'rounded' | 'square'\n\n/** Where the value sits along the bar. */\nexport type ProgressLinearValuePosition = 'start' | 'center' | 'end'\n\n/** Which way the bar fills. */\nexport type ProgressLinearOrientation = 'horizontal' | 'vertical'\n\n/** What the default slot receives. */\nexport interface ProgressLinearSlotProps {\n  /** The value, brought back into the range. */\n  value: number\n  /** The bound, zero or more. */\n  max: number\n  /** How far along it is, as a percentage and unrounded. */\n  percent: number\n}\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /**\n   * What is progressing, shown above the bar and naming it for screen readers. Without it, the\n   * bar is named from the design system dictionary; an `aria-label` or `aria-labelledby` of your\n   * own takes precedence.\n   */\n  label?: string\n  /** Hides the label visually. It still names the bar for screen readers. */\n  hideLabel?: boolean\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /** Shows progress that cannot be measured, such as a server that reports no percentage. */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: ProgressLinearTone\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 by\n   * default, and showing text inside a bar that thin needs an explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\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?: ProgressLinearValuePosition\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: ProgressLinearOrientation\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  label: undefined,\n  hideLabel: false,\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  /** What to write inside the bar instead of the percentage. */\n  default?(props: ProgressLinearSlotProps): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst {\n  max: normalizedMax,\n  clamped,\n  fraction,\n  percent,\n  roundedPercent,\n} = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n\n// The root is a layout box holding the label and the bar: `class` and `style` stay on it, with\n// the tone and the custom properties the bar inherits, and every other attribute goes to the bar.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// @a11y\n// A visible label names the bar by reference, unless the consumer named it themselves; without\n// one, the dictionary does. An indicator takes no name from the text inside it.\nconst labelId = useId()\nconst ariaLabel = useAriaLabel(() => (props.label ? undefined : m.value.progress.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-progress-linear-field v-tone\"\n    :class=\"rootClass\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-orientation=\"orientation\"\n    :style=\"[{ '--custom-color': color, '--progress-thickness': px(thickness) }, rootStyle]\"\n  >\n    <span\n      v-if=\"label\"\n      :id=\"labelId\"\n      class=\"v-progress-linear-label\"\n      :class=\"{ 'v-visually-hidden': hideLabel }\"\n      >{{ label }}</span\n    >\n    <div\n      class=\"v-progress-linear\"\n      role=\"progressbar\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      v-bind=\"forwardedAttrs\"\n      :data-shape=\"shape\"\n      :data-orientation=\"orientation\"\n      :data-value-position=\"valuePosition\"\n      :data-indeterminate=\"indeterminate ? '' : undefined\"\n      :aria-valuenow=\"indeterminate ? undefined : clamped\"\n      aria-valuemin=\"0\"\n      :aria-valuemax=\"normalizedMax\"\n      :style=\"{ '--fill-fraction': String(fraction) }\"\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=\"normalizedMax\" :percent=\"percent\">\n            {{ m.progress.percent(roundedPercent) }}\n          </slot>\n        </span>\n        <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n          <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n            {{ m.progress.percent(roundedPercent) }}\n          </slot>\n        </span>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The root holds the label and the bar, and declares what the bar reads, so a consumer's style\n   * on it (outside our layers) overrides the thickness and the colours. The bar takes the whole\n   * length available: sizing it is the consumer's business, through the parent or a width of\n   * their own on the root.\n   */\n  .v-progress-linear-field {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    /* Fill, track and the text over the fill are the tone's solid, soft and on-solid\n       colours, read from the shared table (`.v-tone`, set in the template). */\n    --progress-fill: var(--tone-bg-solid);\n    --progress-track: var(--tone-bg-soft);\n    --progress-text-fallback: var(--tone-text-solid);\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-progress-linear-label {\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\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  /* The element IS the track. */\n  .v-progress-linear {\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 again on\n     * every frame. Scaling it would be cheaper, but a scale is physical: it would have to be\n     * undone for the vertical orientation and again for a right-to-left page, where a logical\n     * length simply works.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  /*\n   * The two copies are COMPLEMENTARY and never superimposed: this one is cut OUT of the filled\n   * part, the other cut TO it, so every letter is painted exactly once. Removing either clip\n   * raises no error and stays invisible for as long as both copies resolve to the same colour,\n   * which happens wherever the adaptive colour function is unsupported.\n   */\n  .v-progress-linear-text {\n    /*\n     * The two insets of the cut: one on the edge the fill grows FROM, one on the edge it grows\n     * towards. They are named after those roles rather than after physical sides, so the three\n     * geometry rules further down; horizontal, right-to-left, vertical; all read the same pair.\n     */\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    /*\n     * The large negative inset on the two sides that do not carry the cut is what stops text\n     * taller or wider than the bar from being cropped by its own clip.\n     */\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    /*\n     * The per-tone fallback colour. The adaptive one cannot simply be written as a second\n     * declaration after it: because that declaration contains a var(), a browser with no\n     * support does not reject it at parse time; it would win the cascade and only then turn\n     * invalid, which resets the colour to inherited and leaves the fallback never applied.\n     */\n    color: var(--progress-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  /*\n   * In a right-to-left page the fill grows from the right, so the two insets change physical\n   * sides; the variables themselves keep their meaning.\n   */\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  /*\n   * Putting zero at the bottom is not done by reversing the direction, which would also apply\n   * to the text of the two copies: bidirectional reordering would then display \"50 %\" as \"%\n   * 50\". The fill is anchored to the far end of the axis instead.\n   */\n  /*\n   * Upright, the root carries the length, so a consumer's height on it sets the bar's: the bar\n   * takes whatever the label leaves, its own inline size being the physical height.\n   */\n  .v-progress-linear-field[data-orientation='vertical'] {\n    align-items: flex-start;\n    block-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] {\n    flex: 1 1 0;\n    writing-mode: vertical-lr;\n    inline-size: auto;\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  /*\n   * A right-to-left page reverses the inline axis of a vertical writing mode too: `vertical-lr`\n   * then runs from the bottom up, so the far end anchored above is the TOP. The fill goes back\n   * to the start of the axis, which is now the bottom.\n   */\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-fill {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n  }\n\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  /*\n   * The second selector is what neutralizes it, and it is written that way on purpose: it is\n   * one step MORE specific than that rule, where the first selector alone would merely tie with\n   * it and win by source order; a far more fragile arrangement.\n   */\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  /*\n   * At each extreme it is exactly flush with the edge without ever pulling away from it, which\n   * makes the loop invisible and keeps the track from ever looking empty; no second bar is\n   * needed. The easing carries the whole impression: a gradual entry, a quick crossing, a\n   * damped exit.\n   */\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    /*\n     * The anchoring is put back at the start of the axis, vertical case included; where a\n     * measurable progress anchors at the far end instead.\n     */\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  /*\n   * The same keyframes are simply read backwards, which changes nothing else BECAUSE the easing\n   * curve is symmetric; an asymmetric one would need a second set of keyframes. A horizontal\n   * right-to-left page needs nothing: the logical inset already follows the reading direction.\n   */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  /* On a right-to-left page the vertical axis already runs upwards (see the trap above),\n     so the keyframes are read forwards again. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate]:dir(rtl)\n    .v-progress-linear-fill {\n    animation-direction: normal;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n\n  /* `forced-color-adjust` inherits, so both copies of the text are given their colour here too. */\n  @media (forced-colors: active) {\n    .v-progress-linear {\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-progress-linear-fill {\n      background: Highlight;\n    }\n\n    .v-progress-linear-text {\n      color: CanvasText;\n    }\n\n    .v-progress-linear-text[data-on-fill] {\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA,IAAM,IAAQ,GAuBR,IAAI,EAAY,GAEhB,EACJ,KAAK,GACL,YACA,aACA,YACA,sBACE,QACI,EAAM,aACN,EAAM,GACd,GAKM,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAK/D,IAAU,EAAM,GAChB,IAAY,QAAoB,EAAM,QAAQ,KAAA,IAAY,EAAE,MAAM,SAAS,KAAM,GACjF,IAAa,QACjB,EAAM,SAAS,EAAM,iBAAiB,QAAQ,EAAM,sBAAsB,OACtE,IACA,KAAA,CACN;yBAIE,EAkDM,OAAA;GAjDJ,OAAK,EAAA,CAAC,kCACE,EAAA,CAAA,CAAS,CAAA;GAChB,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,oBAAkB,EAAA;GAClB,OAAK,EAAA,CAAA;IAAA,kBAAuB,EAAA;IAAK,wBAA0B,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;GAAA,GAAK,EAAA,CAAA,CAAS,CAAA;MAG9E,EAAA,SAAA,EAAA,GADR,EAMC,QAAA;;GAJE,IAAI,EAAA,CAAA;GACL,OAAK,EAAA,CAAC,2BAAyB,EAAA,qBACA,EAAA,UAAS,CAAA,CAAA;OACpC,EAAA,KAAK,GAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEX,EAkCM,OAlCN,EAkCM;GAjCJ,OAAM;GACN,MAAK;GACJ,mBAAiB,EAAA;GACjB,cAAY,EAAA,CAAA;KACL,EAAA,CAAA,GAAc;GACrB,cAAY,EAAA;GACZ,oBAAkB,EAAA;GAClB,uBAAqB,EAAA;GACrB,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA,CAAA;GACf,OAAK,EAAA,mBAAuB,OAAO,EAAA,CAAA,CAAQ,EAAA;gBAE5C,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAAA,CAOnB,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAvD,EAWW,GAAA,EAAA,KAAA,EAAA,GAAA,CAVT,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGxC,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA,CAAA;GAAgB,SAAS,EAAA,CAAA;WAE/C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,EAAA,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VRadio/VRadio.d.ts

@@ -14,6 +14,12 @@ interface RadioProps {
      * technology, so it is read out after the label rather than as part of it.
      */
     hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
     /** Which side of the dot the label sits on. */
     labelPosition?: RadioLabelPosition;
     /**
@@ -45,9 +51,7 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
-    /** Moves the focus to the real radio button. */
     focus: (options?: FocusOptions) => void | undefined;
-    /** The real `<input type="radio">`, for what `focus` does not cover. */
     el: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: ItemValue) => any;
@@ -55,11 +59,12 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: ItemValue) => any) | undefined;
 }>, {
     label: string;
+    error: string;
     disabled: boolean;
     invalid: boolean;
     hint: string;
-    readonly: boolean;
     labelPosition: RadioLabelPosition;
+    readonly: boolean;
     spread: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/VRadio/VRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"VRadio.js","names":[],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The browser's job, but it only groups inputs that share a `name`; so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @core\n// The native `readonly` attribute does nothing on a radio button. Cancelling the click is what\n// refuses the selection: the browser puts the group's previous selection back and fires no\n// `change`.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real radio button.\ndefineExpose({\n  /** Moves the focus to the real radio button. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"radio\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-radio v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-radio-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked, :user-invalid, [aria-invalid='true'])\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :user-invalid, [aria-invalid='true']):checked\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (forced-colors: active) {\n    /*\n     * The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     * cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and a\n     * hover left winning would then paint its real grey over the system colour.\n     */\n    .v-radio-input.v-radio-input.v-radio-input.v-radio-input.v-radio-input:checked:not(:disabled)\n      + .v-radio-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VRadio.js","names":[],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The browser's job, but it only groups inputs that share a `name`; so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\ndefineExpose(exposed)\n</script>\n\n<template>\n  <span\n    class=\"v-radio v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        :aria-invalid=\"invalid || !!error || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked, :user-invalid, [aria-invalid='true'])\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :user-invalid, [aria-invalid='true']):checked\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (forced-colors: active) {\n    /*\n     * The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     * cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and a\n     * hover left winning would then paint its real grey over the system colour.\n     */\n    .v-radio-input.v-radio-input.v-radio-input.v-radio-input.v-radio-input:checked:not(:disabled)\n      + .v-radio-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VRadio/VRadio.vue_vue_type_script_setup_true_lang.js

@@ -1,26 +1,28 @@
-import { useRootAttrs as e } from "../../composables/useRootAttrs.js";
-import { useFieldIds as t } from "../../composables/useFieldIds.js";
-import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, vModelRadio as _, withDirectives as v } from "vue";
+import e from "../VField/VFieldAnnouncer.js";
+import t from "../VField/VFieldMessage.js";
+import { useChoice as n } from "../../composables/useChoice.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, useModel as _, vModelRadio as v, withDirectives as y } from "vue";
 //#region src/components/VRadio/VRadio.vue?vue&type=script&setup=true&lang.ts
-var y = [
+var b = [
 	"data-label-position",
 	"data-spread",
 	"data-readonly"
-], b = { class: "v-choice-row" }, x = [
+], x = { class: "v-choice-row" }, S = [
 	"aria-invalid",
 	"value",
 	"disabled",
 	"aria-describedby"
-], S = {
+], C = {
 	key: 0,
 	class: "v-radio-label v-choice-label"
-}, C = ["id"], w = /*@__PURE__*/ o({
+}, w = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "VRadio",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ l({
 		value: {},
 		label: { default: void 0 },
 		hint: { default: void 0 },
+		error: { default: void 0 },
 		labelPosition: { default: "end" },
 		spread: {
 			type: Boolean,
@@ -43,44 +45,48 @@ var y = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(o, { expose: s }) {
-		let w = o, { attrs: T, rootClass: E, rootStyle: D, forwardedAttrs: O } = e(), { hintId: k, describedBy: A } = t(T, () => !!w.hint), j = g(o, "modelValue"), M = f(null);
-		function N(e) {
-			w.readonly && e.preventDefault();
-		}
-		return s({
-			focus: (e) => M.value?.focus(e),
-			el: M
-		}), (e, t) => (d(), r("span", {
-			class: l(["v-radio v-choice", h(E)]),
-			style: u(h(D)),
-			"data-label-position": o.labelPosition,
-			"data-spread": o.spread ? "" : void 0,
-			"data-readonly": o.readonly ? "" : void 0
-		}, [i("label", b, [
-			v(i("input", c({
-				ref_key: "inputEl",
-				ref: M,
-				"onUpdate:modelValue": t[0] ||= (e) => j.value = e,
-				type: "radio",
-				class: "v-radio-input v-hidden-input",
-				"aria-invalid": o.invalid || void 0
-			}, h(O), {
-				value: o.value,
-				disabled: o.disabled,
-				"aria-describedby": h(A),
-				onClick: N
-			}), null, 16, x), [[_, j.value]]),
-			t[1] ||= i("span", {
-				class: "v-radio-dot",
-				"aria-hidden": "true"
-			}, null, -1),
-			e.$slots.default || o.label ? (d(), r("span", S, [p(e.$slots, "default", {}, () => [a(m(o.label), 1)])])) : n("", !0)
-		]), o.hint ? (d(), r("span", {
-			key: 0,
-			id: h(k),
-			class: "v-radio-hint v-choice-hint"
-		}, m(o.hint), 9, C)) : n("", !0)], 14, y));
+	setup(c, { expose: l }) {
+		let { rootClass: w, rootStyle: T, forwardedAttrs: E, hintId: D, errorId: O, describedBy: k, inputEl: A, refuseWhenReadonly: j, exposed: M } = n(c), N = _(c, "modelValue");
+		return l(M), (n, l) => (p(), i("span", {
+			class: d(["v-radio v-choice", g(w)]),
+			style: f(g(T)),
+			"data-label-position": c.labelPosition,
+			"data-spread": c.spread ? "" : void 0,
+			"data-readonly": c.readonly ? "" : void 0
+		}, [
+			a("label", x, [
+				y(a("input", u({
+					ref_key: "inputEl",
+					ref: A,
+					"onUpdate:modelValue": l[0] ||= (e) => N.value = e,
+					type: "radio",
+					class: "v-radio-input v-hidden-input",
+					"aria-invalid": c.invalid || !!c.error || void 0
+				}, g(E), {
+					value: c.value,
+					disabled: c.disabled,
+					"aria-describedby": g(k),
+					onClick: l[1] ||= (...e) => g(j) && g(j)(...e)
+				}), null, 16, S), [[v, N.value]]),
+				l[2] ||= a("span", {
+					class: "v-radio-dot",
+					"aria-hidden": "true"
+				}, null, -1),
+				n.$slots.default || c.label ? (p(), i("span", C, [m(n.$slots, "default", {}, () => [o(h(c.label), 1)])])) : r("", !0)
+			]),
+			s(t, {
+				hint: c.hint,
+				error: c.error,
+				"hint-id": g(D),
+				"error-id": g(O)
+			}, null, 8, [
+				"hint",
+				"error",
+				"hint-id",
+				"error-id"
+			]),
+			s(e, { text: c.error }, null, 8, ["text"])
+		], 14, b));
 	}
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"VRadio.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport { ref } from 'vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The browser's job, but it only groups inputs that share a `name`; so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst { hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\n// @core\n// The native `readonly` attribute does nothing on a radio button. Cancelling the click is what\n// refuses the selection: the browser puts the group's previous selection back and fires no\n// `change`.\nfunction refuseWhenReadonly(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\n// The root is a wrapper, so a template ref on the component reaches the layout box and not\n// the control: these two are the way to the real radio button.\ndefineExpose({\n  /** Moves the focus to the real radio button. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The real `<input type=\"radio\">`, for what `focus` does not cover. */\n  el: inputEl,\n})\n</script>\n\n<template>\n  <span\n    class=\"v-radio v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        :aria-invalid=\"invalid || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <span v-if=\"hint\" :id=\"hintId\" class=\"v-radio-hint v-choice-hint\">{{ hint }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked, :user-invalid, [aria-invalid='true'])\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :user-invalid, [aria-invalid='true']):checked\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (forced-colors: active) {\n    /*\n     * The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     * cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and a\n     * hover left winning would then paint its real grey over the system colour.\n     */\n    .v-radio-input.v-radio-input.v-radio-input.v-radio-input.v-radio-input:checked:not(:disabled)\n      + .v-radio-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CA,IAAM,IAAQ,GAeR,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,mBAAgB,EAAY,SAAa,CAAC,CAAC,EAAM,IAAI,GAM/D,IAAQ,EAAsB,GAAA,YAAgB,GAO9C,IAAU,EAA6B,IAAI;EAMjD,SAAS,EAAmB,GAAmB;GAC7C,AAAI,EAAM,YAAU,EAAM,eAAe;EAC3C;SAIA,EAAa;GAEX,QAAQ,MAA2B,EAAQ,OAAO,MAAM,CAAO;GAE/D,IAAI;EACN,CAAC,mBAIC,EA2BO,QAAA;GA1BL,OAAK,EAAA,CAAC,oBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,eAAa,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAEhC,EAiBQ,SAjBR,GAiBQ;KAhBN,EAWE,SAXF,EAWE;aAVI;IAAJ,KAAI;6CACU,QAAA;IACd,MAAK;IACL,OAAM;IACL,gBAAc,EAAA,WAAW,KAAA;MAClB,EAAA,CAAA,GAAc;IACrB,OAAO,EAAA;IACP,UAAU,EAAA;IACV,oBAAkB,EAAA,CAAA;IAClB,SAAO;0BARC,EAAA,KAAK,CAAA,CAAA;YAUhB,EAA+C,QAAA;IAAzC,OAAM;IAAc,eAAY;;GAC1BA,EAAAA,OAAO,WAAW,EAAA,SAAA,EAAA,GAA9B,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAGN,EAAA,QAAA,EAAA,GAAZ,EAAmF,QAAA;;GAAhE,IAAI,EAAA,CAAA;GAAQ,OAAM;OAAgC,EAAA,IAAI,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VRadio.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Retain the native radio for keyboard selection and forms. Its hint stays outside the label so\n * it does not become part of the accessible name.\n */\n\nimport VFieldAnnouncer from '../VField/VFieldAnnouncer.vue'\nimport VFieldMessage from '../VField/VFieldMessage.vue'\n\nimport { useChoice } from '../../composables/useChoice'\nimport type { ItemValue } from '../../types'\n\n/** Which side of the dot the label sits on. */\nexport type RadioLabelPosition = 'start' | 'end'\n\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: ItemValue\n  /** The text beside the dot, which names it. The default slot replaces it. */\n  label?: string\n  /**\n   * A line of help under the label. It is tied to the radio button for assistive\n   * technology, so it is read out after the label rather than as part of it.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: RadioLabelPosition\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows the selection without allowing it to be changed. */\n  readonly?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n  readonly: false,\n})\n\n// @a11y\n// The browser's job, but it only groups inputs that share a `name`; so redirecting the\n// attributes is what makes the arrow keys work at all. The root being a layout box, `name` left\n// on it would reach nothing.\ndefineOptions({ inheritAttrs: false })\nconst {\n  rootClass,\n  rootStyle,\n  forwardedAttrs,\n  hintId,\n  errorId,\n  describedBy,\n  inputEl,\n  refuseWhenReadonly,\n  exposed,\n} = useChoice(props)\n\n/**\n * The value selected in the group, shared by every radio carrying the same `name`. It is\n * empty until one is chosen, and a radio is selected when it matches its own `value`.\n */\nconst model = defineModel<ItemValue>({ default: '' })\n\ndefineSlots<{\n  /** The label, when it needs more than the `label` prop's text. It is clickable. */\n  default?(): unknown\n}>()\n\ndefineExpose(exposed)\n</script>\n\n<template>\n  <span\n    class=\"v-radio v-choice\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-label-position=\"labelPosition\"\n    :data-spread=\"spread ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <label class=\"v-choice-row\">\n      <input\n        ref=\"inputEl\"\n        v-model=\"model\"\n        type=\"radio\"\n        class=\"v-radio-input v-hidden-input\"\n        :aria-invalid=\"invalid || !!error || undefined\"\n        v-bind=\"forwardedAttrs\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"describedBy\"\n        @click=\"refuseWhenReadonly\"\n      />\n      <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n      <span v-if=\"$slots.default || label\" class=\"v-radio-label v-choice-label\">\n        <slot>{{ label }}</slot>\n      </span>\n    </label>\n    <VFieldMessage :hint=\"hint\" :error=\"error\" :hint-id=\"hintId\" :error-id=\"errorId\" />\n    <VFieldAnnouncer :text=\"error\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The dot works exactly like VCheckbox's box, the accent filling it once the input is\n     checked, with the small inner disc drawn as a pseudo-element in currentcolor so it\n     follows whatever colour the state gives the ring's content. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    background: transparent;\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-pill);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  /*\n   * The states below weigh (0,3,0), bar the read-only base at (0,2,0), so their ORDER\n   * arbitrates them: checked, read-only, invalid, then disabled last. The two hovers sit at\n   * (0,7,0) and therefore beat every one of them on specificity, order or no order; which is\n   * why they have to EXCLUDE by hand each state they must not repaint.\n   */\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :checked, :user-invalid, [aria-invalid='true'])\n    + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio:not([data-readonly])\n    .v-choice-row:hover\n    .v-radio-input:not(:disabled, :user-invalid, [aria-invalid='true']):checked\n    + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  /*\n   * The inner disc takes the surface colour, which contrasts with that fill in both themes,\n   * where white would vanish against the light grey of the dark theme. `:where()` keeps both\n   * rules at the weight of the states they sit between.\n   */\n  :where(.v-radio[data-readonly]) .v-radio-input + .v-radio-dot {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  :where(.v-radio[data-readonly]) .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-text-muted);\n    color: var(--vectis-color-surface);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (forced-colors: active) {\n    /*\n     * The class is repeated to (0,8,0) so the row's own hover rules, which reach (0,7,0),\n     * cannot repaint it: `forced-color-adjust: none` takes the forcing off this element, and a\n     * hover left winning would then paint its real grey over the system colour.\n     */\n    .v-radio-input.v-radio-input.v-radio-input.v-radio-input.v-radio-input:checked:not(:disabled)\n      + .v-radio-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,IAAM,EACJ,cACA,cACA,mBACA,WACA,YACA,gBACA,YACA,uBACA,eACE,EAAU,CAAK,GAMb,IAAQ,EAAsB,GAAA,YAAgB;SAOpD,EAAa,CAAO,mBAIlB,EA4BO,QAAA;GA3BL,OAAK,EAAA,CAAC,oBACE,EAAA,CAAA,CAAS,CAAA;GAChB,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,uBAAqB,EAAA;GACrB,eAAa,EAAA,SAAM,KAAQ,KAAA;GAC3B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;GAEhC,EAiBQ,SAjBR,GAiBQ;MAhBN,EAWE,SAXF,EAWE;cAVI;KAAJ,KAAI;8CACU,QAAA;KACd,MAAK;KACL,OAAM;KACL,gBAAc,EAAA,WAAO,CAAA,CAAM,EAAA,SAAS,KAAA;OAC7B,EAAA,CAAA,GAAc;KACrB,OAAO,EAAA;KACP,UAAU,EAAA;KACV,oBAAkB,EAAA,CAAA;KAClB,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;2BARC,EAAA,KAAK,CAAA,CAAA;aAUhB,EAA+C,QAAA;KAAzC,OAAM;KAAc,eAAY;;IAC1BA,EAAAA,OAAO,WAAW,EAAA,SAAA,EAAA,GAA9B,EAEO,QAFP,GAEO,CADL,EAAwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAGlB,EAAmF,GAAA;IAAnE,MAAM,EAAA;IAAO,OAAO,EAAA;IAAQ,WAAS,EAAA,CAAA;IAAS,YAAU,EAAA,CAAA;;;;;;;GACxE,EAAiC,GAAA,EAAf,MAAM,EAAA,MAAK,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA"}

package/dist/components/VRating/VRating.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-rating[data-size=sm]{--vectis-icon-size:var(--vectis-control-size-rating-sm)}.v-rating[data-size=md]{--vectis-icon-size:var(--vectis-control-size-rating-md)}.v-rating[data-size=lg]{--vectis-icon-size:var(--vectis-control-size-rating-lg)}.v-rating-items{border-radius:var(--vectis-radius-interactive);display:inline-flex;position:relative}.v-rating-item{--rating-shown:var(--rating-value);padding:calc(var(--vectis-space-1) / 2);display:inline-flex;position:relative}label.v-rating-item{cursor:pointer}:where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover))>.v-rating-item{--rating-shown:0}:where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover,:has(~.v-rating-item:hover)){--rating-shown:1}.v-rating-icon{border-radius:var(--vectis-radius-xs);display:inline-grid}.v-rating-icon>.v-icon{grid-area:1/1}.v-rating-empty{color:var(--vectis-color-border-strong)}.v-rating-filled{color:var(--tone-bg-solid);clip-path:inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0)}.v-rating-filled:dir(rtl){clip-path:inset(0 0 0 calc((1 - var(--rating-shown)) * 100%))}.v-rating-item .v-hidden-input:focus-visible+.v-rating-icon,.v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible){outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-rating[data-invalid] .v-rating-empty{color:var(--vectis-color-danger)}.v-rating:disabled .v-rating-empty{color:var(--vectis-color-border)}.v-rating:disabled .v-rating-filled{color:var(--vectis-color-text-subtle)}.v-rating:disabled label.v-rating-item{cursor:not-allowed}@media (forced-colors:active){.v-rating-filled{color:highlight}.v-rating:disabled .v-rating-filled{color:graytext}}}

package/dist/components/VRating/VRating.d.ts

@@ -0,0 +1,92 @@
+import { IconSource } from '../VIcon/types.js';
+/** The size of the icons: 20, 24 or 32 pixels. */
+export type RatingSize = 'sm' | 'md' | 'lg';
+/** The colour of the filled icons. */
+export type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral';
+interface RatingProps {
+    /** How many icons, and the highest value. */
+    max?: number;
+    /**
+     * The name of the group, shown as its legend. Without it, the group is named from the design
+     * system dictionary.
+     */
+    label?: string;
+    /** Hides the label visually. It still names the group for assistive technology. */
+    hideLabel?: boolean;
+    /** A line of help under the icons, read along with the group's name. */
+    hint?: string;
+    /**
+     * A message saying what is wrong, shown in place of the hint and read along with the group's
+     * name. It is announced when it appears or changes.
+     */
+    error?: string;
+    /**
+     * Marks the rating as invalid, which colours the icons and tells assistive technology so. It
+     * is for a rule the browser cannot check by itself.
+     */
+    invalid?: boolean;
+    /** Requires a rating before the form is sent. An asterisk follows the label. */
+    required?: boolean;
+    /** The name the value is sent under in a form. */
+    name?: string;
+    /**
+     * Lets the rating go back to none: clicking the current value again clears it, and a "No
+     * rating" choice comes first for the keyboard.
+     */
+    clearable?: boolean;
+    /**
+     * Shows the value without letting it change. The icons become a single image, and a fractional
+     * value fills part of an icon.
+     */
+    readonly?: boolean;
+    /** Makes the rating unusable. */
+    disabled?: boolean;
+    /** The size of the icons. */
+    size?: RatingSize;
+    /** The colour of the filled icons. */
+    tone?: RatingTone;
+    /**
+     * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the
+     * tone. Its contrast with the background is yours to check.
+     */
+    color?: string;
+    /**
+     * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled
+     * one with the icon's filled form.
+     */
+    icon?: IconSource;
+}
+type __VLS_Props = RatingProps;
+type __VLS_ModelProps = {
+    /** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the checked radio, or to the first icon when there is no rating. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The `<fieldset>`, which also receives the consumer's attributes. */
+    el: import('vue').ComputedRef<HTMLFieldSetElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {
+    label: string;
+    error: string;
+    name: string;
+    size: RatingSize;
+    tone: RatingTone;
+    color: string;
+    disabled: boolean;
+    required: boolean;
+    icon: IconSource;
+    invalid: boolean;
+    hint: string;
+    hideLabel: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VRating/VRating.js

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

package/dist/components/VRating/VRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VRating.js","names":[],"sources":["../../../src/components/VRating/VRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A rating chosen among native radios, one per icon, grouped in a `<fieldset>`: the browser\n * provides the arrow keys, form submission and `required`. Read-only, the icons become one image\n * whose name says the value, which may then be fractional.\n */\nimport { computed, ref, useAttrs, useId } from 'vue'\n\nimport VFieldset from '../VFieldset/VFieldset.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { star as starIcon } from '../VIcon/icons/star'\nimport type { IconSource } from '../VIcon/types'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { customColorStyle } from '../../utils/css'\nimport { clamp } from '../../utils/number'\n\n/** The size of the icons: 20, 24 or 32 pixels. */\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\n/** The colour of the filled icons. */\nexport type RatingTone = 'accent' | 'warning' | 'danger' | 'success' | 'neutral'\n\ninterface RatingProps {\n  /** How many icons, and the highest value. */\n  max?: number\n  /**\n   * The name of the group, shown as its legend. Without it, the group is named from the design\n   * system dictionary.\n   */\n  label?: string\n  /** Hides the label visually. It still names the group for assistive technology. */\n  hideLabel?: boolean\n  /** A line of help under the icons, read along with the group's name. */\n  hint?: string\n  /**\n   * A message saying what is wrong, shown in place of the hint and read along with the group's\n   * name. It is announced when it appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the rating as invalid, which colours the icons and tells assistive technology so. It\n   * is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Requires a rating before the form is sent. An asterisk follows the label. */\n  required?: boolean\n  /** The name the value is sent under in a form. */\n  name?: string\n  /**\n   * Lets the rating go back to none: clicking the current value again clears it, and a \"No\n   * rating\" choice comes first for the keyboard.\n   */\n  clearable?: boolean\n  /**\n   * Shows the value without letting it change. The icons become a single image, and a fractional\n   * value fills part of an icon.\n   */\n  readonly?: boolean\n  /** Makes the rating unusable. */\n  disabled?: boolean\n  /** The size of the icons. */\n  size?: RatingSize\n  /** The colour of the filled icons. */\n  tone?: RatingTone\n  /**\n   * A colour of your own for the filled icons (hex, CSS name or `oklch()`), which replaces the\n   * tone. Its contrast with the background is yours to check.\n   */\n  color?: string\n  /**\n   * The icon: an icon name, or an explicit render. An empty one is drawn in outline and a filled\n   * one with the icon's filled form.\n   */\n  icon?: IconSource\n}\n\n// The consumer's `aria-describedby` is merged with the hint and error references, and the\n// merged list is bound after the other attributes, which fallthrough would overwrite.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<RatingProps>(), {\n  max: 5,\n  label: undefined,\n  hideLabel: false,\n  hint: undefined,\n  error: undefined,\n  invalid: false,\n  required: false,\n  name: undefined,\n  clearable: false,\n  readonly: false,\n  disabled: false,\n  size: 'md',\n  tone: 'accent',\n  color: undefined,\n  icon: () => starIcon,\n})\n\n/** The rating, from 1 to `max`, or `null` when there is none. Read-only, it may be fractional. */\nconst model = defineModel<number | null>({ default: null })\n\nconst attrs = useAttrs()\nconst m = useMessages()\nconst locale = useLocale()\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\n\n// Radios group by name, so the group needs one even when the form does not.\nconst uid = useId()\nconst groupName = computed(() => props.name ?? uid)\n\nconst values = computed(() => Array.from({ length: props.max }, (_, index) => index + 1))\n\nconst numberFormat = computed(\n  () => new Intl.NumberFormat(locale.value, { maximumFractionDigits: 1 }),\n)\n\nconst valueText = computed(() =>\n  m.value.rating.value(\n    numberFormat.value.format(clamp(model.value ?? 0, 0, props.max)),\n    numberFormat.value.format(props.max),\n  ),\n)\n\n/** How much of the icon for `value` is filled, from 0 to 1. */\nfunction fill(value: number): number {\n  return clamp((model.value ?? 0) - (value - 1), 0, 1)\n}\n\n// @core\n// A click on the checked radio fires no change; it clears instead. Only a pointer click does:\n// the keyboard reaches \"No rating\" with the arrows, and Space must not undo a choice.\nfunction onClick(value: number, event: MouseEvent) {\n  if (props.clearable && model.value === value && event.detail > 0) model.value = null\n}\n\nconst fieldset = ref<InstanceType<typeof VFieldset> | null>(null)\nconst rootEl = computed(() => fieldset.value?.el ?? null)\n\ndefineExpose({\n  /** Moves the focus to the checked radio, or to the first icon when there is no rating. */\n  focus: (options?: FocusOptions) =>\n    (\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input:checked') ??\n      rootEl.value?.querySelector<HTMLInputElement>('.v-rating-item input')\n    )?.focus(options),\n  /** The `<fieldset>`, which also receives the consumer's attributes. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <VFieldset\n    ref=\"fieldset\"\n    class=\"v-rating v-tone\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :style=\"customColorStyle(color)\"\n    :data-size=\"size\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :data-invalid=\"isInvalid ? '' : undefined\"\n    :disabled=\"disabled\"\n    :aria-label=\"label ? undefined : m.rating.label\"\n    v-bind=\"attrs\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-legend=\"hideLabel\"\n  >\n    <span v-if=\"readonly\" class=\"v-rating-items\" role=\"img\" :aria-label=\"valueText\">\n      <span\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n      </span>\n    </span>\n\n    <span v-else class=\"v-rating-items\">\n      <label v-if=\"clearable\" class=\"v-rating-clear\">\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          value=\"\"\n          :checked=\"model === null\"\n          @change=\"model = null\"\n        />\n        <span class=\"v-visually-hidden\">{{ m.rating.empty }}</span>\n      </label>\n      <label\n        v-for=\"value in values\"\n        :key=\"value\"\n        class=\"v-rating-item\"\n        :style=\"{ '--rating-value': fill(value) }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"groupName\"\n          :value=\"value\"\n          :checked=\"model === value\"\n          :required=\"required\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @change=\"model = value\"\n          @click=\"onClick(value, $event)\"\n        />\n        <span class=\"v-rating-icon\">\n          <VIcon class=\"v-rating-empty\" v-bind=\"iconProps(icon)\" />\n          <VIcon class=\"v-rating-filled\" v-bind=\"iconProps(icon)\" filled />\n        </span>\n        <span class=\"v-visually-hidden\">{{\n          m.rating.value(numberFormat.format(value), numberFormat.format(max))\n        }}</span>\n      </label>\n    </span>\n    <input v-if=\"readonly && name && model !== null\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </VFieldset>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-rating[data-size='sm'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-sm);\n  }\n\n  .v-rating[data-size='md'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-md);\n  }\n\n  .v-rating[data-size='lg'] {\n    --vectis-icon-size: var(--vectis-control-size-rating-lg);\n  }\n\n  /* Positioned: it holds the hidden \"No rating\" radio, which has no box of its own. */\n  .v-rating-items {\n    position: relative;\n    display: inline-flex;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* The padding widens the target around the icon: 24px at the smallest size. */\n  .v-rating-item {\n    --rating-shown: var(--rating-value);\n\n    position: relative;\n    display: inline-flex;\n    padding: calc(var(--vectis-space-1) / 2);\n  }\n\n  label.v-rating-item {\n    cursor: pointer;\n  }\n\n  /*\n   * Hovering previews the rating: the hovered icon and those before it fill, the others empty.\n   * The value is read from `--rating-value`, written inline, into `--rating-shown`, which these\n   * rules can override where the inline style could not be.\n   */\n  /* The emptying rule weighs (0,1,0) and the filling one (0,3,1), which wins where both match. */\n  :where(.v-rating:not(:disabled) .v-rating-items:has(label.v-rating-item:hover)) > .v-rating-item {\n    --rating-shown: 0;\n  }\n\n  :where(.v-rating:not(:disabled)) label.v-rating-item:is(:hover, :has(~ .v-rating-item:hover)) {\n    --rating-shown: 1;\n  }\n\n  .v-rating-icon {\n    display: inline-grid;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-rating-icon > .v-icon {\n    grid-area: 1 / 1;\n  }\n\n  .v-rating-empty {\n    color: var(--vectis-color-border-strong);\n  }\n\n  /* The filled icon is clipped from the end, so a fraction fills the start of the icon. */\n  .v-rating-filled {\n    color: var(--tone-bg-solid);\n    clip-path: inset(0 calc((1 - var(--rating-shown)) * 100%) 0 0);\n  }\n\n  .v-rating-filled:dir(rtl) {\n    clip-path: inset(0 0 0 calc((1 - var(--rating-shown)) * 100%));\n  }\n\n  .v-rating-item .v-hidden-input:focus-visible + .v-rating-icon {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* \"No rating\" has no icon of its own: its focus rings the whole row. */\n  .v-rating-items:has(.v-rating-clear .v-hidden-input:focus-visible) {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-rating[data-invalid] .v-rating-empty {\n    color: var(--vectis-color-danger);\n  }\n\n  .v-rating:disabled .v-rating-empty {\n    color: var(--vectis-color-border);\n  }\n\n  .v-rating:disabled .v-rating-filled {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-rating:disabled label.v-rating-item {\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-rating-filled {\n      color: Highlight;\n    }\n\n    .v-rating:disabled .v-rating-filled {\n      color: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}