vectis-ui 0.16.0 → 0.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"number.js","names":["numberSeparators","parts","locale","part","MINUS","PLAIN","parseNumber","trimmed","text","plain","separators","decimalsOf","value","exponent","point","roundTo","decimals","scale","factor","clamp","max","min","stepValue","step","base","position","steps"],"sources":["../../../src/components/VNumberInput/number.ts"],"sourcesContent":["// @core\n/**\n * The arithmetic and the locale handling of VNumberInput, kept free of Vue: reading what was\n * typed, writing a value back for editing, and stepping on a grid without floating-point drift.\n */\n\n/** The two separators a locale writes numbers with: \"1 234,5\" in French, \"1,234.5\" in English. */\nexport interface NumberSeparators {\n  group: string\n  decimal: string\n}\n\nexport function numberSeparators(locale: string): NumberSeparators {\n  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6)\n  return {\n    group: parts.find((part) => part.type === 'group')?.value ?? '',\n    decimal: parts.find((part) => part.type === 'decimal')?.value ?? '.',\n  }\n}\n\n/** The minus signs a keyboard or a paste can bring, besides the hyphen. */\nconst MINUS = /[−‒–﹣－]/g\n\n/** What a number may look like once separators and symbols are gone: \"-12\", \"3.\", \".5\". */\nconst PLAIN = /^-?(\\d+\\.?\\d*|\\.\\d+)$/\n\n/**\n * Reads a typed number: `null` for an empty field, `NaN` for text that is not a number.\n *\n * Group separators and any space are dropped, the locale's decimal separator becomes a point,\n * and a point is also accepted as the decimal separator where the locale does not group with\n * it. Currency, unit and percent symbols around the number are ignored, so a formatted value\n * pasted back in reads as the number it shows.\n */\nexport function parseNumber(text: string, separators: NumberSeparators): number | null {\n  const trimmed = text.trim()\n  if (!trimmed) return null\n  let plain = trimmed.replace(MINUS, '-')\n  if (separators.group) plain = plain.split(separators.group).join('')\n  plain = plain.replace(/\\s/g, '')\n  if (separators.decimal !== '.') plain = plain.split(separators.decimal).join('.')\n  // Symbols are only stripped at either end, the minus kept before a leading one (\"-$5.00\"): a\n  // letter between digits is a typo, and \"1o0\" read as 10 would be committed silently.\n  plain = plain.replace(/^(-?)[^\\d.-]+/, '$1').replace(/[^\\d.]+$/, '')\n  return PLAIN.test(plain) ? Number(plain) : Number.NaN\n}\n\n/** The number of decimals a value is written with: 0.25 has two, 1e-7 has seven. */\nexport function decimalsOf(value: number): number {\n  const text = String(value)\n  const exponent = text.indexOf('e-')\n  if (exponent >= 0)\n    return Number(text.slice(exponent + 2)) + decimalsOf(Number(text.slice(0, exponent)))\n  const point = text.indexOf('.')\n  return point < 0 ? 0 : text.length - point - 1\n}\n\n/** Rounds to a number of decimals, which is what removes the drift of 0.1 + 0.2. */\nfunction roundTo(value: number, decimals: number): number {\n  return Number(value.toFixed(Math.min(decimals, 100)))\n}\n\n/** Multiplies by a power of ten without picking up drift: 0.07 × 100 is 7, not 7.000000000000001. */\nexport function scale(value: number, factor: number): number {\n  return Number((value * factor).toPrecision(15))\n}\n\nexport function clamp(value: number, min: number | undefined, max: number | undefined): number {\n  if (max !== undefined && value > max) value = max\n  if (min !== undefined && value < min) value = min\n  return value\n}\n\n/**\n * Moves a value by a number of steps on the grid that starts at `base`. A value off the grid\n * lands on the next grid line in the direction of travel first, as a native number input does:\n * up from 1.5 by a step of 1 gives 2, not 2.5.\n */\nexport function stepValue(value: number, steps: number, step: number, base: number): number {\n  const decimals = Math.max(decimalsOf(step), decimalsOf(base))\n  const position = roundTo((value - base) / step, 10)\n  const onGrid = Number.isInteger(position)\n  const from = onGrid ? position : steps > 0 ? Math.floor(position) : Math.ceil(position)\n  return roundTo(base + (from + steps) * step, decimals)\n}\n"],"mappings":";AAYA,SAAgBA,EAAiB,GAAkC;CACjE,IAAMC,IAAQ,IAAI,KAAK,aAAaC,CAAM,CAAC,CAAC,cAAc,OAAO;CACjE,OAAO;EACL,OAAOD,EAAM,MAAM,MAASE,EAAK,SAAS,OAAO,CAAC,EAAE,SAAS;EAC7D,SAASF,EAAM,MAAM,MAASE,EAAK,SAAS,SAAS,CAAC,EAAE,SAAS;CACnE;AACF;AAGA,IAAMC,IAAQ,YAGRC,IAAQ;AAUd,SAAgBC,EAAY,GAAc,GAA6C;CACrF,IAAMC,IAAUC,EAAK,KAAK;CAC1B,IAAI,CAACD,GAAS,OAAO;CACrB,IAAIE,IAAQF,EAAQ,QAAQH,GAAO,GAAG;CAOtC,OANIM,EAAW,UAAO,IAAQD,EAAM,MAAMC,EAAW,KAAK,CAAC,CAAC,KAAK,EAAE,IACnE,IAAQD,EAAM,QAAQ,OAAO,EAAE,GAC3BC,EAAW,YAAY,QAAK,IAAQD,EAAM,MAAMC,EAAW,OAAO,CAAC,CAAC,KAAK,GAAG,IAGhF,IAAQD,EAAM,QAAQ,iBAAiB,IAAI,CAAC,CAAC,QAAQ,YAAY,EAAE,GAC5DJ,EAAM,KAAKI,CAAK,IAAI,OAAOA,CAAK,IAAI;AAC7C;AAGA,SAAgBE,EAAW,GAAuB;CAChD,IAAMH,IAAO,OAAOI,CAAK,GACnBC,IAAWL,EAAK,QAAQ,IAAI;CAClC,IAAIK,KAAY,GACd,OAAO,OAAOL,EAAK,MAAMK,IAAW,CAAC,CAAC,IAAIF,EAAW,OAAOH,EAAK,MAAM,GAAGK,CAAQ,CAAC,CAAC;CACtF,IAAMC,IAAQN,EAAK,QAAQ,GAAG;CAC9B,OAAOM,IAAQ,IAAI,IAAIN,EAAK,SAASM,IAAQ;AAC/C;AAGA,SAASC,EAAQ,GAAe,GAA0B;CACxD,OAAO,OAAOH,EAAM,QAAQ,KAAK,IAAII,GAAU,GAAG,CAAC,CAAC;AACtD;AAGA,SAAgBC,EAAM,GAAe,GAAwB;CAC3D,OAAO,QAAQL,IAAQM,EAAA,CAAQ,YAAY,EAAE,CAAC;AAChD;AAEA,SAAgBC,EAAM,GAAe,GAAyB,GAAiC;CAG7F,OAFIC,MAAQ,KAAA,KAAaR,IAAQQ,MAAK,IAAQA,IAC1CC,MAAQ,KAAA,KAAaT,IAAQS,MAAK,IAAQA,IACvCT;AACT;AAOA,SAAgBU,EAAU,GAAe,GAAe,GAAc,GAAsB;CAC1F,IAAMN,IAAW,KAAK,IAAIL,EAAWY,CAAI,GAAGZ,EAAWa,CAAI,CAAC,GACtDC,IAAWV,GAASH,IAAQY,KAAQD,GAAM,EAAE;CAGlD,OAAOR,EAAQS,MAFA,OAAO,UAAUC,CACnB,IAASA,IAAWC,IAAQ,IAAI,KAAK,MAAMD,CAAQ,IAAI,KAAK,KAAKA,CAAQ,KACxDC,KAASH,GAAMP,CAAQ;AACvD"}
+{"version":3,"file":"number.js","names":["numberSeparators","parts","locale","part","MINUS","PLAIN","parseNumber","trimmed","text","plain","separators","decimalsOf","value","exponent","point","roundTo","decimals","scale","factor","clamp","max","min","stepValue","step","base","position","steps"],"sources":["../../../src/components/VNumberInput/number.ts"],"sourcesContent":["// @core\n/**\n * The arithmetic and the locale handling of VNumberInput, kept free of Vue: reading what was\n * typed, writing a value back for editing, and stepping on a grid without floating-point drift.\n */\n\n/** The two separators a locale writes numbers with: \"1 234,5\" in French, \"1,234.5\" in English. */\nexport interface NumberSeparators {\n  group: string\n  decimal: string\n}\n\nexport function numberSeparators(locale: string): NumberSeparators {\n  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6)\n  return {\n    group: parts.find((part) => part.type === 'group')?.value ?? '',\n    decimal: parts.find((part) => part.type === 'decimal')?.value ?? '.',\n  }\n}\n\n/** The minus signs a keyboard or a paste can bring, besides the hyphen. */\nconst MINUS = /[−‒–﹣－]/g\n\n/** What a number may look like once separators and symbols are gone: \"-12\", \"3.\", \".5\". */\nconst PLAIN = /^-?(\\d+(?:\\.\\d*)?|\\.\\d+)$/\n\n/**\n * Reads a typed number: `null` for an empty field, `NaN` for text that is not a number.\n *\n * Group separators and any space are dropped, the locale's decimal separator becomes a point,\n * and a point is also accepted as the decimal separator where the locale does not group with\n * it. Currency, unit and percent symbols around the number are ignored, so a formatted value\n * pasted back in reads as the number it shows.\n */\nexport function parseNumber(text: string, separators: NumberSeparators): number | null {\n  const trimmed = text.trim()\n  if (!trimmed) return null\n  let plain = trimmed.replace(MINUS, '-')\n  if (separators.group) plain = plain.split(separators.group).join('')\n  plain = plain.replace(/\\s/g, '')\n  if (separators.decimal !== '.') plain = plain.split(separators.decimal).join('.')\n  // Symbols are only stripped at either end, the minus kept before a leading one (\"-$5.00\"): a\n  // letter between digits is a typo, and \"1o0\" read as 10 would be committed silently. The\n  // lookbehind starts the trailing run only once, where a scan from each of its letters would\n  // take quadratic time.\n  plain = plain.replace(/^(-?)[^\\d.-]+/, '$1').replace(/(?<=^|[\\d.])[^\\d.]+$/, '')\n  return PLAIN.test(plain) ? Number(plain) : Number.NaN\n}\n\n/** The number of decimals a value is written with: 0.25 has two, 1e-7 has seven. */\nexport function decimalsOf(value: number): number {\n  const text = String(value)\n  const exponent = text.indexOf('e-')\n  if (exponent >= 0)\n    return Number(text.slice(exponent + 2)) + decimalsOf(Number(text.slice(0, exponent)))\n  const point = text.indexOf('.')\n  return point < 0 ? 0 : text.length - point - 1\n}\n\n/** Rounds to a number of decimals, which is what removes the drift of 0.1 + 0.2. */\nfunction roundTo(value: number, decimals: number): number {\n  return Number(value.toFixed(Math.min(decimals, 100)))\n}\n\n/** Multiplies by a power of ten without picking up drift: 0.07 × 100 is 7, not 7.000000000000001. */\nexport function scale(value: number, factor: number): number {\n  return Number((value * factor).toPrecision(15))\n}\n\nexport function clamp(value: number, min: number | undefined, max: number | undefined): number {\n  if (max !== undefined && value > max) value = max\n  if (min !== undefined && value < min) value = min\n  return value\n}\n\n/**\n * Moves a value by a number of steps on the grid that starts at `base`. A value off the grid\n * lands on the next grid line in the direction of travel first, as a native number input does:\n * up from 1.5 by a step of 1 gives 2, not 2.5.\n */\nexport function stepValue(value: number, steps: number, step: number, base: number): number {\n  const decimals = Math.max(decimalsOf(step), decimalsOf(base))\n  const position = roundTo((value - base) / step, 10)\n  const onGrid = Number.isInteger(position)\n  const from = onGrid ? position : steps > 0 ? Math.floor(position) : Math.ceil(position)\n  return roundTo(base + (from + steps) * step, decimals)\n}\n"],"mappings":";AAYA,SAAgBA,EAAiB,GAAkC;CACjE,IAAMC,IAAQ,IAAI,KAAK,aAAaC,CAAM,CAAC,CAAC,cAAc,OAAO;CACjE,OAAO;EACL,OAAOD,EAAM,MAAM,MAASE,EAAK,SAAS,OAAO,CAAC,EAAE,SAAS;EAC7D,SAASF,EAAM,MAAM,MAASE,EAAK,SAAS,SAAS,CAAC,EAAE,SAAS;CACnE;AACF;AAGA,IAAMC,IAAQ,YAGRC,IAAQ;AAUd,SAAgBC,EAAY,GAAc,GAA6C;CACrF,IAAMC,IAAUC,EAAK,KAAK;CAC1B,IAAI,CAACD,GAAS,OAAO;CACrB,IAAIE,IAAQF,EAAQ,QAAQH,GAAO,GAAG;CAStC,OARIM,EAAW,UAAO,IAAQD,EAAM,MAAMC,EAAW,KAAK,CAAC,CAAC,KAAK,EAAE,IACnE,IAAQD,EAAM,QAAQ,OAAO,EAAE,GAC3BC,EAAW,YAAY,QAAK,IAAQD,EAAM,MAAMC,EAAW,OAAO,CAAC,CAAC,KAAK,GAAG,IAKhF,IAAQD,EAAM,QAAQ,iBAAiB,IAAI,CAAC,CAAC,QAAQ,wBAAwB,EAAE,GACxEJ,EAAM,KAAKI,CAAK,IAAI,OAAOA,CAAK,IAAI;AAC7C;AAGA,SAAgBE,EAAW,GAAuB;CAChD,IAAMH,IAAO,OAAOI,CAAK,GACnBC,IAAWL,EAAK,QAAQ,IAAI;CAClC,IAAIK,KAAY,GACd,OAAO,OAAOL,EAAK,MAAMK,IAAW,CAAC,CAAC,IAAIF,EAAW,OAAOH,EAAK,MAAM,GAAGK,CAAQ,CAAC,CAAC;CACtF,IAAMC,IAAQN,EAAK,QAAQ,GAAG;CAC9B,OAAOM,IAAQ,IAAI,IAAIN,EAAK,SAASM,IAAQ;AAC/C;AAGA,SAASC,EAAQ,GAAe,GAA0B;CACxD,OAAO,OAAOH,EAAM,QAAQ,KAAK,IAAII,GAAU,GAAG,CAAC,CAAC;AACtD;AAGA,SAAgBC,EAAM,GAAe,GAAwB;CAC3D,OAAO,QAAQL,IAAQM,EAAA,CAAQ,YAAY,EAAE,CAAC;AAChD;AAEA,SAAgBC,EAAM,GAAe,GAAyB,GAAiC;CAG7F,OAFIC,MAAQ,KAAA,KAAaR,IAAQQ,MAAK,IAAQA,IAC1CC,MAAQ,KAAA,KAAaT,IAAQS,MAAK,IAAQA,IACvCT;AACT;AAOA,SAAgBU,EAAU,GAAe,GAAe,GAAc,GAAsB;CAC1F,IAAMN,IAAW,KAAK,IAAIL,EAAWY,CAAI,GAAGZ,EAAWa,CAAI,CAAC,GACtDC,IAAWV,GAASH,IAAQY,KAAQD,GAAM,EAAE;CAGlD,OAAOR,EAAQS,MAFA,OAAO,UAAUC,CACnB,IAASA,IAAWC,IAAQ,IAAI,KAAK,MAAMD,CAAQ,IAAI,KAAK,KAAKA,CAAQ,KACxDC,KAASH,GAAMP,CAAQ;AACvD"}

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

