@threadlabs/looma 0.14.2 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-meter.css

@@ -55,12 +55,90 @@
       --_meter-fill: var(--ui-danger-solid);
     }
 
+    /* Segments: the track and its fill show through a mask of equal segments with a gap between them.
+       A mask over the whole meter, rather than one element per segment, because the expression
+       language has no range to render N elements from, and one mask lines the fill up with the track
+       for free. Each period is a segment and the gap after it; N periods span the track plus one
+       trailing gap, so the segments sit symmetrically and right to left needs nothing of its own.
+       The count arrives as an attribute, not an inline custom property (which would add a style
+       attribute to every meter), so a continuous meter renders exactly as before, and the rules below
+       turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
+    :scope[data-ui-meter-segments="2"] {
+      --_segments: 2;
+    }
+
+    :scope[data-ui-meter-segments="3"] {
+      --_segments: 3;
+    }
+
+    :scope[data-ui-meter-segments="4"] {
+      --_segments: 4;
+    }
+
+    :scope[data-ui-meter-segments="5"] {
+      --_segments: 5;
+    }
+
+    :scope[data-ui-meter-segments="6"] {
+      --_segments: 6;
+    }
+
+    :scope[data-ui-meter-segments="7"] {
+      --_segments: 7;
+    }
+
+    :scope[data-ui-meter-segments="8"] {
+      --_segments: 8;
+    }
+
+    :scope[data-ui-meter-segments="9"] {
+      --_segments: 9;
+    }
+
+    :scope[data-ui-meter-segments="10"] {
+      --_segments: 10;
+    }
+
+    :scope[data-ui-meter-segments="11"] {
+      --_segments: 11;
+    }
+
+    :scope[data-ui-meter-segments="12"] {
+      --_segments: 12;
+    }
+
+    :scope[data-ui-meter-segments] {
+      --_meter-gap: var(--ui-space-1);
+      --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
+      --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
+
+      mask-image: repeating-linear-gradient(to right, #000 0 var(--_meter-segment), transparent 0 var(--_meter-period));
+    }
+
+    :scope[data-ui-meter-state~="size=sm"][data-ui-meter-segments] {
+      --_meter-gap: var(--ui-space-0-5);
+    }
+
     /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
     @media (forced-colors: active) {
       .fill {
         forced-color-adjust: none;
         background: CanvasText;
       }
+
+      /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
+         top and bottom edges and the gradient the ends. */
+      :scope[data-ui-meter-segments] {
+        forced-color-adjust: none;
+        background: repeating-linear-gradient(
+          to right,
+          CanvasText 0 1px,
+          Canvas 0 calc(var(--_meter-segment) - 1px),
+          CanvasText 0 var(--_meter-segment),
+          transparent 0 var(--_meter-period)
+        );
+        box-shadow: inset 0 0 0 1px CanvasText;
+      }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -73,8 +151,20 @@
        quiet border colour, so an empty meter still shows; every tone's fill keeps 3:1 against the
        track and the page. */
 
+    /* Segments: the track and its fill show through a mask of equal segments with a gap between them.
+       A mask over the whole meter, rather than one element per segment, because the expression
+       language has no range to render N elements from, and one mask lines the fill up with the track
+       for free. Each period is a segment and the gap after it; N periods span the track plus one
+       trailing gap, so the segments sit symmetrically and right to left needs nothing of its own.
+       The count arrives as an attribute, not an inline custom property (which would add a style
+       attribute to every meter), so a continuous meter renders exactly as before, and the rules below
+       turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
+
     /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
     @media (forced-colors: active) {
+
+      /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
+         top and bottom edges and the gradient the ends. */
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-text.css

@@ -41,6 +41,14 @@
     :scope[data-ui-text-state~="tone=success"] {
       color: var(--ui-success);
     }
