@ponchia/ui 0.4.1 → 0.6.0

package/css/base.css

@@ -12,7 +12,10 @@ html {
   background: var(--bg);
   color: var(--text);
   font-family: var(--sans);
-  font-size: 15px;
+
+  /* = 15px at the 16px default, but rem honours a user's browser font-size
+     preference (which a px root would ignore). */
+  font-size: 0.9375rem;
   line-height: 1.55;
   scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
@@ -24,12 +27,16 @@ body {
   background: var(--bg);
   color: var(--text);
   margin: 0;
-  min-block-size: 100vh;
+  min-block-size: 100dvh;
   position: relative;
 }
 
+:root {
+  --scroll-offset: 6rem;
+}
+
 main [id] {
-  scroll-margin-top: 6rem;
+  scroll-margin-block-start: var(--scroll-offset);
 }
 
 ::selection {
@@ -176,6 +183,7 @@ textarea:focus-visible,
 
 .ui-display {
   font-family: var(--display);
+  font-weight: var(--display-weight);
   text-transform: uppercase;
 }
 
@@ -219,13 +227,10 @@ textarea:focus-visible,
     outline-offset: -2px;
   }
 
-  /* The active tab signals selection only via accent colour/border, both
-     flattened by the forced palette — re-assert it with a system colour
-     so the selected tab stays distinguishable (a11y review L3). */
-  .ui-tab.is-active {
-    border-block-end-color: Highlight;
-    color: Highlight;
-  }
+  /* NB: the active-tab forced-colors re-assert lives in disclosure.css, right
+     after the `.ui-tab.is-active` default — placing it here (an earlier bundle
+     leaf) let the later default win even in forced-colors mode, since @media
+     adds no specificity. (a11y review C10.) */
 
   /* Keyboard focus must never depend on a colour that gets overridden. */
   a:focus-visible,

package/css/command.css

@@ -0,0 +1,97 @@
+/* ==========================================================================
+   command — opt-in command-palette shell (the command-first tier).
+
+   A filter input over a listbox of commands, grouped, with shortcut hints. The
+   CSS shell only; `initCommand` (behaviors) does the filtering + roving focus +
+   selection event. Bronto navigates a DOM-authored list; the HOST owns the
+   action registry, routing, and execution. Open it yourself (e.g. inside a
+   native <dialog> via initDialog) — there is no global Cmd/Ctrl+K. Pairs with
+   the `.ui-shortcut` hint. Not imported by core.css.
+   ========================================================================== */
+
+.ui-command {
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  max-block-size: min(28rem, 70vh);
+  overflow: hidden;
+}
+
+.ui-command__input {
+  background: transparent;
+  border: 0;
+  border-block-end: 1px solid var(--line);
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--text-base);
+  inline-size: 100%;
+  padding: 0.85rem 1rem;
+}
+
+.ui-command__input::placeholder {
+  color: var(--text-dim);
+}
+
+.ui-command__list {
+  list-style: none;
+  margin: 0;
+  overflow-y: auto;
+  padding: var(--space-2xs);
+}
+
+.ui-command__group {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  padding: 0.5rem 0.6rem 0.25rem;
+  text-transform: uppercase;
+}
+
+.ui-command__item {
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  display: flex;
+  gap: 0.6rem;
+  padding: 0.5rem 0.6rem;
+}
+
+/* `display: flex` would otherwise beat the UA `[hidden]` rule, so a
+   filtered-out item stays visible — re-assert none for hidden items/groups. */
+.ui-command__item[hidden],
+.ui-command__group[hidden] {
+  display: none;
+}
+
+.ui-command__item.is-active {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  color: var(--text);
+}
+
+.ui-command__shortcut {
+  color: var(--text-dim);
+  margin-inline-start: auto;
+}
+
+.ui-command__meta {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  margin-inline-start: auto;
+}
+
+.ui-command__empty {
+  color: var(--text-dim);
+  padding: 0.85rem 1rem;
+}
+
+@media (forced-colors: active) {
+  .ui-command__item.is-active {
+    background: Highlight;
+    color: HighlightText;
+  }
+}

package/css/connectors.css