@@ -59,8 +59,8 @@ declare const __VLS_base: import('vue').DefineComponent<ProgressCircularProps, {
     shape: ProgressCircularShape;
     max: number;
     indeterminate: boolean;
-    thickness: number | string;
     showValue: boolean;
+    thickness: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/VProgressLinear/VProgressLinear.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-progress-linear-field{--progress-thickness:var(--vectis-control-size-progress-linear-thickness);--progress-fill:var(--tone-bg-solid);--progress-track:var(--tone-bg-soft);--progress-text-fallback:var(--tone-text-solid);gap:var(--vectis-space-1);flex-direction:column;display:flex}.v-progress-linear-label{color:var(--vectis-color-text);font-family:var(--vectis-text-family);font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading)}.v-progress-linear{inline-size:100%;block-size:var(--progress-thickness);border-radius:var(--vectis-radius-pill);background:var(--progress-track);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);display:block;position:relative}.v-progress-linear[data-shape=square]{border-radius:0}.v-progress-linear-fill{inline-size:calc(100% * var(--fill-fraction));border-radius:inherit;background:var(--progress-fill);transition:inline-size var(--vectis-duration-base) var(--vectis-ease-default);position:absolute;inset-block:0;inset-inline-start:0}.v-progress-linear-text{--progress-clip-start:calc(100% * var(--fill-fraction));--progress-clip-end:-100vmax;padding-inline:var(--vectis-space-2);color:var(--vectis-color-text);clip-path:inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));transition:clip-path var(--vectis-duration-base) var(--vectis-ease-default);writing-mode:horizontal-tb;white-space:nowrap;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.v-progress-linear[data-value-position=start] .v-progress-linear-text{justify-content:start}.v-progress-linear[data-value-position=end] .v-progress-linear-text{justify-content:end}.v-progress-linear-text[data-on-fill]{--progress-clip-start:-100vmax;--progress-clip-end:calc(100% * (1 - var(--fill-fraction)));color:var(--progress-text-fallback)}@supports (color:contrast-color(red)){.v-progress-linear-text[data-on-fill]{color:contrast-color(var(--progress-fill))}}.v-progress-linear:dir(rtl) .v-progress-linear-text{clip-path:inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end))}.v-progress-linear-field[data-orientation=vertical]{block-size:var(--vectis-control-size-progress-linear-length);align-items:flex-start}.v-progress-linear[data-orientation=vertical]{writing-mode:vertical-lr;flex:1 1 0;inline-size:auto}.v-progress-linear[data-orientation=vertical] .v-progress-linear-fill{inset-inline:auto 0}.v-progress-linear[data-orientation=vertical]:dir(rtl) .v-progress-linear-fill{inset-inline:0 auto}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text{padding-inline:0;padding-block:var(--vectis-space-2);flex-direction:column-reverse}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text,.v-progress-linear[data-orientation=vertical]:dir(rtl) .v-progress-linear-text{clip-path:inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax)}.v-progress-linear[data-indeterminate]{overflow:hidden}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{--progress-bar:40%;inline-size:var(--progress-bar);animation:v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out) infinite;transition:none;inset-inline:0 auto}@keyframes v-progress-linear-indeterminate{0%{inset-inline-start:calc(-1 * var(--progress-bar))}to{inset-inline-start:100%}}.v-progress-linear[data-orientation=vertical][data-indeterminate] .v-progress-linear-fill{animation-direction:reverse}.v-progress-linear[data-orientation=vertical][data-indeterminate]:dir(rtl) .v-progress-linear-fill{animation-direction:normal}@media (prefers-reduced-motion:reduce){.v-progress-linear-fill,.v-progress-linear-text{transition:none}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{animation-duration:var(--vectis-duration-5000)}}@media (forced-colors:active){.v-progress-linear{forced-color-adjust:none;box-shadow:inset 0 0 0 var(--vectis-control-border-width) CanvasText;background:canvas}.v-progress-linear-fill{background:highlight}.v-progress-linear-text{color:canvastext}.v-progress-linear-text[data-on-fill]{color:highlighttext}}}
+@layer vectis.components{.v-progress-linear-field{--progress-thickness:var(--vectis-control-size-bar-thickness-sm);--progress-fill:var(--tone-bg-solid);--progress-track:var(--tone-bg-soft);--progress-text-fallback:var(--tone-text-solid);gap:var(--vectis-space-1);flex-direction:column;display:flex}.v-progress-linear-field[data-size=xs]{--progress-thickness:var(--vectis-control-size-bar-thickness-xs)}.v-progress-linear-field[data-size=md]{--progress-thickness:var(--vectis-control-size-bar-thickness-md)}.v-progress-linear-field[data-size=lg]{--progress-thickness:var(--vectis-control-size-bar-thickness-lg)}.v-progress-linear-field[data-size=xl]{--progress-thickness:var(--vectis-control-size-bar-thickness-xl)}.v-progress-linear-header{align-items:baseline;column-gap:var(--vectis-space-2);font-family:var(--vectis-text-family);flex-wrap:wrap;display:flex}.v-progress-linear-label{color:var(--vectis-color-text);font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading)}.v-progress-linear-value{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading);font-variant-numeric:tabular-nums;margin-inline-start:auto}.v-progress-linear{inline-size:100%;block-size:var(--progress-thickness);border-radius:var(--vectis-radius-pill);background:var(--progress-track);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);display:block;position:relative}.v-progress-linear[data-shape=square]{border-radius:0}.v-progress-linear-fill{inline-size:calc(100% * var(--fill-fraction));border-radius:inherit;background:var(--progress-fill);transition:inline-size var(--vectis-duration-base) var(--vectis-ease-default);position:absolute;inset-block:0;inset-inline-start:0}.v-progress-linear-text{--progress-clip-start:calc(100% * var(--fill-fraction));--progress-clip-end:-100vmax;padding-inline:var(--vectis-space-2);color:var(--vectis-color-text);clip-path:inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));transition:clip-path var(--vectis-duration-base) var(--vectis-ease-default);writing-mode:horizontal-tb;white-space:nowrap;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.v-progress-linear[data-value-position=start] .v-progress-linear-text{justify-content:start}.v-progress-linear[data-value-position=end] .v-progress-linear-text{justify-content:end}.v-progress-linear-text[data-on-fill]{--progress-clip-start:-100vmax;--progress-clip-end:calc(100% * (1 - var(--fill-fraction)));color:var(--progress-text-fallback)}@supports (color:contrast-color(red)){.v-progress-linear-text[data-on-fill]{color:contrast-color(var(--progress-fill))}}.v-progress-linear:dir(rtl) .v-progress-linear-text{clip-path:inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end))}.v-progress-linear-field[data-orientation=vertical]{block-size:var(--vectis-control-size-bar-length);align-items:flex-start}.v-progress-linear[data-orientation=vertical]{writing-mode:vertical-lr;flex:1 1 0;inline-size:auto}.v-progress-linear[data-orientation=vertical] .v-progress-linear-fill{inset-inline:auto 0}.v-progress-linear[data-orientation=vertical]:dir(rtl) .v-progress-linear-fill{inset-inline:0 auto}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text{padding-inline:0;padding-block:var(--vectis-space-2);flex-direction:column-reverse}.v-progress-linear[data-orientation=vertical] .v-progress-linear-text,.v-progress-linear[data-orientation=vertical]:dir(rtl) .v-progress-linear-text{clip-path:inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax)}.v-progress-linear[data-indeterminate]{overflow:hidden}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{--progress-bar:40%;inline-size:var(--progress-bar);animation:v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out) infinite;transition:none;inset-inline:0 auto}@keyframes v-progress-linear-indeterminate{0%{inset-inline-start:calc(-1 * var(--progress-bar))}to{inset-inline-start:100%}}.v-progress-linear[data-orientation=vertical][data-indeterminate] .v-progress-linear-fill{animation-direction:reverse}.v-progress-linear[data-orientation=vertical][data-indeterminate]:dir(rtl) .v-progress-linear-fill{animation-direction:normal}@media (prefers-reduced-motion:reduce){.v-progress-linear-fill,.v-progress-linear-text{transition:none}.v-progress-linear[data-indeterminate] .v-progress-linear-fill{animation-duration:var(--vectis-duration-5000)}}@media (forced-colors:active){.v-progress-linear{forced-color-adjust:none;box-shadow:inset 0 0 0 var(--vectis-control-border-width) CanvasText;background:canvas}.v-progress-linear-fill{background:highlight}.v-progress-linear-text{color:canvastext}.v-progress-linear-text[data-on-fill]{color:highlighttext}}}

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

