@ponchia/ui 0.8.1 → 0.10.0

package/classes/classes.json

@@ -1,8 +1,8 @@
 {
   "$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": 669,
-    "groups": 183
+    "classes": 683,
+    "groups": 186
   },
   "groups": {
     "ui-accordion": {
@@ -295,7 +295,8 @@
     "ui-chip": {
       "base": "ui-chip",
       "modifiers": [
-        "ui-chip--accent"
+        "ui-chip--accent",
+        "ui-chip--dense"
       ],
       "parts": []
     },
@@ -830,7 +831,10 @@
     },
     "ui-menu": {
       "base": "ui-menu",
-      "modifiers": [],
+      "modifiers": [
+        "ui-menu--at-pointer",
+        "ui-menu--dropdown"
+      ],
       "parts": [
         "ui-menu__item",
         "ui-menu__label",
@@ -1074,6 +1078,18 @@
       "modifiers": [],
       "parts": []
     },
+    "ui-row": {
+      "base": "ui-row",
+      "modifiers": [
+        "ui-row--ruled",
+        "ui-row--stacked"
+      ],
+      "parts": [
+        "ui-row__mark",
+        "ui-row__meta",
+        "ui-row__title"
+      ]
+    },
     "ui-screen-only": {
       "base": "ui-screen-only",
       "modifiers": [],
@@ -1152,6 +1168,11 @@
         "ui-severity-row__title"
       ]
     },
+    "ui-severity-tone": {
+      "base": "ui-severity-tone",
+      "modifiers": [],
+      "parts": []
+    },
     "ui-shortcut": {
       "base": "ui-shortcut",
       "modifiers": [],
@@ -1442,6 +1463,15 @@
         "ui-timeline__time"
       ]
     },
