@jirawatpyk/aura-react 5.1.0 → 5.2.0

package/dist/styles.layer.css

@@ -214,7 +214,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Menu — popover list for column options and the column picker */
 .aura-menu {
-  position: fixed; z-index: var(--aura-z-menu); min-width: 200px; padding: var(--aura-space-1);
+  position: fixed; z-index: var(--aura-z-menu); min-width: 200px; padding: var(--aura-space-1); overflow-y: auto; overscroll-behavior: contain;
   background: var(--aura-bg-surface); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-md);
   box-shadow: var(--aura-shadow-enterprise);
@@ -522,6 +522,8 @@ a.aura-icon-btn { text-decoration: none; }
   font-family: var(--font-sans); font-size: 12px; line-height: 1.5; pointer-events: none;
   animation: aura-fade-in var(--aura-duration-fast) var(--aura-ease);
 }
+/* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
+.aura-tooltip--hoverable { pointer-events: auto; }
 @keyframes aura-fade-in { from { opacity: 0; } }
 
 /* ---------- Dialog ---------- */
@@ -679,6 +681,8 @@ a.aura-tab { text-decoration: none; }
 .aura-avatar__status {
   position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px;
   border-radius: var(--aura-radius-full); background: var(--aura-accent-dot); box-shadow: 0 0 0 2px var(--aura-bg-surface);
+  /* 5.2: the lime fill is 1.2:1 on the white ring; the edge carries the 3:1 (WCAG 1.4.11). */
+  border: 1.5px solid var(--aura-fg-positive); box-sizing: border-box;
 }
 
 /* ---------- Combobox ---------- */
@@ -748,7 +752,7 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
 .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
 .aura-cal__day.is-selected { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); box-shadow: none; }
-.aura-cal__day:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
+.aura-cal__day:disabled, .aura-cal__day[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
 .aura-cal__day:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-cal__grid td.is-in-range { background: var(--aura-bg-selected); }
 .aura-cal__grid td.is-range-start { background: linear-gradient(to right, transparent 50%, var(--aura-bg-selected) 50%); }
@@ -921,6 +925,8 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-upload__thumb.is-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--aura-fg-secondary); }
 .aura-upload__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-upload__name { font-size: 13px; font-weight: 500; color: var(--aura-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+a.aura-upload__name { color: var(--aura-fg-accent); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--aura-radius-xs); }
+a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 .aura-upload__sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--aura-fg-secondary); }
 .aura-upload__item.is-error .aura-upload__sub { color: var(--aura-fg-danger); }
 .aura-upload__bar { display: block; height: 4px; border-radius: var(--aura-radius-full); background: var(--aura-progress-track); box-shadow: inset 0 0 0 1px var(--aura-progress-track-edge); overflow: hidden; }
@@ -1042,8 +1048,9 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
   position: fixed; z-index: var(--aura-z-menu); box-sizing: border-box; width: max-content; min-width: 200px; max-width: min(360px, calc(100vw - 16px));
   background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg);
   box-shadow: var(--aura-shadow-overlay); font-family: var(--font-sans); font-size: 14px; outline: none; animation: aura-fade-in var(--aura-duration-fast) var(--aura-ease);
+  overflow-y: auto; overscroll-behavior: contain;
 }
-.aura-popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); padding: var(--aura-space-2) var(--aura-space-2) 0 var(--aura-space-4); }
+.aura-popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); padding: var(--aura-space-2) var(--aura-space-2) 0 var(--aura-space-4); position: sticky; top: 0; z-index: 1; background: var(--aura-bg-surface); } /* 5.2: stays while a tall popover scrolls */
 .aura-popover__title { margin: 0; font-size: 14px; font-weight: 600; }
 .aura-popover__body { padding: var(--aura-space-4); }
 .aura-popover__head + .aura-popover__body { padding-top: var(--aura-space-2); }
@@ -1143,7 +1150,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented.is-full .aura-segmented__option { flex: 1 1 0; min-width: 0; }
 .aura-segmented__option.is-icon { padding: 0; width: 36px; }
 .aura-segmented__option:hover:not(:disabled):not(.is-selected) { color: var(--aura-fg-primary); }
-.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: var(--aura-shadow-enterprise); }
+.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: inset 0 0 0 1px var(--aura-border-control), var(--aura-shadow-enterprise); } /* 5.2: the edge marks the choice at 3:1; the fill alone was 1.04:1 on the track */
 .aura-segmented__option:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-segmented__option:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
@@ -1425,7 +1432,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
 /* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
  * exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
-.aura-table-box { overflow-x: clip; }
+.aura-table-box { overflow-x: clip; width: 100%; } /* 5.1.1: container-type boxes have no content width; without this a table in a centred flex column collapsed to 0 */
 .aura-table-q { width: calc(100% * var(--aura-q-scale)); container-type: inline-size; }
 .aura-table-q--stack { container-name: aura-stack; }
 .aura-table-q--h1 { container-name: aura-h1; }
