@ponchia/ui 0.3.5 → 0.3.6

package/dist/css/dots.css

@@ -1 +1 @@
-@layer bronto{.ui-dotgrid{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-position: 0 0;background-size: var(--dot-gap) var(--dot-gap)}.ui-dotgrid--accent{--dot-color: var(--field-dot-accent)}.ui-dotgrid--dense{--dot-gap: 8px}.ui-dotfield{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-size: var(--dot-gap) var(--dot-gap);inset: 0;mask-image: radial-gradient(ellipse at 50% 0%,#000 30%,transparent 78%);pointer-events: none;position: fixed;z-index: var(--z-base)}.ui-dotrule{background-image: radial-gradient(var(--line-strong) 1.4px,transparent 1.4px);background-position: 0 50%;background-size: 9px 9px;border: 0;block-size: 3px;margin: var(--space-md) 0;inline-size: 100%}.ui-dotmatrix{display: grid;gap: var(--dotmatrix-gap,0.5rem);grid-template-columns: repeat(var(--dotmatrix-cols,12),minmax(0,1fr))}.ui-dotmatrix__cell{aspect-ratio: 1;background: var(--field-dot);border-radius: 50%}.ui-dotmatrix__cell--hot{background: var(--field-dot-hot)}.ui-dotmatrix__cell--accent{background: var(--field-dot-accent)}.ui-dot{background: var(--text-dim);border-radius: 50%;display: inline-block;flex: 0 0 auto;block-size: 0.55rem;inline-size: 0.55rem}.ui-dot--accent{background: var(--accent)}.ui-dot--success{background: var(--success)}.ui-dot--warning{background: var(--warning)}.ui-dot--danger{background: var(--danger)}.ui-dot--info{background: var(--info)}.ui-dot--live{background: var(--success);box-shadow: 0 0 0 0 color-mix(in srgb,var(--success) 70%,transparent);position: relative}.ui-dot--live::after{animation: pulseRing 1.8s var(--ease-out) infinite;border: 1px solid var(--success);border-radius: 50%;content: '';inset: -3px;position: absolute}.ui-status{align-items: center;color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-dotloader{align-items: center;display: inline-flex;gap: 0.32rem}.ui-dotloader span{animation: pulseDot 1s var(--ease-standard) infinite;background: var(--accent);border-radius: 50%;block-size: 0.42rem;inline-size: 0.42rem}.ui-dotloader span:nth-child(2){animation-delay: 0.16s}.ui-dotloader span:nth-child(3){animation-delay: 0.32s}.ui-dotspinner{--ds-box: 1.6rem;--ds-dot: 0.26rem;animation: uiSpin 1s steps(8) infinite;display: inline-block;flex: 0 0 auto;block-size: var(--ds-box);position: relative;inline-size: var(--ds-box)}.ui-dotspinner i{background: var(--accent);border-radius: 50%;block-size: var(--ds-dot);inset: 0;margin: auto;position: absolute;inline-size: var(--ds-dot)}.ui-dotspinner i:nth-child(1){opacity: 1;transform: rotate(0deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(2){opacity: 0.85;transform: rotate(45deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(3){opacity: 0.7;transform: rotate(90deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(4){opacity: 0.56;transform: rotate(135deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(5){opacity: 0.44;transform: rotate(180deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(6){opacity: 0.34;transform: rotate(225deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(7){opacity: 0.25;transform: rotate(270deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(8){opacity: 0.16;transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner--sm{--ds-box: 1.05rem;--ds-dot: 0.18rem}.ui-dotspinner--lg{--ds-box: 2.6rem;--ds-dot: 0.42rem}.ui-dotbar{display: flex;gap: 3px}.ui-dotbar i{background: var(--field-dot);border-radius: var(--radius-sm);flex: 1;block-size: 0.5rem}.ui-dotbar i.is-on{background: var(--accent)}.ui-dotbar--indeterminate i{animation: pulseDot 1.1s var(--ease-standard) infinite}.ui-dotbar--indeterminate i:nth-child(2){animation-delay: 0.09s}.ui-dotbar--indeterminate i:nth-child(3){animation-delay: 0.18s}.ui-dotbar--indeterminate i:nth-child(4){animation-delay: 0.27s}.ui-dotbar--indeterminate i:nth-child(5){animation-delay: 0.36s}.ui-dotbar--indeterminate i:nth-child(6){animation-delay: 0.45s}.ui-dotbar--indeterminate i:nth-child(7){animation-delay: 0.54s}.ui-dotbar--indeterminate i:nth-child(n + 8){animation-delay: 0.63s}.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)}@media (prefers-reduced-motion: reduce){.ui-dot--live::after,.ui-dotloader span,.ui-dotspinner,.ui-dotbar--indeterminate i{animation: none}.ui-dotspinner i{opacity: 0.6}.ui-matrix{clip-path: none}}}
+@layer bronto{.ui-dotgrid{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-position: 0 0;background-size: var(--dot-gap) var(--dot-gap)}.ui-dotgrid--accent{--dot-color: var(--field-dot-accent)}.ui-dotgrid--dense{--dot-gap: 8px}.ui-dotfield{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-size: var(--dot-gap) var(--dot-gap);inset: 0;mask-image: radial-gradient(ellipse at 50% 0%,#000 30%,transparent 78%);pointer-events: none;position: fixed;z-index: var(--z-base)}.ui-dotrule{background-image: radial-gradient(var(--line-strong) 1.4px,transparent 1.4px);background-position: 0 50%;background-size: 9px 9px;border: 0;block-size: 3px;margin: var(--space-md) 0;inline-size: 100%}.ui-dotmatrix{display: grid;gap: var(--dotmatrix-gap,0.5rem);grid-template-columns: repeat(var(--dotmatrix-cols,12),var(--dotmatrix-dot,minmax(0,1fr)))}.ui-dotmatrix__cell{aspect-ratio: 1;background: var(--field-dot);border-radius: var(--dotmatrix-dot-radius,50%)}.ui-dotmatrix__cell--hot{background: var(--field-dot-hot)}.ui-dotmatrix__cell--accent{background: var(--field-dot-accent)}.ui-dotmatrix--reveal .ui-dotmatrix__cell{animation: dotmatrixCellOn var(--duration-base) var(--ease-out) both;animation-delay: calc(var(--i,0) * var(--dotmatrix-reveal-step,3ms))}@keyframes dotmatrixCellOn{from{opacity: 0;transform: scale(0.35)}}.ui-dotmatrix--pulse{animation: dotmatrixPulse 1.8s var(--ease-standard) infinite}@keyframes dotmatrixPulse{50%{opacity: 0.55;transform: scale(0.94)}}.ui-dot{background: var(--text-dim);border-radius: 50%;display: inline-block;flex: 0 0 auto;block-size: 0.55rem;inline-size: 0.55rem}.ui-dot--accent{background: var(--accent)}.ui-dot--success{background: var(--success)}.ui-dot--warning{background: var(--warning)}.ui-dot--danger{background: var(--danger)}.ui-dot--info{background: var(--info)}.ui-dot--live{background: var(--success);box-shadow: 0 0 0 0 color-mix(in srgb,var(--success) 70%,transparent);position: relative}.ui-dot--live::after{animation: pulseRing 1.8s var(--ease-out) infinite;border: 1px solid var(--success);border-radius: 50%;content: '';inset: -3px;position: absolute}.ui-status{align-items: center;color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-dotloader{align-items: center;display: inline-flex;gap: 0.32rem}.ui-dotloader span{animation: pulseDot 1s var(--ease-standard) infinite;background: var(--accent);border-radius: 50%;block-size: 0.42rem;inline-size: 0.42rem}.ui-dotloader span:nth-child(2){animation-delay: 0.16s}.ui-dotloader span:nth-child(3){animation-delay: 0.32s}.ui-dotspinner{--ds-box: 1.6rem;--ds-dot: 0.26rem;animation: uiSpin 1s steps(8) infinite;display: inline-block;flex: 0 0 auto;block-size: var(--ds-box);position: relative;inline-size: var(--ds-box)}.ui-dotspinner i{background: var(--accent);border-radius: 50%;block-size: var(--ds-dot);inset: 0;margin: auto;position: absolute;inline-size: var(--ds-dot)}.ui-dotspinner i:nth-child(1){opacity: 1;transform: rotate(0deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(2){opacity: 0.85;transform: rotate(45deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(3){opacity: 0.7;transform: rotate(90deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(4){opacity: 0.56;transform: rotate(135deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(5){opacity: 0.44;transform: rotate(180deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(6){opacity: 0.34;transform: rotate(225deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(7){opacity: 0.25;transform: rotate(270deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(8){opacity: 0.16;transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner--sm{--ds-box: 1.05rem;--ds-dot: 0.18rem}.ui-dotspinner--lg{--ds-box: 2.6rem;--ds-dot: 0.42rem}.ui-dotbar{display: flex;gap: 3px}.ui-dotbar i{background: var(--field-dot);border-radius: var(--radius-sm);flex: 1;block-size: 0.5rem}.ui-dotbar i.is-on{background: var(--accent)}.ui-dotbar--indeterminate i{animation: pulseDot 1.1s var(--ease-standard) infinite}.ui-dotbar--indeterminate i:nth-child(2){animation-delay: 0.09s}.ui-dotbar--indeterminate i:nth-child(3){animation-delay: 0.18s}.ui-dotbar--indeterminate i:nth-child(4){animation-delay: 0.27s}.ui-dotbar--indeterminate i:nth-child(5){animation-delay: 0.36s}.ui-dotbar--indeterminate i:nth-child(6){animation-delay: 0.45s}.ui-dotbar--indeterminate i:nth-child(7){animation-delay: 0.54s}.ui-dotbar--indeterminate i:nth-child(n + 8){animation-delay: 0.63s}.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)}@media (prefers-reduced-motion: reduce){.ui-dot--live::after,.ui-dotloader span,.ui-dotspinner,.ui-dotbar--indeterminate i,.ui-dotmatrix--reveal .ui-dotmatrix__cell,.ui-dotmatrix--pulse{animation: none}.ui-dotspinner i{opacity: 0.6}.ui-matrix{clip-path: none}}}

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 260 classes across 109 component groups
+- 262 classes across 109 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Tokens as data: `import { cssVars, tokens, themeColor } from '@ponchia/ui/tokens'`
 
@@ -329,6 +329,8 @@ each one matches a real selector in the stylesheet.
 | `cls.dotmatrixCell` | `ui-dotmatrix__cell` | part |
 | `cls.dotmatrixCellAccent` | `ui-dotmatrix__cell--accent` | modifier |
 | `cls.dotmatrixCellHot` | `ui-dotmatrix__cell--hot` | modifier |
+| `cls.dotmatrixPulse` | `ui-dotmatrix--pulse` | modifier |
+| `cls.dotmatrixReveal` | `ui-dotmatrix--reveal` | modifier |
 
 ### `.ui-dotrule`
 

package/docs/usage.md

@@ -146,6 +146,64 @@ carousel crops (`cover`); the lightbox shows the whole image (`contain`).
 This is deliberately *not* an auto-playing marketing slider (no timers, no
 infinite-clone track). It's a gallery: the user drives it.
 
+## Display glyphs: when (and when not)
+
+`@ponchia/ui/glyphs` is a 43-glyph dot-matrix icon set — navigation
+(`arrow-*`, `chevron-*`), actions (`check`, `close`, `plus`, `minus`,
+`search`, `menu`, `gear`), status (`info`, `warning`, `bell`, `lock`) and
+common marks (`home`, `user`, `heart`, `star`, `spark`) — rendered on the
+`.ui-dotmatrix` primitive, so they re-skin with the same `--field-dot*`
+tokens as every other dot surface (no SVG, no icon font).
+
+**Two rendering modes — pick by size.** The dots need physical room to
+read, so the default _dot_ look is for **display** sizes (~40px up: hero
+marks, empty states, status bursts, section headers, large buttons). For
+small/inline use pass **`solid: true`** (or `data-bronto-glyph-solid`):
+that fuses the cells into a square, gapless pixel glyph that stays crisp and
+legible down to **~16px** — so the same set doubles as real inline UI icons,
+not just decoration. (Below the dot fragments into dot-soup; solid does not.)
+
+`renderGlyph(name, { label })` returns an SSR-safe string: decorative
+(`aria-hidden`) by default, or `role="img"` + `aria-label` when you pass a
+`label` — which is how it conveys meaning to assistive tech. Prefer the
+`data-bronto-glyph` placeholder + `initDotGlyph()` when the markup is
+easier dropped than inlined. Size with `--dotmatrix-dot` (and a tight
+`--dotmatrix-gap`) for an intrinsic dot, or let it stretch to its container.
+It is still a pixel-grid aesthetic, not a hairline vector set — but it now
+spans both inline-icon and display use from one source.
+
+**Animation** is opt-in via `anim` (`renderGlyph(name, { anim: 'reveal' })`)
+or `data-bronto-glyph-anim`: `reveal` powers the cells on in a scan (a
+dot-matrix booting up), `pulse` makes the glyph breathe for a live/attention
+state. It's **decorative only** — disabled under `prefers-reduced-motion`,
+and the meaning still lives in the static frame + `label`, never in the
+motion. Don't animate to convey information a reduced-motion user would miss.
+Tune the scan speed with `--dotmatrix-reveal-step` (delay per cell, default
+`3ms`). Use `pulse` sparingly — one attention target per view: it loops
+indefinitely, and animation that runs in parallel with other content is the
+consumer's WCAG 2.2.2 (Pause/Stop/Hide) responsibility (reduced-motion is not
+a substitute).
+
+A few sharp edges to know:
+
+- **Inline icon recipe.** `renderGlyph` returns a `<span>`, so it's valid
+  inline and inside a `<button>`. For an inline UI icon, render `solid` and
+  size the dot, e.g. inside a button:
+  `` `<button class="ui-button">${renderGlyph('search', { solid: true, dot: '1.2px', label: 'Search' })}<span>Search</span></button>` `` —
+  the button's `display: inline-flex; gap` aligns icon + text. For icon-in-prose,
+  set `--dotmatrix-dot` to ~`0.08em` and `vertical-align: -0.15em` on the span.
+- **`solid` wins.** `solid: true` implies glyph-only and forces
+  `--dotmatrix-gap: 0` / square cells, so a `grid: true` or `gap` passed
+  alongside it is ignored.
+- **Directional glyphs are physical, not logical.** `arrow-left/right`,
+  `chevron-left/right` are fixed bitmaps; in an RTL context flip them yourself
+  (e.g. swap the name, or `transform: scaleX(-1)`), the framework won't.
+- **Cost.** Each glyph is a 16×16 grid = 256 cells (DOM nodes / spans),
+  regardless of mode; `anim: 'reveal'` adds a per-cell `--i` (≈doubles the
+  string size). Fine for display marks and the odd inline icon — but don't
+  render hundreds at once (e.g. one in every row of a long table) without
+  measuring.
+
 ## When to add a behavior
 
 The CSS is the framework; `@ponchia/ui/behaviors` is the *sanctioned*

package/glyphs/glyphs.d.ts

@@ -0,0 +1,102 @@
+/** @ponchia/ui — GENERATED from glyphs/glyphs.js by scripts/gen-glyphs.mjs.
+ *  Do not edit by hand; run `npm run glyphs:build`. Drift-checked in CI. */
+
+/** Every display-glyph name @ponchia/ui ships (literal union). Use this as a
+ *  type annotation to reject typos (`const n: GlyphName = 'arow'` is an error). */
+export type GlyphName =
+  | 'arrow-down'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'arrow-up'
+  | 'bell'
+  | 'check'
+  | 'chevron-down'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'chevron-up'
+  | 'clock'
+  | 'close'
+  | 'download'
+  | 'edit'
+  | 'eye'
+  | 'eye-off'
+  | 'file'
+  | 'folder'
+  | 'gear'
+  | 'grid'
+  | 'heart'
+  | 'home'
+  | 'info'
+  | 'link'
+  | 'lock'
+  | 'mail'
+  | 'menu'
+  | 'minus'
+  | 'moon'
+  | 'more-horizontal'
+  | 'more-vertical'
+  | 'pause'
+  | 'play'
+  | 'plus'
+  | 'refresh'
+  | 'search'
+  | 'spark'
+  | 'star'
+  | 'sun'
+  | 'trash'
+  | 'upload'
+  | 'user'
+  | 'warning';
+
+/** A glyph name, or any string — for dynamic dispatch (a CMS/config value). The
+ *  known names still autocomplete; an unknown name hits the runtime fallback
+ *  (`glyph`→`undefined`, `glyphCells`→`[]`, `renderGlyph`→`''`). */
+export type GlyphNameInput = GlyphName | (string & {});
+
+/** A glyph is 16 rows of 16 chars: `.` off, `#` lit, `*` accent. */
+export type Glyph = readonly string[];
+
+/** One rendered dot. `on:false` is an unlit panel dot; tone picks the lit color. */
+export interface GlyphCell {
+  on: boolean;
+  tone?: 'hot' | 'accent';
+}
+
+export interface RenderGlyphOptions {
+  /** Show the unlit panel dots (default true). `false` → glyph-only look. */
+  grid?: boolean;
+  /** Render lit cells as square, gapless pixels (a filled silhouette) instead
+   *  of separated dots — the legible mode at small/inline sizes (~16–24px).
+   *  Implies glyph-only. Default false (the dot-matrix display look). */
+  solid?: boolean;
+  /** Opt into a decorative animation (disabled under `prefers-reduced-motion`;
+   *  meaning stays in the static frame + `label`). `'reveal'` powers the cells
+   *  on in a scan; `'pulse'` makes the glyph breathe. */
+  anim?: 'reveal' | 'pulse';
+  /** Expose as `role="img"` with this label; omit for decorative (aria-hidden). */
+  label?: string;
+  /** CSS length for one dot (sets `--dotmatrix-dot`; sanitized — a value that
+   *  is not a plain length/calc expression is dropped). */
+  dot?: string;
+  /** CSS length for the gap between dots (sets `--dotmatrix-gap`; sanitized
+   *  the same way as `dot`). */
+  gap?: string;
+}
+
+/** The grid edge length (rows = cols = 16). */
+export declare const GLYPH_SIZE: 16;
+
+/** The frozen name→bitmap registry. */
+export declare const GLYPHS: Readonly<Record<GlyphName, Glyph>>;
+
+/** Every glyph name, frozen and sorted. */
+export declare const GLYPH_NAMES: readonly GlyphName[];
+
+/** The raw bitmap rows for a glyph, or `undefined` if the name is unknown. */
+export declare function glyph(name: GlyphNameInput): Glyph | undefined;
+
+/** 256 cell descriptors (row-major), or `[]` if unknown. */
+export declare function glyphCells(name: GlyphNameInput): GlyphCell[];
+
+/** A full `.ui-dotmatrix` HTML string for a glyph (`''` if unknown). */
+export declare function renderGlyph(name: GlyphNameInput, options?: RenderGlyphOptions): string;