@ponchia/ui 0.4.0 → 0.5.0

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

@@ -128,6 +128,35 @@
   margin-block-start: 0;
 }
 
+/* Auto-height open/close for the native <details> accordion: animate the
+   content box from 0 to its intrinsic height. `interpolate-size:
+   allow-keywords` makes `auto` interpolable; `::details-content` exposes
+   the otherwise-anonymous content box; `content-visibility ... allow-discrete`
+   keeps the content laid out (and the dot marker's own rotation in sync)
+   through the close. Strict progressive enhancement — gated on
+   `@supports selector(::details-content)` (Chrome 131+/Safari 18.4+; Firefox
+   not yet) so engines without it just snap open/closed exactly as before —
+   and on `prefers-reduced-motion: no-preference`. */
+@supports selector(::details-content) {
+  @media (prefers-reduced-motion: no-preference) {
+    .ui-accordion {
+      interpolate-size: allow-keywords;
+    }
+
+    .ui-accordion__item::details-content {
+      block-size: 0;
+      overflow: hidden;
+      transition:
+        block-size var(--duration-base) var(--ease-out),
+        content-visibility var(--duration-base) allow-discrete;
+    }
+
+    .ui-accordion__item[open]::details-content {
+      block-size: auto;
+    }
+  }
+}
+
 /* --- Segmented control — CSS-only radio group --- */
 
 .ui-segmented {

package/css/dots.css

@@ -129,6 +129,8 @@
   block-size: var(--icon-size, 1em);
   background: currentcolor;
   vertical-align: -0.125em;
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefixed mask property. */
+  -webkit-mask: var(--icon-mask) center / contain no-repeat;
   mask: var(--icon-mask) center / contain no-repeat;
 }
 

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 > * {
@@ -135,6 +138,14 @@
 .ui-toast {
   align-items: flex-start;
   animation: uiToastIn var(--duration-base) var(--ease-spring) both;
+
+  /* Exit is a transition (not a keyframe): the behavior adds `.is-leaving`
+     and removes the node when this transition ends. Entrance stays the
+     keyframe above — the transition only fires on the `.is-leaving`
+     property change, never on insert. */
+  transition:
+    opacity var(--duration-base) var(--ease-out),
+    transform var(--duration-base) var(--ease-out);
   background: var(--panel-strong);
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-md);
@@ -149,6 +160,15 @@
   inline-size: 100%;
 }
 
+/* Leaving — fade + drop out. `animation: none` releases the entrance
+   keyframe's `both` fill (a filling animation outranks normal property
+   declarations, so without this the exit values would be ignored). */
+.ui-toast.is-leaving {
+  animation: none;
+  opacity: 0;
+  transform: translateY(6px) scale(0.98);
+}
+
 .ui-toast::before {
   background: var(--text-dim);
   border-radius: 50%;
@@ -157,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 {
@@ -213,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 {
@@ -302,6 +370,41 @@
   display: none;
 }
 
+/* Enter AND exit motion — zero JS, the same `@starting-style` +
+   `transition-behavior: allow-discrete` recipe as the modal (overlay.css).
+   It covers BOTH paths initPopover can take: the native `[popover]` top
+   layer (where the `overlay` transition keeps the panel painted while it
+   animates out before leaving the layer) and the `.is-open` fallback (a
+   regular element, so `display allow-discrete` alone carries the exit).
+   Gated on `prefers-reduced-motion: no-preference`, so reduced-motion users
+   keep the instant open/close they had before. JS positions the panel via
+   `top`/`left`, so the entrance `transform` is free to animate. */
+@media (prefers-reduced-motion: no-preference) {
+  .ui-popover {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+    transition:
+      opacity var(--duration-fast) var(--ease-out),
+      transform var(--duration-fast) var(--ease-out),
+      overlay var(--duration-fast) allow-discrete,
+      display var(--duration-fast) allow-discrete;
+  }
+
+  .ui-popover.is-open,
+  .ui-popover[popover]:popover-open {
+    opacity: 1;
+    transform: none;
+  }
+
+  @starting-style {
+    .ui-popover.is-open,
+    .ui-popover[popover]:popover-open {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.98);
+    }
+  }
+}
+
 /* --- Progress — linear, determinate or indeterminate --- */
 
 .ui-progress {
@@ -336,6 +439,7 @@
 
   .ui-toast {
     animation: none;
+    transition: none;
   }
 }
 

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

package/css/generated.css

@@ -0,0 +1,117 @@
+/* ==========================================================================
+   generated — opt-in trust surfaces for AI / system-generated content.
+
+   AI interfaces are becoming common, but most UI systems ship chat bubbles or
+   nothing. Bronto is not a chat framework — it owns the *trust* surfaces around
+   generated content: a marked region, an origin label, and quiet collapsible
+   reasoning / tool-call logs. Pairs with the source/citation layer
+   (css/sources.css). The host owns model metadata, reasoning-visibility policy,
+   tool execution, traces, redaction, and safety. Not imported by core.css.
+   ========================================================================== */
+
+/* --- Generated region — a marked wrapper for machine-authored content. --- */
+.ui-generated {
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--accent);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: 0.85rem 1rem;
+  print-color-adjust: exact;
+}
+
+.ui-generated__label {
+  align-items: center;
+  color: var(--text-dim);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.4rem;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+/* --- Origin label — "AI assisted" / "model output" / "human reviewed". --- */
+.ui-origin-label {
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.35rem;
+  letter-spacing: var(--tracking-wide);
+  padding: 0.08rem 0.55rem;
+  text-transform: uppercase;
+}
+
+.ui-origin-label--ai {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+/* --- Reasoning — a quiet, collapsible "how this was produced" block. --- */
+.ui-reasoning {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+}
+
+.ui-reasoning > summary {
+  color: var(--text-soft);
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-reasoning__body {
+  margin-block-start: var(--space-xs);
+}
+
+/* --- Tool log — a quiet, document-grade record of tool invocations. --- */
+.ui-tool-log {
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.ui-tool-call {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
+.ui-tool-call > summary {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+}
+
+.ui-tool-call__name {
+  color: var(--text);
+}
+
+.ui-tool-call__status {
+  color: var(--text-dim);
+  margin-inline-start: auto;
+}
+
+.ui-tool-call__body {
+  border-block-start: 1px solid var(--line);
+  color: var(--text-soft);
+  margin: 0;
+  overflow-x: auto;
+  padding: 0.5rem 0.6rem;
+  white-space: pre-wrap;
+}
+
+@media (forced-colors: active) {
+  .ui-generated {
+    border-inline-start-color: CanvasText;
+  }
+}