@@ -2,8 +2,10 @@
 export type ProgressLinearTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
 /** How the track and the fill end. */
 export type ProgressLinearShape = 'rounded' | 'square';
-/** Where the value sits along the bar. */
-export type ProgressLinearValuePosition = 'start' | 'center' | 'end';
+/** The thickness of the bar: 2, 4, 8, 12 or 20 pixels. */
+export type ProgressLinearSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Where the value is written: after the label, or inside the bar at its start, centre or end. */
+export type ProgressLinearValuePosition = 'header' | 'start' | 'center' | 'end';
 /** Which way the bar fills. */
 export type ProgressLinearOrientation = 'horizontal' | 'vertical';
 /** What the default slot receives. */
@@ -38,33 +40,31 @@ interface ProgressLinearProps {
      * the dark one.
      */
     color?: string;
-    /**
-     * How thick the bar is, always in PIXELS: `12` and `'12'` both give 12px. It is 4px by
-     * default, and showing text inside a bar that thin needs an explicit thickness.
-     */
-    thickness?: number | string;
+    /** The thickness of the bar. Only `xl` is thick enough to hold the value written inside it. */
+    size?: ProgressLinearSize;
     /** Whether the ends of the bar are rounded or square. */
     shape?: ProgressLinearShape;
     /**
-     * Writes the percentage inside the bar. It is ignored while the progress is
-     * unmeasurable, there being no figure to write.
+     * Writes the percentage. It is ignored while the progress is unmeasurable, there being no
+     * figure to write.
      */
     showValue?: boolean;
     /**
-     * Where that text sits along the bar. On a vertical bar the start is the zero end,
-     * hence the bottom.
+     * Where that text is written: at the end of the label's line, or inside the bar. On a vertical
+     * bar the start is the zero end, hence the bottom.
      */
     valuePosition?: ProgressLinearValuePosition;
     /** Turns the bar upright, filling from the bottom up. */
     orientation?: ProgressLinearOrientation;
 }
 type __VLS_Slots = {
-    /** What to write inside the bar instead of the percentage. */
+    /** What to write instead of the percentage. */
     default?(props: ProgressLinearSlotProps): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<ProgressLinearProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProgressLinearProps> & Readonly<{}>, {
     label: string;
     value: number;
+    size: ProgressLinearSize;
     tone: ProgressLinearTone;
     color: string;
     shape: ProgressLinearShape;
@@ -72,7 +72,6 @@ declare const __VLS_base: import('vue').DefineComponent<ProgressLinearProps, {},
     hideLabel: boolean;
     max: number;
     indeterminate: boolean;
-    thickness: number | string;
     showValue: boolean;
     valuePosition: ProgressLinearValuePosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"VProgressLinear.js","names":["_sfc_main","VProgressLinear_vue_vue_type_script_setup_true_lang_default","VProgressLinear_default"],"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":""}
+{"version":3,"file":"VProgressLinear.js","names":["_sfc_main","VProgressLinear_vue_vue_type_script_setup_true_lang_default","VProgressLinear_default"],"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 { useId, useSlots } from 'vue'\n\nimport { useAriaLabel, useLabelledBy } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\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/** The thickness of the bar: 2, 4, 8, 12 or 20 pixels. */\nexport type ProgressLinearSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the value is written: after the label, or inside the bar at its start, centre or end. */\nexport type ProgressLinearValuePosition = 'header' | '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  /** The thickness of the bar. Only `xl` is thick enough to hold the value written inside it. */\n  size?: ProgressLinearSize\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage. It is ignored while the progress is unmeasurable, there being no\n   * figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text is written: at the end of the label's line, or inside the bar. On a vertical\n   * bar the start is the zero end, 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  size: 'sm',\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'header',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /** What to write 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 { 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 = useLabelledBy(labelId, () => props.label)\n\n// Read during render rather than computed: `slots` is not reactive.\nconst slots = useSlots()\nconst showsValue = (inHeader: boolean) =>\n  !props.indeterminate &&\n  (props.showValue || !!slots.default) &&\n  (props.valuePosition === 'header') === inHeader\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    :data-size=\"size\"\n    :style=\"[{ '--custom-color': color }, rootStyle]\"\n  >\n    <div v-if=\"(label && !hideLabel) || showsValue(true)\" class=\"v-progress-linear-header\">\n      <span v-if=\"label && !hideLabel\" :id=\"labelId\" class=\"v-progress-linear-label\">{{\n        label\n      }}</span>\n      <!-- The text inside the bar is presentational under the progressbar role; this copy,\n           outside it, is hidden to match. -->\n      <span v-if=\"showsValue(true)\" class=\"v-progress-linear-value\" aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n    </div>\n    <span v-if=\"label && hideLabel\" :id=\"labelId\" class=\"v-visually-hidden\">{{ label }}</span>\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=\"showsValue(false)\">\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 colours. The bar takes the whole length available:\n   * sizing it is the consumer's business, through the parent or a width of their own on the root.\n   */\n  .v-progress-linear-field {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-sm);\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-field[data-size='xs'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-xs);\n  }\n\n  .v-progress-linear-field[data-size='md'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-md);\n  }\n\n  .v-progress-linear-field[data-size='lg'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-lg);\n  }\n\n  .v-progress-linear-field[data-size='xl'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-xl);\n  }\n\n  .v-progress-linear-header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    column-gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-progress-linear-label {\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* Pushed to the end even without a label before it. */\n  .v-progress-linear-value {\n    margin-inline-start: auto;\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* 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-bar-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":""}

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

@@ -1,15 +1,22 @@
 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 { useAriaLabel as t, useLabelledBy as n } from "../../composables/useAriaLabel.js";
 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";
+import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, useSlots as y } from "vue";
 //#region src/components/VProgressLinear/VProgressLinear.vue?vue&type=script&setup=true&lang.ts
 var b = [
 	"data-tone",
 	"data-custom",
-	"data-orientation"
-], x = ["id"], S = [
+	"data-orientation",
+	"data-size"
+], x = {
+	key: 0,
+	class: "v-progress-linear-header"
+}, S = ["id"], C = {
+	key: 1,
+	class: "v-progress-linear-value",
+	"aria-hidden": "true"
+}, w = ["id"], T = [
 	"aria-labelledby",
 	"aria-label",
 	"data-shape",
@@ -18,11 +25,11 @@ var b = [
 	"data-indeterminate",
 	"aria-valuenow",
 	"aria-valuemax"
-], C = { class: "v-progress-linear-text" }, w = {
+], E = { class: "v-progress-linear-text" }, D = {
 	class: "v-progress-linear-text",
 	"data-on-fill": "",
 	"aria-hidden": "true"
-}, T = /*@__PURE__*/ d({
+}, O = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "VProgressLinear",
 	props: {
@@ -39,56 +46,66 @@ var b = [
 		},
 		tone: { default: "accent" },
 		color: { default: void 0 },
-		thickness: { default: void 0 },
+		size: { default: "sm" },
 		shape: { default: "rounded" },
 		showValue: {
 			type: Boolean,
 			default: !1
 		},
-		valuePosition: { default: "center" },
+		valuePosition: { default: "header" },
 		orientation: { default: "horizontal" }
 	},
-	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-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": 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));
+	setup(u) {
+		let O = u, k = e(), { max: A, clamped: j, fraction: M, percent: N, roundedPercent: P } = i(() => O.value, () => O.max), { rootClass: F, rootStyle: I, forwardedAttrs: L } = r(), R = v(), z = t(() => O.label ? void 0 : k.value.progress.label), B = n(R, () => O.label), V = y(), H = (e) => !O.indeterminate && (O.showValue || !!V.default) && O.valuePosition === "header" === e;
+		return (e, t) => (m(), s("div", {
+			class: f(["v-progress-linear-field v-tone", _(F)]),
+			"data-tone": u.tone,
+			"data-custom": u.color === void 0 ? void 0 : "",
+			"data-orientation": u.orientation,
+			"data-size": u.size,
+			style: p([{ "--custom-color": u.color }, _(I)])
+		}, [
+			u.label && !u.hideLabel || H(!0) ? (m(), s("div", x, [u.label && !u.hideLabel ? (m(), s("span", {
+				key: 0,
+				id: _(R),
+				class: "v-progress-linear-label"
+			}, g(u.label), 9, S)) : o("", !0), H(!0) ? (m(), s("span", C, [h(e.$slots, "default", {
+				value: _(j),
+				max: _(A),
+				percent: _(N)
+			}, () => [l(g(_(k).progress.percent(_(P))), 1)])])) : o("", !0)])) : o("", !0),
+			u.label && u.hideLabel ? (m(), s("span", {
+				key: 1,
+				id: _(R),
+				class: "v-visually-hidden"
+			}, g(u.label), 9, w)) : o("", !0),
+			c("div", d({
+				class: "v-progress-linear",
+				role: "progressbar",
+				"aria-labelledby": _(B),
+				"aria-label": _(z)
+			}, _(L), {
+				"data-shape": u.shape,
+				"data-orientation": u.orientation,
+				"data-value-position": u.valuePosition,
+				"data-indeterminate": u.indeterminate ? "" : void 0,
+				"aria-valuenow": u.indeterminate ? void 0 : _(j),
+				"aria-valuemin": "0",
+				"aria-valuemax": _(A),
+				style: { "--fill-fraction": String(_(M)) }
+			}), [t[0] ||= c("span", { class: "v-progress-linear-fill" }, null, -1), H(!1) ? (m(), s(a, { key: 0 }, [c("span", E, [h(e.$slots, "default", {
+				value: _(j),
+				max: _(A),
+				percent: _(N)
+			}, () => [l(g(_(k).progress.percent(_(P))), 1)])]), c("span", D, [h(e.$slots, "default", {
+				value: _(j),
+				max: _(A),
+				percent: _(N)
+			}, () => [l(g(_(k).progress.percent(_(P))), 1)])])], 64)) : o("", !0)], 16, T)
+		], 14, b));
 	}
 });
 //#endregion
