@ponchia/ui 0.5.0 → 0.6.3

package/classes/index.js

@@ -38,6 +38,11 @@ export const cls = Object.freeze({
   numPos: 'ui-num--pos',
   numNeg: 'ui-num--neg',
   numMuted: 'ui-num--muted',
+  delta: 'ui-delta',
+  deltaUp: 'ui-delta--up',
+  deltaDown: 'ui-delta--down',
+  deltaFlat: 'ui-delta--flat',
+  deltaInvert: 'ui-delta--invert',
   badge: 'ui-badge',
   badgeAccent: 'ui-badge--accent',
   badgeSuccess: 'ui-badge--success',
@@ -106,7 +111,7 @@ export const cls = Object.freeze({
   alert: 'ui-alert',
   alertTitle: 'ui-alert__title',
   alertBody: 'ui-alert__body',
-  alertDismiss: 'ui-alert__dismiss',
+  alertClose: 'ui-alert__close',
   alertAccent: 'ui-alert--accent',
   alertSuccess: 'ui-alert--success',
   alertWarning: 'ui-alert--warning',
@@ -130,10 +135,14 @@ export const cls = Object.freeze({
   progressIndeterminate: 'ui-progress--indeterminate',
   meter: 'ui-meter',
   meterFill: 'ui-meter__fill',
+  meterRow: 'ui-meter__row',
+  meterLabel: 'ui-meter__label',
+  meterValue: 'ui-meter__value',
   meterAccent: 'ui-meter--accent',
   meterSuccess: 'ui-meter--success',
   meterWarning: 'ui-meter--warning',
   meterDanger: 'ui-meter--danger',
+  meterInfo: 'ui-meter--info',
   steps: 'ui-steps',
   stepsItem: 'ui-steps__item',
   stepsItemDone: 'ui-steps__item--done',
@@ -191,12 +200,13 @@ export const cls = Object.freeze({
   tableComfortable: 'ui-table--comfortable',
   tableLined: 'ui-table--lined',
   tableWrap: 'ui-table-wrap',
+  // Loading state goes on the WRAP, so the modifier is named for the wrap (C19).
+  tableLoading: 'ui-table-wrap--loading',
   tableEmpty: 'ui-table__empty',
   tableSort: 'ui-table__sort',
   tableSelect: 'ui-table__select',
   tableToolbar: 'ui-table__toolbar',
   tableSelectable: 'ui-table--selectable',
-  tableLoading: 'ui-table--loading',
   // shell / layout
   panel: 'ui-panel',
   panelHead: 'ui-panel__head',
@@ -251,7 +261,7 @@ export const cls = Object.freeze({
   reportNumbered: 'ui-report--numbered',
   reportCover: 'ui-report__cover',
   reportCoverCompact: 'ui-report__cover--compact',
-  reportHeader: 'ui-report__header',
+  reportHead: 'ui-report__head',
   reportTitle: 'ui-report__title',
   reportSubtitle: 'ui-report__subtitle',
   reportMeta: 'ui-report__meta',
@@ -267,14 +277,10 @@ export const cls = Object.freeze({
   reportSources: 'ui-report__sources',
   reportAppendix: 'ui-report__appendix',
   reportFootnotes: 'ui-report__footnotes',
-  chart: 'ui-chart',
-  chartCaption: 'ui-chart__caption',
-  chartPlot: 'ui-chart__plot',
-  chartBar: 'ui-chart__bar',
-  chartLabel: 'ui-chart__label',
-  chartTrack: 'ui-chart__track',
-  chartFill: 'ui-chart__fill',
-  chartFallback: 'ui-chart__fallback',
+  compare: 'ui-compare',
+  compare2up: 'ui-compare--2up',
+  compareCol: 'ui-compare__col',
+  compareHead: 'ui-compare__head',
   // legend (standalone data keys — css/legend.css)
   legend: 'ui-legend',
   legendVertical: 'ui-legend--vertical',
@@ -354,6 +360,7 @@ export const cls = Object.freeze({
   bracketNote: 'ui-bracket-note',
   bracketNoteLabel: 'ui-bracket-note__label',
   bracketNoteAccent: 'ui-bracket-note--accent',
+  bracketNoteSuccess: 'ui-bracket-note--success',
   bracketNoteWarning: 'ui-bracket-note--warning',
   bracketNoteDanger: 'ui-bracket-note--danger',
   bracketNoteInfo: 'ui-bracket-note--info',
@@ -404,12 +411,71 @@ export const cls = Object.freeze({
   sourceCardActions: 'ui-source-card__actions',
   provenance: 'ui-provenance',
   provenanceItem: 'ui-provenance__item',
+  src: 'ui-src',
   srcVerified: 'ui-src--verified',
   srcUnverified: 'ui-src--unverified',
   srcGenerated: 'ui-src--generated',
   srcReviewed: 'ui-src--reviewed',
   srcStale: 'ui-src--stale',
   srcConflict: 'ui-src--conflict',
+  // diff — line/row change-review grammar (css/diff.css)
+  diff: 'ui-diff',
+  diffSplit: 'ui-diff--split',
+  diffPane: 'ui-diff__pane',
+  diffHunk: 'ui-diff__hunk',
+  diffHead: 'ui-diff__head',
+  diffRow: 'ui-diff__row',
+  diffRowAdd: 'ui-diff__row--add',
+  diffRowRemove: 'ui-diff__row--remove',
+  diffRowContext: 'ui-diff__row--context',
+  diffLn: 'ui-diff__ln',
+  diffCode: 'ui-diff__code',
+  // code — fenced-code evidence chrome (css/code.css)
+  code: 'ui-code',
+  codeNumbered: 'ui-code--numbered',
+  codeHead: 'ui-code__head',
+  codeBody: 'ui-code__body',
+  codeLine: 'ui-code__line',
+  codeLineAdd: 'ui-code__line--add',
+  codeLineRemove: 'ui-code__line--remove',
+  codeLineHl: 'ui-code__line--hl',
+  // spark — inline datawords / microcharts (css/spark.css)
+  spark: 'ui-spark',
+  sparkBar: 'ui-spark__bar',
+  sparkBarAccent: 'ui-spark__bar--accent',
+  sparkBarPos: 'ui-spark__bar--pos',
+  sparkBarNeg: 'ui-spark__bar--neg',
+  // sidenote — Tufte margin notes (css/sidenote.css)
+  sidenote: 'ui-sidenote',
+  marginnote: 'ui-marginnote',
+  sidenoteRef: 'ui-sidenote__ref',
+  // textref — deep-link-to-cited-text provenance link (css/textref.css)
+  textref: 'ui-textref',
+  // bullet — Stephen-Few bullet graph: measure vs target vs bands (css/bullet.css)
+  bullet: 'ui-bullet',
+  bulletMeasure: 'ui-bullet__measure',
+  bulletMeasureAccent: 'ui-bullet__measure--accent',
+  bulletMeasurePos: 'ui-bullet__measure--pos',
+  bulletMeasureNeg: 'ui-bullet__measure--neg',
+  bulletTarget: 'ui-bullet__target',
+  bulletLabel: 'ui-bullet__label',
+  // term — inline glossary term + definition popover + glossary <dl> (css/term.css)
+  term: 'ui-term',
+  def: 'ui-def',
+  glossary: 'ui-glossary',
+  glossaryTerm: 'ui-glossary__term',
+  glossaryDef: 'ui-glossary__def',
+  // toc — scrollspy table-of-contents rail (css/toc.css)
+  toc: 'ui-toc',
+  tocTitle: 'ui-toc__title',
+  tocList: 'ui-toc__list',
+  tocLink: 'ui-toc__link',
+  // tree — hierarchy outline on nested <details> (css/tree.css)
+  tree: 'ui-tree',
+  treeBranch: 'ui-tree__branch',
+  treeLeaf: 'ui-tree__leaf',
+  treeSummary: 'ui-tree__summary',
+  treeLabel: 'ui-tree__label',
   // lifecycle / system state (css/state.css)
   state: 'ui-state',
   stateLabel: 'ui-state__label',
@@ -440,7 +506,7 @@ export const cls = Object.freeze({
   toolCallBody: 'ui-tool-call__body',
   // workbench — inspector / property / selection bar (css/workbench.css)
   inspector: 'ui-inspector',
-  inspectorHeader: 'ui-inspector__header',
+  inspectorHead: 'ui-inspector__head',
   inspectorBody: 'ui-inspector__body',
   property: 'ui-property',
   propertyLabel: 'ui-property__label',
@@ -490,7 +556,6 @@ export const cls = Object.freeze({
   appShellFull: 'ui-app-shell--full',
   appRail: 'ui-app-rail',
   appRailBrand: 'ui-app-rail__brand',
-  appRailToggle: 'ui-app-rail__toggle',
   appRailFoot: 'ui-app-rail__foot',
   appRailAccount: 'ui-app-rail__account',
   appTopbar: 'ui-app-topbar',
@@ -543,14 +608,105 @@ const stateTone = (state) =>
   })[state] || '';
 
 // Trust-state → tone class, shared by the source/citation/provenance recipes.
+// Object-literal lookup to match stateTone above (shorter, greppable, one idiom).
 const srcTone = (state) =>
-  (state === 'verified' && cls.srcVerified) ||
-  (state === 'unverified' && cls.srcUnverified) ||
-  (state === 'generated' && cls.srcGenerated) ||
-  (state === 'reviewed' && cls.srcReviewed) ||
-  (state === 'stale' && cls.srcStale) ||
-  (state === 'conflict' && cls.srcConflict) ||
-  '';
+  ({
+    verified: cls.srcVerified,
+    unverified: cls.srcUnverified,
+    generated: cls.srcGenerated,
+    reviewed: cls.srcReviewed,
+    stale: cls.srcStale,
+    conflict: cls.srcConflict,
+  })[state] || '';
+
+// Component tone → modifier class. Same object-literal idiom as srcTone/stateTone
+// (still grep-by-class-name; the modifier set differs per component). (Q9.)
+//
+// The set differs PER COMPONENT on purpose — `muted` is a badge/num tone, not an
+// alert/toast/meter/dot one — so a caller extrapolating a universal tone (e.g.
+// `ui.alert({ tone: 'muted' })`) used to get a silent no-op: a bare, untoned
+// element with no signal that the tone was dropped. Warn at dev time instead, so
+// that "validates-but-no-ops" trap is loud rather than invisible. An omitted tone
+// is fine (returns no modifier). (component audit C12.)
+const toneClass = (component, map, tone) => {
+  if (tone == null) return '';
+  const hit = map[tone];
+  if (!hit && typeof console !== 'undefined') {
+    console.warn(
+      `[bronto] ui.${component}(): "${tone}" is not a ${component} tone (use one of: ${Object.keys(map).join(', ')}).`,
+    );
+  }
+  return hit || '';
+};
+
+const badgeTone = (tone) =>
+  toneClass(
+    'badge',
+    {
+      accent: cls.badgeAccent,
+      success: cls.badgeSuccess,
+      warning: cls.badgeWarning,
+      danger: cls.badgeDanger,
+      info: cls.badgeInfo,
+      muted: cls.badgeMuted,
+    },
+    tone,
+  );
+
+const numTone = (tone) =>
+  toneClass('num', { pos: cls.numPos, neg: cls.numNeg, muted: cls.numMuted }, tone);
+
+const dotTone = (tone) =>
+  toneClass(
+    'dot',
+    {
+      accent: cls.dotAccent,
+      success: cls.dotSuccess,
+      warning: cls.dotWarning,
+      danger: cls.dotDanger,
+      info: cls.dotInfo,
+    },
+    tone,
+  );
+
+const alertTone = (tone) =>
+  toneClass(
+    'alert',
+    {
+      accent: cls.alertAccent,
+      success: cls.alertSuccess,
+      warning: cls.alertWarning,
+      danger: cls.alertDanger,
+      info: cls.alertInfo,
+    },
+    tone,
+  );
+
+const toastTone = (tone) =>
+  toneClass(
+    'toast',
+    {
+      accent: cls.toastAccent,
+      success: cls.toastSuccess,
+      warning: cls.toastWarning,
+      danger: cls.toastDanger,
+      info: cls.toastInfo,
+    },
+    tone,
+  );
+
+const meterTone = (tone) =>
+  toneClass(
+    'meter',
+    {
+      accent: cls.meterAccent,
+      success: cls.meterSuccess,
+      warning: cls.meterWarning,
+      danger: cls.meterDanger,
+      info: cls.meterInfo,
+    },
+    tone,
+  );
 
 export const ui = {
   button: ({ variant, icon, size } = {}) =>
@@ -565,36 +721,20 @@ export const ui = {
     ),
   card: ({ accent, interactive } = {}) =>
     j(cls.card, accent && cls.cardAccent, interactive && cls.cardInteractive),
-  badge: ({ tone, dot } = {}) =>
-    j(
-      cls.badge,
-      tone === 'accent' && cls.badgeAccent,
-      tone === 'success' && cls.badgeSuccess,
-      tone === 'warning' && cls.badgeWarning,
-      tone === 'danger' && cls.badgeDanger,
-      tone === 'info' && cls.badgeInfo,
-      tone === 'muted' && cls.badgeMuted,
-      dot && cls.badgeDot,
-    ),
-  num: ({ tone } = {}) =>
+  badge: ({ tone, dot } = {}) => j(cls.badge, badgeTone(tone), dot && cls.badgeDot),
+  num: ({ tone } = {}) => j(cls.num, numTone(tone)),
+  delta: ({ dir, invert } = {}) =>
     j(
-      cls.num,
-      tone === 'pos' && cls.numPos,
-      tone === 'neg' && cls.numNeg,
-      tone === 'muted' && cls.numMuted,
+      cls.delta,
+      dir === 'up' && cls.deltaUp,
+      dir === 'down' && cls.deltaDown,
+      dir === 'flat' && cls.deltaFlat,
+      invert && cls.deltaInvert,
     ),
+  compare: ({ cols } = {}) => j(cls.compare, cols === 2 && cls.compare2up),
   chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
   link: ({ arrow, cta } = {}) => j(cls.link, arrow && cls.linkArrow, cta && cls.linkCta),
-  dot: ({ tone, live } = {}) =>
-    j(
-      cls.dot,
-      tone === 'accent' && cls.dotAccent,
-      tone === 'success' && cls.dotSuccess,
-      tone === 'warning' && cls.dotWarning,
-      tone === 'danger' && cls.dotDanger,
-      tone === 'info' && cls.dotInfo,
-      live && cls.dotLive,
-    ),
+  dot: ({ tone, live } = {}) => j(cls.dot, dotTone(tone), live && cls.dotLive),
   dotgrid: ({ accent, dense } = {}) =>
     j(cls.dotgrid, accent && cls.dotgridAccent, dense && cls.dotgridDense),
   table: ({ density, lined } = {}) =>
@@ -608,33 +748,10 @@ export const ui = {
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
   cluster: ({ between } = {}) => j(cls.cluster, between && cls.clusterBetween),
   stagger: ({ auto } = {}) => j(cls.stagger, auto && cls.staggerAuto),
-  alert: ({ tone } = {}) =>
-    j(
-      cls.alert,
-      tone === 'accent' && cls.alertAccent,
-      tone === 'success' && cls.alertSuccess,
-      tone === 'warning' && cls.alertWarning,
-      tone === 'danger' && cls.alertDanger,
-      tone === 'info' && cls.alertInfo,
-    ),
-  toast: ({ tone } = {}) =>
-    j(
-      cls.toast,
-      tone === 'accent' && cls.toastAccent,
-      tone === 'success' && cls.toastSuccess,
-      tone === 'warning' && cls.toastWarning,
-      tone === 'danger' && cls.toastDanger,
-      tone === 'info' && cls.toastInfo,
-    ),
+  alert: ({ tone } = {}) => j(cls.alert, alertTone(tone)),
+  toast: ({ tone } = {}) => j(cls.toast, toastTone(tone)),
   progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
-  meter: ({ tone } = {}) =>
-    j(
-      cls.meter,
-      tone === 'accent' && cls.meterAccent,
-      tone === 'success' && cls.meterSuccess,
-      tone === 'warning' && cls.meterWarning,
-      tone === 'danger' && cls.meterDanger,
-    ),
+  meter: ({ tone } = {}) => j(cls.meter, meterTone(tone)),
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
   dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
@@ -662,14 +779,9 @@ export const ui = {
   legendSwatch: ({ series, shape } = {}) =>
     j(
       cls.legendSwatch,
-      series === 1 && cls.legendSwatch1,
-      series === 2 && cls.legendSwatch2,
-      series === 3 && cls.legendSwatch3,
-      series === 4 && cls.legendSwatch4,
-      series === 5 && cls.legendSwatch5,
-      series === 6 && cls.legendSwatch6,
-      series === 7 && cls.legendSwatch7,
-      series === 8 && cls.legendSwatch8,
+      // Series 1–8 map to ui-legend__swatch--N; the explicit bounds-check keeps a
+      // 0/9/non-integer from coining a class the stylesheet never defines. (Q9.)
+      Number.isInteger(series) && series >= 1 && series <= 8 && cls[`legendSwatch${series}`],
       shape === 'circle' && cls.legendSwatchCircle,
       shape === 'line' && cls.legendSwatchLine,
     ),
@@ -721,6 +833,7 @@ export const ui = {
     j(
       cls.bracketNote,
       tone === 'accent' && cls.bracketNoteAccent,
+      tone === 'success' && cls.bracketNoteSuccess,
       tone === 'warning' && cls.bracketNoteWarning,
       tone === 'danger' && cls.bracketNoteDanger,
       tone === 'info' && cls.bracketNoteInfo,
@@ -749,8 +862,95 @@ export const ui = {
   citation: ({ chip, state } = {}) => j(cls.citation, chip && cls.citationChip, srcTone(state)),
   source: ({ state } = {}) => j(cls.sourceCard, srcTone(state)),
   provenance: ({ state } = {}) => j(cls.provenance, srcTone(state)),
+  diff: ({ split } = {}) => j(cls.diff, split && cls.diffSplit),
+  diffRow: ({ change } = {}) =>
+    j(
+      cls.diffRow,
+      change === 'add' && cls.diffRowAdd,
+      change === 'remove' && cls.diffRowRemove,
+      change === 'context' && cls.diffRowContext,
+    ),
+  code: ({ numbered } = {}) => j(cls.code, numbered && cls.codeNumbered),
+  codeLine: ({ change } = {}) =>
+    j(
+      cls.codeLine,
+      change === 'add' && cls.codeLineAdd,
+      change === 'remove' && cls.codeLineRemove,
+      change === 'hl' && cls.codeLineHl,
+    ),
+  sparkBar: ({ tone } = {}) =>
+    j(
+      cls.sparkBar,
+      tone === 'accent' && cls.sparkBarAccent,
+      tone === 'pos' && cls.sparkBarPos,
+      tone === 'neg' && cls.sparkBarNeg,
+    ),
+  bulletMeasure: ({ tone } = {}) =>
+    j(
+      cls.bulletMeasure,
+      tone === 'accent' && cls.bulletMeasureAccent,
+      tone === 'pos' && cls.bulletMeasurePos,
+      tone === 'neg' && cls.bulletMeasureNeg,
+    ),
   state: ({ state, busy } = {}) => j(cls.state, stateTone(state), busy && cls.stateBusy),
   originLabel: ({ ai } = {}) => j(cls.originLabel, ai && cls.originLabelAi),
 };
 
+// Attribute + style bundle for the data-bearing fills (`ui-meter`/`ui-progress`).
+// The class string alone paints a 0-width, unannounced bar: the fill width is a
+// UNITLESS `--value` (0–100) and AT needs role + aria-valuenow/min/max. This sets
+// the painted value and its announced value together so they can't drift, and
+// normalizes an arbitrary {min,max} to the 0–100 `--value` the CSS expects while
+// keeping aria-valuenow in the caller's real units. (component audit C8.)
+// `busyWhenIndeterminate` — a progressbar advertises aria-busy when its value is
+// unknown; a meter is never indeterminate so it passes false. (Kept a boolean
+// flag rather than testing the role string, so check:recipe-types doesn't read it
+// as a recipe option literal.)
+const valueAttrs = (role, value, min, max, busyWhenIndeterminate) => {
+  const lo = Number(min);
+  const hi = Number(max);
+  const raw = Number(value);
+  // Indeterminate: an omitted/unknown value (attrs.progress() with no argument).
+  // ARIA requires aria-valuenow be OMITTED here — emitting 0 announces "0%",
+  // indistinguishable from a real stalled-at-zero bar. A progressbar instead
+  // advertises aria-busy; a meter has no indeterminate state, so a non-finite
+  // value there is a caller error we still fail safe on by omitting the
+  // misleading 0. Pair with `ui.progress({ indeterminate: true })` for the CSS
+  // sweep. (component audit C9.)
+  if (!Number.isFinite(raw)) {
+    return busyWhenIndeterminate ? { role, 'aria-busy': 'true' } : { role };
+  }
+  const now = Math.min(hi, Math.max(lo, raw));
+  const pct = hi > lo ? ((now - lo) / (hi - lo)) * 100 : 0;
+  return {
+    role,
+    'aria-valuenow': now,
+    'aria-valuemin': lo,
+    'aria-valuemax': hi,
+    style: { '--value': Math.round(pct * 100) / 100 },
+  };
+};
+
+/**
+ * ARIA + style bundles for the value-bearing fills. Spread onto the host:
+ *   <div class={ui.meter({ tone: 'warning' })} {...attrs.meter(72)}>
+ *     <span class={cls.meterFill} />
+ *   </div>
+ * `value` is in your own units; pass `{ min, max }` (default 0–100) and the
+ * `--value` width is normalized for you. Call `attrs.progress()` with no value
+ * for an indeterminate bar (omits aria-valuenow, sets aria-busy). (audit C9.)
+ *
+ * `attrs.dotbar(value)` is the segmented analogue of `attrs.progress`: a
+ * determinate `.ui-dotbar` carries the same progress data as `.ui-progress` but,
+ * without this, was eight empty `<span>`s to AT (the segments are decorative —
+ * mark them `aria-hidden`). Same progressbar role + aria-valuenow/min/max;
+ * call with no value for the indeterminate sweep. (component audit C10.)
+ */
+export const attrs = Object.freeze({
+  meter: (value, { min = 0, max = 100 } = {}) => valueAttrs('meter', value, min, max, false),
+  progress: (value, { min = 0, max = 100 } = {}) =>
+    valueAttrs('progressbar', value, min, max, true),
+  dotbar: (value, { min = 0, max = 100 } = {}) => valueAttrs('progressbar', value, min, max, true),
+});
+
 export default ui;

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

@@ -141,6 +141,14 @@
       "name": "--display",
       "description": "Global scale token. Value: `var(--dot-font)`"
     },
+    {
+      "name": "--display-weight",
+      "description": "Global scale token. Value: `700`"
+    },
+    {
+      "name": "--display-weight-strong",
+      "description": "Global scale token. Value: `800`"
+    },
     {
       "name": "--dot-font",
       "description": "Global scale token. Value: `'Doto', var(--mono)`"
@@ -213,6 +221,10 @@
       "name": "--mono",
       "description": "Global scale token. Value: `'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace`"
     },
+    {
+      "name": "--on-accent",
+      "description": "Theme token. Light: `var(--button-text)` · Dark: `var(--button-text)`"
+    },
     {
       "name": "--panel",
       "description": "Theme token. Light: `#ffffff` · Dark: `#1c1c1c`"