+    "ui-timestrip": {
+      "base": "ui-timestrip",
+      "modifiers": [],
+      "parts": [
+        "ui-timestrip__axis",
+        "ui-timestrip__event",
+        "ui-timestrip__now"
+      ]
+    },
     "ui-toast": {
       "base": "ui-toast",
       "modifiers": [
@@ -1682,6 +1712,7 @@
     "ui-check",
     "ui-chip",
     "ui-chip--accent",
+    "ui-chip--dense",
     "ui-citation",
     "ui-citation--chip",
     "ui-claim",
@@ -1924,6 +1955,8 @@
     "ui-mark--warning",
     "ui-matrix",
     "ui-menu",
+    "ui-menu--at-pointer",
+    "ui-menu--dropdown",
     "ui-menu-host",
     "ui-menu__item",
     "ui-menu__label",
@@ -2039,6 +2072,12 @@
     "ui-report__title",
     "ui-report__toc",
     "ui-reveal",
+    "ui-row",
+    "ui-row--ruled",
+    "ui-row--stacked",
+    "ui-row__mark",
+    "ui-row__meta",
+    "ui-row__title",
     "ui-screen-only",
     "ui-scroll-progress",
     "ui-scroll-reveal",
@@ -2063,6 +2102,7 @@
     "ui-severity-row",
     "ui-severity-row__meta",
     "ui-severity-row__title",
+    "ui-severity-tone",
     "ui-shortcut",
     "ui-shortcut__sep",
     "ui-sidebar",
@@ -2171,6 +2211,10 @@
     "ui-timeline",
     "ui-timeline__item",
     "ui-timeline__time",
+    "ui-timestrip",
+    "ui-timestrip__axis",
+    "ui-timestrip__event",
+    "ui-timestrip__now",
     "ui-toast",
     "ui-toast--accent",
     "ui-toast--danger",
@@ -2801,12 +2845,6 @@
       "behavior": "initDialog",
       "note": "opt into backdrop light-dismiss (click the backdrop to close)"
     },
-    {
-      "name": "data-bronto-modal",
-      "on": "a controlled (non-<dialog>) .ui-modal overlay",
-      "behavior": "initModal",
-      "note": "inert focus-trap, focus-return, and Escape close signal for a consumer-owned .is-open modal; needs an accessible name"
-    },
     {
       "name": "data-bronto-menu",
       "on": "a native <details> dropdown",

package/classes/index.d.ts

@@ -51,10 +51,17 @@ export declare const cls: {
   readonly badgeDot: 'ui-badge--dot';
   readonly chip: 'ui-chip';
   readonly chipAccent: 'ui-chip--accent';
+  readonly chipDense: 'ui-chip--dense';
   readonly link: 'ui-link';
   readonly linkArrow: 'ui-link--arrow';
   readonly linkCta: 'ui-link--cta';
   readonly keyValue: 'ui-key-value';
+  readonly row: 'ui-row';
+  readonly rowTitle: 'ui-row__title';
+  readonly rowMeta: 'ui-row__meta';
+  readonly rowMark: 'ui-row__mark';
+  readonly rowStacked: 'ui-row--stacked';
+  readonly rowRuled: 'ui-row--ruled';
   readonly emptyState: 'ui-empty-state';
   readonly emptyStateInvite: 'ui-empty-state--invite';
   readonly emptyStateGlyph: 'ui-empty-state__glyph';
@@ -164,6 +171,8 @@ export declare const cls: {
   readonly modalDrawer: 'ui-modal--drawer';
   readonly menuHost: 'ui-menu-host';
   readonly menu: 'ui-menu';
+  readonly menuDropdown: 'ui-menu--dropdown';
+  readonly menuAtPointer: 'ui-menu--at-pointer';
   readonly menuLabel: 'ui-menu__label';
   readonly menuItem: 'ui-menu__item';
   readonly menuSep: 'ui-menu__sep';
@@ -571,6 +580,11 @@ export declare const cls: {
   readonly severityRow: 'ui-severity-row';
   readonly severityRowTitle: 'ui-severity-row__title';
   readonly severityRowMeta: 'ui-severity-row__meta';
+  readonly severityTone: 'ui-severity-tone';
+  readonly timestrip: 'ui-timestrip';
+  readonly timestripAxis: 'ui-timestrip__axis';
+  readonly timestripNow: 'ui-timestrip__now';
+  readonly timestripEvent: 'ui-timestrip__event';
   readonly generated: 'ui-generated';
   readonly generatedLabel: 'ui-generated__label';
   readonly originLabel: 'ui-origin-label';
@@ -734,6 +748,7 @@ export interface ClaimOpts {
 }
 export interface ChipOpts {
   accent?: boolean;
+  dense?: boolean;
 }
 export interface LinkOpts {
   arrow?: boolean;
@@ -786,8 +801,6 @@ export interface DotbarOpts {
 }
 export interface ModalOpts {
   drawer?: boolean;
-  /** Controlled non-dialog usage — adds only the is-open state; pair with initModal for focus management. */
-  open?: boolean;
 }
 export interface TabOpts {
   active?: boolean;
@@ -1006,7 +1019,7 @@ export type SeverityLevel = (typeof SEVERITY_LEVELS)[number];
  *  `'unknown'`, which paints the neutral tone. */
 export declare function severity(
   level: SeverityLevel | (string & {}) | null | undefined,
-  opts?: { part?: 'chip' | 'dot' | 'row' },
+  opts?: { part?: 'chip' | 'dot' | 'row' | 'tone' },
 ): { class: string; 'data-level': string };
 
 /** Min/max for the value-bearing fills; defaults to 0–100. */

package/classes/index.js

@@ -55,10 +55,17 @@ export const cls = Object.freeze({
   badgeDot: 'ui-badge--dot',
   chip: 'ui-chip',
   chipAccent: 'ui-chip--accent',
+  chipDense: 'ui-chip--dense',
   link: 'ui-link',
   linkArrow: 'ui-link--arrow',
   linkCta: 'ui-link--cta',
   keyValue: 'ui-key-value',
+  row: 'ui-row',
+  rowTitle: 'ui-row__title',
+  rowMeta: 'ui-row__meta',
+  rowMark: 'ui-row__mark',
+  rowStacked: 'ui-row--stacked',
+  rowRuled: 'ui-row--ruled',
   emptyState: 'ui-empty-state',
   emptyStateInvite: 'ui-empty-state--invite',
   emptyStateGlyph: 'ui-empty-state__glyph',
@@ -173,6 +180,8 @@ export const cls = Object.freeze({
   modalDrawer: 'ui-modal--drawer',
   menuHost: 'ui-menu-host',
   menu: 'ui-menu',
+  menuDropdown: 'ui-menu--dropdown',
+  menuAtPointer: 'ui-menu--at-pointer',
   menuLabel: 'ui-menu__label',
   menuItem: 'ui-menu__item',
   menuSep: 'ui-menu__sep',
@@ -609,6 +618,14 @@ export const cls = Object.freeze({
   severityRow: 'ui-severity-row',
   severityRowTitle: 'ui-severity-row__title',
   severityRowMeta: 'ui-severity-row__meta',
+  // The tone as a value, for a mark Bronto does not ship (an SVG shape, a
+  // gradient stop): it paints nothing and only resolves `--severity-tone`.
+  severityTone: 'ui-severity-tone',
+  // timestrip — WHEN, beside the ladder's HOW BAD (css/state.css)
+  timestrip: 'ui-timestrip',
+  timestripAxis: 'ui-timestrip__axis',
+  timestripNow: 'ui-timestrip__now',
+  timestripEvent: 'ui-timestrip__event',
   // generated content / AI-trust surfaces (css/generated.css)
   generated: 'ui-generated',
   generatedLabel: 'ui-generated__label',
@@ -977,7 +994,7 @@ export const ui = {
   compare: ({ cols } = {}) => j(cls.compare, cols === 2 && cls.compare2up),
   reportFinding: ({ severity } = {}) => j(cls.reportFinding, reportFindingSeverity(severity)),
   claim: ({ status } = {}) => j(cls.claim, claimStatus(status)),
-  chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
+  chip: ({ accent, dense } = {}) => j(cls.chip, accent && cls.chipAccent, dense && cls.chipDense),
   link: ({ arrow, cta } = {}) => j(cls.link, arrow && cls.linkArrow, cta && cls.linkCta),
   dot: ({ tone, live } = {}) => j(cls.dot, dotTone(tone), live && cls.dotLive),
   dotgrid: ({ accent, dense } = {}) =>
@@ -1002,7 +1019,7 @@ export const ui = {
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
   dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
-  modal: ({ drawer, open } = {}) => j(cls.modal, drawer && cls.modalDrawer, open && 'is-open'),
+  modal: ({ drawer } = {}) => j(cls.modal, drawer && cls.modalDrawer),
   tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
   avatar: ({ size } = {}) =>
     j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
@@ -1149,8 +1166,16 @@ export const SEVERITY_LEVELS = Object.freeze(['critical', 'error', 'warning', 'n
 /** `data-level` + the severity class, bundled so the attribute that carries the
  *  meaning cannot be forgotten — the class alone paints the neutral tone and
  *  silently loses the level. Unknown/absent levels resolve to `unknown`. */
+const SEVERITY_PARTS = {
+  chip: 'severity',
+  dot: 'severityDot',
+  row: 'severityRow',
+  // Paints nothing; resolves the tone for a mark Bronto does not ship.
+  tone: 'severityTone',
+};
+
 export const severity = (level, { part = 'chip' } = {}) => ({
-  class: part === 'dot' ? cls.severityDot : part === 'row' ? cls.severityRow : cls.severity,
+  class: cls[SEVERITY_PARTS[part] ?? 'severity'],
   'data-level': SEVERITY_LEVELS.includes(level) ? level : 'unknown',
 });
 

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

@@ -239,11 +239,11 @@
     },
     {
       "name": "--radius-lg",
-      "description": "Global scale token. Value: `3px`"
+      "description": "Global scale token. Value: `6px`"
     },
     {
       "name": "--radius-md",
-      "description": "Global scale token. Value: `2px`"
+      "description": "Global scale token. Value: `4px`"
     },
     {
       "name": "--radius-pill",
@@ -251,11 +251,11 @@
     },
     {
       "name": "--radius-sm",
-      "description": "Global scale token. Value: `1px`"
+      "description": "Global scale token. Value: `2px`"
     },
     {
       "name": "--radius-xl",
-      "description": "Global scale token. Value: `4px`"
+      "description": "Global scale token. Value: `8px`"
     },
     {
       "name": "--safe-area-bottom",
@@ -371,11 +371,11 @@
     },
     {
       "name": "--text-2xs",
-      "description": "Global scale token. Value: `0.72rem`"
+      "description": "Global scale token. Value: `0.75rem`"
     },
     {
       "name": "--text-base",
-      "description": "Global scale token. Value: `0.95rem`"
+      "description": "Global scale token. Value: `1rem`"
     },
     {
       "name": "--text-dim",
@@ -383,11 +383,11 @@
     },
     {
       "name": "--text-lg",
-      "description": "Global scale token. Value: `1.15rem`"
+      "description": "Global scale token. Value: `1.125rem`"
     },
     {
       "name": "--text-sm",
-      "description": "Global scale token. Value: `0.86rem`"
+      "description": "Global scale token. Value: `0.875rem`"
     },
     {
       "name": "--text-soft",
@@ -395,11 +395,11 @@
     },
     {
       "name": "--text-xl",
-      "description": "Global scale token. Value: `1.45rem`"
+      "description": "Global scale token. Value: `1.5rem`"
     },
     {
       "name": "--text-xs",
-      "description": "Global scale token. Value: `0.76rem`"
+      "description": "Global scale token. Value: `0.8125rem`"
     },
     {
       "name": "--tracking-wide",

package/css/app.css

@@ -64,12 +64,12 @@
 
 .ui-app-nav__section {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: var(--space-sm) 0 0.3rem;
   padding: 0 0.5rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-app-nav a {
@@ -77,7 +77,7 @@
   border-inline-start: 2px solid transparent;
   color: var(--text-soft);
   display: flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   gap: 0.55rem;
   padding: 0.5rem 0.6rem;
@@ -148,7 +148,7 @@
 .ui-app-rail__foot {
   border-block-start: 1px solid var(--line);
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   margin-block-start: auto;
   padding-block-start: var(--space-sm);
@@ -163,9 +163,15 @@
   display: flex;
   gap: var(--space-xs);
   margin-block-start: auto;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   padding-block-start: var(--space-sm);
 }
 
+.ui-app-rail__account > * {
+  min-inline-size: 0;
+}
+
 .ui-app-rail__account + .ui-app-rail__foot {
   margin-block-start: 0;
 }
@@ -204,17 +210,17 @@
 
 .ui-app-topbar__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: 1.1rem;
-  font-weight: var(--display-weight);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: 1.25rem;
+  font-weight: 650;
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-app-content {
   display: grid;
-  gap: var(--space-lg);
+  gap: var(--space-xl);
   padding: var(--space-lg);
 }
 
@@ -222,14 +228,12 @@
 
 .ui-app-toolbar {
   align-items: center;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
+  border-block-end: 1px solid var(--line);
   display: flex;
   flex-wrap: wrap;
   gap: 0.7rem;
   justify-content: space-between;
-  padding: 0.7rem 0.85rem;
+  padding-block-end: var(--space-md);
 }
 
 .ui-app-toolbar__group {
@@ -242,29 +246,43 @@
 /* --- Panel --- */
 
 .ui-app-panel {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
   display: grid;
-  gap: 0.85rem;
-  padding: var(--space-md);
+  gap: var(--space-md);
+  min-inline-size: 0;
 }
 
 .ui-app-panel__head {
   align-items: flex-start;
   display: flex;
+  flex-wrap: wrap;
   gap: 0.7rem;
   justify-content: space-between;
 }
 
 .ui-app-panel__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: 0.95rem;
-  font-weight: var(--display-weight);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: 1.125rem;
+  font-weight: 650;
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
+}
+
+/* A service overview needs a compact scan, including on a phone. Keep the
+   generic stat tile available elsewhere; avoid framing every metric twice. */
+.ui-app-panel > .ui-statgrid,
+.ui-app-panel > .ui-app-metrics {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
+}
+
+.ui-app-panel > .ui-statgrid > .ui-stat,
+.ui-app-panel > .ui-app-metrics > .ui-app-metric {
+  background: none;
+  border: 0;
+  border-block-start: 1px solid var(--line);
+  border-radius: 0;
+  padding: var(--space-md) 0;
 }
 
 .ui-app-panel__head p {
@@ -285,7 +303,7 @@
    permanent admin-shell alias (grouped on the canonical rules there —
    identical output). Nothing app-specific left to define here. */
 
-/* --- Mobile rail: collapses to a horizontal scrolling strip --- */
+/* --- Mobile rail: navigation wraps instead of hiding destinations offscreen. --- */
 
 @media (max-width: 880px) {
   .ui-app-shell {
@@ -300,10 +318,10 @@
   }
 
   .ui-app-rail {
-    flex-direction: row;
+    flex-flow: row wrap;
     block-size: auto;
-    overflow-x: auto;
-    position: sticky;
+    overflow: visible;
+    position: static;
     inset-block-start: 0;
     z-index: calc(var(--z-raised) + 1);
   }
@@ -321,7 +339,9 @@
   }
 
   .ui-app-nav {
-    grid-auto-flow: column;
+    display: flex;
+    flex: 1 0 100%;
+    flex-wrap: wrap;
     gap: 0.15rem;
   }
 
@@ -330,6 +350,8 @@
   }
 
   .ui-app-nav a {
+    flex: 1 1 auto;
+    justify-content: center;
     border-inline-start: 0;
     border-block-end: 2px solid transparent;
     white-space: nowrap;

package/css/base.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   base — reset + element defaults, Nothing-flat
+   base — reset + readable element defaults
    ========================================================================== */
 
 *,
@@ -13,9 +13,8 @@ html {
   color: var(--text);
   font-family: var(--sans);
 
-  /* = 15px at the 16px default, but rem honours a user's browser font-size
-     preference (which a px root would ignore). */
-  font-size: 0.9375rem;
+  /* Preserve the browser's preferred reading size. Compact controls use tokens. */
+  font-size: 1rem;
   line-height: 1.55;
   scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
@@ -74,27 +73,25 @@ li {
   line-height: 1.65;
 }
 
-/* Headings ride the dot-matrix display face. */
+/* Everyday headings are readable text. .ui-display owns the brand face. */
 h1,
 h2,
 h3,
 h4 {
   color: var(--text);
-  font-family: var(--display);
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  line-height: 1.06;
+  font-family: var(--sans);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
   margin: 0;
-  text-transform: uppercase;
 }
 
 h1 {
-  font-size: clamp(2.6rem, 6vw, 4.6rem);
-  letter-spacing: 0.02em;
+  font-size: clamp(2rem, 4vw, 3rem);
 }
 
 h2 {
-  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
+  font-size: clamp(1.5rem, 3vw, 2rem);
 }
 
 h3 {
@@ -103,7 +100,6 @@ h3 {
 
 h4 {
   font-size: 1rem;
-  letter-spacing: var(--tracking-wide);
 }
 
 strong,