@ponchia/ui 0.12.0 → 0.14.0

package/css/feedback.css

@@ -79,6 +79,8 @@
 }
 
 .ui-alert--accent {
+  --alert-tone: var(--accent);
+
   border-inline-start-color: var(--accent);
 }
 
@@ -87,6 +89,8 @@
 }
 
 .ui-alert--success {
+  --alert-tone: var(--success);
+
   border-inline-start-color: var(--success);
 }
 
@@ -95,6 +99,8 @@
 }
 
 .ui-alert--warning {
+  --alert-tone: var(--warning);
+
   border-inline-start-color: var(--warning);
 }
 
@@ -103,6 +109,8 @@
 }
 
 .ui-alert--danger {
+  --alert-tone: var(--danger);
+
   border-inline-start-color: var(--danger);
 }
 
@@ -111,6 +119,8 @@
 }
 
 .ui-alert--info {
+  --alert-tone: var(--info);
+
   border-inline-start-color: var(--info);
 }
 
@@ -118,6 +128,84 @@
   background: var(--info);
 }
 
+/* --- Band: an alert across the edge of a small surface ---
+   A node, panel or card body that must say "this failed" or "this is out of
+   date" above content it still shows. Full-bleed, one line of small type, the
+   tone as a tint: at 200–400px a boxed alert spends a third of the body on its
+   frame. Put it first in the body; the tone modifiers work as on any alert. */
+.ui-alert--band {
+  background: color-mix(in oklch, var(--alert-tone, var(--text-dim)) 10%, var(--panel));
+  border: 0;
+  border-block-end: 1px solid var(--line);
+  border-radius: 0;
+  font-size: var(--text-2xs);
+  gap: var(--space-1-5);
+  padding: var(--space-1-5) var(--space-sm);
+}
+
+.ui-alert--band::before {
+  block-size: 0.4rem;
+  inline-size: 0.4rem;
+  margin-block-start: 0.3em;
+}
+
+/* --- Body state: what a small surface shows instead of its content ---
+   Empty, loading, failed or out of date, for a node, panel or card body of
+   200–400px. It fills the body and centres one short sentence (with an
+   optional `ui-empty-state__hint` or an action), without the dashed frame a
+   page-level `ui-empty-state` draws. Error and stale lead with a tone dot;
+   loading takes `aria-busy="true"` on the region and an optional
+   `ui-dotspinner` or `ui-skeleton` inside. In a `ui-cq` body narrower than
+   15rem the state tightens to the smallest type. */
+.ui-body-state {
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--text-dim);
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  font-size: var(--text-xs);
+  gap: var(--space-2xs);
+  justify-content: center;
+  margin: 0;
+  min-block-size: 100%;
+  padding: var(--space-md);
+  text-align: center;
+  text-wrap: balance;
+}
+
+.ui-body-state > * {
+  margin: 0;
+}
+
+.ui-body-state--error,
+.ui-body-state--stale {
+  --body-state-tone: var(--danger);
+
+  color: var(--text-soft);
+}
+
+.ui-body-state--stale {
+  --body-state-tone: var(--warning);
+}
+
+.ui-body-state--error::before,
+.ui-body-state--stale::before {
+  background: var(--body-state-tone);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  content: '';
+  inline-size: 0.5rem;
+  print-color-adjust: exact;
+}
+
+@container bronto (max-inline-size: 15rem) {
+  .ui-body-state {
+    font-size: var(--text-2xs);
+    padding: var(--space-xs);
+  }
+}
+
 @media (hover: hover) {
   .ui-alert__close:hover {
     color: var(--text);
@@ -277,7 +365,9 @@
    inherited via --tone-glyph so one rule covers both alert and toast. */
 @media (forced-colors: active) {
   .ui-alert::before,
-  .ui-toast::before {
+  .ui-toast::before,
+  .ui-body-state--error::before,
+  .ui-body-state--stale::before {
     background: none;
     border-radius: 0;
     content: var(--tone-glyph, '\2022'); /* • neutral default */
@@ -300,12 +390,14 @@
   }
 
   .ui-alert--warning,
-  .ui-toast--warning {
+  .ui-toast--warning,
+  .ui-body-state--stale {
     --tone-glyph: '\0021'; /* ! */
   }
 
   .ui-alert--danger,
-  .ui-toast--danger {
+  .ui-toast--danger,
+  .ui-body-state--error {
     --tone-glyph: '\2715'; /* ✕ */
   }
 

package/css/fonts-inter.css

@@ -0,0 +1,35 @@
+/* ==========================================================================
+   fonts-inter — Inter, the face `--sans` names first.
+
+   OPT-IN LEAF. Since 0.10 ordinary text is `--sans`, and the stack names
+   Inter first, but nothing shipped it: each OS fell through to its own
+   system face, so the same screen set differently on every device. Import
+   this leaf and Inter is what renders everywhere.
+
+     @import '@ponchia/ui/css/fonts-inter.css';
+
+   One variable face per style covers every weight the tokens use (400 to 700,
+   and the in-between ones a heading or a readout asks for). A browser
+   downloads a face only when text on the page needs it, so the italic costs
+   nothing until something is italic.
+
+   Inter 4.1 (rsms/inter, web/InterVariable*.woff2), unmodified. License: SIL
+   OFL 1.1, fonts/OFL-Inter.txt. URLs are relative to this file; a bundler
+   rewrites them and emits the files.
+   ========================================================================== */
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-variable-italic.woff2') format('woff2');
+}

package/css/fonts-jetbrains-mono.css

@@ -0,0 +1,49 @@
+/* ==========================================================================
+   fonts-jetbrains-mono — JetBrains Mono, the face `--mono` names first.
+
+   OPT-IN LEAF. Code, terminals, numbers in tables and readouts are `--mono`,
+   and a terminal measures its cells in it, so a fallback monospace changes
+   layout as well as looks. Import this leaf and JetBrains Mono is what
+   renders everywhere.
+
+     @import '@ponchia/ui/css/fonts-jetbrains-mono.css';
+
+   Four faces: regular and bold, upright and italic, the ones terminal output
+   uses. A browser downloads a face only when text on the page needs it.
+
+   JetBrains Mono 2.304 (JetBrains/JetBrainsMono, fonts/webfonts), unmodified.
+   License: SIL OFL 1.1, fonts/OFL-JetBrainsMono.txt. URLs are relative to
+   this file; a bundler rewrites them and emits the files.
+   ========================================================================== */
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-400-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-700-italic.woff2') format('woff2');
+}

package/css/forms.css

@@ -66,8 +66,8 @@
 .ui-input:focus-visible,
 .ui-select:focus-visible,
 .ui-textarea:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 1px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(var(--focus-ring-offset) / 2);
 }
 
 .ui-input:disabled,
@@ -292,8 +292,8 @@
 }
 
 .ui-range:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 4px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(2 * var(--focus-ring-offset));
 }
 
 /* --- Error summary: one focusable, assertive list of form errors --- */
@@ -358,8 +358,8 @@
    border-colour shift alone read markedly fainter on this one control. Keyed to
    :focus-visible on the inner input so it stays keyboard-only. */
 .ui-search:has(input:focus-visible) {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 1px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(var(--focus-ring-offset) / 2);
 }
 
 .ui-search:focus-within::before {
@@ -429,8 +429,8 @@
 }
 
 .ui-switch input:focus-visible + .ui-switch__track {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ARIA contract: `.ui-switch` is a visually-styled checkbox. Author

package/css/primitives.css

@@ -812,12 +812,11 @@
 
 /* --- Touch: comfortable hit targets on coarse pointers.
 
-   The floor is `--tap-target`, not a bare rem. Bronto's own base sets
-   `html { font-size: 0.9375rem }`, so the 2.9rem this family used to carry
-   resolved to 43.5px — half a pixel under the 44px WCAG 2.5.5 / platform-HIG
-   target, and under any host that shrinks the root further it drifted further
-   still. The token clamps in px against the rem so the standard holds however
-   the root is re-pointed. --- */
+   The floor is `--tap-target`, not a bare rem. Under a 15px root the 2.9rem
+   this family used to carry resolved to 43.5px — half a pixel under the 44px
+   WCAG 2.5.5 / platform-HIG target, and under any host that shrinks the root
+   further it drifted further still. The token clamps in px against the rem so
+   the standard holds however the root is re-pointed. --- */
 
 @media (pointer: coarse) {
   .ui-button {

package/css/row.css

@@ -126,8 +126,8 @@
 .ui-row:focus-visible {
   background: var(--bg-accent);
   color: var(--text);
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 /* Touch: a row is a primary target in a list, so it floats to the full

package/css/site.css

@@ -340,34 +340,3 @@
   border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
   color: var(--text-soft);
 }
-
-/* --- Meta row — date · author · read-time, dot-separated --- */
-
-.ui-meta {
-  align-items: center;
-  color: var(--text-dim);
-  display: flex;
-  flex-wrap: wrap;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  gap: 0.55rem;
-  letter-spacing: var(--tracking-wide);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-transform: uppercase;
-}
-
-.ui-meta__item {
-  align-items: center;
-  display: inline-flex;
-  gap: 0.55rem;
-}
-
-.ui-meta__item:not(:last-child)::after {
-  background: var(--line-strong);
-  border-radius: 50%;
-  block-size: 0.22rem;
-  content: '';
-  inline-size: 0.22rem;
-}

package/css/term.css

@@ -39,8 +39,8 @@
 }
 
 .ui-term:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* The definition — a native popover. Reset the UA popover chrome to the Bronto

package/css/textref.css

@@ -39,8 +39,8 @@
 }
 
 .ui-textref:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* The browser-painted highlight on the matched fragment. Scoped to the page

package/css/toc.css

@@ -64,8 +64,8 @@
 }
 
 .ui-toc__link:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 @media (hover: hover) {

package/css/tokens.css

@@ -25,6 +25,10 @@
   --space-lg: 1.35rem;
   --space-xl: 1.75rem;
   --space-2xl: 2.5rem;
+  --space-0-5: 0.125rem;
+  --space-0-75: 0.1875rem;
+  --space-1-5: 0.375rem;
+  --space-2-5: 0.625rem;
   --tap-target: max(44px, 2.9rem);
   --tap-target-min: max(24px, 1.6rem);
   --safe-area-top: env(safe-area-inset-top, 0px);
@@ -68,6 +72,22 @@
   --z-popover: 50;
   --z-toast: 60;
 
+  /* Workspace layers over a canvas, aliased to the page layer where they mean the same. */
+  --z-canvas: var(--z-base);
+  --z-chrome: var(--z-sticky);
+  --z-panel: 25;
+  --z-modal: var(--z-overlay);
+  --z-menu: var(--z-popover);
+  --z-tooltip: 70;
+  --z-navigation: 80;
+
+  /* Zoom — --ui-px is one screen pixel; [data-ui-zoom] re-declares it for a scaled surface. */
+  --ui-zoom: 1;
+  --ui-px: 1px;
+  --hairline: 1px;
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+
   /* Accent ramp — a stepped family for charts / data-viz, derived from the single --accent knob via OKLCH color-mix against a per-theme white/black endpoint. */
   --accent-1: color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end));
   --accent-2: color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end));
