@ponchia/ui 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -5,6 +5,26 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 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.15.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/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/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 {