@ponchia/ui 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -5,6 +5,52 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.16.0 — 2026-10-02
+
+### Added
+
+- **`--edge`, the token for lines that carry meaning.** A relationship between
+  nodes, a connector or annotation leader, or a bracket mark is a graphical
+  object WCAG 1.4.11 holds to 3:1 against its surface. The hairlines
+  (`--line`, `--line-strong`) are decorative and exempt, and `--line-strong`
+  measures 2.39:1 on a light card and 2.29:1 on a dark one. `--edge` is the
+  dim-text ink (`var(--text-dim)`): 5.60:1 light and 6.52:1 dark on a card,
+  and it follows the high-contrast step. The contrast gate now enforces it on
+  the page and on a card in every theme and colorway.
+- **`edge` in `readTokens()`**, for renderers that draw relationships on a
+  canvas (graph and network views).
+
+### Changed
+
+- Connectors, annotation leaders (default and `--accent`) and the bracket note
+  draw in `--edge` instead of `--line-strong`. The `--muted` connector and
+  annotation keep the decorative `--line`.
+- The bracket note's label was text in `--line-strong` (2.39:1). It is now
+  `--edge`, which clears the 4.5:1 text floor.
+- Mermaid `lineColor` and D2's `B1` slot (connections, and the shape borders D2
+  draws from the same slot) resolve to `--edge`: `#686863` light, `#a0a0a0`
+  dark.
+
+## 0.15.0 — 2026-10-02
+
+### Added
+
+- **`ui-eyebrow--caps` and `ui-eyebrow--mono`**, the label voice of a tool
+  surface, taken from Spatial. `--caps` sets capitals on the wide tracking step,
+  for a label that names a region (a panel, a section, a gate); `--mono` sets the
+  mono face, for a label over data, code or a readout. Both compose with
+  `--muted` and `--sm`, and `ui.eyebrow({ caps, mono })` emits them. A tool that
+  restated this voice by hand can use the base eyebrow and keep only its spacing.
+
+### Changed
+
+- **`css/blocknote.css` draws the nested-block guide in `--line`.** BlockNote
+  draws the rule beside a nested block in its side-menu colour, which the leaf
+  maps to `--text-dim` for the drag handle. In 0.13 that made the guide as dark as
+  a control: light mode went from BlockNote's `#cfcfcf` to `#686863`. The guide
+  now takes the border token and the handle keeps `--text-dim`. The rule mirrors
+  BlockNote 0.54's selector under `.bn-root`, and a test pins that shape.
+
 ## 0.14.0 — 2026-10-01
 
 ### Added

package/README.md

