@threadlabs/looma 0.14.2 → 0.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "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/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/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/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/components.css

@@ -4443,7 +4443,7 @@ svg[data-v-006fa1b2-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-meter"][data-v-f716cd47] {
+[data-component~="ui-meter"][data-v-c0b7936e] {
   --_meter-fill: var(--ui-text-muted);
 
   display: inline-block;
@@ -4458,41 +4458,111 @@ svg[data-v-006fa1b2-s] {
   /* Unseen until forced colours draw it, where the track's own colour is gone. */
   outline: 1px solid transparent;
 }
-[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-f716cd47] {
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-c0b7936e] {
   inline-size: var(--ui-meter-inline-size, 5rem);
   block-size: var(--ui-space-1);
 }
-.fill[data-v-f716cd47] {
+.fill[data-v-c0b7936e] {
   display: block;
   block-size: 100%;
   background: var(--_meter-fill);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-f716cd47] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-c0b7936e] {
   --_meter-fill: var(--ui-accent-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-f716cd47] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-c0b7936e] {
   --_meter-fill: var(--ui-info-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-f716cd47] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-c0b7936e] {
   --_meter-fill: var(--ui-success-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-f716cd47] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-c0b7936e] {
   --_meter-fill: var(--ui-warning-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-f716cd47] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-c0b7936e] {
   --_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"][data-v-c0b7936e] {
+  --_segments: 2;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-c0b7936e] {
+  --_segments: 3;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-c0b7936e] {
+  --_segments: 4;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-c0b7936e] {
+  --_segments: 5;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-c0b7936e] {
+  --_segments: 6;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-c0b7936e] {
+  --_segments: 7;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-c0b7936e] {
+  --_segments: 8;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-c0b7936e] {
+  --_segments: 9;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-c0b7936e] {
+  --_segments: 10;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-c0b7936e] {
+  --_segments: 11;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-c0b7936e] {
+  --_segments: 12;
+}
+[data-component~="ui-meter"][data-ui-meter-segments][data-v-c0b7936e] {
+  --_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][data-v-c0b7936e] {
+  --_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[data-v-f716cd47] {
+.fill[data-v-c0b7936e] {
     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][data-v-c0b7936e] {
+    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. */
-[data-component~="ui-meter"][hidden][data-v-f716cd47] {
+[data-component~="ui-meter"][hidden][data-v-c0b7936e] {
   display: none;
 }