@ponchia/ui 0.6.12 → 0.7.0

package/css/dots.css

@@ -136,7 +136,9 @@
 
 /* Status dot — the glyph-style state indicator. */
 .ui-dot {
-  background: var(--text-dim);
+  --ui-dot-color: var(--text-dim);
+
+  background: var(--ui-dot-color);
   border-radius: 50%;
   display: inline-block;
   flex: 0 0 auto;
@@ -145,34 +147,45 @@
 }
 
 .ui-dot--accent {
-  background: var(--accent);
+  --ui-dot-color: var(--accent);
 }
 
 .ui-dot--success {
-  background: var(--success);
+  --ui-dot-color: var(--success);
 }
 
 .ui-dot--warning {
-  background: var(--warning);
+  --ui-dot-color: var(--warning);
 }
 
 .ui-dot--danger {
-  background: var(--danger);
+  --ui-dot-color: var(--danger);
 }
 
 .ui-dot--info {
-  background: var(--info);
+  --ui-dot-color: var(--info);
 }
 
 .ui-dot--live {
-  background: var(--success);
-  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-dot-color) 70%, transparent);
   position: relative;
 }
 
+/* Live describes motion, not status. A standalone live dot defaults to
+   success; an explicit tone remains the colour of both the dot and ring. */
+.ui-dot--live:not(
+    .ui-dot--accent,
+    .ui-dot--success,
+    .ui-dot--warning,
+    .ui-dot--danger,
+    .ui-dot--info
+  ) {
+  --ui-dot-color: var(--success);
+}
+
 .ui-dot--live::after {
   animation: pulseRing 1.8s var(--ease-out) infinite;
-  border: 1px solid var(--success);
+  border: 1px solid var(--ui-dot-color);
   border-radius: 50%;
   content: '';
   inset: -3px;
@@ -562,36 +575,48 @@
    differentiable. */
 @media (forced-colors: active) {
   .ui-dot--success {
+    --ui-dot-color: LinkText;
+
     forced-color-adjust: none;
-    background: LinkText;
   }
 
   .ui-dot--warning {
+    --ui-dot-color: Mark;
+
     forced-color-adjust: none;
-    background: Mark;
   }
 
   .ui-dot--danger {
+    --ui-dot-color: Highlight;
+
     forced-color-adjust: none;
-    background: Highlight;
   }
 
   .ui-dot--info {
+    --ui-dot-color: ButtonText;
+
     forced-color-adjust: none;
-    background: ButtonText;
   }
 
   /* Brand/live dots aren't status tones, but they still encode meaning via
      background-color alone, which HCM flattens. Keep them on a distinct,
      opted-out system colour for completeness. */
-  .ui-dot--accent,
-  .ui-dot--live {
+  .ui-dot--accent {
+    --ui-dot-color: LinkText;
+
     forced-color-adjust: none;
-    background: LinkText;
   }
 
-  .ui-dot--live::after {
-    border-color: LinkText;
+  .ui-dot--live:not(
+      .ui-dot--accent,
+      .ui-dot--success,
+      .ui-dot--warning,
+      .ui-dot--danger,
+      .ui-dot--info
+    ) {
+    --ui-dot-color: LinkText;
+
+    forced-color-adjust: none;
   }
 
   /* The masked one-node icon paints `background: currentcolor` through an SVG

package/css/feedback.css

@@ -517,6 +517,41 @@
   background: var(--info);
 }
 
+/* A labelled meter is core feedback grammar, not report-only layout. The
+   visible value remains the data of record because role=meter support varies. */
+.ui-meter__row {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2xs) var(--space-md);
+  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
+  margin-block: var(--space-2xs);
+}
+
+.ui-meter__row .ui-meter {
+  min-inline-size: 8rem;
+}
+
+.ui-meter__label {
+  color: var(--text-soft);
+}
+
+.ui-meter__value {
+  color: var(--text);
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+@media (max-width: 32rem) {
+  .ui-meter__row {
+    grid-template-columns: 1fr;
+  }
+
+  .ui-meter__value {
+    text-align: start;
+  }
+}
+
 /* --- Steps — progress through a multi-step flow. Use an <ol>; the
    current step is aria-current="step" (no class), completed steps take
    --done. Counter-numbered markers, hairline connectors. --- */

package/css/report.css

@@ -619,46 +619,6 @@
   text-transform: uppercase;
 }
 
-/* --- Labelled meter row ---
-   A multi-meter block (SLO burn, error budgets, capacity) lays out as
-   label | bar | value. The bare `ui-meter` base lives in feedback.css; this is
-   the report-document grammar around it so authors stop hand-rolling the grid.
-   The bar NEVER carries the reading alone (WCAG 1.4.1) — `ui-meter__value` is
-   the data of record, and the bar clamps at 100 so an over-target figure still
-   reads correctly in the value text. Collapses to a stack on a narrow screen. */
-.ui-meter__row {
-  align-items: center;
-  display: grid;
-  gap: var(--space-2xs) var(--space-md);
-  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
-  margin-block: var(--space-2xs);
-}
-
-.ui-meter__row .ui-meter {
-  min-inline-size: 8rem;
-}
-
-.ui-meter__label {
-  color: var(--text-soft);
-}
-
-.ui-meter__value {
-  color: var(--text);
-  font-family: var(--mono);
-  font-variant-numeric: tabular-nums;
-  text-align: end;
-}
-
-@media (max-width: 32rem) {
-  .ui-meter__row {
-    grid-template-columns: 1fr;
-  }
-
-  .ui-meter__value {
-    text-align: start;
-  }
-}
-
 /* A chart is NOT a bronto component — it needs scales + data binding, which the
    analytical layer refuses to own. Theme Vega-Lite with `@ponchia/ui/vega`
    (docs/vega.md), or hand-author a token-themed inline `<svg>`, and drop it in a

package/css/site.css

@@ -296,6 +296,16 @@
   }
 }
 
+@media (pointer: coarse) {
+  .ui-sitefooter__links a {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-block-size: max(24px, 1.6rem);
+    min-inline-size: max(24px, 1.6rem);
+  }
+}
+
 /* --- Tags — neutral, wrapping content labels (NOT ui-chip, which is a
    single interactive token). Use a <ul>. --- */