@ponchia/ui 0.4.1 → 0.5.0

package/css/annotations.css

@@ -0,0 +1,292 @@
+/* ==========================================================================
+   annotations — opt-in SVG callouts for analytical figures.
+
+   Bronto-native take on the subject / connector / note grammar: SVG-first,
+   no runtime dependency, no authoring handles. Import only beside charts,
+   reports, or generated figures that need explicit callouts.
+   ========================================================================== */
+
+.ui-annotation {
+  --annotation-color: var(--accent);
+  --annotation-line: var(--line-strong);
+  --annotation-note-bg: var(--panel);
+  --annotation-subject-fill: color-mix(in srgb, var(--annotation-color) 8%, transparent);
+  --annotation-stroke-width: 1.5;
+
+  color: var(--annotation-color);
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  overflow: visible;
+}
+
+.ui-annotation--muted {
+  --annotation-color: var(--text-dim);
+  --annotation-line: var(--line);
+}
+
+.ui-annotation--accent {
+  --annotation-color: var(--accent);
+  --annotation-line: var(--line-strong);
+}
+
+.ui-annotation--success {
+  --annotation-color: var(--success);
+}
+
+.ui-annotation--warning {
+  --annotation-color: var(--warning);
+}
+
+.ui-annotation--danger {
+  --annotation-color: var(--danger);
+}
+
+.ui-annotation--info {
+  --annotation-color: var(--info);
+}
+
+.ui-annotation__subject,
+.ui-annotation__connector,
+.ui-annotation__connector-end,
+.ui-annotation__note-line,
+.ui-annotation__badge {
+  vector-effect: non-scaling-stroke;
+}
+
+.ui-annotation__subject {
+  fill: var(--annotation-subject-fill);
+  stroke: var(--annotation-color);
+  stroke-linejoin: miter;
+  stroke-width: var(--annotation-stroke-width);
+}
+
+.ui-annotation__connector,
+.ui-annotation__note-line {
+  fill: none;
+  stroke: var(--annotation-line);
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-opacity: 0.86;
+  stroke-width: var(--annotation-stroke-width);
+}
+
+.ui-annotation__connector-end {
+  fill: var(--annotation-line);
+  stroke: none;
+}
+
+.ui-annotation__note {
+  color: var(--text-soft);
+  fill: currentColor;
+}
+
+.ui-annotation__note > rect {
+  fill: var(--annotation-note-bg);
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.ui-annotation__title {
+  fill: var(--text);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0;
+  paint-order: stroke fill;
+  stroke: var(--annotation-note-bg);
+  stroke-linejoin: round;
+  stroke-width: 3;
+  text-transform: uppercase;
+}
+
+.ui-annotation__label {
+  fill: var(--text-soft);
+  font-size: var(--text-xs);
+  letter-spacing: 0;
+  paint-order: stroke fill;
+  stroke: var(--annotation-note-bg);
+  stroke-linejoin: round;
+  stroke-width: 3;
+}
+
+.ui-annotation__badge {
+  fill: var(--annotation-note-bg);
+  stroke: var(--annotation-color);
+  stroke-width: var(--annotation-stroke-width);
+}
+
+.ui-annotation--label .ui-annotation__subject,
+.ui-annotation--badge .ui-annotation__connector,
+.ui-annotation--badge .ui-annotation__note-line {
+  display: none;
+}
+
+.ui-annotation--callout .ui-annotation__note-line,
+.ui-annotation--elbow .ui-annotation__note-line,
+.ui-annotation--curve .ui-annotation__note-line {
+  stroke: var(--annotation-color);
+}
+
+.ui-annotation--elbow .ui-annotation__connector {
+  stroke-linejoin: bevel;
+}
+
+.ui-annotation--curve .ui-annotation__connector {
+  stroke-linecap: round;
+}
+
+.ui-annotation--circle .ui-annotation__subject {
+  stroke-dasharray: 0.01 4;
+  stroke-linecap: round;
+}
+
+.ui-annotation--rect .ui-annotation__subject {
+  stroke-dasharray: 5 3;
+}
+
+.ui-annotation--threshold .ui-annotation__subject {
+  fill: none;
+  stroke: var(--annotation-color);
+  stroke-dasharray: 6 4;
+}
+
+.ui-annotation--badge .ui-annotation__subject {
+  fill: var(--annotation-color);
+}
+
+.ui-annotation--badge .ui-annotation__badge {
+  fill: var(--annotation-color);
+}
+
+.ui-annotation--badge .ui-annotation__title,
+.ui-annotation--badge .ui-annotation__label {
+  fill: var(--button-text);
+  stroke: none;
+}
+
+.ui-annotation--bracket .ui-annotation__subject,
+.ui-annotation--compare .ui-annotation__subject,
+.ui-annotation--axis .ui-annotation__subject,
+.ui-annotation--timeline .ui-annotation__subject {
+  fill: none;
+  stroke: var(--annotation-color);
+  stroke-linecap: square;
+}
+
+.ui-annotation--band .ui-annotation__subject {
+  fill: var(--annotation-subject-fill);
+  stroke: var(--annotation-color);
+  stroke-dasharray: 5 3;
+}
+
+.ui-annotation--slope .ui-annotation__subject {
+  fill: none;
+  stroke: var(--annotation-color);
+  stroke-linecap: round;
+}
+
+.ui-annotation--cluster .ui-annotation__subject {
+  fill: var(--annotation-subject-fill);
+  stroke: var(--annotation-color);
+  stroke-dasharray: 0.01 5;
+  stroke-linecap: round;
+}
+
+.ui-annotation--evidence .ui-annotation__badge {
+  fill: var(--annotation-note-bg);
+  stroke: var(--annotation-color);
+}
+
+.ui-annotation--evidence .ui-annotation__title {
+  fill: var(--annotation-color);
+  stroke: none;
+}
+
+.ui-annotation--focus {
+  --annotation-stroke-width: 2;
+  --annotation-subject-fill: color-mix(in srgb, var(--annotation-color) 14%, transparent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .ui-annotation--draw .ui-annotation__connector,
+  .ui-annotation--draw .ui-annotation__note-line {
+    animation: uiAnnotationDraw var(--duration-slow, 600ms) var(--ease-out, ease-out) both;
+    animation-delay: var(--annotation-delay, 0ms);
+    stroke-dasharray: var(--annotation-dash, 360);
+    stroke-dashoffset: var(--annotation-dash, 360);
+  }
+
+  .ui-annotation--draw .ui-annotation__subject,
+  .ui-annotation--draw .ui-annotation__badge {
+    animation: uiAnnotationSubjectReveal var(--duration-slow, 600ms) var(--ease-out, ease-out) both;
+    animation-delay: var(--annotation-delay, 0ms);
+  }
+
+  .ui-annotation--reveal .ui-annotation__note {
+    animation: uiAnnotationReveal var(--duration-slow, 600ms) var(--ease-out, ease-out) both;
+    animation-delay: var(--annotation-delay, 0ms);
+  }
+
+  .ui-annotation--pulse .ui-annotation__subject,
+  .ui-annotation--pulse .ui-annotation__badge {
+    animation: uiAnnotationPulse 1.6s var(--ease-out, ease-out) infinite;
+    animation-delay: var(--annotation-delay, 0ms);
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+}
+
+@keyframes uiAnnotationDraw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes uiAnnotationSubjectReveal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes uiAnnotationReveal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes uiAnnotationPulse {
+  50% {
+    opacity: 0.62;
+    transform: scale(1.06);
+  }
+}
+
+@media print {
+  .ui-annotation__subject,
+  .ui-annotation__connector,
+  .ui-annotation__note,
+  .ui-annotation__note-line,
+  .ui-annotation__badge {
+    animation: none !important;
+    opacity: 1;
+    stroke-dashoffset: 0;
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ui-annotation {
+    --annotation-color: CanvasText;
+    --annotation-line: CanvasText;
+    --annotation-note-bg: Canvas;
+    --annotation-subject-fill: Canvas;
+  }
+}

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,93 @@
+/* ==========================================================================
+   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;
+  }
+}

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/feedback.css

@@ -27,6 +27,9 @@
   block-size: 0.5rem;
   margin-block-start: 0.32rem;
   inline-size: 0.5rem;
+
+  /* Keep the tone dot when printing (matches the legend swatch). */
+  print-color-adjust: exact;
 }
 
 .ui-alert > * {
@@ -174,6 +177,9 @@
   block-size: 0.5rem;
   margin-block-start: 0.3rem;
   inline-size: 0.5rem;
+
+  /* Keep the tone dot when printing (matches the legend swatch). */
+  print-color-adjust: exact;
 }
 
 .ui-toast__title {
@@ -230,6 +236,51 @@
   background: var(--info);
 }
 
+/* Forced-colors (Windows HCM): system colours override the rationed tone
+   colour on the dot + border, so all tones would collapse to one appearance
+   (WCAG 1.4.1 — colour as the sole channel). Carry the tone as a distinct
+   glyph instead; rendered as text it survives HCM as CanvasText. The glyph is
+   inherited via --tone-glyph so one rule covers both alert and toast. */
+@media (forced-colors: active) {
+  .ui-alert::before,
+  .ui-toast::before {
+    background: none;
+    border-radius: 0;
+    content: var(--tone-glyph, '\2022'); /* • neutral default */
+    block-size: auto;
+    inline-size: auto;
+    margin-block-start: 0;
+    font-family: var(--mono);
+    font-weight: 700;
+    line-height: 1.1;
+  }
+
+  .ui-alert--accent,
+  .ui-toast--accent {
+    --tone-glyph: '\25C6'; /* ◆ */
+  }
+
+  .ui-alert--success,
+  .ui-toast--success {
+    --tone-glyph: '\2713'; /* ✓ */
+  }
+
+  .ui-alert--warning,
+  .ui-toast--warning {
+    --tone-glyph: '\0021'; /* ! */
+  }
+
+  .ui-alert--danger,
+  .ui-toast--danger {
+    --tone-glyph: '\2715'; /* ✕ */
+  }
+
+  .ui-alert--info,
+  .ui-toast--info {
+    --tone-glyph: '\69'; /* i */
+  }
+}
+
 /* --- Tooltip — CSS-only, hover/focus, no JS --- */
 
 .ui-tooltip {

package/css/fonts.css

@@ -2,10 +2,14 @@
    @ponchia/ui — Doto webfont (dot-matrix display face)
 
    URLs are relative to this file. When the package is consumed through a
-   bundler (Vite/astro/webpack) the `../fonts/*.ttf` references are rewritten
+   bundler (Vite/astro/webpack) the `../fonts/*.woff2` references are rewritten
    and the files emitted automatically. When served statically, ship the
    package's `fonts/` directory next to `css/` and it resolves as-is.
 
+   Shipped as woff2 only (Brotli-compressed) — ~5.7 kB per weight vs ~137 kB
+   uncompressed TTF. woff2 is supported by the whole browser floor (ADR-0002:
+   Chrome 125 / Safari 18 / Firefox 129), so no TTF fallback is carried.
+
    This file is optional: it is bundled into core.css/index.css, but a
    consumer that hosts Doto itself (or overrides `--display` / `--dot-font`)
    can import the rest of the framework without it.
@@ -16,7 +20,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('../fonts/doto-400.ttf') format('truetype');
+  src: url('../fonts/doto-400.woff2') format('woff2');
 }
 
 @font-face {
@@ -24,7 +28,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url('../fonts/doto-500.ttf') format('truetype');
+  src: url('../fonts/doto-500.woff2') format('woff2');
 }
 
 @font-face {
@@ -32,7 +36,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url('../fonts/doto-600.ttf') format('truetype');
+  src: url('../fonts/doto-600.woff2') format('woff2');
 }
 
 @font-face {
@@ -40,7 +44,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url('../fonts/doto-700.ttf') format('truetype');
+  src: url('../fonts/doto-700.woff2') format('woff2');
 }
 
 @font-face {
@@ -48,7 +52,7 @@
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src: url('../fonts/doto-800.ttf') format('truetype');
+  src: url('../fonts/doto-800.woff2') format('woff2');
 }
 
 @font-face {
@@ -56,7 +60,7 @@
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: url('../fonts/doto-900.ttf') format('truetype');
+  src: url('../fonts/doto-900.woff2') format('woff2');
 }
 
 /* Data-saver: never *use* Doto, so the browser never fetches it. The