-export { T as default };
+export { O 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","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_toDisplayString","_createCommentVNode","_createElementVNode","_mergeProps","_Fragment","_renderSlot","_createTextVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","VProgressLinear_vue_vue_type_script_setup_true_lang_default","props","__props","m","useMessages","normalizedMax","useProgressValue","useRootAttrs","labelId","useId","ariaLabel","useAriaLabel","labelledBy","computed","attrs","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","px","rootStyle","toDisplayString","createCommentVNode","createElementVNode","mergeProps","forwardedAttrs","clamped","fraction","_cache","_ctx","Fragment","renderSlot","percent","createTextVNode","roundedPercent"],"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,IAAMmB,IAAQC,GAuBRC,IAAIC,EAAY,GAEhB,EACJ,KAAKC,GACL,YACA,aACA,YACA,sBACEC,QACIL,EAAM,aACNA,EAAM,GACd,GAKM,EAAE,UAAO,cAAW,cAAW,sBAAmBM,EAAa,GAK/DC,IAAUC,EAAM,GAChBC,IAAYC,QAAoBV,EAAM,QAAQ,KAAA,IAAYE,EAAE,MAAM,SAAS,KAAM,GACjFS,IAAaC,QACjBZ,EAAM,SAASa,EAAM,iBAAiB,QAAQA,EAAM,sBAAsB,OACtEN,IACA,KAAA,CACN;oBAIEzB,EAAA,GAAAC,EAkDM,OAAA;GAjDJ,OAAKC,EAAA,CAAC,kCACEC,EAAAiC,CAAA,CAAS,CAAA;GAChB,aAAWjB,EAAA;GACX,eAAaA,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,oBAAkBA,EAAA;GAClB,OAAKf,EAAA,CAAA;IAAA,kBAAuBe,EAAA;IAAK,wBAA0BhB,EAAAmC,CAAA,CAAE,CAACnB,EAAA,SAAS;GAAA,GAAKhB,EAAAoC,CAAA,CAAS,CAAA;EAG9E,GAAA,CAAApB,EAAA,SADRnB,EAAA,GAAAC,EAMC,QAAA;;GAJE,IAAIE,EAAAsB,CAAA;GACL,OAAKvB,EAAA,CAAC,2BAAyB,EAAA,qBACAiB,EAAA,UAAS,CAAA,CAAA;EACpC,GAAAd,EAAAc,EAAA,KAAK,GAAA,IAAAN,CAAA,KAAA4B,EAAA,IAAA,EAAA,GAEXlC,EAkCM,OAlCNC,EAkCM;GAjCJ,OAAM;GACN,MAAK;GACJ,mBAAiBqB,EAAA;GACjB,cAAY1B,EAAAwB,CAAA;EACL,GAAAxB,EAAAyC,CAAA,GAAc;GACrB,cAAYzB,EAAA;GACZ,oBAAkBA,EAAA;GAClB,uBAAqBA,EAAA;GACrB,sBAAoBA,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAeA,EAAA,gBAAgB,KAAA,IAAYhB,EAAA0C,CAAA;GAC5C,iBAAc;GACb,iBAAe1C,EAAAmB,CAAA;GACf,OAAK,EAAA,mBAAuB,OAAOnB,EAAA2C,CAAA,CAAQ,EAAA;EAE5C,CAAA,GAAA,CAAA,AAAAC,EAAA,OAAAxC,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAOnB,CAAAY,EAAA,kBAAkBA,EAAA,aAAapB,EAAAA,OAAO,YAAvDC,EAAA,GAAAC,EAWWQ,GAAA,EAAA,KAAA,EAAA,GAAA,CAVTF,EAIO,QAJPQ,GAIO,CAHLL,EAEOsC,EAAA,QAAA,WAAA;GAFA,OAAO7C,EAAA0C,CAAA;GAAU,KAAK1C,EAAAmB,CAAA;GAAgB,SAASnB,EAAAgD,CAAA;EAAtD,SAEO,CADFxC,EAAAN,EAAAF,EAAAiB,CAAA,CAAC,CAAC,SAAS,QAAQjB,EAAAkD,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGxC9C,EAIO,QAJPS,GAIO,CAHLN,EAEOsC,EAAA,QAAA,WAAA;GAFA,OAAO7C,EAAA0C,CAAA;GAAU,KAAK1C,EAAAmB,CAAA;GAAgB,SAASnB,EAAAgD,CAAA;EAAtD,SAEO,CADFxC,EAAAN,EAAAF,EAAAiB,CAAA,CAAC,CAAC,SAAS,QAAQjB,EAAAkD,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAAZ,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA3B,CAAA,CAAA,GAAA,IAAAF,CAAA"}
+{"version":3,"file":"VProgressLinear.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_toDisplayString","_createCommentVNode","_renderSlot","_createTextVNode","_createElementVNode","_mergeProps","_Fragment","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","VProgressLinear_vue_vue_type_script_setup_true_lang_default","props","__props","m","useMessages","normalizedMax","useProgressValue","useRootAttrs","labelId","useId","ariaLabel","useAriaLabel","labelledBy","useLabelledBy","slots","useSlots","showsValue","inHeader","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","toDisplayString","createCommentVNode","renderSlot","_ctx","clamped","percent","createTextVNode","roundedPercent","createElementVNode","mergeProps","forwardedAttrs","fraction","_cache","Fragment"],"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 { useId, useSlots } from 'vue'\n\nimport { useAriaLabel, useLabelledBy } from '../../composables/useAriaLabel'\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useMessages } from '../../i18n/state'\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/** The thickness of the bar: 2, 4, 8, 12 or 20 pixels. */\nexport type ProgressLinearSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the value is written: after the label, or inside the bar at its start, centre or end. */\nexport type ProgressLinearValuePosition = 'header' | '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  /** The thickness of the bar. Only `xl` is thick enough to hold the value written inside it. */\n  size?: ProgressLinearSize\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: ProgressLinearShape\n  /**\n   * Writes the percentage. It is ignored while the progress is unmeasurable, there being no\n   * figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text is written: at the end of the label's line, or inside the bar. On a vertical\n   * bar the start is the zero end, 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  size: 'sm',\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'header',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /** What to write 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 { 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 = useLabelledBy(labelId, () => props.label)\n\n// Read during render rather than computed: `slots` is not reactive.\nconst slots = useSlots()\nconst showsValue = (inHeader: boolean) =>\n  !props.indeterminate &&\n  (props.showValue || !!slots.default) &&\n  (props.valuePosition === 'header') === inHeader\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    :data-size=\"size\"\n    :style=\"[{ '--custom-color': color }, rootStyle]\"\n  >\n    <div v-if=\"(label && !hideLabel) || showsValue(true)\" class=\"v-progress-linear-header\">\n      <span v-if=\"label && !hideLabel\" :id=\"labelId\" class=\"v-progress-linear-label\">{{\n        label\n      }}</span>\n      <!-- The text inside the bar is presentational under the progressbar role; this copy,\n           outside it, is hidden to match. -->\n      <span v-if=\"showsValue(true)\" class=\"v-progress-linear-value\" aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"normalizedMax\" :percent=\"percent\">\n          {{ m.progress.percent(roundedPercent) }}\n        </slot>\n      </span>\n    </div>\n    <span v-if=\"label && hideLabel\" :id=\"labelId\" class=\"v-visually-hidden\">{{ label }}</span>\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=\"showsValue(false)\">\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 colours. The bar takes the whole length available:\n   * sizing it is the consumer's business, through the parent or a width of their own on the root.\n   */\n  .v-progress-linear-field {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-sm);\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-field[data-size='xs'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-xs);\n  }\n\n  .v-progress-linear-field[data-size='md'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-md);\n  }\n\n  .v-progress-linear-field[data-size='lg'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-lg);\n  }\n\n  .v-progress-linear-field[data-size='xl'] {\n    --progress-thickness: var(--vectis-control-size-bar-thickness-xl);\n  }\n\n  .v-progress-linear-header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    column-gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-progress-linear-label {\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  /* Pushed to the end even without a label before it. */\n  .v-progress-linear-value {\n    margin-inline-start: auto;\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* 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-bar-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,IAAMqB,IAAQC,GAuBRC,IAAIC,EAAY,GAEhB,EACJ,KAAKC,GACL,YACA,aACA,YACA,sBACEC,QACIL,EAAM,aACNA,EAAM,GACd,GAKM,EAAE,cAAW,cAAW,sBAAmBM,EAAa,GAKxDC,IAAUC,EAAM,GAChBC,IAAYC,QAAoBV,EAAM,QAAQ,KAAA,IAAYE,EAAE,MAAM,SAAS,KAAM,GACjFS,IAAaC,EAAcL,SAAeP,EAAM,KAAK,GAGrDa,IAAQC,EAAS,GACjBC,KAAc,MAClB,CAACf,EAAM,kBACNA,EAAM,aAAa,CAAC,CAACa,EAAM,YAC3Bb,EAAM,kBAAkB,aAAcgB;oBAIvCrC,EAAA,GAAAC,EAyDM,OAAA;GAxDJ,OAAKC,EAAA,CAAC,kCACEC,EAAAuC,CAAA,CAAS,CAAA;GAChB,aAAWpB,EAAA;GACX,eAAaA,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,oBAAkBA,EAAA;GAClB,aAAWA,EAAA;GACX,OAAKlB,EAAA,CAAA,EAAA,kBAAuBkB,EAAA,MAAK,GAAInB,EAAAyC,CAAA,CAAS,CAAA;;GAEnCtB,EAAA,SAAK,CAAKA,EAAA,aAAcc,EAAU,EAAA,KAA9CpC,EAAA,GAAAC,EAWM,OAXNY,GAWM,CAVQS,EAAA,SAAK,CAAKA,EAAA,aAAtBtB,EAAA,GAAAC,EAES,QAAA;;IAFyB,IAAIE,EAAAyB,CAAA;IAAS,OAAM;GACnD,GAAAvB,EAAAiB,EAAA,KAAK,GAAA,GAAAR,CAAA,KAAAgC,EAAA,IAAA,EAAA,GAIKV,EAAU,EAAA,KAAtBpC,EAAA,GAAAC,EAIO,QAJPc,GAIO,CAHLR,EAEOyC,EAAA,QAAA,WAAA;IAFA,OAAO7C,EAAA8C,CAAA;IAAU,KAAK9C,EAAAsB,CAAA;IAAgB,SAAStB,EAAA+C,CAAA;GAAtD,SAEO,CADF1C,EAAAH,EAAAF,EAAAoB,CAAA,CAAC,CAAC,SAAS,QAAQpB,EAAAiD,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAAN,EAAA,IAAA,EAAA,CAAA,CAAA,KAAAA,EAAA,IAAA,EAAA;GAI9BxB,EAAA,SAASA,EAAA,aAArBtB,EAAA,GAAAC,EAA0F,QAAA;;IAAzD,IAAIE,EAAAyB,CAAA;IAAS,OAAM;GAAuB,GAAAvB,EAAAiB,EAAA,KAAK,GAAA,GAAAN,CAAA,KAAA8B,EAAA,IAAA,EAAA;GAChFrC,EAkCM,OAlCNC,EAkCM;IAjCJ,OAAM;IACN,MAAK;IACJ,mBAAiBP,EAAA6B,CAAA;IACjB,cAAY7B,EAAA2B,CAAA;GACL,GAAA3B,EAAAoD,CAAA,GAAc;IACrB,cAAYjC,EAAA;IACZ,oBAAkBA,EAAA;IAClB,uBAAqBA,EAAA;IACrB,sBAAoBA,EAAA,gBAAa,KAAQ,KAAA;IACzC,iBAAeA,EAAA,gBAAgB,KAAA,IAAYnB,EAAA8C,CAAA;IAC5C,iBAAc;IACb,iBAAe9C,EAAAsB,CAAA;IACf,OAAK,EAAA,mBAAuB,OAAOtB,EAAAqD,CAAA,CAAQ,EAAA;GAE5C,CAAA,GAAA,CAAA,AAAAC,EAAA,OAAAhD,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAOpB2B,EAAU,EAAA,KAA1BpC,EAAA,GAAAC,EAWWU,GAAA,EAAA,KAAA,EAAA,GAAA,CAVTF,EAIO,QAJPS,GAIO,CAHLX,EAEOyC,EAAA,QAAA,WAAA;IAFA,OAAO7C,EAAA8C,CAAA;IAAU,KAAK9C,EAAAsB,CAAA;IAAgB,SAAStB,EAAA+C,CAAA;GAAtD,SAEO,CADF1C,EAAAH,EAAAF,EAAAoB,CAAA,CAAC,CAAC,SAAS,QAAQpB,EAAAiD,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGxC3C,EAIO,QAJPU,GAIO,CAHLZ,EAEOyC,EAAA,QAAA,WAAA;IAFA,OAAO7C,EAAA8C,CAAA;IAAU,KAAK9C,EAAAsB,CAAA;IAAgB,SAAStB,EAAA+C,CAAA;GAAtD,SAEO,CADF1C,EAAAH,EAAAF,EAAAoB,CAAA,CAAC,CAAC,SAAS,QAAQpB,EAAAiD,CAAA,CAAc,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAAN,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA7B,CAAA"}

