@jirawatpyk/aura-tokens 5.1.1 → 5.2.0

package/README.md

@@ -4,20 +4,20 @@ Enterprise Standard, Human Creative. Tokens, Tailwind preset, Figma variables a
 
 ## What's inside
 
-| File                                         | What                                                                                                                                                                                        |
-| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `tokens.json`                                | **Source of truth.** 3-tier: primitive → semantic (light/dark) → component, plus spacing, radius, shadow (per theme), size, motion, opacity, z-index, typography.                           |
-| `aura.css`                                   | Every token as a CSS variable. Light on `:root` / `[data-theme="light"]`, dark on `.dark` / `[data-theme="dark"]`. **Generated.**                                                           |
-| `aura-fonts.css`                             | The Google Fonts `@import` (Fraunces, Inter, JetBrains Mono, Noto Sans Thai). Kept separate so a network that blocks Google can't break `aura.css`. **Generated.**                          |
-| `aura-fonts.local.css` + `fonts/`            | The same four families self-hosted: `@font-face` rules over woff2 files in the package (4.16), for a `font-src 'self'` CSP. `npm run check:fonts` loads them under that CSP. **Generated.** |
-| `tailwind.config.ts` + `tailwind.tokens.cjs` | Tailwind v3 theme wired to the variables (`bg-bg-surface`, `text-fg-danger`, `rounded-aura-xl`, `shadow-aura-overlay` …). The `.cjs` is **generated**.                                      |
-| `aura-tailwind.css`                          | The same class names for Tailwind v4 (`@theme inline`, CSS-first). **Generated**; exported as `@jirawatpyk/aura-tokens/tailwind.css`.                                                       |
-| `figma-variables.csv`                        | 204 variables: all colours in both modes (aliases kept), spacing, radius and sizes. **Generated.**                                                                                          |
-| `components/`                                | `aura.bundle.js` (sets `window.Aura`), `aura.components.css`, `index.d.ts`.                                                                                                                 |
-| `eslint-plugin-aura.js`                      | `aura/no-hardcoded-color`: hex, rgb()/hsl() and Tailwind `bg-[#…]` classes.                                                                                                                 |
-| `scripts/build-tokens.js`                    | Rebuilds the generated files from `tokens.json`.                                                                                                                                            |
-| `scripts/a11y-check.js`                      | Checks 94 text/ground pairs in both themes (WCAG AA).                                                                                                                                       |
-| `scripts/lint-tokens.js`                     | Fails on hard-coded colours (a file that must hold them says `aura-lint: allow-colours` with a reason).                                                                                     |
+| File                                         | What                                                                                                                                                                                                                                                                            |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tokens.json`                                | **Source of truth.** 3-tier: primitive → semantic (light/dark) → component, plus spacing, radius, shadow (per theme), size, motion, opacity, z-index, typography.                                                                                                               |
+| `aura.css`                                   | Every token as a CSS variable. Light on `:root` / `[data-theme="light"]`, dark on `.dark` / `[data-theme="dark"]`. **Generated.**                                                                                                                                               |
+| `aura-fonts.css`                             | The Google Fonts `@import` (Fraunces, Inter, JetBrains Mono, Noto Sans Thai). Kept separate so a network that blocks Google can't break `aura.css`. **Generated.**                                                                                                              |
+| `aura-fonts.local.css` + `fonts/`            | The same four families self-hosted: `@font-face` rules over woff2 files in the package (4.16), for a `font-src 'self'` CSP. `npm run check:fonts` loads them under that CSP. **Generated.**                                                                                     |
+| `tailwind.config.ts` + `tailwind.tokens.cjs` | Tailwind v3 theme wired to the variables (`bg-bg-surface`, `text-fg-danger`, `rounded-aura-xl`, `shadow-aura-overlay` …). The `.cjs` is **generated**.                                                                                                                          |
+| `aura-tailwind.css`                          | The same class names for Tailwind v4 (`@theme inline`, CSS-first). **Generated**; exported as `@jirawatpyk/aura-tokens/tailwind.css`.                                                                                                                                           |
+| `figma-variables.csv`                        | 204 variables: all colours in both modes (aliases kept), spacing, radius and sizes. **Generated.**                                                                                                                                                                              |
+| `components/`                                | `aura.bundle.js` (sets `window.Aura`), `aura.components.css`, `index.d.ts`.                                                                                                                                                                                                     |
+| `eslint-plugin-aura.js`                      | `aura/no-hardcoded-color`: hex, colour functions (rgb, hsl, oklch, color-mix…), named colours in style values and Tailwind palette / `bg-[#…]` classes. ESLint 9: `import aura from '@jirawatpyk/aura-tokens/eslint-plugin'; export default [aura.configs.recommended];` (5.2). |
+| `scripts/build-tokens.js`                    | Rebuilds the generated files from `tokens.json`.                                                                                                                                                                                                                                |
+| `scripts/a11y-check.js`                      | Checks 210 pairs in both themes: text on its grounds (WCAG AA), control edges and state marks at 3:1, neighbouring chart and status fills a lightness step apart.                                                                                                               |
+| `scripts/lint-tokens.js`                     | Fails on hard-coded colours (a file that must hold them says `aura-lint: allow-colours` with a reason).                                                                                                                                                                         |
 
 ## ใช้งาน (5 นาที)
 

package/aura-tailwind.css

@@ -1,12 +1,25 @@
-/* AURA v5.1.1 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
+/* AURA v5.2.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,
  * ease-aura-ease, duration-aura-fast, z-aura-dialog, font-display … (the v3 preset's names). */
 @import "./aura.css";
 
-/* dark: follows .dark and data-theme="dark", the same switches aura.css uses. */
-@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
+/* dark: follows .dark and data-theme="dark", the same switches aura.css uses; data-theme="system" when the OS is dark
+ * (5.2); and not inside a light island in a dark page (Surface sets data-theme="light"), where the tokens are light. */
+@custom-variant dark {
+  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *):not(:where(.dark [data-theme="light"], .dark [data-theme="light"] *, [data-theme="dark"] [data-theme="light"], [data-theme="dark"] [data-theme="light"] *)) {
+    @slot;
+  }
+  &:where([data-theme="light"] [data-theme="dark"], [data-theme="light"] [data-theme="dark"] *):not(:where([data-theme="dark"] [data-theme="light"], [data-theme="dark"] [data-theme="light"] *)) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where([data-theme="system"], [data-theme="system"] *):not(:where([data-theme="system"] [data-theme="light"], [data-theme="system"] [data-theme="light"] *)) {
+      @slot;
+    }
+  }
+}
 
 @theme inline {
   --color-aura-violet-50: var(--aura-violet-50);

package/aura-tailwind.prefixed.css

@@ -1,4 +1,4 @@
-/* AURA v5.1.1 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
+/* AURA v5.2.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
  * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
  *   @layer aura-tokens, theme, base, aura, components, utilities;
  *   @import "tailwindcss";

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v5.1.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v5.2.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {

package/components/aura.bundle.js

@@ -378,6 +378,12 @@ window.Aura = (() => {
       page: function(p, total) {
         return "Page " + p + " of " + total;
       },
+      rangeOpen: function(a, b) {
+        return a + "\u2013" + b + " of many";
+      },
+      pageOpen: function(p) {
+        return "Page " + p;
+      },
       prevPage: "Previous page",
       nextPage: "Next page",
       totals: "Totals",
@@ -391,6 +397,7 @@ window.Aura = (() => {
       timeOutOfRange: function(a, b) {
         return "Choose a time between " + a + " and " + b;
       },
+      timeUnavailable: "That time isn't available. Choose another.",
       dropFiles: "Drag files here or",
       browse: "Choose files",
       browseOne: "Choose a file",
@@ -492,6 +499,12 @@ window.Aura = (() => {
       page: function(p, total) {
         return "\u0E2B\u0E19\u0E49\u0E32 " + p + " / " + total;
       },
+      rangeOpen: function(a, b) {
+        return a + "\u2013" + b + " \u0E08\u0E32\u0E01\u0E2B\u0E25\u0E32\u0E22\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+      },
+      pageOpen: function(p) {
+        return "\u0E2B\u0E19\u0E49\u0E32 " + p;
+      },
       prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
       nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
       totals: "\u0E23\u0E27\u0E21",
@@ -505,6 +518,7 @@ window.Aura = (() => {
       timeOutOfRange: function(a, b) {
         return "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E27\u0E25\u0E32\u0E23\u0E30\u0E2B\u0E27\u0E48\u0E32\u0E07 " + a + "\u2013" + b + " \u0E19.";
       },
+      timeUnavailable: "\u0E40\u0E27\u0E25\u0E32\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E27\u0E48\u0E32\u0E07 \u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E27\u0E25\u0E32\u0E2D\u0E37\u0E48\u0E19",
       dropFiles: "\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E27\u0E32\u0E07 \u0E2B\u0E23\u0E37\u0E2D",
       browse: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C",
       browseOne: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C",
@@ -606,6 +620,12 @@ window.Aura = (() => {
       page: function(p, total) {
         return "Sida " + p + " av " + total;
       },
+      rangeOpen: function(a, b) {
+        return a + "\u2013" + b + " av m\xE5nga";
+      },
+      pageOpen: function(p) {
+        return "Sida " + p;
+      },
       prevPage: "F\xF6reg\xE5ende sida",
       nextPage: "N\xE4sta sida",
       totals: "Summa",
@@ -619,6 +639,7 @@ window.Aura = (() => {
       timeOutOfRange: function(a, b) {
         return "V\xE4lj en tid mellan " + a + " och " + b;
       },
+      timeUnavailable: "Den tiden \xE4r inte ledig. V\xE4lj en annan.",
       dropFiles: "Dra filer hit eller",
       browse: "V\xE4lj filer",
       browseOne: "V\xE4lj en fil",
@@ -1690,20 +1711,29 @@ window.Aura = (() => {
     return (n2 < 10 ? "0" : "") + n2;
   };
   function toISO(d) {
-    return d ? d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) : null;
+    if (!d) return null;
+    const y = String(d.getFullYear());
+    return ("000" + y).slice(-Math.max(4, y.length)) + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+  }
+  function makeDate(y, monthIndex2, day) {
+    const d = new Date(2e3, 0, 1);
+    d.setFullYear(y, monthIndex2, day);
+    return d;
   }
   function fromISO(s) {
     if (!s) return null;
     const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
-    return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+    if (!m) return null;
+    const d = makeDate(+m[1], +m[2] - 1, +m[3]);
+    return d.getMonth() === +m[2] - 1 && d.getDate() === +m[3] ? d : null;
   }
   function addDays(d, n2) {
-    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n2);
+    return makeDate(d.getFullYear(), d.getMonth(), d.getDate() + n2);
   }
   function addMonths(d, n2) {
-    const t = new Date(d.getFullYear(), d.getMonth() + n2, 1);
-    const last = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
-    return new Date(t.getFullYear(), t.getMonth(), Math.min(d.getDate(), last));
+    const t = makeDate(d.getFullYear(), d.getMonth() + n2, 1);
+    const last = makeDate(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+    return makeDate(t.getFullYear(), t.getMonth(), Math.min(d.getDate(), last));
   }
   function same(a, b) {
     return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -1811,7 +1841,15 @@ window.Aura = (() => {
     return MONTHS[k] != null ? MONTHS[k] : -1;
   }
   function parseDate(text) {
-    const s = String(text || "").trim();
+    const raw = String(text || "").trim();
+    const gregorian = /ค\.ศ\.|\d\s*(AD|CE)\b|^\s*(AD|CE)\s/i.test(raw);
+    let s = raw.replace(/พ\.ศ\.|ค\.ศ\./g, " ").replace(/(\d)\s*(BE|AD|CE)\b/gi, "$1 ").replace(/^\s*(BE|AD|CE)\s+/i, " ").replace(/\s+/g, " ").trim();
+    const eight = /^(\d{2})(\d{2})(\d{4})$/.exec(s);
+    if (eight) {
+      const a = +eight[3] >= 1e3 ? parseDate(eight[1] + "/" + eight[2] + "/" + eight[3] + (gregorian ? " \u0E04.\u0E28." : "")) : null;
+      if (a) return a;
+      s = s.slice(0, 4) + "-" + s.slice(4, 6) + "-" + s.slice(6);
+    }
     let m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(s), y, mo, d;
     if (m) {
       y = +m[1];
@@ -1821,13 +1859,13 @@ window.Aura = (() => {
       d = +m[1];
       mo = +m[2];
       y = +m[3];
-    } else if ((m = /^(\d{1,2})\s+(\S+)\s+(\d{4})$/.exec(s.replace(ERA, "").trim())) && monthIndex(m[2]) >= 0) {
+    } else if ((m = /^(\d{1,2})\s+(\S+)\s+(\d{4})$/.exec(s)) && monthIndex(m[2]) >= 0) {
       d = +m[1];
       mo = monthIndex(m[2]) + 1;
       y = +m[3];
     } else return null;
-    if (y >= 2400) y -= 543;
-    const dt = new Date(y, mo - 1, d);
+    if (y >= 2400 && !gregorian) y -= 543;
+    const dt = makeDate(y, mo - 1, d);
     return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
   }
   function todayIn(timeZone) {
@@ -2118,16 +2156,16 @@ window.Aura = (() => {
     const pos = React17.useState(null), popRef = React17.useRef(null), mounted = useMounted();
     function place() {
       if (!boxRef.current) return;
-      const r = boxRef.current.getBoundingClientRect(), H = 380;
-      const up = window.innerHeight - r.bottom < H && r.top > H;
-      const left = Math.max(8, Math.min(r.left, window.innerWidth - 320 - 8));
+      const el = popRef.current, r = boxRef.current.getBoundingClientRect(), W = el ? el.offsetWidth : 320, H = el ? el.offsetHeight : 380;
+      const up = window.innerHeight - r.bottom < H + 12 && r.top > H + 12;
+      const left = Math.max(8, Math.min(r.left, window.innerWidth - W - 8));
       pos[1](up ? { left, bottom: window.innerHeight - r.top + 4 } : { left, top: r.bottom + 4 });
     }
     useIsoLayoutEffect(
       function() {
         if (open) place();
       },
-      [open]
+      [open, !!pos[0]]
     );
     React17.useEffect(
       function() {
@@ -3696,11 +3734,12 @@ window.Aura = (() => {
       if (lv && boxWidth[0] == null) hideTerms += " + " + w + "px * var(--aura-h" + lv + "-on, 1)";
       else fixedSum += w;
     });
-    let pinOffsets = {}, acc = 0;
+    let pinOffsets = {}, acc = "0px";
     vis.forEach(function(c) {
       if (isPinned(c)) {
         pinOffsets[c.key] = acc;
-        acc += widthOf(c);
+        const lv = hideLevel(c);
+        acc += " + " + widthOf(c) + "px" + (lv && boxWidth[0] == null ? " * var(--aura-h" + lv + "-on, 1)" : "");
       }
     });
     const selW = selectable ? " + var(--aura-table-select-width)" : "";
@@ -3715,7 +3754,7 @@ window.Aura = (() => {
         s["--aura-cell-flex"] = !hasFlex && i === vis.length - 1 ? "1 0 auto" : "none";
         s["--aura-cell-w"] = w + "px";
       }
-      if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
+      if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
       return s;
     }
     const sortCol = sort && sort.key ? byKey[sort.key] : void 0;
@@ -3761,6 +3800,20 @@ window.Aura = (() => {
     const pageRows = pageSize && !manual ? view.slice(first, first + pageSize) : view;
     const canSortAny = !busy && (manual ? total > 1 : rows.length > 1);
     const shownTotal = manual && props.totalRows == null ? first + rows.length : total;
+    const prevCount = React28.useRef(pageCount);
+    React28.useEffect(
+      function() {
+        if (busy) return;
+        const before = prevCount.current;
+        prevCount.current = pageCount;
+        const asked = pageState[0] || 1;
+        if (asked === page || pageCount >= before || asked > before) return;
+        if (props.getPageHref && !props.onPageChange && !props.onStateChange) return;
+        pageState[1](page);
+        emit(sort, page);
+      },
+      [pageState[0], page, busy, pageCount]
+    );
     const linkPaging = !!props.getPageHref && !props.onPageChange && !oneCallback;
     const prevLink = React28.useRef(null), nextLink = React28.useRef(null), jumpLink = React28.useRef(null);
     const jumpState = React28.useState(null);
@@ -3829,9 +3882,10 @@ window.Aura = (() => {
     const visibleRows = Math.max(1, Math.floor(bodyH / ROW_H));
     const nCols = vis.length + (selectable ? 1 : 0);
     const nRows = loading ? 0 : pageRows.length;
+    const hasTotal = !!(props.footer && rows.length && !loading), T = nRows + 1, lastR = nRows + (hasTotal ? 1 : 0);
     const active = activeState[0];
-    const ar = Math.min(active.r, nRows), ac = Math.min(active.c, nCols - 1);
-    const activeRendered = ar === 0 || ar - 1 >= start && ar - 1 < end;
+    const ar = Math.min(active.r, lastR), ac = Math.min(active.c, nCols - 1);
+    const activeRendered = ar === 0 || hasTotal && ar === T || ar - 1 >= start && ar - 1 < end;
     function colAt(ci) {
       return selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
     }
@@ -3862,12 +3916,33 @@ window.Aura = (() => {
       }
     });
     function focusCell(r, c) {
-      r = Math.max(0, Math.min(r, nRows));
+      r = Math.max(0, Math.min(r, lastR));
       c = Math.max(0, Math.min(c, nCols - 1));
       if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
+      if (gridRef.current && r === T && hasTotal) {
+        const shown2 = function(cc) {
+          const e = gridRef.current.querySelector('[data-rc="' + r + ":" + cc + '"]');
+          return !!e && e.getClientRects().length > 0;
+        };
+        if (!shown2(c))
+          for (let d = 1; d < nCols; d++) {
+            if (c + d < nCols && shown2(c + d)) {
+              c = c + d;
+              break;
+            }
+            if (c - d >= 0 && shown2(c - d)) {
+              c = c - d;
+              break;
+            }
+          }
+      }
       activeState[1]({ r, c });
       pending.current = { r, c };
-      if (virtual && r > 0) {
+      if (virtual && hasTotal && r === T && !props.stickyFooter) {
+        const sc = scrollRef.current;
+        sc.scrollTop = sc.scrollHeight;
+        setScrollTop(sc.scrollTop);
+      } else if (virtual && r > 0 && r <= nRows) {
         const sc = scrollRef.current, top = (r - 1) * ROW_H;
         if (top < sc.scrollTop) sc.scrollTop = top;
         else if (top + ROW_H > sc.scrollTop + bodyH) sc.scrollTop = top + ROW_H - bodyH;
@@ -4110,7 +4185,7 @@ window.Aura = (() => {
         return;
       }
       const p = rc.split(":"), r = +p[0], c = +p[1], k = e.key, col = colAt(c);
-      const row = r > 0 ? pageRows[r - 1] : null;
+      const row = r > 0 && r <= nRows ? pageRows[r - 1] : null, isTotal = hasTotal && r === T;
       let handled = true;
       if (r === 0 && col && e.altKey && (k === "ArrowLeft" || k === "ArrowRight") && canResize(col))
         setW(col, widthOf(col) + (k === "ArrowLeft" ? -1 : 1) * (e.shiftKey ? 48 : 16), true);
@@ -4121,21 +4196,23 @@ window.Aura = (() => {
       else if (k === "ArrowRight") focusCell(r, c + 1);
       else if (k === "ArrowLeft") focusCell(r, c - 1);
       else if (k === "ArrowDown") {
-        if (r < nRows) focusCell(r + 1, c);
+        if (r < lastR) focusCell(r + 1, c);
         else if (pageSize && page < pageCount && goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
       } else if (k === "ArrowUp") {
         if (r > 1 || r === 1 && !(pageSize && page > 1)) focusCell(r - 1, c);
         else if (r === 1 && goPage(page - 1, { r: pageSize, c })) activeState[1]({ r: pageSize, c });
       } else if (k === "Home") focusCell(e.ctrlKey ? 1 : r, 0);
-      else if (k === "End") focusCell(e.ctrlKey ? nRows : r, nCols - 1);
+      else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1);
       else if (k === "PageDown") {
         if (pageSize) {
           if (goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
-        } else focusCell(Math.min(nRows, r + visibleRows), c);
+        } else focusCell(Math.min(lastR, r + visibleRows), c);
       } else if (k === "PageUp") {
         if (pageSize) {
           if (goPage(page - 1, { r: 1, c })) activeState[1]({ r: 1, c });
         } else focusCell(Math.max(1, r - visibleRows), c);
+      } else if (isTotal && (k === " " || k === "Enter" || k === "F2")) {
+        handled = false;
       } else if (k === "F2" && r > 0) {
         const inner = target.querySelector("button, a[href], input, select, textarea");
         if (inner) inner.focus();
@@ -4506,9 +4583,10 @@ window.Aura = (() => {
         }
       );
     }
+    const openTotal = manual && props.totalRows == null && !!pageSize && rows.length >= pageSize;
     if (pageSize && (rows.length || busy || page > 1)) {
       const from = rows.length ? first + 1 : 0, to = manual ? first + rows.length : Math.min(first + pageSize, view.length);
-      foot = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React28.createElement("span", { "aria-live": "polite" }, busy ? t.loading : t.range(from, to, shownTotal)), /* @__PURE__ */ React28.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React28.createElement("span", null, t.page(page, pageCount)), pagerButton(-1), pagerButton(1)));
+      foot = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React28.createElement("span", { "aria-live": "polite" }, busy ? t.loading : openTotal ? t.rangeOpen(from, to) : t.range(from, to, shownTotal)), /* @__PURE__ */ React28.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React28.createElement("span", null, openTotal ? t.pageOpen(page) : t.page(page, pageCount)), pagerButton(-1), pagerButton(1)));
     } else if (height && rows.length && !loading) {
       foot = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React28.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React28.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React28.createElement("span", null));
     }