@@ -259,6 +279,10 @@
    -------------------------------------------------------------------------- */
 
 [data-density='compact'] {
+  --space-0-5: 0.1rem;
+  --space-0-75: 0.15rem;
+  --space-1-5: 0.3rem;
+  --space-2-5: 0.5rem;
   --space-2xs: 0.2rem;
   --space-xs: 0.4rem;
   --space-sm: 0.6rem;
@@ -269,6 +293,10 @@
 }
 
 [data-density='comfortable'] {
+  --space-0-5: 0.15rem;
+  --space-0-75: 0.225rem;
+  --space-1-5: 0.45rem;
+  --space-2-5: 0.75rem;
   --space-2xs: 0.3rem;
   --space-xs: 0.6rem;
   --space-sm: 0.95rem;
@@ -278,6 +306,21 @@
   --space-2xl: 3.1rem;
 }
 
+/* Zoom — a host that draws bronto UI inside a scaled surface (a zoomable
+   canvas) marks the scaled element [data-ui-zoom] and sets --ui-zoom to its
+   scale there. Inside it --ui-px is one SCREEN pixel, so hairlines, focus rings
+   and anything the host sizes in --ui-px keep their on-screen size at any zoom.
+   Re-declared here, not inherited, because a custom property that reads
+   --ui-zoom resolves where it is declared: the :root values cannot follow a
+   zoomed subtree. The 0.15 floor stops a far-out zoom inflating a ring past
+   the thing it rings. */
+[data-ui-zoom] {
+  --ui-px: calc(1px / max(var(--ui-zoom, 1), 0.15));
+  --hairline: var(--ui-px);
+  --focus-ring-width: calc(2 * var(--ui-px));
+  --focus-ring-offset: calc(2 * var(--ui-px));
+}
+
 /* High contrast — manual opt-in and the OS `prefers-contrast` signal.
    Both collapse the soft greys toward the strong end; theme-agnostic
    because they reference the per-theme *-strong / -soft tokens. */