package/dist/components/VSeparator/VSeparator.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-separator{border:0 solid var(--vectis-color-border);flex:none;margin:0}.v-separator[data-orientation=horizontal]{border-block-start-width:1px}.v-separator[data-orientation=vertical]{border-inline-start-width:1px;align-self:stretch}}
+@layer vectis.components{.v-separator{--separator-color:var(--vectis-color-border);--separator-thickness:var(--vectis-control-size-separator-sm);border:0 solid var(--separator-color);flex:none;margin:0}.v-separator[data-size=md]{--separator-thickness:var(--vectis-control-size-separator-md)}.v-separator[data-size=lg]{--separator-thickness:var(--vectis-control-size-separator-lg)}.v-separator[data-variant=dashed]{border-style:dashed}.v-separator[data-variant=dotted]{border-style:dotted}.v-separator[data-orientation=vertical]{align-self:stretch}hr.v-separator[data-orientation=horizontal]{border-block-start-width:var(--separator-thickness)}hr.v-separator[data-orientation=vertical]{border-inline-start-width:var(--separator-thickness)}div.v-separator{align-items:center;gap:var(--vectis-space-3);color:var(--vectis-color-text-muted);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-caption-weight);line-height:var(--vectis-text-caption-leading);display:flex}div.v-separator:before,div.v-separator:after{content:"";border-width:0;border-color:inherit;border-style:inherit;flex:1}div.v-separator[data-orientation=horizontal]:before,div.v-separator[data-orientation=horizontal]:after{border-block-start-width:var(--separator-thickness)}div.v-separator[data-orientation=vertical]{flex-direction:column}div.v-separator[data-orientation=vertical]:before,div.v-separator[data-orientation=vertical]:after{border-inline-start-width:var(--separator-thickness)}div.v-separator[data-content-position=start]:before,div.v-separator[data-content-position=end]:after{display:none}.v-separator-content{--vectis-icon-size:var(--vectis-icon-size-sm);align-items:center;gap:var(--vectis-space-2);display:inline-flex}}