@@ -0,0 +1,110 @@
+/* ==========================================================================
+   connectors — opt-in leader lines between two DOM elements.
+
+   An overlay SVG (`.ui-connector`) sits inside a positioned container and draws
+   a line from one element to another — connect a note to a card, a card to a
+   chart point, two related regions. Bronto styles and (optionally, via
+   `initConnectors`) draws/tracks the line; the geometry helpers in
+   `@ponchia/ui/connectors` compute the path. Not imported by core.css.
+
+   Monochrome by default; the rationed accent and status tones are opt-in.
+   ========================================================================== */
+
+.ui-connector {
+  --connector-color: var(--line-strong);
+
+  color: var(--connector-color);
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ui-connector__path {
+  fill: none;
+  stroke: var(--connector-color);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: var(--connector-width, 1.5);
+  vector-effect: non-scaling-stroke;
+}
+
+.ui-connector__end {
+  fill: var(--connector-color);
+  stroke: none;
+}
+
+.ui-connector--dashed .ui-connector__path {
+  stroke-dasharray: 4 3;
+}
+
+.ui-connector--accent {
+  --connector-color: var(--accent);
+}
+
+.ui-connector--muted {
+  --connector-color: var(--line);
+}
+
+.ui-connector--success {
+  --connector-color: var(--success);
+}
+
+.ui-connector--warning {
+  --connector-color: var(--warning);
+}
+
+.ui-connector--danger {
+  --connector-color: var(--danger);
+}
+
+.ui-connector--info {
+  --connector-color: var(--info);
+}
+
+/* Draw-on: the path strokes in once. Requires pathLength="1" on the path
+   (initConnectors sets it); reduced motion shows the finished line. */
+@media (prefers-reduced-motion: no-preference) {
+  .ui-connector--draw .ui-connector__path {
+    animation: ui-connector-draw 0.6s ease both;
+    stroke-dasharray: 1;
+  }
+}
+
+@keyframes ui-connector-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Forced colours: keep the line visible as a system colour. */
+@media (forced-colors: active) {
+  .ui-connector__path {
+    stroke: CanvasText;
+  }
+
+  .ui-connector__end {
+    fill: CanvasText;
+  }
+}
+
+/* Print: keep the relationship lines and arrowheads in their meaning-carrying
+   colour, and settle any draw-on to a solid line (the draw needs JS to set
+   pathLength, which never runs for a static PDF). */
+@media print {
+  .ui-connector__path,
+  .ui-connector__end {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .ui-connector--draw .ui-connector__path {
+    animation: none;
+    stroke-dasharray: none;
+    stroke-dashoffset: 0;
+  }
+}

package/css/content.css

@@ -13,6 +13,11 @@
   font-size: var(--text-base);
   line-height: 1.7;
 
+  /* Machine-generated Markdown carries long unbreakable tokens (URLs, hashes,
+     code) that otherwise force horizontal page scroll on the prose surface
+     itself. Break them. (css-robustness review C9; the table cell already does.) */
+  overflow-wrap: break-word;
+
   /* Readable measure; the container can still be wider for tables/media. */
   --prose-measure: 72ch;
 }
@@ -75,7 +80,7 @@
 
 /* Anchored headings clear a sticky chrome and expose a dot on hover. */
 .ui-prose :is(h1, h2, h3, h4, h5, h6)[id] {
-  scroll-margin-block-start: 6rem;
+  scroll-margin-block-start: var(--scroll-offset);
 }
 
 /* --- Text-level --- */
@@ -300,6 +305,7 @@
   display: grid;
   font-family: var(--display);
   font-size: var(--text-xl);
+  font-weight: var(--display-weight);
   gap: var(--space-sm);
   line-height: 1.2;
   margin-block: var(--space-xl);

package/css/crosshair.css

@@ -0,0 +1,100 @@
+/* ==========================================================================
+   crosshair — opt-in ruler + readout for reading a value off a plot.
+
+   A pointer-tracking crosshair (vertical/horizontal rules), axis value badges,
+   and a pinned readout chip — the *visual* language of precise reading. Bronto
+   draws the rules and (via `initCrosshair`) tracks the pointer, setting
+   `--crosshair-x/y` (pixels within the plot) and emitting the pointer position
+   as a fraction. It does NOT find the nearest data point or map pixels to data
+   — that needs the host's scales. Not imported by core.css.
+   ========================================================================== */
+
+.ui-crosshair {
+  --crosshair-x: 0;
+  --crosshair-y: 0;
+  --crosshair-color: var(--accent);
+
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity 0.12s ease;
+}
+
+.ui-crosshair.is-active {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-crosshair {
+    transition: none;
+  }
+}
+
+.ui-crosshair--muted {
+  --crosshair-color: var(--line-strong);
+}
+
+.ui-crosshair__line {
+  background: var(--crosshair-color);
+  position: absolute;
+}
+
+.ui-crosshair__line--x {
+  inline-size: 1px;
+  inset-block: 0;
+  inset-inline-start: 0;
+  transform: translateX(var(--crosshair-x));
+}
+
+.ui-crosshair__line--y {
+  block-size: 1px;
+  inset-block-start: 0;
+  inset-inline: 0;
+  transform: translateY(var(--crosshair-y));
+}
+
+/* An axis value chip (host sets its text + which edge it sits on). On the
+   accent fill it uses the tested on-accent text (same as buttons). */
+.ui-crosshair__badge {
+  background: var(--crosshair-color);
+  border-radius: var(--radius-sm);
+  color: var(--button-text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  padding-block: 0.05rem;
+  padding-inline: 0.3rem;
+  position: absolute;
+  white-space: nowrap;
+}
+
+/* The muted crosshair's grey fill can't carry on-accent text — use a neutral chip. */
+.ui-crosshair--muted .ui-crosshair__badge {
+  background: var(--panel);
+  border: 1px solid var(--line-strong);
+  color: var(--text);
+}
+
+/* A pinned readout chip — host fills the content; it follows the crosshair. */
+.ui-readout {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-raised);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  padding-block: 0.2rem;
+  padding-inline: 0.4rem;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(var(--crosshair-x), var(--crosshair-y));
+}
+
+@media (forced-colors: active) {
+  .ui-crosshair__line {
+    background: CanvasText;
+  }
+}

package/css/dataviz.css

@@ -30,7 +30,11 @@
   --chart-div-6: oklch(66% 0.13 55deg);
   --chart-div-7: oklch(56% 0.15 45deg);
 
-  /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1). */
+  /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1).
+     Series 1 (the accent) is intentionally `none`: absence-of-pattern IS its
+     redundant channel. The colour palette is CVD-safe on its own (gated by
+     check:charts), so a colour+pattern chart stays distinguishable; a
+     pattern-ONLY chart must still give series 1 a fill or a labelled legend. */
   --chart-pattern-size: 8px;
   --chart-pattern-ink: rgb(0 0 0 / 0.34);
   --chart-pattern-1: none;

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);
 }
 
@@ -290,18 +308,32 @@
   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` makes the
+   aria-disabled item genuinely inert (it was clickable before — C5). */
+.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-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 +461,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;
@@ -370,3 +377,53 @@
     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;
+  }
+
+  .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;
+  }
+}