@@ -4522,15 +4600,32 @@ window.Aura = (() => {
         style: rowStyle
       },
       /* @__PURE__ */ React28.createElement("span", { className: "aura-table__gutter", "aria-hidden": true }),
-      selectable ? /* @__PURE__ */ React28.createElement("span", { className: cx("aura-table__sel", nPinned && "is-pinned"), "aria-hidden": true }) : null,
+      selectable ? /* @__PURE__ */ React28.createElement(
+        "span",
+        {
+          role: "gridcell",
+          "aria-colindex": 1,
+          className: cx("aura-table__sel", nPinned && "is-pinned"),
+          tabIndex: tabFor(T, 0),
+          "data-rc": T + ":0",
+          onFocus: function() {
+            activeState[1]({ r: T, c: 0 });
+          }
+        }
+      ) : null,
       vis.map(function(c, j) {
-        const pin = isPinned(c);
+        const pin = isPinned(c), ci = j + (selectable ? 1 : 0);
         return /* @__PURE__ */ React28.createElement(
           "span",
           {
             key: c.key,
             role: "gridcell",
             "aria-colindex": j + (selectable ? 2 : 1),
+            tabIndex: tabFor(T, ci),
+            "data-rc": T + ":" + ci,
+            onFocus: function() {
+              if (activeState[0].r !== T || activeState[0].c !== ci) activeState[1]({ r: T, c: ci });
+            },
             className: cx(
               "aura-table__td",
               c.mono && "aura-table__mono",
@@ -4556,7 +4651,7 @@ window.Aura = (() => {
       )
     ) : null;
     const scrollStyle = {
-      scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
+      scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + ")",
       scrollPaddingTop: ROW_H + "px",
       scrollPaddingBottom: stickyTotal ? ROW_H + "px" : void 0
     };
@@ -5468,6 +5563,7 @@ window.Aura = (() => {
     const m = /^(\d{1,2})(?:[:.](\d{2}))?$/.exec(s) || /^(\d{1,2})(\d{2})$/.exec(s);
     if (!m) return null;
     let hh = +m[1], mm = m[2] ? +m[2] : 0;
+    if ((am || pm) && (hh < 1 || hh > 12)) return null;
     if (pm && hh < 12) hh += 12;
     if (am && hh === 12) hh = 0;
     if (hh > 23 || mm > 59) return null;
@@ -5582,7 +5678,8 @@ window.Aura = (() => {
         return true;
       }
       if (blocked(v)) {
-        errState[1](t.timeOutOfRange(fromMin(lo), fromMin(hi)));
+        const n2 = toMin(v);
+        errState[1](n2 != null && n2 >= lo && n2 <= hi ? t.timeUnavailable : t.timeOutOfRange(fromMin(lo), fromMin(hi)));
         return false;
       }
       errState[1](null);
@@ -5841,6 +5938,7 @@ window.Aura = (() => {
       [items2, props.name]
     );
     function thumb(it) {
+      if (!it.file && it.url && /^image\//.test(it.type || "")) return it.url;
       if (!it.file || !/^image\//.test(it.type || "") || typeof URL === "undefined" || !URL.createObjectURL) return null;
       if (!urls.current[it.id]) urls.current[it.id] = URL.createObjectURL(it.file);
       return urls.current[it.id];
@@ -5946,7 +6044,7 @@ window.Aura = (() => {
       ),
       items2.length ? /* @__PURE__ */ React46.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items2.map(function(it) {
         const src = thumb(it);
-        return /* @__PURE__ */ React46.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React46.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React46.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__meta" }, /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React46.createElement(
+        return /* @__PURE__ */ React46.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React46.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React46.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__meta" }, it.url && !it.error ? /* @__PURE__ */ React46.createElement("a", { className: "aura-upload__name", href: it.url, target: "_blank", rel: "noreferrer" }, it.name) : /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React46.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React46.createElement(
           "span",
           {
             className: "aura-upload__bar",
@@ -6651,13 +6749,20 @@ window.Aura = (() => {
   var React55 = __toESM(require_react(), 1);
   var import_react_dom11 = __toESM(require_react_dom(), 1);
   function position(anchor, pop, placement) {
-    const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
+    const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.scrollHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
     let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
     if (side === "bottom" && r.bottom + gap + ph > vh - 8 && r.top - gap - ph > 8) side = "top";
     else if (side === "top" && r.top - gap - ph < 8 && r.bottom + gap + ph < vh - 8) side = "bottom";
-    const top = side === "top" ? r.top - gap - ph : r.bottom + gap;
+    const below2 = vh - r.bottom - gap - 8, above = r.top - gap - 8;
+    let maxHeight;
+    if (ph > below2 && ph > above) {
+      side = above > below2 ? "top" : "bottom";
+      maxHeight = Math.max(120, side === "top" ? above : below2);
+    }
+    const h9 = maxHeight ? Math.min(ph, maxHeight) : ph;
+    const top = side === "top" ? r.top - gap - h9 : r.bottom + gap;
     const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
-    return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
+    return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side, maxHeight };
   }
   var Popover = React55.forwardRef(function Popover2(props, ref) {
     const t = useStrings();
@@ -6737,7 +6842,11 @@ window.Aura = (() => {
           },
           className: cx("aura-popover", pos[0] && "is-" + pos[0].side, props.className),
           style: Object.assign(
-            { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 },
+            {
+              top: pos[0] ? pos[0].top : -9999,
+              left: pos[0] ? pos[0].left : -9999,
+              maxHeight: pos[0] && pos[0].maxHeight ? pos[0].maxHeight : void 0
+            },
             props.width ? { width: props.width } : null
           ),
           onKeyDown: function(e) {

package/components/aura.components.css

@@ -679,6 +679,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 ---------- */
@@ -921,6 +923,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 +1046,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 +1148,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; }

package/components/index.d.ts

@@ -1381,6 +1381,9 @@ export interface AuraStrings {
 	loadingRows: string;
 	range: (a: number | string, b: number | string, total: number) => string;
 	page: (p: number, total: number) => string;
+	/** Server paging without totalRows (5.2): the range and page when the total isn't known. */
+	rangeOpen: (a: number | string, b: number | string) => string;
+	pageOpen: (p: number) => string;
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
@@ -1390,6 +1393,8 @@ export interface AuraStrings {
 	timePlaceholder: string;
 	timeInvalid: string;
 	timeOutOfRange: (a: number | string, b: number | string) => string;
+	/** A time inside the range that isTimeDisabled refuses (5.2). */
+	timeUnavailable: string;
 	dropFiles: string;
 	browse: string;
 	browseOne: string;

package/eslint-plugin-aura.d.ts

@@ -0,0 +1,11 @@
+/* Types for eslint-plugin-aura.js (5.2): import aura from '@jirawatpyk/aura-tokens/eslint-plugin';
+ * export default [aura.configs.recommended]; */
+declare const plugin: {
+  meta: { name: string; version: string };
+  rules: Record<string, unknown>;
+  configs: {
+    recommended: { plugins: Record<string, unknown>; rules: Record<string, 'error' | 'warn' | 'off'> };
+    'recommended-legacy': { plugins: string[]; rules: Record<string, 'error' | 'warn' | 'off'> };
+  };
+};
+export = plugin;

package/eslint-plugin-aura.js

@@ -1,34 +1,125 @@
-// eslint-plugin-aura.js — AURA 4.1
-// Flags hard-coded colours in JS/TS: hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/hsl() literals,
-// and Tailwind arbitrary colour classes like bg-[#18181b]. Use semantic tokens instead.
-const HEX = /#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\b/i;
-const FN = /\b(?:rgba?|hsla?)\(\s*\d/i;
-const TW = /\b(?:bg|text|border|ring|fill|stroke|from|to|via|shadow)-\[(?:#|rgb|hsl)/i;
+// eslint-plugin-aura.js — AURA 5.2
+// Flags hard-coded colours in JS/TS: hex (#rgb, #rgba, #rrggbb, #rrggbbaa), colour functions (rgb/hsl/hwb/lab/lch/
+// oklab/oklch/color-mix), CSS named colours in a style value, Tailwind palette classes (bg-red-500, text-white) and
+// arbitrary colour classes (bg-[#18181b]). Use semantic tokens instead.
+//
+// Flat config (ESLint 9):   import aura from '@jirawatpyk/aura-tokens/eslint-plugin';
+//                           export default [aura.configs.recommended];
+// Legacy .eslintrc:         plugins: ['aura'] needs the package installed as eslint-plugin-aura, so use the
+//                           flat config, or aura.configs['recommended-legacy'] with a local plugin loader.
+const PALETTE =
+  'slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose';
+const UTIL =
+  'bg|text|border(?:-[trblxy])?|ring|ring-offset|outline|fill|stroke|from|to|via|shadow|decoration|divide|placeholder|caret|accent';
+/* "#fff" but not "#add-user" or "#section_2": a hex is not followed by a word character or a hyphen. */
+const HEX = /#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})(?![\w-])/i;
+/* A colour function with a literal colour in it: a hex, or three numbers (rgb(1 2 3), oklch(.7 .1 200)), or an open
+ * call a template literal continues (`rgb(${r}, …)`). Token-based ones pass: rgb(var(--brand-rgb) / .5),
+ * color-mix(in srgb, var(--aura-accent) 20%, transparent). var() and url() are removed before any check. */
+const FN_CALL = /\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color-mix)\(([^()]*)(\)|$)/gi;
+function fnHit(v) {
+  FN_CALL.lastIndex = 0;
+  let m;
+  while ((m = FN_CALL.exec(v))) {
+    const args = m[1];
+    if (!m[2] || /#[0-9a-f]{3}/i.test(args) || (args.match(/-?\d*\.?\d+/g) || []).length >= 3) return m[0];
+  }
+  return null;
+}
+const stripRefs = (v) => v.replace(/var\([^()]*(?:\([^()]*\)[^()]*)*\)/g, ' ').replace(/url\([^)]*\)/g, ' ');
+const TW_ARB = new RegExp('(?:^|[\\s:"\'`])(?:' + UTIL + ')-\\[(?:#|rgb|hsl|oklch|color)', 'i');
+const TW_PAL = new RegExp(
+  '(?:^|[\\s:"\'`!])(?:' + UTIL + ')-(?:(?:' + PALETTE + ')-\\d{2,3}|white|black)(?:\\/\\d+)?(?![\\w-])',
+);
+const NAMED =
+  'white|black|red|green|blue|yellow|orange|purple|pink|gray|grey|silver|maroon|navy|teal|olive|lime|aqua|fuchsia|brown|gold|indigo|violet|crimson|coral|salmon|tomato|khaki|beige|ivory|lavender|turquoise|tan|plum|orchid';
+/* A whole value that is a named colour ('white'), or one after a colour property ("color: red", "background:#…"). */
+const NAMED_WHOLE = new RegExp('^\\s*(?:' + NAMED + ')\\s*$', 'i');
+/* Lower-case CSS only ("color: white"), so UI text like "Color: Red" isn't a declaration; the name stands alone
+ * (not --aura-white or white-space). */
+const NAMED_DECL = new RegExp(
+  '(?:^|[;{\\s])(?:color|background(?:-color)?|border(?:-[a-z]+)?-color|border|fill|stroke|outline(?:-color)?)\\s*:\\s*[^;]*(?<![\\w-])(?:' +
+    NAMED +
+    ')(?![\\w-])',
+);
+/* Properties whose values are colours when written as an object key (style={{ color: 'white' }}). */
+const COLOUR_KEY =
+  /^(?:color|background|backgroundColor|borderColor|border(?:Top|Right|Bottom|Left)Color|fill|stroke|outlineColor|caretColor|accentColor|textDecorationColor)$/;
+/* JSX attributes that hold ids and URLs, never colours ("#add-user", "#fff" as an anchor). */
+const NOT_COLOUR_ATTR =
+  /^(?:href|to|id|htmlFor|for|src|action|formAction|xlinkHref|xlink:href|aria-[a-z]+|data-[\w-]+|name|key)$/;
 
-function check(context, node, value) {
-  if (typeof value !== 'string') return;
-  const hit = (TW.exec(value) || HEX.exec(value) || FN.exec(value) || [])[0];
-  if (hit) {
-    context.report({
-      node,
-      message: `Hard-coded colour "${hit}". Use a semantic token (bg-bg-surface, text-fg-primary, var(--aura-…)) instead.`,
-    });
+function hitIn(raw, colourKey) {
+  if (typeof raw !== 'string') return null;
+  const value = stripRefs(raw);
+  const m = TW_ARB.exec(value) || TW_PAL.exec(value) || HEX.exec(value) || NAMED_DECL.exec(value);
+  if (m) return m[0].trim();
+  const f = fnHit(value);
+  if (f) return f;
+  if (colourKey && NAMED_WHOLE.test(value)) return value.trim();
+  return null;
+}
+function skip(node) {
+  let p = node.parent;
+  if (!p) return false;
+  /* href={'#add'}, href={x ? '#a' : '#b'}, href={`#fff`}: look through the expression to the attribute. */
+  while (
+    p.parent &&
+    (p.type === 'JSXExpressionContainer' ||
+      p.type === 'ConditionalExpression' ||
+      p.type === 'LogicalExpression' ||
+      p.type === 'TemplateLiteral' ||
+      p.type === 'BinaryExpression')
+  )
+    p = p.parent;
+  if (p.type === 'JSXAttribute' && p.name) {
+    const n = p.name.type === 'JSXNamespacedName' ? p.name.namespace.name + ':' + p.name.name.name : p.name.name;
+    if (NOT_COLOUR_ATTR.test(n)) return true;
   }
+  if (p.type === 'ImportDeclaration' || p.type === 'ExportNamedDeclaration' || p.type === 'ExportAllDeclaration')
+    return true;
+  return false;
+}
+function colourKeyOf(node) {
+  const p = node.parent;
+  if (p && p.type === 'Property' && p.value === node && p.key) return COLOUR_KEY.test(p.key.name || p.key.value || '');
+  return false;
+}
+function report(context, node, hit) {
+  context.report({
+    node,
+    message: `Hard-coded colour "${hit}". Use a semantic token (bg-bg-surface, text-fg-primary, var(--aura-…)) instead.`,
+  });
 }
 
-module.exports = {
+const plugin = {
+  meta: { name: 'eslint-plugin-aura', version: '5.2.0' },
   rules: {
     'no-hardcoded-color': {
-      meta: { type: 'problem', docs: { description: 'ห้ามใช้สี hardcode ให้ใช้ token — use AURA semantic tokens, never raw colours' } },
+      meta: {
+        type: 'problem',
+        docs: { description: 'ห้ามใช้สี hardcode ให้ใช้ token — use AURA semantic tokens, never raw colours' },
+        schema: [],
+      },
       create(context) {
         return {
-          Literal(node) { check(context, node, node.value); },
-          TemplateElement(node) { check(context, node, node.value && node.value.raw); },
+          Literal(node) {
+            if (skip(node)) return;
+            const hit = hitIn(node.value, colourKeyOf(node));
+            if (hit) report(context, node, hit);
+          },
+          TemplateElement(node) {
+            if (skip(node)) return;
+            const hit = hitIn(node.value && node.value.raw, false);
+            if (hit) report(context, node, hit);
+          },
         };
       },
     },
   },
-  configs: {
-    recommended: { plugins: ['aura'], rules: { 'aura/no-hardcoded-color': 'error' } },
-  },
+  configs: {},
 };
+/* Flat config (ESLint 9, the default): the plugin object itself, not a name. */
+plugin.configs.recommended = { plugins: { aura: plugin }, rules: { 'aura/no-hardcoded-color': 'error' } };
+plugin.configs['recommended-legacy'] = { plugins: ['aura'], rules: { 'aura/no-hardcoded-color': 'error' } };
+module.exports = plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",
@@ -12,10 +12,12 @@
     "fonts",
     "tailwind.config.ts",
     "tailwind.tokens.cjs",
+    "tailwind.tokens.d.cts",
     "aura-tailwind.css",
     "aura-tailwind.prefixed.css",
     "figma-variables.csv",
     "eslint-plugin-aura.js",
+    "eslint-plugin-aura.d.ts",
     "components/aura.bundle.js",
     "components/aura.components.css",
     "components/index.d.ts",
@@ -26,17 +28,31 @@
     "LICENSE"
   ],
   "exports": {
+    ".": {
+      "types": "./tailwind.tokens.d.cts",
+      "default": "./tailwind.tokens.cjs"
+    },
     "./aura.css": "./aura.css",
     "./aura-fonts.css": "./aura-fonts.css",
     "./aura-fonts.local.css": "./aura-fonts.local.css",
     "./fonts/*": "./fonts/*",
     "./tokens.json": "./tokens.json",
-    "./tailwind": "./tailwind.tokens.cjs",
+    "./tailwind": {
+      "types": "./tailwind.tokens.d.cts",
+      "default": "./tailwind.tokens.cjs"
+    },
     "./tailwind.css": "./aura-tailwind.css",
     "./tailwind.prefixed.css": "./aura-tailwind.prefixed.css",
-    "./components.js": "./components/aura.bundle.js",
+    "./components.js": {
+      "types": "./components/index.d.ts",
+      "default": "./components/aura.bundle.js"
+    },
     "./components.css": "./components/aura.components.css",
-    "./eslint-plugin": "./eslint-plugin-aura.js"
+    "./eslint-plugin": {
+      "types": "./eslint-plugin-aura.d.ts",
+      "default": "./eslint-plugin-aura.js"
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
     "build": "node scripts/build-tokens.js",
@@ -45,7 +61,8 @@
     "lint:tokens": "node scripts/lint-tokens.js ../react/src && node scripts/lint-tokens.js ../react/styles",
     "check:generated": "node scripts/build-tokens.js && git diff --exit-code -- aura.css aura-fonts.css aura-fonts.local.css tailwind.tokens.cjs aura-tailwind.css aura-tailwind.prefixed.css figma-variables.csv",
     "prepack": "npm run build",
-    "check:fonts": "node scripts/fonts-check.mjs"
+    "check:fonts": "node scripts/fonts-check.mjs",
+    "check:eslint": "node scripts/eslint-check.mjs"
   },
   "keywords": [
     "design-system",

package/scripts/a11y-check.js

@@ -69,6 +69,9 @@ for (const bg of ['bg-surface', 'bg-canvas']) {
 for (let i = 1; i < 8; i++) pairs.push([`chart-${i}`, `chart-${i + 1}`, NEIGHBOUR]);
 /* Status fills that sit side by side in a column must also differ in lightness, not only hue (5.1: warning). */
 pairs.push(['status-warning-bg', 'status-ready-bg', NEIGHBOUR], ['status-warning-bg', 'status-blocked-bg', NEIGHBOUR]);
+/* 5.2: state marks that were fill-only — the Avatar online dot's edge on its ring, the selected segment's edge on the
+ * track and on its own fill. */
+pairs.push(['fg-positive', 'bg-surface', UI], ['border-control', 'bg-surface-hover', UI], ['border-control', 'bg-surface', UI]);
 /* Progress / upload tracks: the edge shows the empty part at 3:1; the bar colours also clear 3:1 on the track fill. */
 for (const bg of ['bg-surface', 'bg-canvas']) pairs.push(['progress-track-edge', bg, UI]);
 for (const fg of ['fg-accent', 'fg-positive', 'fg-danger', 'fg-secondary']) pairs.push([fg, 'progress-track', UI]);

package/scripts/lint-tokens.js

@@ -7,8 +7,30 @@ const fs = require('fs');
 const path = require('path');
 const dir = path.resolve(process.argv[2] || path.join(process.cwd(), 'src'));
 const ALLOW = /(aura\.css|aura\.components\.css|aura\.bundle\.js|tokens\.json|tailwind\.tokens\.cjs|figma-variables\.csv)$/;
-const EXT = /\.(tsx?|jsx?|css|scss|mdx)$/;
-const COLOUR = /#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})\b|\b(?:rgba?|hsla?)\(\s*\d|\b(?:bg|text|border|ring|fill|stroke)-\[(?:#|rgb|hsl)/gi;
+const EXT = /\.(tsx?|jsx?|mjs|cjs|mts|cts|css|scss|mdx|vue|svelte|astro|html)$/;
+/* 5.2: the same patterns as eslint-plugin-aura — a hex not followed by a word character or hyphen ("#add-user" is an
+ * anchor), every colour function, Tailwind palette and arbitrary colour classes. */
+const PALETTE = 'slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose';
+const UTIL = 'bg|text|border(?:-[trblxy])?|ring|ring-offset|outline|fill|stroke|from|to|via|shadow|decoration|divide|placeholder|caret|accent';
+const COLOUR = new RegExp(
+  '#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})(?![\\w-])' +
+    '|(?:^|[\\s:"\'`!])(?:' + UTIL + ')-\\[(?:#|rgb|hsl|oklch|color)' +
+    '|(?:^|[\\s:"\'`!])(?:' + UTIL + ')-(?:(?:' + PALETTE + ')-\\d{2,3}|white|black)(?:\\/\\d+)?(?![\\w-])',
+  'gi',
+);
+/* CSS only: a named colour as a colour property's value ("color: white"). System colours (CanvasText, Highlight) for
+ * forced-colors mode are allowed. */
+const NAMED = 'white|black|red|green|blue|yellow|orange|purple|pink|gray|grey|silver|maroon|navy|teal|olive|lime|aqua|fuchsia|brown|gold|indigo|violet';
+const CSS_NAMED = new RegExp('(?:^|[;{\\s])(?:color|background(?:-color)?|border(?:-[a-z]+)?-color|fill|stroke|outline-color)\\s*:\\s*[^;]*(?<![\\w-])(?:' + NAMED + ')(?![\\w-])');
+/* Colour functions count only with a literal colour inside (a hex or three numbers), as in eslint-plugin-aura. */
+const FN_CALL = /\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color-mix)\(([^()]*)(\)|$)/gi;
+function fnHit(v) {
+  FN_CALL.lastIndex = 0;
+  let m;
+  while ((m = FN_CALL.exec(v))) if (!m[2] || /#[0-9a-f]{3}/i.test(m[1]) || (m[1].match(/-?\d*\.?\d+/g) || []).length >= 3) return m[0];
+  return null;
+}
+const stripRefs = (v) => v.replace(/var\([^()]*(?:\([^()]*\)[^()]*)*\)/g, ' ').replace(/url\([^)]*\)/g, ' ');
 const MOTION_PROP = /\b(?:transition|animation)(?:-duration|-timing-function|-delay)?\s*:/i;
 const MOTION_RAW = /(?:^|[\s,:(])(?:\d*\.?\d+m?s)\b|cubic-bezier\(|\bease(?:-in-out|-in|-out)?\b/gi;
 const violations = [];
@@ -23,8 +45,13 @@ function scan(d) {
     /* A file that must hold raw colours (the theme generator) says so, with a reason, in its first lines. */
     if (/aura-lint:\s*allow-colours/.test(text.slice(0, 600))) continue;
     text.split('\n').forEach((line, i) => {
-      const m = line.match(COLOUR);
-      if (m) violations.push(`${path.relative(process.cwd(), full)}:${i + 1}  ${m.join(', ')}`);
+      const plain = stripRefs(line);
+      const m = plain.match(COLOUR) || (fnHit(plain) ? [fnHit(plain)] : null);
+      if (m) violations.push(`${path.relative(process.cwd(), full)}:${i + 1}  ${m.map((s) => s.trim().replace(/^[:"'`!]/, '')).join(', ')}`);
+      if (/\.s?css$/.test(f) && !/^\s*--/.test(line)) {
+        const n = CSS_NAMED.exec(stripRefs(line.replace(/\/\*.*?\*\//g, '')));
+        if (n) violations.push(`${path.relative(process.cwd(), full)}:${i + 1}  named colour: ${n[0].trim()}`);
+      }
       if (/\.s?css$/.test(f) && MOTION_PROP.test(line)) {
         const raw = line.replace(/var\([^)]*\)/g, '').match(MOTION_RAW);
         if (raw) violations.push(`${path.relative(process.cwd(), full)}:${i + 1}  motion ${raw.map((s) => s.trim()).join(', ')} — use --aura-duration-* / --aura-ease`);

package/tailwind.tokens.d.cts

@@ -0,0 +1,16 @@
+/* Types for tailwind.tokens.cjs (5.2): the token maps a Tailwind v3 config spreads into theme.extend.
+ *   import aura from '@jirawatpyk/aura-tokens/tailwind';   // or require()
+ *   theme: { extend: { colors: aura.colors, spacing: aura.spacing, … } } */
+type AuraColorMap = { [key: string]: string | AuraColorMap };
+declare const aura: {
+  colors: AuraColorMap;
+  spacing: Record<string, string>;
+  borderRadius: Record<string, string>;
+  boxShadow: Record<string, string>;
+  transitionTimingFunction: Record<string, string>;
+  transitionDuration: Record<string, string>;
+  screens: Record<string, string>;
+  zIndex: Record<string, string>;
+  fontFamily: Record<string, string[]>;
+};
+export = aura;

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.1",
+  "version": "5.2.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",