package/dist/components/VSeparator/VSeparator.d.ts

@@ -1,12 +1,52 @@
-/** Use a native hr for separator semantics and borders for visibility in forced colours. */
+import { IconSource } from '../VIcon/types.js';
 /** Which way the rule runs. */
 export type SeparatorOrientation = 'horizontal' | 'vertical';
+/** How the rule is stroked. */
+export type SeparatorVariant = 'solid' | 'dashed' | 'dotted';
+/** Where the content sits along the rule. */
+export type SeparatorContentPosition = 'start' | 'center' | 'end';
+/** How thick the rule is. */
+export type SeparatorSize = 'sm' | 'md' | 'lg';
 interface SeparatorProps {
     /** The direction the rule runs in: across by default, or down the page under `vertical`. */
     orientation?: SeparatorOrientation;
+    /** How the rule is stroked: a continuous line, dashes or dots. */
+    variant?: SeparatorVariant;
+    /**
+     * How thick the rule is: a 1px hairline (`sm`, the default), 2px or 4px. A thicker rule marks
+     * a stronger break, and makes `dotted` read as dots.
+     */
+    size?: SeparatorSize;
+    /**
+     * A colour of your own (hex, CSS name or `oklch()`) for the rule. The label and icon keep the
+     * muted text colour, so their contrast stays the design system's.
+     */
+    color?: string;
+    /** Visible text breaking the rule. It also becomes the separator's accessible name. */
+    label?: string;
+    /** An icon breaking the rule, before the label when both are set (the VIcon contract). */
+    icon?: IconSource;
+    /** Where the label and icon sit along the rule: its start, centre or end. */
+    contentPosition?: SeparatorContentPosition;
 }