package/css/tool.css

@@ -0,0 +1,29 @@
+/* ==========================================================================
+   tool — the default bundle for a tool, without site and app chrome.
+
+   Import it INSTEAD of the default bundle, not after it:
+
+     @import '@ponchia/ui/css/tool.css';
+
+   Everything in the default bundle except four leaves a tool on its own
+   canvas never renders: navigation (the theme toggle), site (the
+   marketing/content shell), table (data tables) and app (the admin service
+   shell). Tokens, fonts, base, motion, the dot-matrix and glyph primitives,
+   content, primitives, rows, forms, feedback, overlay and disclosure stay, in
+   the default bundle's cascade order. Need one of the four after all? Import
+   its leaf as well (`@ponchia/ui/css/table.css`).
+   ========================================================================== */
+@layer bronto;
+
+@import url('./tokens.css') layer(bronto);
+@import url('./fonts.css') layer(bronto);
+@import url('./base.css') layer(bronto);
+@import url('./motion.css') layer(bronto);
+@import url('./dots.css') layer(bronto);
+@import url('./content.css') layer(bronto);
+@import url('./primitives.css') layer(bronto);
+@import url('./row.css') layer(bronto);
+@import url('./forms.css') layer(bronto);
+@import url('./feedback.css') layer(bronto);
+@import url('./overlay.css') layer(bronto);
+@import url('./disclosure.css') layer(bronto);

package/css/workbench.css

@@ -432,8 +432,8 @@
 }
 
 .ui-splitter__handle:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 .ui-splitter--horizontal .ui-splitter__handle {