anentrypoint-design 0.0.391 → 0.0.393

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.391",
+  "version": "0.0.393",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/content/table.js

@@ -38,7 +38,24 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
                 h('span', { class: 'ds-table-sort-label' }, hd),
                 isActive ? Icon(sortDir === 'desc' ? 'chevron-down' : 'chevron-up', { size: 12 }) : null));
     };
-    return h('div', { class: wrapClass }, h('table', {},
+    // The wrapper is an `overflow-x: auto` scroll container, so when a table is
+    // wider than its box the only way to reach the clipped columns is by
+    // scrolling. A mouse/touch user can drag it; a keyboard-only user cannot
+    // reach it at all unless the container itself is focusable — that is
+    // WCAG 2.1.1 Keyboard, and axe's `scrollable-region-focusable`. tabindex="0"
+    // puts it in the tab order and arrow keys then scroll it natively.
+    // A bare focusable div with no role/name is itself a violation, so it is
+    // labelled and given the `group` role: `region` would inject an
+    // unconditional landmark into every page that renders a Table.
+    // NOTE this fires only when the table actually overflows, which is
+    // viewport-dependent — it reproduces at 1024x768 but not at 1280x900,
+    // which is why it surfaced only in CI's viewport.
+    return h('div', {
+        class: wrapClass,
+        tabindex: '0',
+        role: 'group',
+        'aria-label': 'table, scrollable',
+    }, h('table', {},
         h('thead', {}, h('tr', {}, ...headers.map((hd, i) => thFor(hd, i)))),
         h('tbody', {}, ...rows.map((row, i) => h('tr', {
             key: i,

package/src/css/app-shell/files.css

@@ -630,10 +630,15 @@
   background: color-mix(in oklab, var(--flame) 12%, var(--bg));
   color: var(--flame); font-size: var(--fs-xs);
 }
+/* --ink, not --on-color: --on-color is a fixed #fff, which reads fine on a dark
+   fill but measures 3.07:1 on --warn (#FF5A52, a light red) -- below the 4.5:1
+   floor. --ink on the same fill measures 6.27:1. Same principle as the
+   --accent/--accent-ink split the token layer documents: a light saturated fill
+   takes the dark text tone. Measured in a live browser. */
 .btn-primary.danger {
   background: var(--warn);
   border-color: var(--warn);
-  color: var(--on-color);
+  color: var(--ink);
 }
 .btn-primary.danger:hover { filter: brightness(0.92); border-color: var(--warn); }
 

package/src/css/app-shell/kits-appended.css

@@ -536,12 +536,23 @@
 /* --- terminal kit ------------------------------------------ */
 .ds-section-pad-sm { padding: var(--space-2); }
 .ds-kit-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
-.ds-cli-cmt .cmd { color: var(--fg-3); }
-.ds-cli-out .cmd { color: var(--fg-2); }
-.ds-cli-ok .prompt, .ds-cli-ok .cmd { color: var(--accent-ink); }
-.ds-cli-warn .prompt, .ds-cli-warn .cmd { color: var(--mascot-deep); }
-.ds-cli-log .prompt { color: var(--fg-3); }
-.ds-cli-log .cmd { color: var(--fg-2); font-family: var(--ff-mono); }
+/* `.cli` (hero-content.css) is an ALWAYS-INK card: it sets a var(--ink)
+   background with var(--paper) text in every theme, by design. So its text
+   tones must be ink-surface tones, NOT the theme-relative fg / accent-ink /
+   mascot-deep ramps. Those resolve to the PAPER tier under a light theme and
+   paint dark text on this permanently dark card: --fg-3 lands at 2.48:1,
+   --fg-2 at 1.18:1, --mascot-deep at 3.13:1 — all failing AA, and all
+   invisible on a machine whose browser defaults to a dark color-scheme.
+   The tones below are theme-independent and measured on --ink:
+   --paper-3-dark 9.35:1, --paper-2 13.26:1, --acid 15.88:1, and the dark
+   mascot tone 6.67:1. Same FILL-vs-TEXT discipline --accent/--accent-ink
+   draws, applied to a surface that never follows the theme. */
+.ds-cli-cmt .cmd { color: var(--paper-3-dark); }
+.ds-cli-out .cmd { color: var(--paper-2); }
+.ds-cli-ok .prompt, .ds-cli-ok .cmd { color: var(--acid); }
+.ds-cli-warn .prompt, .ds-cli-warn .cmd { color: var(--mascot-on-ink); }
+.ds-cli-log .prompt { color: var(--paper-3-dark); }
+.ds-cli-log .cmd { color: var(--paper-2); font-family: var(--ff-mono); }
 .ds-term-body { padding: var(--space-2-75) var(--space-3-5); display: flex; flex-direction: column; gap: var(--space-1); background: var(--bg-2); border-radius: var(--r-1); }
 .ds-term-body--tall { min-height: 280px; }
 .ds-term-input-row { margin-top: var(--space-1-75); }