@ponchia/ui 0.3.2 → 0.3.4

package/README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/@ponchia/ui?logo=npm)](https://www.npmjs.com/package/@ponchia/ui)
 [![npm provenance](https://img.shields.io/badge/npm-provenance-blue?logo=npm)](https://www.npmjs.com/package/@ponchia/ui#provenance)
 [![runtime deps](https://img.shields.io/badge/runtime%20deps-0-brightgreen)](package.json)
-[![bundle](https://img.shields.io/badge/dist-~54kB%20%2F%20~10kB%20gzip-informational)](scripts/check-dist.mjs)
+[![bundle](https://img.shields.io/badge/dist-~64kB%20%2F%20~11kB%20gzip-informational)](scripts/check-dist.mjs)
 [![CI](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml)
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
 
@@ -12,7 +12,8 @@ monochrome surfaces, a single red accent, dot-matrix display type (Doto),
 flat hairline borders, restrained motion. CSS-first and framework-agnostic.
 
 **New here?** → [Getting started](#getting-started) ·
-[Reference](docs/reference.md) · [Theming](docs/theming.md) ·
+[Reference](docs/reference.md) · [Usage](docs/usage.md) ·
+[Theming](docs/theming.md) · [Contrast](docs/contrast.md) ·
 [Roadmap](ROADMAP.md) · [Contributing](CONTRIBUTING.md)
 
 > **Editor IntelliSense.** The package ships a VS Code CSS Custom Data
@@ -25,6 +26,12 @@ flat hairline borders, restrained motion. CSS-first and framework-agnostic.
 > }
 > ```
 
+> **For AI agents / LLMs.** The package ships `llms.txt` at its root —
+> point a coding agent at `node_modules/@ponchia/ui/llms.txt` for a
+> self-contained orientation. The full class catalog
+> (`docs/reference.md`) and the token contract (`docs/theming.md`) also
+> ship in the tarball, so an offline agent never has to guess at the API.
+
 **[Live demo →](https://ponchia.github.io/bronto-ui/)** — the kitchen
 sink (every component, light/dark, RTL, theming) deployed from `demo/`.
 
@@ -59,7 +66,7 @@ chain:
 @import '@ponchia/ui';   /* → dist/bronto.css, the whole framework */
 ```
 
-~54 kB raw / ~10 kB gzip, one request, same `@layer bronto`. (The
+~64 kB raw / ~11 kB gzip, one request, same `@layer bronto`. (The
 enforced ceiling lives in `scripts/check-dist.mjs`, not this prose —
 treat these figures as indicative.) Source CSS, tokens/classes/behaviors
 entrypoints are unchanged — use whichever fits.

package/behaviors/index.d.ts

@@ -108,11 +108,18 @@ export declare function initDialog(opts?: DelegateOpts): Cleanup;
 
 export interface ToastOpts {
   /** Status tone — maps to `ui-toast--<tone>`. */
-  tone?: 'accent' | 'success' | 'warning' | 'danger';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
   /** Optional uppercase label rendered above the message. */
   title?: string;
   /** Auto-dismiss delay in ms. 0 keeps it until dismissed. Default: 4000. */
   duration?: number;
+  /**
+   * Route to the assertive live region so AT interrupts immediately.
+   * Defaults to `true` when `tone === 'danger'`.
+   */
+  assertive?: boolean;
+  /** Render a dismiss button on the toast. */
+  closable?: boolean;
 }
 
 /**

package/behaviors/index.js

@@ -319,7 +319,7 @@ export function initDialog({ root } = {}) {
  * that receives its first child in the same tick is not reliably
  * announced by VoiceOver/NVDA). On first creation the empty region is
  * inserted and the toast is appended on the next frame for the same
- * reason. `tone` is accent/success/warning/danger; `title` is an
+ * reason. `tone` is accent/success/warning/danger/info; `title` is an
  * optional uppercase label; `duration` ms before auto-dismiss (0 keeps
  * it until dismissed). Returns a function that dismisses the toast
  * early. SSR-safe (no-op).
@@ -607,11 +607,29 @@ export function initFormValidation({ root } = {}) {
   };
 
   return bindOnce(host, 'formValidation', () => {
+    // Suppress native bubbles UP FRONT for forms present at init. The
+    // in-handler `noValidate = true` only fires after the first
+    // submit/blur, so the very first invalid real-browser submit would
+    // otherwise show the native UA bubble instead of the Bronto
+    // summary — contradicting the documented contract. (Forms added
+    // after init are still covered by the in-handler set.)
+    // Feature-detect rather than `instanceof Element` — `Element` is not
+    // a guaranteed global (SSR / the no-DOM test env), and `host` is
+    // either `document` (no `.matches`) or a root Element.
+    const selfForm =
+      typeof host.matches === 'function' && host.matches('[data-bronto-validate]') ? [host] : [];
+    const forms = [...selfForm, ...(host.querySelectorAll?.('[data-bronto-validate]') ?? [])];
+    const priorNoValidate = new Map();
+    for (const f of forms) {
+      priorNoValidate.set(f, f.noValidate);
+      f.noValidate = true;
+    }
     host.addEventListener('submit', onSubmit, true);
     host.addEventListener('focusout', onBlur);
     return () => {
       host.removeEventListener('submit', onSubmit, true);
       host.removeEventListener('focusout', onBlur);
+      for (const [f, v] of priorNoValidate) f.noValidate = v;
     };
   });
 }
@@ -702,6 +720,12 @@ export function initCombobox({ root } = {}) {
         if (match) any = true;
       }
       if (empty) empty.hidden = any;
+      // The active option may have just been filtered out — drop the
+      // stale activedescendant so Enter can't select a hidden option.
+      if (active >= 0 && options[active]?.hidden) {
+        active = -1;
+        setActive(null);
+      }
       open();
     };
 
@@ -762,7 +786,7 @@ export function initCombobox({ root } = {}) {
           }
           break;
         case 'Enter':
-          if (!list.hidden && active >= 0) {
+          if (!list.hidden && active >= 0 && !options[active].hidden) {
             e.preventDefault();
             select(options[active]);
           }

package/classes/index.d.ts

@@ -1,7 +1,16 @@
 /** @ponchia/ui — GENERATED from classes/index.js by scripts/gen-dts.mjs.
  *  Do not edit by hand; run `npm run dts:build`. Drift-checked in CI. */
 
-export type ClassValue = string | false | null | undefined | ClassValue[];
+// Mirrors clsx's permissive input: `number`/`boolean` accepted so the
+// idiomatic React `reactNode && 'cls'` guard (where the node may be 0 or
+// '') type-checks. The runtime `cx` skips every falsy value regardless.
+export type ClassValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | ClassValue[];
 
 /** The flat registry of every class @ponchia/ui defines (literal). */
 export declare const cls: {
@@ -10,6 +19,8 @@ export declare const cls: {
   readonly buttonSubtle: 'ui-button--subtle';
   readonly buttonDanger: 'ui-button--danger';
   readonly buttonIcon: 'ui-button--icon';
+  readonly buttonSm: 'ui-button--sm';
+  readonly buttonLg: 'ui-button--lg';
   readonly card: 'ui-card';
   readonly cardHead: 'ui-card__head';
   readonly cardAccent: 'ui-card--accent';
@@ -28,6 +39,7 @@ export declare const cls: {
   readonly badgeSuccess: 'ui-badge--success';
   readonly badgeWarning: 'ui-badge--warning';
   readonly badgeDanger: 'ui-badge--danger';
+  readonly badgeInfo: 'ui-badge--info';
   readonly badgeMuted: 'ui-badge--muted';
   readonly badgeDot: 'ui-badge--dot';
   readonly chip: 'ui-chip';
@@ -36,11 +48,13 @@ export declare const cls: {
   readonly linkArrow: 'ui-link--arrow';
   readonly linkCta: 'ui-link--cta';
   readonly keyValue: 'ui-key-value';
+  readonly emptyState: 'ui-empty-state';
   readonly dot: 'ui-dot';
   readonly dotAccent: 'ui-dot--accent';
   readonly dotSuccess: 'ui-dot--success';
   readonly dotWarning: 'ui-dot--warning';
   readonly dotDanger: 'ui-dot--danger';
+  readonly dotInfo: 'ui-dot--info';
   readonly dotLive: 'ui-dot--live';
   readonly dotgrid: 'ui-dotgrid';
   readonly dotgridAccent: 'ui-dotgrid--accent';
@@ -84,6 +98,7 @@ export declare const cls: {
   readonly alertSuccess: 'ui-alert--success';
   readonly alertWarning: 'ui-alert--warning';
   readonly alertDanger: 'ui-alert--danger';
+  readonly alertInfo: 'ui-alert--info';
   readonly toastStack: 'ui-toast-stack';
   readonly toastStackAssertive: 'ui-toast-stack--assertive';
   readonly toast: 'ui-toast';
@@ -93,6 +108,7 @@ export declare const cls: {
   readonly toastSuccess: 'ui-toast--success';
   readonly toastWarning: 'ui-toast--warning';
   readonly toastDanger: 'ui-toast--danger';
+  readonly toastInfo: 'ui-toast--info';
   readonly tooltip: 'ui-tooltip';
   readonly tooltipBubble: 'ui-tooltip__bubble';
   readonly popover: 'ui-popover';
@@ -205,6 +221,7 @@ export declare const cls: {
   readonly appRailBrand: 'ui-app-rail__brand';
   readonly appRailToggle: 'ui-app-rail__toggle';
   readonly appRailFoot: 'ui-app-rail__foot';
+  readonly appRailAccount: 'ui-app-rail__account';
   readonly appTopbar: 'ui-app-topbar';
   readonly appTopbarTitle: 'ui-app-topbar__title';
   readonly appToolbar: 'ui-app-toolbar';
@@ -235,13 +252,14 @@ export declare function cx(...parts: ClassValue[]): string;
 export interface ButtonOpts {
   variant?: 'ghost' | 'subtle' | 'danger';
   icon?: boolean;
+  size?: 'sm' | 'lg';
 }
 export interface CardOpts {
   accent?: boolean;
   interactive?: boolean;
 }
 export interface BadgeOpts {
-  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'muted';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'muted';
   dot?: boolean;
 }
 export interface NumOpts {
@@ -255,7 +273,7 @@ export interface LinkOpts {
   cta?: boolean;
 }
 export interface DotOpts {
-  tone?: 'accent' | 'success' | 'warning' | 'danger';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
   live?: boolean;
 }
 export interface DotgridOpts {
@@ -279,7 +297,7 @@ export interface ClusterOpts {
 export interface StaggerOpts {
   auto?: boolean;
 }
-export type Tone = 'accent' | 'success' | 'warning' | 'danger';
+export type Tone = 'accent' | 'success' | 'warning' | 'danger' | 'info';
 export interface AlertOpts {
   tone?: Tone;
 }
@@ -297,6 +315,8 @@ export interface DotbarOpts {
 }
 export interface ModalOpts {
   drawer?: boolean;
+  /** Controlled non-dialog usage — adds the is-open state (focus-trap is yours). */
+  open?: boolean;
 }
 export interface TabOpts {
   active?: boolean;

package/classes/index.js

@@ -23,6 +23,8 @@ export const cls = Object.freeze({
   buttonSubtle: 'ui-button--subtle',
   buttonDanger: 'ui-button--danger',
   buttonIcon: 'ui-button--icon',
+  buttonSm: 'ui-button--sm',
+  buttonLg: 'ui-button--lg',
   card: 'ui-card',
   cardHead: 'ui-card__head',
   cardAccent: 'ui-card--accent',
@@ -41,6 +43,7 @@ export const cls = Object.freeze({
   badgeSuccess: 'ui-badge--success',
   badgeWarning: 'ui-badge--warning',
   badgeDanger: 'ui-badge--danger',
+  badgeInfo: 'ui-badge--info',
   badgeMuted: 'ui-badge--muted',
   badgeDot: 'ui-badge--dot',
   chip: 'ui-chip',
@@ -49,12 +52,14 @@ export const cls = Object.freeze({
   linkArrow: 'ui-link--arrow',
   linkCta: 'ui-link--cta',
   keyValue: 'ui-key-value',
+  emptyState: 'ui-empty-state',
   // dots
   dot: 'ui-dot',
   dotAccent: 'ui-dot--accent',
   dotSuccess: 'ui-dot--success',
   dotWarning: 'ui-dot--warning',
   dotDanger: 'ui-dot--danger',
+  dotInfo: 'ui-dot--info',
   dotLive: 'ui-dot--live',
   dotgrid: 'ui-dotgrid',
   dotgridAccent: 'ui-dotgrid--accent',
@@ -100,6 +105,7 @@ export const cls = Object.freeze({
   alertSuccess: 'ui-alert--success',
   alertWarning: 'ui-alert--warning',
   alertDanger: 'ui-alert--danger',
+  alertInfo: 'ui-alert--info',
   toastStack: 'ui-toast-stack',
   toastStackAssertive: 'ui-toast-stack--assertive',
   toast: 'ui-toast',
@@ -109,6 +115,7 @@ export const cls = Object.freeze({
   toastSuccess: 'ui-toast--success',
   toastWarning: 'ui-toast--warning',
   toastDanger: 'ui-toast--danger',
+  toastInfo: 'ui-toast--info',
   tooltip: 'ui-tooltip',
   tooltipBubble: 'ui-tooltip__bubble',
   popover: 'ui-popover',
@@ -229,6 +236,7 @@ export const cls = Object.freeze({
   appRailBrand: 'ui-app-rail__brand',
   appRailToggle: 'ui-app-rail__toggle',
   appRailFoot: 'ui-app-rail__foot',
+  appRailAccount: 'ui-app-rail__account',
   appTopbar: 'ui-app-topbar',
   appTopbarTitle: 'ui-app-topbar__title',
   appToolbar: 'ui-app-toolbar',
@@ -264,13 +272,15 @@ export function cx(...parts) {
 const j = (...p) => p.filter(Boolean).join(' ');
 
 export const ui = {
-  button: ({ variant, icon } = {}) =>
+  button: ({ variant, icon, size } = {}) =>
     j(
       cls.button,
       variant === 'ghost' && cls.buttonGhost,
       variant === 'subtle' && cls.buttonSubtle,
       variant === 'danger' && cls.buttonDanger,
       icon && cls.buttonIcon,
+      size === 'sm' && cls.buttonSm,
+      size === 'lg' && cls.buttonLg,
     ),
   card: ({ accent, interactive } = {}) =>
     j(cls.card, accent && cls.cardAccent, interactive && cls.cardInteractive),
@@ -281,6 +291,7 @@ export const ui = {
       tone === 'success' && cls.badgeSuccess,
       tone === 'warning' && cls.badgeWarning,
       tone === 'danger' && cls.badgeDanger,
+      tone === 'info' && cls.badgeInfo,
       tone === 'muted' && cls.badgeMuted,
       dot && cls.badgeDot,
     ),
@@ -300,6 +311,7 @@ export const ui = {
       tone === 'success' && cls.dotSuccess,
       tone === 'warning' && cls.dotWarning,
       tone === 'danger' && cls.dotDanger,
+      tone === 'info' && cls.dotInfo,
       live && cls.dotLive,
     ),
   dotgrid: ({ accent, dense } = {}) =>
@@ -322,6 +334,7 @@ export const ui = {
       tone === 'success' && cls.alertSuccess,
       tone === 'warning' && cls.alertWarning,
       tone === 'danger' && cls.alertDanger,
+      tone === 'info' && cls.alertInfo,
     ),
   toast: ({ tone } = {}) =>
     j(
@@ -330,12 +343,13 @@ export const ui = {
       tone === 'success' && cls.toastSuccess,
       tone === 'warning' && cls.toastWarning,
       tone === 'danger' && cls.toastDanger,
+      tone === 'info' && cls.toastInfo,
     ),
   progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
   dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
-  modal: ({ drawer } = {}) => j(cls.modal, drawer && cls.modalDrawer),
+  modal: ({ drawer, open } = {}) => j(cls.modal, drawer && cls.modalDrawer, open && 'is-open'),
   tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
   avatar: ({ size } = {}) =>
     j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),

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

@@ -85,6 +85,10 @@
       "name": "--bronto-color-focus",
       "description": "Global scale token. Value: `var(--focus-ring)`"
     },
+    {
+      "name": "--bronto-color-info",
+      "description": "Global scale token. Value: `var(--info)`"
+    },
     {
       "name": "--bronto-color-on-action",
       "description": "Global scale token. Value: `var(--button-text)`"
@@ -131,7 +135,7 @@
     },
     {
       "name": "--display",
-      "description": "Global scale token. Value: `'Doto', var(--mono)`"
+      "description": "Global scale token. Value: `var(--dot-font)`"
     },
     {
       "name": "--dot-font",
@@ -185,6 +189,14 @@
       "name": "--focus-ring",
       "description": "Theme token. Light: `var(--accent)` · Dark: `var(--accent)`"
     },
+    {
+      "name": "--info",
+      "description": "Theme token. Light: `#1f63c4` · Dark: `#6fb0e6`"
+    },
+    {
+      "name": "--info-soft",
+      "description": "Theme token. Light: `rgb(31, 99, 196, 0.12)` · Dark: `rgb(111, 176, 230, 0.14)`"
+    },
     {
       "name": "--line",
       "description": "Theme token. Light: `#d8d8d4` · Dark: `#2a2a2a`"

package/css/app.css

@@ -111,6 +111,22 @@
   padding-block-start: var(--space-sm);
 }
 
+/* Account / identity slot — signed-in user + sign-out. A framework-
+   blessed home for what every shell otherwise hand-rolls. Pinned to the
+   rail end like __foot, but it stays visible when the rail collapses to
+   a horizontal bar on mobile (sign-out must not vanish). */
+.ui-app-rail__account {
+  align-items: center;
+  display: flex;
+  gap: var(--space-xs);
+  margin-block-start: auto;
+  padding-block-start: var(--space-sm);
+}
+
+.ui-app-rail__account + .ui-app-rail__foot {
+  margin-block-start: 0;
+}
+
 /* --- Main column --- */
 
 .ui-app-main {
@@ -196,8 +212,7 @@
   text-transform: uppercase;
 }
 
-.ui-app-panel__head p,
-.ui-app-empty-state p {
+.ui-app-panel__head p {
   color: var(--text-dim);
   margin: 0.3rem 0 0;
 }
@@ -209,15 +224,11 @@
    the canonical rules there — identical output). Nothing app-specific
    left to define here. */
 
-/* --- Empty state --- */
-
-.ui-app-empty-state {
-  border: 1px dashed var(--line-strong);
-  border-radius: var(--radius-md);
-  color: var(--text-dim);
-  padding: var(--space-lg);
-  text-align: center;
-}
+/* --- Empty state ---
+   The empty-state primitive is shell-agnostic and now lives in
+   primitives.css as `.ui-empty-state`; `.ui-app-empty-state` remains a
+   permanent admin-shell alias (grouped on the canonical rules there —
+   identical output). Nothing app-specific left to define here. */
 
 /* --- Mobile rail collapse --- */
 

package/css/dots.css

@@ -94,6 +94,10 @@
   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);
@@ -229,7 +233,7 @@
 
 .ui-dotbar i {
   background: var(--field-dot);
-  border-radius: 1px;
+  border-radius: var(--radius-sm);
   flex: 1;
   block-size: 0.5rem;
 }

package/css/feedback.css

@@ -95,6 +95,14 @@
   background: var(--danger);
 }
 
+.ui-alert--info {
+  border-inline-start-color: var(--info);
+}
+
+.ui-alert--info::before {
+  background: var(--info);
+}
+
 @media (hover: hover) {
   .ui-alert__dismiss:hover {
     color: var(--text);
@@ -201,6 +209,10 @@
   background: var(--danger);
 }
 
+.ui-toast--info::before {
+  background: var(--info);
+}
+
 /* --- Tooltip — CSS-only, hover/focus, no JS --- */
 
 .ui-tooltip {

package/css/overlay.css

@@ -31,6 +31,16 @@
   grid-template-rows: auto 1fr auto;
 }
 
+/* Controlled (non-<dialog>) usage. A portal/React modal that can't be a
+   native <dialog> wears the same skin + open layout via `.is-open`.
+   Backdrop, top-layer stacking and focus-trapping are then the
+   consumer's responsibility (the native <dialog> path gets them free). */
+.ui-modal.is-open {
+  animation: uiToastIn var(--duration-base) var(--ease-spring) both;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
 .ui-modal__head {
   align-items: flex-start;
   border-block-end: 1px solid var(--line);

package/css/primitives.css

@@ -314,6 +314,24 @@
   padding: 0;
 }
 
+/* Size scale — dense tooling (toolbars, pagination, table actions) wants
+   --sm; --lg for hero CTAs. Token-driven; the default is unchanged. */
+.ui-button--sm {
+  font-size: var(--text-xs);
+  gap: 0.3rem;
+  min-block-size: 1.9rem;
+  min-inline-size: 1.9rem;
+  padding: 0.4rem 0.66rem;
+}
+
+.ui-button--lg {
+  font-size: var(--text-base);
+  gap: 0.55rem;
+  min-block-size: 2.9rem;
+  min-inline-size: 2.9rem;
+  padding: 0.85rem 1.4rem;
+}
+
 .ui-button:disabled,
 .ui-button[aria-disabled='true'] {
   cursor: not-allowed;
@@ -459,6 +477,11 @@
   border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
 }
 
+.ui-badge--info {
+  background: var(--info-soft);
+  border-color: color-mix(in srgb, var(--info) 40%, var(--line));
+}
+
 /* Idle / unknown — the honest "no signal yet" tone (distinct from the
    default tinted badge). Token-safe; no new hue. */
 .ui-badge--muted {
@@ -495,6 +518,10 @@
   background: var(--danger);
 }
 
+.ui-badge--info.ui-badge--dot::before {
+  background: var(--info);
+}
+
 /* --- Key/value list --- */
 
 .ui-key-value {
@@ -586,3 +613,21 @@
     min-inline-size: 2.9rem;
   }
 }
+
+/* --- Empty state — shell-agnostic placeholder for "no data yet".
+   Freed from the admin shell; `.ui-app-empty-state` stays a permanent
+   grouped alias (identical output, no baseline drift). --- */
+.ui-empty-state,
+.ui-app-empty-state {
+  border: 1px dashed var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text-dim);
+  padding: var(--space-lg);
+  text-align: center;
+}
+
+.ui-empty-state p,
+.ui-app-empty-state p {
+  color: var(--text-dim);
+  margin: 0.3rem 0 0;
+}

package/css/tokens.css

@@ -29,8 +29,8 @@
   --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace;
   --sans:
     'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-  --display: 'Doto', var(--mono);
   --dot-font: 'Doto', var(--mono);
+  --display: var(--dot-font);
   --text-2xs: 0.68rem;
   --text-xs: 0.76rem;
   --text-sm: 0.86rem;
@@ -99,6 +99,7 @@
   --bronto-color-success: var(--success);
   --bronto-color-warning: var(--warning);
   --bronto-color-danger: var(--danger);
+  --bronto-color-info: var(--info);
 
   /* Aliases kept for back-compat with existing semantic classes */
   --surface: var(--panel);
@@ -138,6 +139,8 @@
   --orange-soft: rgb(168, 95, 50, 0.13);
   --danger: #c01622;
   --danger-soft: rgb(192, 22, 34, 0.1);
+  --info: #1f63c4;
+  --info-soft: rgb(31, 99, 196, 0.12);
   --code-bg: rgb(10, 10, 10, 0.05);
   --button-text: #ffffff;
   --field-dot: rgb(10, 10, 10, 0.16);
@@ -189,6 +192,8 @@
     --orange-soft: rgb(208, 140, 91, 0.15);
     --danger: #ff4d54;
     --danger-soft: rgb(255, 77, 84, 0.15);
+    --info: #6fb0e6;
+    --info-soft: rgb(111, 176, 230, 0.14);
     --code-bg: rgb(255, 255, 255, 0.05);
     --button-text: #000000;
     --field-dot: rgb(242, 242, 242, 0.14);
@@ -226,6 +231,8 @@
   --orange-soft: rgb(208, 140, 91, 0.15);
   --danger: #ff4d54;
   --danger-soft: rgb(255, 77, 84, 0.15);
+  --info: #6fb0e6;
+  --info-soft: rgb(111, 176, 230, 0.14);
   --code-bg: rgb(255, 255, 255, 0.05);
   --button-text: #000000;
   --field-dot: rgb(242, 242, 242, 0.14);