@ponchia/ui 0.5.0 → 0.6.3

package/css/diff.css

@@ -0,0 +1,153 @@
+/* ==========================================================================
+   diff — opt-in line/row change-review grammar.
+
+   The review counterpart to the report layer: marks call out a sentence, diff
+   calls out what CHANGED. A CSS-grid gutter grammar for added / removed /
+   context rows with a redundant +/− sign glyph (so the meaning survives forced
+   colours and print, where the tint is dropped), tone tints, and tabular
+   line-number gutters. Not imported by core.css.
+
+   Boundary: the HOST supplies pre-classified rows — it owns tokenizing, hunk
+   computation, and row alignment; Bronto only paints. The moment this parsed or
+   aligned source it would cross the line that deleted the bar renderer in
+   0.6.0. Pairs with `.ui-compare--2up` and the `.ui-src` provenance pill.
+
+   Unified (default): rows are direct children of `.ui-diff` (or a
+   `.ui-diff__hunk` rowgroup); columns are [old-ln] [new-ln] [code].
+   Split: `.ui-diff--split` holds two `.ui-diff__pane` columns, each [ln] [code];
+   the host emits the matching rows per side.
+
+   Long lines wrap (no horizontal scroll) so the surface prints cleanly; line
+   numbers pin to the top of a wrapped line. Line numbers are `user-select:none`
+   and should be `aria-hidden` in markup — the `__code` carries the content.
+   ========================================================================== */
+
+.ui-diff {
+  --diff-add-bg: color-mix(in srgb, var(--success) 14%, transparent);
+  --diff-remove-bg: color-mix(in srgb, var(--danger) 14%, transparent);
+  --diff-add-ink: var(--success);
+  --diff-remove-ink: var(--danger);
+
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  display: grid;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  grid-template-columns: auto auto minmax(0, 1fr);
+  line-height: 1.6;
+  overflow: hidden;
+}
+
+/* Split view: two independent panes side by side. Each pane is its own
+   [ln] [code] grid; the host aligns rows across panes (its job). */
+.ui-diff--split {
+  grid-template-columns: 1fr 1fr;
+}
+
+.ui-diff__pane {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+.ui-diff--split > .ui-diff__pane + .ui-diff__pane {
+  border-inline-start: 1px solid var(--line);
+}
+
+/* A hunk groups rows under an optional header without breaking the grid:
+   display:contents keeps its rows as the grid's own items. */
+.ui-diff__hunk {
+  display: contents;
+}
+
+/* Rows are layout-transparent — their cells are the real grid items, so the
+   tone tint paints on the cells (a display:contents row generates no box, and
+   the custom properties still inherit down the DOM to the cells). */
+.ui-diff__row {
+  display: contents;
+}
+
+/* The hunk / file header spans every column. */
+.ui-diff__head {
+  background: var(--surface-2);
+  color: var(--text-dim);
+  grid-column: 1 / -1;
+  padding: var(--space-2xs) var(--space-sm);
+}
+
+.ui-diff__ln {
+  align-self: start;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  padding: 0 var(--space-sm);
+  text-align: end;
+  /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit still requires the prefixed slot for this selection opt-out. */
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.ui-diff__code {
+  overflow-wrap: anywhere;
+  padding: 0 var(--space-sm);
+  white-space: pre-wrap;
+}
+
+/* The redundant sign glyph in the code gutter — a non-colour channel, so add /
+   remove still read once the tint is dropped (forced colours, print economy).
+   Context defaults to a non-breaking space so the code column stays aligned. */
+.ui-diff__code::before {
+  color: var(--diff-tint, var(--text-dim));
+  content: var(--diff-sign, '\00a0');
+  display: inline-block;
+  inline-size: 1ch;
+  margin-inline-end: var(--space-2xs);
+  /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit still requires the prefixed slot for this selection opt-out. */
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.ui-diff__row--add {
+  --diff-sign: '+';
+  --diff-tint: var(--diff-add-ink);
+}
+
+.ui-diff__row--remove {
+  --diff-sign: '\2212'; /* − U+2212 minus sign (decorative; not copied) */
+  --diff-tint: var(--diff-remove-ink);
+}
+
+.ui-diff__row--context {
+  --diff-sign: '\00a0';
+}
+
+.ui-diff__row--add > .ui-diff__ln,
+.ui-diff__row--add > .ui-diff__code {
+  background: var(--diff-add-bg);
+}
+
+.ui-diff__row--remove > .ui-diff__ln,
+.ui-diff__row--remove > .ui-diff__code {
+  background: var(--diff-remove-bg);
+}
+
+/* Forced colours drop the tint — the +/− glyph already carries the channel; add
+   an inline-start border on the changed code cell as a second, colour-free cue. */
+@media (forced-colors: active) {
+  .ui-diff__row--add > .ui-diff__code,
+  .ui-diff__row--remove > .ui-diff__code {
+    border-inline-start: 2px solid currentColor;
+  }
+}
+
+/* Print: the tints are meaning-carrying backgrounds, so force them through the
+   print "economy" default that would otherwise drop them. */
+@media print {
+  .ui-diff__head,
+  .ui-diff__row--add > .ui-diff__ln,
+  .ui-diff__row--add > .ui-diff__code,
+  .ui-diff__row--remove > .ui-diff__ln,
+  .ui-diff__row--remove > .ui-diff__code {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/disclosure.css

@@ -44,11 +44,29 @@
     border-color var(--duration-fast) var(--ease-standard);
 }
 
+/* Coarse-pointer tap-target floor (~2.9rem ≈ 44px), matching inputs/sitenav —
+   tabs are easy to mis-tap on touch (WCAG 2.5.8 — C24). */
+@media (pointer: coarse) {
+  .ui-tab {
+    min-block-size: 2.9rem;
+  }
+}
+
 .ui-tab.is-active {
   border-block-end-color: var(--accent);
   color: var(--accent-text);
 }
 
+/* Forced-colors re-assert MUST sit after the default above (same specificity,
+   @media adds none) or the accent default wins and the selected tab loses its
+   only cue. Moved here from base.css, an earlier bundle leaf. (a11y review C10.) */
+@media (forced-colors: active) {
+  .ui-tab.is-active {
+    border-block-end-color: Highlight;
+    color: Highlight;
+  }
+}
+
 .ui-tab:focus-visible {
   /* An inset box, deliberately distinct from the .is-active bottom-border
      so focus ≠ selection for low-vision keyboard users: the global
@@ -199,7 +217,7 @@
 
 .ui-segmented__option:has(input:focus-visible) {
   outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline-offset: -2px;
 }
 
 @media (hover: hover) {
@@ -240,7 +258,7 @@
   inline-size: 0.22rem;
 }
 
-.ui-breadcrumb__item[aria-current] {
+.ui-breadcrumb__item[aria-current]:not([aria-current='false']) {
   color: var(--text);
 }
 
@@ -285,23 +303,51 @@
     color var(--duration-fast) var(--ease-standard);
 }
 
-.ui-pagination__item.is-active {
+/* Active page keys on BOTH `.is-active` and `[aria-current]` — usage.md calls
+   aria-current "the framework rule", and every nav sibling (breadcrumb, sitenav,
+   app-nav) highlights on it, so a pagination author who sets only aria-current
+   must still get the highlight. (component audit C17.) */
+.ui-pagination__item.is-active,
+.ui-pagination__item[aria-current]:not([aria-current='false']) {
   border-color: var(--accent);
   color: var(--accent-text);
 }
 
-.ui-pagination__item[aria-disabled='true'] {
+/* Disabled covers BOTH the native `<button disabled>` the demo ships and the
+   `aria-disabled="true"` ARIA path. `pointer-events: none` blocks POINTER
+   activation only — a focused aria-disabled item still fires on Enter/Space
+   (CSS can't intercept keys). For a fully-inert control prefer native
+   `<button disabled>`, run `initDisabledGuard()` (intercepts Enter/Space), or
+   pair aria-disabled with `tabindex="-1"`. See docs/usage.md "Disabled vs
+   aria-disabled". (audit C4.) */
+.ui-pagination__item[aria-disabled='true'],
+.ui-pagination__item:disabled {
   cursor: not-allowed;
   opacity: 0.4;
+  pointer-events: none;
 }
 
 @media (hover: hover) {
-  .ui-pagination__item:not(.is-active, [aria-disabled='true']):hover {
+  .ui-pagination__item:not(
+      .is-active,
+      [aria-current]:not([aria-current='false']),
+      [aria-disabled='true'],
+      :disabled
+    ):hover {
     border-color: var(--line-strong);
     color: var(--text);
   }
 }
 
+/* Coarse-pointer tap-target floor, matching inputs/sitenav (~2.9rem ≈ 44px) —
+   pagination controls are easy to mis-tap on touch (WCAG 2.5.8 — C24). */
+@media (pointer: coarse) {
+  .ui-pagination__item {
+    min-block-size: 2.9rem;
+    min-inline-size: 2.9rem;
+  }
+}
+
 /* --- Avatar — sharp, monospace initials or image --- */
 
 .ui-avatar {
@@ -429,8 +475,8 @@
 .ui-carousel__prev::before,
 .ui-carousel__next::before {
   block-size: 0.5rem;
-  border-block-start: 1.5px solid currentColor;
-  border-inline-end: 1.5px solid currentColor;
+  border-block-start: 1.5px solid currentcolor;
+  border-inline-end: 1.5px solid currentcolor;
   content: '';
   inline-size: 0.5rem;
 }

package/css/dots.css

@@ -281,6 +281,13 @@
   transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
 }
 
+/* The comet expects exactly 8 `<i>`; a 9th+ child has no rotation rule and
+   would pile up dead-centre. Hide the overflow so extra children fail safe
+   rather than rendering a stray static dot (C26). */
+.ui-dotspinner i:nth-child(n + 9) {
+  display: none;
+}
+
 .ui-dotspinner--sm {
   --ds-box: 1.05rem;
   --ds-dot: 0.18rem;
@@ -341,14 +348,20 @@
   animation-delay: 0.63s;
 }
 
-/* Matrix-reveal wrapper — content wipes in left→right on .is-in. */
-.ui-matrix {
-  clip-path: inset(0 100% 0 0);
-  transition: clip-path var(--duration-slow) var(--ease-out);
-}
+/* Matrix-reveal wrapper — content wipes in left→right on .is-in. Gate the
+   clipped from-state on `scripting: enabled`: with JS off, `.is-in` is never
+   toggled, so without the gate the content stays permanently clipped away and
+   invisible to every no-JS/static/print reader. Same graceful default as
+   `.ui-reveal`. (component audit C12.) */
+@media (scripting: enabled) {
+  .ui-matrix {
+    clip-path: inset(0 100% 0 0);
+    transition: clip-path var(--duration-slow) var(--ease-out);
+  }
 
-.ui-matrix.is-in {
-  clip-path: inset(0 0 0 0);
+  .ui-matrix.is-in {
+    clip-path: inset(0 0 0 0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -370,3 +383,77 @@
     clip-path: none;
   }
 }
+
+/* Forced-colors (Windows HCM): semantic status dots and hot/accent matrix
+   cells encode meaning purely via background-color, which collapses to one
+   system colour under HCM (WCAG 1.4.1). Opt out of forced-color remapping and
+   apply four visually-distinct system colours so the signals stay
+   differentiable. */
+@media (forced-colors: active) {
+  .ui-dot--success {
+    forced-color-adjust: none;
+    background: LinkText;
+  }
+
+  .ui-dot--warning {
+    forced-color-adjust: none;
+    background: Mark;
+  }
+
+  .ui-dot--danger {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+
+  .ui-dot--info {
+    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. (audit C31.) */
+  .ui-dot--accent,
+  .ui-dot--live {
+    forced-color-adjust: none;
+    background: LinkText;
+  }
+
+  .ui-dot--live::after {
+    border-color: LinkText;
+  }
+
+  /* The masked one-node icon paints `background: currentcolor` through an SVG
+     mask. Under HCM, forced-color-adjust:auto can drop the mask fill so the
+     glyph vanishes (white-on-white) — yet .ui-icon is the recommended
+     icon-at-scale path AND backs .ui-legend__symbol, and the print block
+     already special-cases it. Opt out and pin the fill to the system text
+     colour so the glyph stays visible. (audit C1.) */
+  .ui-icon {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
+  .ui-dotmatrix__cell--hot {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+
+  .ui-dotmatrix__cell--accent {
+    forced-color-adjust: none;
+    background: LinkText;
+  }
+}
+
+/* Print: the dot surfaces carry data (heatmap cells, the segmented meter, the
+   status dot, the masked glyph), so their painted fills must survive the print
+   "economy" default that drops backgrounds. */
+@media print {
+  .ui-dotmatrix__cell,
+  .ui-dotbar i,
+  .ui-dot,
+  .ui-icon {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/feedback.css

@@ -4,6 +4,19 @@
    never a fill. Nothing-flat, hairline, sharp.
    ========================================================================== */
 
+/* `--value` drives the progress/meter fill width: a UNITLESS number 0–100,
+   never a percentage. Registering it as `<number>` makes that contract real —
+   a stray `--value: 50%` is invalid against the typed syntax and falls back to
+   the initial `0` (empty bar) instead of poisoning the `clamp()` and painting a
+   FULL bar (the old failure mode). It inherits so the value set on the host
+   `.ui-meter` / `.ui-progress` cascades to the inner `__fill`/`__bar`.
+   (component audit C8.) */
+@property --value {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
 /* --- Alert / callout — inline, dismissible-compatible --- */
 
 .ui-alert {
@@ -50,7 +63,7 @@
   margin: 0;
 }
 
-.ui-alert__dismiss {
+.ui-alert__close {
   background: transparent;
   border: 0;
   color: var(--text-dim);
@@ -62,7 +75,7 @@
   padding: 0.1rem 0.3rem;
 }
 
-.ui-alert:has(.ui-alert__dismiss) {
+.ui-alert:has(.ui-alert__close) {
   grid-template-columns: auto 1fr auto;
 }
 
@@ -107,7 +120,7 @@
 }
 
 @media (hover: hover) {
-  .ui-alert__dismiss:hover {
+  .ui-alert__close:hover {
     color: var(--text);
   }
 }
@@ -212,8 +225,27 @@
   line-height: 1;
 }
 
-.ui-toast__close:hover {
-  color: var(--text);
+/* Touch: enlarge the dismiss/close hit areas to the project's coarse-pointer
+   tap-target floor (2.9rem, as in primitives.css / forms.css) without changing
+   the desktop glyph size. The box is centred so the glyph stays put. */
+@media (pointer: coarse) {
+  .ui-alert__close,
+  .ui-toast__close {
+    display: inline-grid;
+    place-items: center;
+    min-block-size: 2.9rem;
+    min-inline-size: 2.9rem;
+  }
+
+  .ui-alert__close {
+    padding: 0;
+  }
+}
+
+@media (hover: hover) {
+  .ui-toast__close:hover {
+    color: var(--text);
+  }
 }
 
 .ui-toast--accent::before {
@@ -420,6 +452,7 @@
 .ui-progress__bar {
   background: var(--accent);
   block-size: 100%;
+  display: block;
   transition: inline-size var(--duration-base) var(--ease-out);
   inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
 }
@@ -433,6 +466,18 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-progress--indeterminate .ui-progress__bar {
     animation-duration: 0.01ms;
+
+    /* A still, solid, full-width bar reads as "100% complete" — the opposite of
+       indeterminate. Fall back to a static diagonal hatch that fills the track
+       (so it's clearly active) but doesn't read as done. AT is covered via
+       aria-busy. (audit C26.) */
+    background: repeating-linear-gradient(
+      -45deg,
+      var(--accent) 0,
+      var(--accent) 0.3rem,
+      color-mix(in srgb, var(--accent) 35%, transparent) 0.3rem,
+      color-mix(in srgb, var(--accent) 35%, transparent) 0.6rem
+    );
     inset-inline-start: 0;
     inline-size: 100%;
   }
@@ -447,7 +492,9 @@
    (task progress, can be indeterminate), a meter shows a measured static
    value for data display (coverage, capacity, a KPI against a target).
    Drive the fill with the same --value knob as progress; tone the fill by
-   threshold. Author role="meter" + aria-valuenow/min/max for AT. --- */
+   threshold. Author role="meter" + aria-valuenow/min/max for AT — but role=meter
+   has uneven AT support, so keep the visible .ui-meter__label/__value (they are
+   the real channel, not just decoration). (component audit C25.) --- */
 
 .ui-meter {
   background: var(--panel-soft);
@@ -465,6 +512,7 @@
 .ui-meter__fill {
   background: var(--text-dim);
   block-size: 100%;
+  display: block;
   transition: inline-size var(--duration-base) var(--ease-out);
   inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
 }
@@ -485,6 +533,10 @@
   background: var(--danger);
 }
 
+.ui-meter--info .ui-meter__fill {
+  background: var(--info);
+}
+
 /* --- 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. --- */
@@ -509,7 +561,12 @@
   font-size: var(--text-xs);
   gap: 0.5rem;
   letter-spacing: var(--tracking-wide);
-  min-inline-size: max-content;
+
+  /* Prefer the natural one-line width, but never wider than the container: a
+     long step label at `max-content` couldn't shrink and overflowed the page on
+     narrow viewports (tabs scroll; steps didn't). Capping at 100% lets an
+     over-long label wrap instead of overflowing. (component audit C18.) */
+  min-inline-size: min(100%, max-content);
   text-transform: uppercase;
 }
 
@@ -553,3 +610,36 @@
   border-color: var(--accent);
   color: var(--button-text);
 }
+
+/* Print: the progress/meter fill is the data (a measured proportion), so its
+   painted background must survive the print "economy" default. The fill tokens
+   are re-pointed to print-legible inks by the global print remap in base.css. */
+@media print {
+  .ui-progress__bar,
+  .ui-meter__fill {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+
+/* Forced-colors flattens the fill's tone to the system palette and can erase it
+   against the track, dropping the only visual cue of the measured proportion.
+   Re-assert a system colour so the bar stays visible; the tone's *semantic* is
+   carried by the author-written label beside it, not the colour. (a11y C10.)
+   The toned `.ui-meter--TONE .ui-meter__fill` rules are (0,2,0); the bare
+   `.ui-meter__fill` reset is only (0,1,0), so it lost — a toned fill stayed
+   `var(--TONE)` and was forced to black-on-black (component-audit C3). Match the
+   tone specificity here (and set `forced-color-adjust: none`) so every meter,
+   toned or not, paints `Highlight`, mirroring the `.ui-dot` precedent. */
+@media (forced-colors: active) {
+  .ui-progress__bar,
+  .ui-meter__fill,
+  .ui-meter--accent .ui-meter__fill,
+  .ui-meter--success .ui-meter__fill,
+  .ui-meter--warning .ui-meter__fill,
+  .ui-meter--danger .ui-meter__fill,
+  .ui-meter--info .ui-meter__fill {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+}