-declare const __VLS_export: import('vue').DefineComponent<SeparatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+type __VLS_Slots = {
+    /** Rich content breaking the rule, after the icon and in place of the label. */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<SeparatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+    label: string;
+    size: SeparatorSize;
+    variant: SeparatorVariant;
+    color: string;
+    icon: IconSource;
     orientation: SeparatorOrientation;
+    contentPosition: SeparatorContentPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VSeparator/VSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSeparator.js","names":["_sfc_main","VSeparator_vue_vue_type_script_setup_true_lang_default","VSeparator_default"],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Use a native hr for separator semantics and borders for visibility in forced colours. */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /** The direction the rule runs in: across by default, or down the page under `vertical`. */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!--\n    Aria-orientation is emitted only when it CONTRADICTS what the role already implies: a\n    separator is horizontal by default, so stating it would merely restate the role. This is the\n    same convention the VTabs tablist follows.\n  -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /*\n     * `.v-menu-separator` and `.v-listbox-separator` override that margin from THEIR own\n     * sheet, and which of the two sheets the consumer's bundler puts last is not ours to\n     * decide. Both are therefore written as the compound `.v-separator.v-x-separator`, and\n     * every declaration added here falls under the same obligation.\n     */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /*\n   * In ordinary flow it collapses to nothing, silently and with no error; there it is up to the\n   * consumer to give it a block-size.\n   */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSeparator.js","names":["_sfc_main","VSeparator_vue_vue_type_script_setup_true_lang_default","VSeparator_default"],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Use a native hr for separator semantics and borders for visibility in forced colours. */\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n/** How the rule is stroked. */\nexport type SeparatorVariant = 'solid' | 'dashed' | 'dotted'\n/** Where the content sits along the rule. */\nexport type SeparatorContentPosition = 'start' | 'center' | 'end'\n/** How thick the rule is. */\nexport type SeparatorSize = 'sm' | 'md' | 'lg'\n\ninterface SeparatorProps {\n  /** The direction the rule runs in: across by default, or down the page under `vertical`. */\n  orientation?: SeparatorOrientation\n  /** How the rule is stroked: a continuous line, dashes or dots. */\n  variant?: SeparatorVariant\n  /**\n   * How thick the rule is: a 1px hairline (`sm`, the default), 2px or 4px. A thicker rule marks\n   * a stronger break, and makes `dotted` read as dots.\n   */\n  size?: SeparatorSize\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`) for the rule. The label and icon keep the\n   * muted text colour, so their contrast stays the design system's.\n   */\n  color?: string\n  /** Visible text breaking the rule. It also becomes the separator's accessible name. */\n  label?: string\n  /** An icon breaking the rule, before the label when both are set (the VIcon contract). */\n  icon?: IconSource\n  /** Where the label and icon sit along the rule: its start, centre or end. */\n  contentPosition?: SeparatorContentPosition\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n  variant: 'solid',\n  size: 'sm',\n  color: undefined,\n  label: undefined,\n  icon: undefined,\n  contentPosition: 'center',\n})\n\nconst slots = defineSlots<{\n  /** Rich content breaking the rule, after the icon and in place of the label. */\n  default?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive.\nfunction hasSlot() {\n  return slots.default !== undefined\n}\n</script>\n\n<template>\n  <!--\n    Aria-orientation is emitted only when it CONTRADICTS what the role already implies: a\n    separator is horizontal by default, so stating it would merely restate the role. This is the\n    same convention the VTabs tablist follows.\n  -->\n  <hr\n    v-if=\"!label && !icon && !hasSlot()\"\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :data-variant=\"variant\"\n    :data-size=\"size\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n    :style=\"color !== undefined ? { '--separator-color': color } : undefined\"\n  />\n  <!--\n    An <hr> cannot hold content. A separator's children are presentational, so the label is\n    repeated as its accessible name; slot-only content is named by the consumer's aria-label.\n  -->\n  <div\n    v-else\n    role=\"separator\"\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :data-variant=\"variant\"\n    :data-size=\"size\"\n    :data-content-position=\"contentPosition\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n    :aria-label=\"label\"\n    :style=\"color !== undefined ? { '--separator-color': color } : undefined\"\n  >\n    <span class=\"v-separator-content\">\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n      <slot>{{ label }}</slot>\n    </span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    --separator-color: var(--vectis-color-border);\n    --separator-thickness: var(--vectis-control-size-separator-sm);\n\n    flex: none;\n    /*\n     * `.v-menu-separator` and `.v-listbox-separator` override that margin from THEIR own\n     * sheet, and which of the two sheets the consumer's bundler puts last is not ours to\n     * decide. Both are therefore written as the compound `.v-separator.v-x-separator`, and\n     * every declaration added here falls under the same obligation.\n     */\n    margin: 0;\n    border: 0 solid var(--separator-color);\n  }\n\n  .v-separator[data-size='md'] {\n    --separator-thickness: var(--vectis-control-size-separator-md);\n  }\n\n  .v-separator[data-size='lg'] {\n    --separator-thickness: var(--vectis-control-size-separator-lg);\n  }\n\n  .v-separator[data-variant='dashed'] {\n    border-style: dashed;\n  }\n\n  .v-separator[data-variant='dotted'] {\n    border-style: dotted;\n  }\n\n  /*\n   * In ordinary flow it collapses to nothing, silently and with no error; there it is up to the\n   * consumer to give it a block-size.\n   */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n  }\n\n  hr.v-separator[data-orientation='horizontal'] {\n    border-block-start-width: var(--separator-thickness);\n  }\n\n  hr.v-separator[data-orientation='vertical'] {\n    border-inline-start-width: var(--separator-thickness);\n  }\n\n  /* With content, the root only lays out; its two pseudo-elements are the strokes. */\n  div.v-separator {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    color: var(--vectis-color-text-muted);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n  }\n\n  div.v-separator::before,\n  div.v-separator::after {\n    content: '';\n    flex: 1;\n    /* The initial width is `medium` (3px): every side but the stroke's must be zeroed. */\n    border-width: 0;\n    border-color: inherit;\n    border-style: inherit;\n  }\n\n  div.v-separator[data-orientation='horizontal']::before,\n  div.v-separator[data-orientation='horizontal']::after {\n    border-block-start-width: var(--separator-thickness);\n  }\n\n  div.v-separator[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  div.v-separator[data-orientation='vertical']::before,\n  div.v-separator[data-orientation='vertical']::after {\n    border-inline-start-width: var(--separator-thickness);\n  }\n\n  div.v-separator[data-content-position='start']::before,\n  div.v-separator[data-content-position='end']::after {\n    display: none;\n  }\n\n  .v-separator-content {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n}\n</style>\n"],"mappings":""}