@@ -93,7 +93,7 @@ Or drop it in with no build step, straight from a CDN (replace the version only
 when deliberately upgrading across a breaking pre-1.0 minor):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/bronto.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.16.0/dist/bronto.css">
 ```
 
 ## Quick start

package/classes/classes.json

@@ -1,7 +1,7 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 700,
+    "classes": 702,
     "groups": 188
   },
   "groups": {
@@ -620,6 +620,8 @@
     "ui-eyebrow": {
       "base": "ui-eyebrow",
       "modifiers": [
+        "ui-eyebrow--caps",
+        "ui-eyebrow--mono",
         "ui-eyebrow--muted",
         "ui-eyebrow--sm"
       ],
@@ -1891,6 +1893,8 @@
     "ui-evidence-item__window",
     "ui-evidence-ledger",
     "ui-eyebrow",
+    "ui-eyebrow--caps",
+    "ui-eyebrow--mono",
     "ui-eyebrow--muted",
     "ui-eyebrow--sm",
     "ui-field",

package/classes/index.d.ts

@@ -243,6 +243,8 @@ export declare const cls: {
   readonly eyebrow: 'ui-eyebrow';
   readonly eyebrowMuted: 'ui-eyebrow--muted';
   readonly eyebrowSm: 'ui-eyebrow--sm';
+  readonly eyebrowCaps: 'ui-eyebrow--caps';
+  readonly eyebrowMono: 'ui-eyebrow--mono';
   readonly prose: 'ui-prose';
   readonly proseCompact: 'ui-prose--compact';
   readonly proseBlocks: 'ui-prose--blocks';
@@ -791,6 +793,10 @@ export interface TableOpts {
 export interface EyebrowOpts {
   muted?: boolean;
   sm?: boolean;
+  /** Capitals on the wide tracking step: a label that names a region. */
+  caps?: boolean;
+  /** The mono face: a label over data, code or a readout. */
+  mono?: boolean;
 }
 export interface HintOpts {
   error?: boolean;

package/classes/index.js

@@ -257,6 +257,8 @@ export const cls = Object.freeze({
   eyebrow: 'ui-eyebrow',
   eyebrowMuted: 'ui-eyebrow--muted',
   eyebrowSm: 'ui-eyebrow--sm',
+  eyebrowCaps: 'ui-eyebrow--caps',
+  eyebrowMono: 'ui-eyebrow--mono',
   prose: 'ui-prose',
   proseCompact: 'ui-prose--compact',
   proseBlocks: 'ui-prose--blocks',
@@ -1031,7 +1033,14 @@ export const ui = {
       lined && cls.tableLined,
       breakAnywhere && cls.tableBreakAnywhere,
     ),
-  eyebrow: ({ muted, sm } = {}) => j(cls.eyebrow, muted && cls.eyebrowMuted, sm && cls.eyebrowSm),
+  eyebrow: ({ muted, sm, caps, mono } = {}) =>
+    j(
+      cls.eyebrow,
+      muted && cls.eyebrowMuted,
+      sm && cls.eyebrowSm,
+      caps && cls.eyebrowCaps,
+      mono && cls.eyebrowMono,
+    ),
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
   cluster: ({ between } = {}) => j(cls.cluster, between && cls.clusterBetween),
   stagger: ({ auto } = {}) => j(cls.stagger, auto && cls.staggerAuto),

package/classes/vscode.css-custom-data.json

@@ -185,6 +185,10 @@
       "name": "--ease-standard",
       "description": "Global scale token. Value: `cubic-bezier(0.2, 0.8, 0.2, 1)`"
     },
+    {
+      "name": "--edge",
+      "description": "Global scale token. Value: `var(--text-dim)`"
+    },
     {
       "name": "--field-dot",
       "description": "Theme token. Light: `rgb(10, 10, 10, 0.16)` · Dark: `rgb(242, 242, 242, 0.14)`"

package/css/annotations.css

@@ -6,9 +6,11 @@
    reports, or generated figures that need explicit callouts.
    ========================================================================== */
 
+/* The connector carries meaning, so `--annotation-line` is `--edge`, which
+   holds 3:1 against the surface (WCAG 1.4.11); `--muted` keeps the hairline. */
 .ui-annotation {
   --annotation-color: var(--accent);
-  --annotation-line: var(--line-strong);
+  --annotation-line: var(--edge);
   --annotation-note-bg: var(--panel);
   --annotation-subject-fill: color-mix(in srgb, var(--annotation-color) 8%, transparent);
   --annotation-stroke-width: 1.5;
@@ -26,7 +28,7 @@
 
 .ui-annotation--accent {
   --annotation-color: var(--accent);
-  --annotation-line: var(--line-strong);
+  --annotation-line: var(--edge);
 }
 
 .ui-annotation--success {

package/css/blocknote.css

@@ -59,3 +59,17 @@
   --bn-colors-highlights-pink-text: var(--cat-5-ink, var(--danger));
   --bn-colors-highlights-pink-background: var(--cat-5-tint, var(--panel-soft));
 }
+
+/* The rule beside a nested block. BlockNote draws it in --bn-colors-side-menu,
+   the drag handle's ink, which is --text-dim here: a structural hairline as
+   dark as a control. The guide takes the border token instead and the handle
+   keeps its colour. The selector is BlockNote 0.54's own (packages/react
+   editor/styles.css) under .bn-root, so it outranks it in either order. */
+.bn-root
+  .bn-block-group
+  .bn-block:not(:has(.bn-toggle-wrapper))
+  .bn-block-group
+  .bn-block-outer:not([data-prev-depth-changed])::before {
+  /* stylelint-disable-next-line csstools/use-logical -- BlockNote draws a physical border-left; a logical override would miss it in RTL. */
+  border-left-color: var(--line);
+}

package/css/connectors.css

@@ -7,11 +7,13 @@
    `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.
+   Monochrome by default, in `--edge`: a leader line carries meaning, so it
+   holds 3:1 against the surface (WCAG 1.4.11). `--muted` drops to the
+   decorative hairline; the rationed accent and status tones are opt-in.
    ========================================================================== */
 
 .ui-connector {
-  --connector-color: var(--line-strong);
+  --connector-color: var(--edge);
 
   color: var(--connector-color);
   inset: 0;

package/css/marks.css

@@ -109,9 +109,10 @@
 }
 
 /* A passage bracket: a tick down the inline-start with an optional label.
-   The prose analogue of `ui-annotation--bracket`. */
+   The prose analogue of `ui-annotation--bracket`. The tick marks a passage and
+   its label is text, so both take `--edge` (the dim-text ink), not a hairline. */
 .ui-bracket-note {
-  --mark-color: var(--line-strong);
+  --mark-color: var(--edge);
 
   border-inline-start: 2px solid var(--mark-color);
   display: block;

package/css/primitives.css

@@ -355,6 +355,19 @@
   font-size: var(--text-2xs);
 }
 
+/* The label voice of a tool surface: capitals on the wide tracking step, for a
+   section or panel label that names a region rather than introducing prose.
+   Composes with --muted, --sm and --mono. */
+.ui-eyebrow--caps {
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+/* The same label in the mono face, for a label over data, code or a readout. */
+.ui-eyebrow--mono {
+  font-family: var(--mono);
+}
+
 /* --- Buttons --- */
 
 .ui-button {

package/css/tokens.css

@@ -126,6 +126,7 @@
   --surface-muted: var(--panel-soft);
   --border: var(--line);
   --border-strong: var(--line-strong);
+  --edge: var(--text-dim);
 }
 
 /* --------------------------------------------------------------------------