@@ -1488,4 +1495,18 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
 }
 
+/* ---------- 5.1.1: Windows High Contrast / forced colours ---------- */
+/* Backgrounds are replaced in forced colours, so controls that show state only by fill get borders and system colours. */
+@media (forced-colors: active) {
+  .aura-switch { border: 1px solid CanvasText; }
+  .aura-switch__thumb { background: CanvasText; forced-color-adjust: none; }
+  .aura-switch.is-on { background: Highlight; forced-color-adjust: none; }
+  .aura-switch.is-on .aura-switch__thumb { background: HighlightText; }
+  .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
+  .aura-progress__bar, .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; }
+  .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
+  .aura-tab { border-bottom-color: Canvas; }
+  .aura-tab.is-active { border-bottom-color: Highlight; }
+}
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",
@@ -9,14 +9,24 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
     },
     "./server": {
-      "types": "./dist/server/index.d.ts",
-      "import": "./dist/server/index.js",
-      "require": "./dist/server/index.cjs"
+      "import": {
+        "types": "./dist/server/index.d.ts",
+        "default": "./dist/server/index.js"
+      },
+      "require": {
+        "types": "./dist/server/index.d.cts",
+        "default": "./dist/server/index.cjs"
+      }
     },
     "./styles.css": "./dist/styles.css",
     "./styles.layer.css": "./dist/styles.layer.css",
@@ -30,7 +40,8 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./dist/aura.bundle.js"
   ],
   "scripts": {
     "build": "node scripts/build.mjs && node scripts/sync-bundle.mjs",

package/scripts/aura-theme.mjs

@@ -5,17 +5,42 @@
 import fs from 'node:fs';
 import { createTheme } from '../dist/esm/theme.js';
 
+const USAGE = 'Usage: aura-theme --brand "#0ea5e9" [--signal "#facc15"] [--primary ink|brand] [--name acme] [--selector .tenant] [--out theme.css]';
+const KNOWN = ['brand', 'signal', 'primary', 'name', 'selector', 'out', 'help'];
+function fail(msg) {
+  console.error('aura-theme: ' + msg + '\n' + USAGE);
+  process.exit(2);
+}
+/* --key value and --key=value (5.2); a value-taking option with no value is an error, not `true`. */
 const args = {};
 for (let i = 2; i < process.argv.length; i++) {
   const a = process.argv[i];
-  if (a.startsWith('--')) { const k = a.slice(2); const v = process.argv[i + 1] && !process.argv[i + 1].startsWith('--') ? process.argv[++i] : true; args[k] = v; }
+  if (!a.startsWith('--')) fail('unexpected "' + a + '"');
+  const eq = a.indexOf('=');
+  const k = eq > 0 ? a.slice(2, eq) : a.slice(2);
+  if (KNOWN.indexOf(k) < 0) fail('unknown option --' + k);
+  if (k === 'help') { args.help = true; continue; }
+  const v = eq > 0 ? a.slice(eq + 1) : process.argv[i + 1] !== undefined && !process.argv[i + 1].startsWith('--') ? process.argv[++i] : undefined;
+  if (v === undefined || v === '') fail('--' + k + ' needs a value');
+  args[k] = v;
+}
+if (args.help) {
+  console.log(USAGE);
+  process.exit(0);
+}
+if (!args.brand) fail('--brand is required');
+for (const k of ['brand', 'signal']) {
+  if (args[k] !== undefined && /^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(args[k])) args[k] = '#' + args[k]; /* a shell ate the # */
+  if (args[k] !== undefined && !/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(args[k])) fail('--' + k + ' must be a #rgb or #rrggbb colour (got "' + args[k] + '"; quote it in the shell: --' + k + ' "#0ea5e9")');
 }
-if (!args.brand || args.help) {
-  console.log('Usage: aura-theme --brand "#0ea5e9" [--signal "#facc15"] [--primary ink|brand] [--name acme] [--selector .tenant] [--out theme.css]');
-  process.exit(args.help ? 0 : 1);
+if (args.primary !== undefined && args.primary !== 'ink' && args.primary !== 'brand') fail('--primary is ink or brand');
+let t, css;
+try {
+  t = createTheme({ brand: args.brand, signal: args.signal, primary: args.primary, name: args.name });
+  css = t.css(args.selector);
+} catch (e) {
+  fail(e.message);
 }
-const t = createTheme({ brand: args.brand, signal: args.signal, primary: args.primary, name: args.name });
-const css = t.css(args.selector);
 if (args.out) fs.writeFileSync(args.out, css); else process.stdout.write(css);
 const log = args.out ? console.log : console.error;
 log(`\nContrast checks (${t.checks.filter((c) => c.pass).length}/${t.checks.length} pass):`);