@ponchia/ui 0.3.3 → 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
@@ -65,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

@@ -39,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';
@@ -53,6 +54,7 @@ export declare const cls: {
   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';
@@ -96,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';
@@ -105,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';
@@ -255,7 +259,7 @@ export interface CardOpts {
   interactive?: boolean;
 }
 export interface BadgeOpts {
-  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'muted';
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'muted';
   dot?: boolean;
 }
 export interface NumOpts {
@@ -269,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 {
@@ -293,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;
 }

package/classes/index.js

@@ -43,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',
@@ -58,6 +59,7 @@ export const cls = Object.freeze({
   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',
@@ -103,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',
@@ -112,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',
@@ -287,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,
     ),
@@ -306,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 } = {}) =>
@@ -328,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(
@@ -336,6 +343,7 @@ 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 } = {}) =>

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/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/primitives.css

@@ -477,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 {
@@ -513,6 +518,10 @@
   background: var(--danger);
 }
 
+.ui-badge--info.ui-badge--dot::before {
+  background: var(--info);
+}
+
 /* --- Key/value list --- */
 
 .ui-key-value {

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);