@threadlabs/looma 0.14.2 → 0.14.4

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;
 }
 
@@ -6301,81 +6371,89 @@ tbody tr[data-v-9980d203-s]:last-child > * {
 
 /* 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. */
-[data-component~="ui-text"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-v-e15a75c1] {
   margin: 0;
   min-inline-size: 0;
   color: var(--ui-text-primary);
   text-align: start;
 }
-[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-e15a75c1] {
   font-size: var(--ui-font-size-xs);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-e15a75c1] {
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-e15a75c1] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-e15a75c1] {
   font-size: var(--ui-font-size-lg);
   line-height: var(--ui-line-height-relaxed);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-e15a75c1] {
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-e15a75c1] {
   color: var(--ui-text-muted);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-e15a75c1] {
   color: var(--ui-accent-active);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-e15a75c1] {
   color: var(--ui-danger);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-e15a75c1] {
   color: var(--ui-success);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-ab6bb60b] {
+/* 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"][data-v-e15a75c1] {
+  color: var(--ui-info-subtle-text);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-e15a75c1] {
+  color: var(--ui-warning-subtle-text);
+}
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-e15a75c1] {
   font-weight: var(--ui-font-normal);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-e15a75c1] {
   font-weight: var(--ui-font-medium);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-e15a75c1] {
   font-weight: var(--ui-font-semibold);
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-e15a75c1] {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-e15a75c1] {
   font-family: var(--ui-font-family-mono);
 }
 
 /* A link in running text is underlined, so it stands apart from the words around it by more than
    colour. */
-[data-component~="ui-text"] a[data-v-ab6bb60b-s] {
+[data-component~="ui-text"] a[data-v-e15a75c1-s] {
   color: var(--ui-accent-active);
   text-decoration: underline;
   text-decoration-thickness: 0.06em;
   text-underline-offset: 0.18em;
 }
-[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-e15a75c1] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-ab6bb60b] {
+[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-e15a75c1] {
   text-align: center;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden][data-v-ab6bb60b] {
+[data-component~="ui-text"][hidden][data-v-e15a75c1] {
   display: none;
 }