@ponchia/ui 0.6.11 → 0.7.0

package/bin/bronto-ui-check.mjs

@@ -0,0 +1,286 @@
+#!/usr/bin/env node
+/** Validate literal Bronto classes and CSS custom-property references in a consumer. */
+import { readFileSync, readdirSync, realpathSync, statSync } from 'node:fs';
+import { extname, resolve, relative, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const classesManifest = JSON.parse(
+  readFileSync(resolve(packageRoot, 'classes/classes.json'), 'utf8'),
+);
+const tokensManifest = JSON.parse(readFileSync(resolve(packageRoot, 'tokens/index.json'), 'utf8'));
+
+const SOURCE_EXTENSIONS = new Set([
+  '.astro',
+  '.css',
+  '.html',
+  '.js',
+  '.jsx',
+  '.mjs',
+  '.svelte',
+  '.ts',
+  '.tsx',
+  '.vue',
+]);
+const SKIP_DIRS = new Set([
+  '.git',
+  '.astro',
+  '.next',
+  '.nuxt',
+  '.output',
+  '.pytest_cache',
+  '.svelte-kit',
+  '.tox',
+  '.vercel',
+  '.venv',
+  '.vite',
+  '__pycache__',
+  'build',
+  'coverage',
+  'dist',
+  'node_modules',
+  'out',
+  'playwright-report',
+  'public',
+  'storybook-static',
+  'test-results',
+  'vendor',
+  'venv',
+]);
+
+const knownClasses = new Set(classesManifest.classes);
+// CSS generic font-family keywords share the ui-* prefix but are never class
+// literals. Keep the scanner broad enough to catch JS-built class strings
+// while excluding these standardized non-class identifiers.
+const nonClassIdentifiers = new Set(['ui-monospace', 'ui-rounded', 'ui-sans-serif', 'ui-serif']);
+const knownTokens = new Set(
+  Object.values(tokensManifest.cssVars).flatMap((group) => Object.keys(group)),
+);
+for (const property of classesManifest.customProperties) knownTokens.add(property.name);
+for (const entry of readdirSync(resolve(packageRoot, 'dist/css'), { withFileTypes: true })) {
+  if (!entry.isFile() || extname(entry.name) !== '.css') continue;
+  const css = readFileSync(resolve(packageRoot, 'dist/css', entry.name), 'utf8');
+  for (const match of css.matchAll(/(--[a-z][\w-]*)\s*:/gi)) knownTokens.add(match[1]);
+}
+const reservedTokenPrefixes = new Set(
+  [...knownTokens].map((name) => `--${name.slice(2).split('-')[0]}`),
+);
+const LINE_COMMENT_EXTENSIONS = new Set([
+  '.astro',
+  '.html',
+  '.js',
+  '.jsx',
+  '.mjs',
+  '.svelte',
+  '.ts',
+  '.tsx',
+  '.vue',
+]);
+const HTML_COMMENT_EXTENSIONS = new Set(['.astro', '.html', '.svelte', '.vue']);
+
+const blankComment = (value) => value.replace(/[^\r\n]/g, ' ');
+
+function quoteEnd(text, start, quote) {
+  for (let index = start + 1; index < text.length; index += 1) {
+    if (text[index] === '\\') index += 1;
+    else if (text[index] === quote) return index + 1;
+  }
+  return text.length;
+}
+
+function stripSlashComments(text, lineComments) {
+  let output = '';
+  let index = 0;
+  while (index < text.length) {
+    const char = text[index];
+    const next = text[index + 1];
+    if (char === '"' || char === "'" || char === '`') {
+      const end = quoteEnd(text, index, char);
+      output += text.slice(index, end);
+      index = end;
+      continue;
+    }
+    if (char === '/' && next === '*') {
+      const close = text.indexOf('*/', index + 2);
+      const end = close === -1 ? text.length : close + 2;
+      output += blankComment(text.slice(index, end));
+      index = end;
+      continue;
+    }
+    if (lineComments && char === '/' && next === '/') {
+      const newline = text.indexOf('\n', index + 2);
+      const end = newline === -1 ? text.length : newline;
+      output += blankComment(text.slice(index, end));
+      index = end;
+      continue;
+    }
+    output += char;
+    index += 1;
+  }
+  return output;
+}
+
+function sourceText(text, extension) {
+  const withoutHtml = HTML_COMMENT_EXTENSIONS.has(extension)
+    ? text.replace(/<!--[\s\S]*?-->/g, blankComment)
+    : text;
+  return stripSlashComments(withoutHtml, LINE_COMMENT_EXTENSIONS.has(extension));
+}
+
+function lineAt(text, index) {
+  return text.slice(0, index).split('\n').length;
+}
+
+function filesUnder(input) {
+  const absolute = resolve(input);
+  const stat = statSync(absolute);
+  if (stat.isFile()) return SOURCE_EXTENSIONS.has(extname(absolute)) ? [absolute] : [];
+  if (!stat.isDirectory()) return [];
+  const files = [];
+  for (const entry of readdirSync(absolute, { withFileTypes: true })) {
+    if (entry.isSymbolicLink()) continue;
+    const child = resolve(absolute, entry.name);
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name)) files.push(...filesUnder(child));
+    } else if (entry.isFile() && SOURCE_EXTENSIONS.has(extname(entry.name))) {
+      files.push(child);
+    }
+  }
+  return files;
+}
+
+function tokenPrefix(name) {
+  return `--${name.slice(2).split('-')[0]}`;
+}
+
+export function checkPaths(inputs, { allowClasses = [], allowTokens = [] } = {}) {
+  const allowedClasses = new Set([...knownClasses, ...allowClasses]);
+  const allowedTokens = new Set([...knownTokens, ...allowTokens]);
+  const files = [...new Set(inputs.flatMap(filesUnder))].sort();
+  const documents = files.map((file) => {
+    const text = readFileSync(file, 'utf8');
+    return { file, text, scanned: sourceText(text, extname(file)) };
+  });
+  const locallyDefinedTokens = new Set();
+  for (const { scanned } of documents) {
+    for (const match of scanned.matchAll(/(--[a-z][\w-]*)\s*:/gi)) {
+      locallyDefinedTokens.add(match[1]);
+    }
+  }
+
+  const findings = [];
+  const seen = new Set();
+  const add = (finding) => {
+    const key = `${finding.kind}:${finding.file}:${finding.line}:${finding.name}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    findings.push(finding);
+  };
+
+  for (const { file, text, scanned } of documents) {
+    for (const match of scanned.matchAll(/(?<![/\w-])ui-[a-z0-9](?:[\w-]*[a-z0-9])?(?![\w/-])/gi)) {
+      if (!allowedClasses.has(match[0]) && !nonClassIdentifiers.has(match[0])) {
+        add({ kind: 'class', file, line: lineAt(text, match.index), name: match[0] });
+      }
+    }
+    for (const match of scanned.matchAll(/var\(\s*(--[a-z][\w-]*)/gi)) {
+      const name = match[1];
+      if (
+        reservedTokenPrefixes.has(tokenPrefix(name)) &&
+        !allowedTokens.has(name) &&
+        !locallyDefinedTokens.has(name)
+      ) {
+        add({ kind: 'token', file, line: lineAt(text, match.index), name });
+      }
+    }
+  }
+
+  return { files: files.length, findings };
+}
+
+function usage() {
+  return (
+    `Usage: bronto-ui-check [options] [path ...]\n\n` +
+    `Validate literal ui-* classes and unresolved Bronto-like var(--*) references.\n\n` +
+    `Options:\n` +
+    `  --allow-class NAME   Allow one consumer-owned ui-* class (repeatable)\n` +
+    `  --allow-token NAME   Allow one consumer-owned --* token (repeatable)\n` +
+    `  --json               Print machine-readable JSON\n` +
+    `  --help               Show this help\n`
+  );
+}
+
+function parseArgs(args) {
+  const options = { allowClasses: [], allowTokens: [], json: false, paths: [] };
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+    if (arg === '--help') return { ...options, help: true };
+    if (arg === '--json') options.json = true;
+    else if (arg === '--allow-class') {
+      const value = args[++index];
+      if (!/^ui-[a-z0-9][\w-]*$/i.test(value || '')) {
+        throw new Error('--allow-class requires one ui-* class name');
+      }
+      options.allowClasses.push(value);
+    } else if (arg === '--allow-token') {
+      const value = args[++index];
+      if (!/^--[a-z][\w-]*$/i.test(value || '')) {
+        throw new Error('--allow-token requires one --* custom-property name');
+      }
+      options.allowTokens.push(value);
+    } else if (arg.startsWith('--')) throw new Error(`Unknown option: ${arg}`);
+    else options.paths.push(arg);
+  }
+  return options;
+}
+
+function main() {
+  let options;
+  try {
+    options = parseArgs(process.argv.slice(2));
+  } catch (error) {
+    console.error(error.message);
+    console.error(usage());
+    process.exitCode = 2;
+    return;
+  }
+  if (options.help) {
+    console.log(usage());
+    return;
+  }
+  const paths = options.paths.length ? options.paths : ['.'];
+  let result;
+  try {
+    result = checkPaths(paths, options);
+  } catch (error) {
+    console.error(`[bronto-ui-check] ${error.message}`);
+    process.exitCode = 2;
+    return;
+  }
+  const cwd = process.cwd();
+  const output = {
+    files: result.files,
+    findings: result.findings.map((finding) => ({
+      ...finding,
+      file: relative(cwd, finding.file) || '.',
+    })),
+  };
+  if (options.json) console.log(JSON.stringify(output, null, 2));
+  else if (output.findings.length) {
+    for (const finding of output.findings) {
+      console.error(
+        `${finding.file}:${finding.line} unknown Bronto ${finding.kind} ${finding.name}`,
+      );
+    }
+    console.error(
+      `[bronto-ui-check] ${output.findings.length} finding(s) in ${output.files} source file(s)`,
+    );
+  } else {
+    console.log(`[bronto-ui-check] ${output.files} source file(s) match the shipped contract`);
+  }
+  if (output.findings.length) process.exitCode = 1;
+}
+
+// npm installs bins as symlinks in node_modules/.bin. Compare their real path
+// so the CLI runs both through that public entrypoint and by its package path.
+if (process.argv[1] && realpathSync(process.argv[1]) === fileURLToPath(import.meta.url)) main();

package/classes/classes.json

@@ -2791,6 +2791,13 @@
       "behavior": "initSplitter",
       "note": "keyboard + pointer ARIA window-splitter behavior; updates --splitter-pos and aria-valuenow, then emits bronto:splitter:resize. The host owns persistence and pane state."
     },
+    {
+      "name": "data-bronto-splitter-adjust",
+      "on": "a button inside a .ui-splitter host",
+      "value": "signed percentage-point delta, for example -10 or 10",
+      "behavior": "initSplitter",
+      "note": "single-pointer non-drag alternative to moving the separator; activation clamps to aria-valuemin/aria-valuemax and emits bronto:splitter:resize."
+    },
     {
       "name": "data-bronto-source-ref",
       "on": "a button/control that references a source card",

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

@@ -347,7 +347,7 @@
     },
     {
       "name": "--text-2xs",
-      "description": "Global scale token. Value: `0.68rem`"
+      "description": "Global scale token. Value: `0.72rem`"
     },
     {
       "name": "--text-base",

package/css/disclosure.css

@@ -272,6 +272,16 @@
   }
 }
 
+@media (pointer: coarse) {
+  .ui-breadcrumb__item a {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-block-size: max(24px, 1.6rem);
+    min-inline-size: max(24px, 1.6rem);
+  }
+}
+
 /* --- Pagination --- */
 
 .ui-pagination {

package/css/dots.css

@@ -136,7 +136,9 @@
 
 /* Status dot — the glyph-style state indicator. */
 .ui-dot {
-  background: var(--text-dim);
+  --ui-dot-color: var(--text-dim);
+
+  background: var(--ui-dot-color);
   border-radius: 50%;
   display: inline-block;
   flex: 0 0 auto;
@@ -145,34 +147,45 @@
 }
 
 .ui-dot--accent {
-  background: var(--accent);
+  --ui-dot-color: var(--accent);
 }
 
 .ui-dot--success {
-  background: var(--success);
+  --ui-dot-color: var(--success);
 }
 
 .ui-dot--warning {
-  background: var(--warning);
+  --ui-dot-color: var(--warning);
 }
 
 .ui-dot--danger {
-  background: var(--danger);
+  --ui-dot-color: var(--danger);
 }
 
 .ui-dot--info {
-  background: var(--info);
+  --ui-dot-color: var(--info);
 }
 
 .ui-dot--live {
-  background: var(--success);
-  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-dot-color) 70%, transparent);
   position: relative;
 }
 
+/* Live describes motion, not status. A standalone live dot defaults to
+   success; an explicit tone remains the colour of both the dot and ring. */
+.ui-dot--live:not(
+    .ui-dot--accent,
+    .ui-dot--success,
+    .ui-dot--warning,
+    .ui-dot--danger,
+    .ui-dot--info
+  ) {
+  --ui-dot-color: var(--success);
+}
+
 .ui-dot--live::after {
   animation: pulseRing 1.8s var(--ease-out) infinite;
-  border: 1px solid var(--success);
+  border: 1px solid var(--ui-dot-color);
   border-radius: 50%;
   content: '';
   inset: -3px;
@@ -562,36 +575,48 @@
    differentiable. */
 @media (forced-colors: active) {
   .ui-dot--success {
+    --ui-dot-color: LinkText;
+
     forced-color-adjust: none;
-    background: LinkText;
   }
 
   .ui-dot--warning {
+    --ui-dot-color: Mark;
+
     forced-color-adjust: none;
-    background: Mark;
   }
 
   .ui-dot--danger {
+    --ui-dot-color: Highlight;
+
     forced-color-adjust: none;
-    background: Highlight;
   }
 
   .ui-dot--info {
+    --ui-dot-color: ButtonText;
+
     forced-color-adjust: none;
-    background: ButtonText;
   }
 
   /* Brand/live dots aren't status tones, but they still encode meaning via
      background-color alone, which HCM flattens. Keep them on a distinct,
      opted-out system colour for completeness. */
-  .ui-dot--accent,
-  .ui-dot--live {
+  .ui-dot--accent {
+    --ui-dot-color: LinkText;
+
     forced-color-adjust: none;
-    background: LinkText;
   }
 
-  .ui-dot--live::after {
-    border-color: LinkText;
+  .ui-dot--live:not(
+      .ui-dot--accent,
+      .ui-dot--success,
+      .ui-dot--warning,
+      .ui-dot--danger,
+      .ui-dot--info
+    ) {
+    --ui-dot-color: LinkText;
+
+    forced-color-adjust: none;
   }
 
   /* The masked one-node icon paints `background: currentcolor` through an SVG

package/css/feedback.css

@@ -517,6 +517,41 @@
   background: var(--info);
 }
 
+/* A labelled meter is core feedback grammar, not report-only layout. The
+   visible value remains the data of record because role=meter support varies. */
+.ui-meter__row {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2xs) var(--space-md);
+  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
+  margin-block: var(--space-2xs);
+}
+
+.ui-meter__row .ui-meter {
+  min-inline-size: 8rem;
+}
+
+.ui-meter__label {
+  color: var(--text-soft);
+}
+
+.ui-meter__value {
+  color: var(--text);
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+@media (max-width: 32rem) {
+  .ui-meter__row {
+    grid-template-columns: 1fr;
+  }
+
+  .ui-meter__value {
+    text-align: start;
+  }
+}
+
 /* --- Steps — progress through a multi-step flow. Use an <ol>; the
    current step is aria-current="step" (no class), completed steps take
    --done. Counter-numbered markers, hairline connectors. --- */

package/css/report.css

@@ -619,46 +619,6 @@
   text-transform: uppercase;
 }
 
-/* --- Labelled meter row ---
-   A multi-meter block (SLO burn, error budgets, capacity) lays out as
-   label | bar | value. The bare `ui-meter` base lives in feedback.css; this is
-   the report-document grammar around it so authors stop hand-rolling the grid.
-   The bar NEVER carries the reading alone (WCAG 1.4.1) — `ui-meter__value` is
-   the data of record, and the bar clamps at 100 so an over-target figure still
-   reads correctly in the value text. Collapses to a stack on a narrow screen. */
-.ui-meter__row {
-  align-items: center;
-  display: grid;
-  gap: var(--space-2xs) var(--space-md);
-  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
-  margin-block: var(--space-2xs);
-}
-
-.ui-meter__row .ui-meter {
-  min-inline-size: 8rem;
-}
-
-.ui-meter__label {
-  color: var(--text-soft);
-}
-
-.ui-meter__value {
-  color: var(--text);
-  font-family: var(--mono);
-  font-variant-numeric: tabular-nums;
-  text-align: end;
-}
-
-@media (max-width: 32rem) {
-  .ui-meter__row {
-    grid-template-columns: 1fr;
-  }
-
-  .ui-meter__value {
-    text-align: start;
-  }
-}
-
 /* A chart is NOT a bronto component — it needs scales + data binding, which the
    analytical layer refuses to own. Theme Vega-Lite with `@ponchia/ui/vega`
    (docs/vega.md), or hand-author a token-themed inline `<svg>`, and drop it in a

package/css/site.css

@@ -296,6 +296,16 @@
   }
 }
 
+@media (pointer: coarse) {
+  .ui-sitefooter__links a {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-block-size: max(24px, 1.6rem);
+    min-inline-size: max(24px, 1.6rem);
+  }
+}
+
 /* --- Tags — neutral, wrapping content labels (NOT ui-chip, which is a
    single interactive token). Use a <ul>. --- */
 

package/css/tokens.css

@@ -33,7 +33,7 @@
   --display: var(--dot-font);
   --display-weight: 700;
   --display-weight-strong: 800;
-  --text-2xs: 0.68rem;
+  --text-2xs: 0.72rem;
   --text-xs: 0.76rem;
   --text-sm: 0.86rem;
   --text-base: 0.95rem;