+    /* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
+       text-safe tokens a subtle badge sets its words in. */
+    :scope[data-ui-text-state~="tone=info"] {
+      color: var(--ui-info-subtle-text);
+    }
+    :scope[data-ui-text-state~="tone=warning"] {
+      color: var(--ui-warning-subtle-text);
+    }
 
     :scope[data-ui-text-state~="weight=normal"] {
       font-weight: var(--ui-font-normal);
@@ -83,6 +91,8 @@
 @scope ([data-component~="ui-text"]) to ([data-component]) {
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
+    /* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
+       text-safe tokens a subtle badge sets its words in. */
 
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */

package/vanilla/UiMeter.d.ts

@@ -8,6 +8,7 @@ export interface UiMeterElement extends HTMLSpanElement {
 export interface UiMeterProps {
   label?: string | null;
   max?: number | null;
+  segments?: number | null;
   size?: "sm" | "md" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   value?: number | null;

package/vanilla/UiMeter.js

@@ -2,7 +2,7 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-meter.css";
 
-const definition = {...{"contract":{"tag":"ui-meter","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"max":{"type":"number","required":false,"target":{"attribute":"aria-valuemax"},"default":1},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"tone":{"type":{"enum":["neutral","accent","info","success","warning","danger"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"value":{"type":"number","required":false,"target":{"attribute":"value"},"default":0},"valueText":{"type":"string","required":false,"target":{"attribute":"valuetext"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"meter"},{"kind":"literal","name":"aria-valuemin","value":"0"},{"kind":"attribute","name":"aria-valuemax","expression":"max","expressionPlan":{"source":"max","ast":{"kind":"id","name":"max"},"dependencies":["max"]}},{"kind":"attribute","name":"aria-valuenow","expression":"amount","expressionPlan":{"source":"amount","ast":{"kind":"id","name":"amount"},"dependencies":["amount"]}},{"kind":"attribute","name":"aria-valuetext","expression":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","expressionPlan":{"source":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"valueText"}},{"key":"false","value":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"whole"}]}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"valueText"},"right":{"kind":"literal","value":""}}]}},"dependencies":["valueText","whole"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fill"},{"kind":"attribute","name":"inline-size","expression":"format('%s%', percent)","expressionPlan":{"source":"format('%s%', percent)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"percent"}]},"dependencies":["percent"]},"target":"style"}],"children":[]}]},"declarations":[{"kind":"computed","name":"amount","expression":{"source":"clamp(0, value, max)","ast":{"kind":"call","fn":"clamp","args":[{"kind":"literal","value":0},{"kind":"id","name":"value"},{"kind":"id","name":"max"}]},"dependencies":["max","value"]}},{"kind":"computed","name":"percent","expression":{"source":"{ true: amount / max * 100, false: 0 }[format('%s', max > 0)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"binary","op":"*","left":{"kind":"binary","op":"/","left":{"kind":"id","name":"amount"},"right":{"kind":"id","name":"max"}},"right":{"kind":"literal","value":100}}},{"key":"false","value":{"kind":"literal","value":0}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":">","left":{"kind":"id","name":"max"},"right":{"kind":"literal","value":0}}]}},"dependencies":["amount","max"]}},{"kind":"computed","name":"whole","expression":{"source":"percent + 0.5 - (percent + 0.5) % 1","ast":{"kind":"binary","op":"-","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"binary","op":"%","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"literal","value":1}}},"dependencies":["percent"]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-meter","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"max":{"type":"number","required":false,"target":{"attribute":"aria-valuemax"},"default":1},"segments":{"type":"number","required":false,"target":{"attribute":"segments"},"default":0},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"tone":{"type":{"enum":["neutral","accent","info","success","warning","danger"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"value":{"type":"number","required":false,"target":{"attribute":"value"},"default":0},"valueText":{"type":"string","required":false,"target":{"attribute":"valuetext"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"meter"},{"kind":"literal","name":"aria-valuemin","value":"0"},{"kind":"attribute","name":"aria-valuemax","expression":"max","expressionPlan":{"source":"max","ast":{"kind":"id","name":"max"},"dependencies":["max"]}},{"kind":"attribute","name":"aria-valuenow","expression":"amount","expressionPlan":{"source":"amount","ast":{"kind":"id","name":"amount"},"dependencies":["amount"]}},{"kind":"attribute","name":"aria-valuetext","expression":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","expressionPlan":{"source":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"valueText"}},{"key":"false","value":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"whole"}]}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"valueText"},"right":{"kind":"literal","value":""}}]}},"dependencies":["valueText","whole"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"data-ui-meter-segments","expression":"{ true: segments, false: null }[format('%s', segments > 1)]","expressionPlan":{"source":"{ true: segments, false: null }[format('%s', segments > 1)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"segments"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":">","left":{"kind":"id","name":"segments"},"right":{"kind":"literal","value":1}}]}},"dependencies":["segments"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fill"},{"kind":"attribute","name":"inline-size","expression":"format('%s%', percent)","expressionPlan":{"source":"format('%s%', percent)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"percent"}]},"dependencies":["percent"]},"target":"style"}],"children":[]}]},"declarations":[{"kind":"computed","name":"amount","expression":{"source":"clamp(0, value, max)","ast":{"kind":"call","fn":"clamp","args":[{"kind":"literal","value":0},{"kind":"id","name":"value"},{"kind":"id","name":"max"}]},"dependencies":["max","value"]}},{"kind":"computed","name":"percent","expression":{"source":"{ true: amount / max * 100, false: 0 }[format('%s', max > 0)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"binary","op":"*","left":{"kind":"binary","op":"/","left":{"kind":"id","name":"amount"},"right":{"kind":"id","name":"max"}},"right":{"kind":"literal","value":100}}},{"key":"false","value":{"kind":"literal","value":0}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":">","left":{"kind":"id","name":"max"},"right":{"kind":"literal","value":0}}]}},"dependencies":["amount","max"]}},{"kind":"computed","name":"whole","expression":{"source":"percent + 0.5 - (percent + 0.5) % 1","ast":{"kind":"binary","op":"-","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"binary","op":"%","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"literal","value":1}}},"dependencies":["percent"]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiMeter(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiText.d.ts

@@ -9,7 +9,7 @@ export interface UiTextProps {
   align?: "start" | "center" | null;
   as?: "p" | "span" | "div" | "small" | "strong" | "label" | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
-  tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | null;
+  tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
   truncate?: boolean | null;
   variant?: "body" | "eyebrow" | "code" | null;
   weight?: "inherit" | "normal" | "medium" | "semibold" | null;

package/vanilla/UiText.js

@@ -2,7 +2,7 @@
 import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-text.css";
 
-const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"enum":["start","center"]},"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"enum":["p","span","div","small","strong","label"]},"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"enum":["inherit","xs","sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"enum":["default","secondary","muted","accent","danger","success"]},"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"enum":["body","eyebrow","code"]},"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"enum":["inherit","normal","medium","semibold"]},"required":false,"target":{"attribute":"weight"},"default":"inherit"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","p"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-text","props":{"align":{"type":{"enum":["start","center"]},"required":false,"target":{"attribute":"align"},"default":"start"},"as":{"type":{"enum":["p","span","div","small","strong","label"]},"required":false,"target":{"attribute":"as"},"default":"p"},"size":{"type":{"enum":["inherit","xs","sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"inherit"},"tone":{"type":{"enum":["default","secondary","muted","accent","danger","success","info","warning"]},"required":false,"target":{"attribute":"tone"},"default":"default"},"truncate":{"type":"boolean","required":false,"target":{"attribute":"truncate"},"default":false},"variant":{"type":{"enum":["body","eyebrow","code"]},"required":false,"target":{"attribute":"variant"},"default":"body"},"weight":{"type":{"enum":["inherit","normal","medium","semibold"]},"required":false,"target":{"attribute":"weight"},"default":"inherit"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'span'","testPlan":{"source":"as = 'span'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"span"}},"dependencies":["as"]}}},{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'div'","testPlan":{"source":"as = 'div'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"div"}},"dependencies":["as"]}}},{"kind":"element","name":"small","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'small'","testPlan":{"source":"as = 'small'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"small"}},"dependencies":["as"]}}},{"kind":"element","name":"strong","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'strong'","testPlan":{"source":"as = 'strong'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"strong"}},"dependencies":["as"]}}},{"kind":"element","name":"label","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'label'","testPlan":{"source":"as = 'label'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"label"}},"dependencies":["as"]}}},{"kind":"element","name":"p","attributes":[],"children":[{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"p","choices":["span","div","small","strong","label","p"]}},source:{file:import.meta.url},css:""};
 
 export function createUiText(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiMeter.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     label?: string;
     max?: number;
+    segments?: number;
     size?: 'sm' | 'md';
     tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
     value?: number;
@@ -12,6 +13,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     value: number;
     max: number;
     tone: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+    segments: number;
     valueText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/vue/UiMeter.vue

@@ -8,6 +8,7 @@ const props = withDefaults(
   defineProps<{
     label?: string
     max?: number
+    segments?: number
     size?: 'sm' | 'md'
     tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
     value?: number
@@ -16,6 +17,7 @@ const props = withDefaults(
   {
     label: '',
     max: 1,
+    segments: 0,
     size: 'md',
     tone: 'neutral',
     value: 0,
@@ -119,6 +121,7 @@ function number(value: unknown): number | undefined {
     :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
     ? String(({ true: label, false: null })[`${label !== ''}`])
     : attribute(({ true: label, false: null })[`${label !== ''}`])"
+    :data-ui-meter-segments="attribute(({ true: segments, false: null })[`${segments > 1}`])"
     :data-ui-meter-state="hostState || undefined"
   ><span class="fill" :style="{ 'inline-size': `${text(percent)}%` }"></span></span>
 </template>
@@ -179,12 +182,94 @@ function number(value: unknown): number | undefined {
   --_meter-fill: var(--ui-danger-solid);
 }
 
+/* Segments: the track and its fill show through a mask of equal segments with a gap between them.
+   A mask over the whole meter, rather than one element per segment, because the expression
+   language has no range to render N elements from, and one mask lines the fill up with the track
+   for free. Each period is a segment and the gap after it; N periods span the track plus one
+   trailing gap, so the segments sit symmetrically and right to left needs nothing of its own.
+   The count arrives as an attribute, not an inline custom property (which would add a style
+   attribute to every meter), so a continuous meter renders exactly as before, and the rules below
+   turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
+[data-component~="ui-meter"][data-ui-meter-segments="2"] {
+  --_segments: 2;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="3"] {
+  --_segments: 3;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="4"] {
+  --_segments: 4;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="5"] {
+  --_segments: 5;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="6"] {
+  --_segments: 6;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="7"] {
+  --_segments: 7;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="8"] {
+  --_segments: 8;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="9"] {
+  --_segments: 9;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="10"] {
+  --_segments: 10;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="11"] {
+  --_segments: 11;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments="12"] {
+  --_segments: 12;
+}
+
+[data-component~="ui-meter"][data-ui-meter-segments] {
+  --_meter-gap: var(--ui-space-1);
+  --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
+  --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
+
+  mask-image: repeating-linear-gradient(
+    to right,
+    #000 0 var(--_meter-segment),
+    transparent 0 var(--_meter-period)
+  );
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments] {
+  --_meter-gap: var(--ui-space-0-5);
+}
+
 /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
 @media (forced-colors: active) {
   .fill {
     forced-color-adjust: none;
     background: CanvasText;
   }
+
+  /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
+     top and bottom edges and the gradient the ends. */
+  [data-component~="ui-meter"][data-ui-meter-segments] {
+    forced-color-adjust: none;
+    background: repeating-linear-gradient(
+      to right,
+      CanvasText 0 1px,
+      Canvas 0 calc(var(--_meter-segment) - 1px),
+      CanvasText 0 var(--_meter-segment),
+      transparent 0 var(--_meter-period)
+    );
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiText.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     align?: 'start' | 'center';
     as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label';
     size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg';
-    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success';
+    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success' | 'info' | 'warning';
     truncate?: boolean;
     variant?: 'body' | 'eyebrow' | 'code';
     weight?: 'inherit' | 'normal' | 'medium' | 'semibold';
@@ -23,7 +23,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "inherit" | "xs" | "sm" | "md" | "lg";
-    tone: "default" | "secondary" | "muted" | "accent" | "danger" | "success";
+    tone: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning";
     variant: "body" | "eyebrow" | "code";
     align: "start" | "center";
     as: "p" | "span" | "div" | "small" | "strong" | "label";

package/vue/UiText.vue

@@ -9,7 +9,7 @@ const props = withDefaults(
     align?: 'start' | 'center'
     as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label'
     size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg'
-    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success'
+    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success' | 'info' | 'warning'
     truncate?: boolean
     variant?: 'body' | 'eyebrow' | 'code'
     weight?: 'inherit' | 'normal' | 'medium' | 'semibold'
@@ -118,6 +118,14 @@ const hostState = computed(() =>
 [data-component~="ui-text"][data-ui-text-state~="tone=success"] {
   color: var(--ui-success);
 }
+/* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
+   text-safe tokens a subtle badge sets its words in. */
+[data-component~="ui-text"][data-ui-text-state~="tone=info"] {
+  color: var(--ui-info-subtle-text);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=warning"] {
+  color: var(--ui-warning-subtle-text);
+}
 
 [data-component~="ui-text"][data-ui-text-state~="weight=normal"] {
   font-weight: var(--ui-font-normal);

package/vue/chunks/UiMeter.js

@@ -6,6 +6,7 @@ var _hoisted_1 = [
 	"aria-valuenow",
 	"aria-valuetext",
 	"aria-label",
+	"data-ui-meter-segments",
 	"data-ui-meter-state"
 ];
 //#endregion
@@ -16,6 +17,7 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	props: {
 		label: { default: "" },
 		max: { default: 1 },
+		segments: { default: 0 },
 		size: { default: "md" },
 		tone: { default: "neutral" },
 		value: { default: 0 },
@@ -70,6 +72,10 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					true: __props.label,
 					false: null
 				}[`${__props.label !== ""}`]),
+				"data-ui-meter-segments": attribute({
+					true: __props.segments,
+					false: null
+				}[`${__props.segments > 1}`]),
 				"data-ui-meter-state": hostState.value || void 0
 			}), [createElementVNode("span", {
 				class: "fill",
@@ -77,6 +83,6 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}, null, 4)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f716cd47"]]);
+}), [["__scopeId", "data-v-c0b7936e"]]);
 //#endregion
 export { UiMeter_default as t };

package/vue/chunks/UiText.js

@@ -57,6 +57,6 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_6));
 		};
 	}
-}), [["__scopeId", "data-v-ab6bb60b"]]);
+}), [["__scopeId", "data-v-e15a75c1"]]);
 //#endregion
 export { UiText_default as t };