@jirawatpyk/aura-react 5.78.0 → 5.80.0

package/README.md

@@ -100,7 +100,69 @@ export function Providers({ children, locale }: { children: React.ReactNode; loc
 // app/layout.tsx (a Server Component): <body><Providers locale="th">{children}</Providers></body>
 ```
 
-`linkComponent` is used by Button `href`, Breadcrumb, Tabs and Menu items with `href`, BottomNav, Pagination `getHref` (page numbers and, since 4.17, the previous / next arrows), Stat `href`, SideNav and DataTable row/pager links. Each of them also takes its own `linkComponent`, which wins over the provider's. Pass `getHref` from a client component (it's a function too). The Next.js starter does all of this, and CI clicks every AURA link in it to check none triggers a full page load. Only `th` shows Buddhist-era years; `en` and `sv` are Gregorian (`sv` weeks start Monday). **Without a provider, components are English with Gregorian dates** — wrap Thai apps in `<AuraProvider locale="th">`. For dates in your own components use `useFormatDate()` — it follows the provider (`const fmt = useFormatDate(); fmt(iso, { format: 'long' })`). Plain `formatDate()` has no provider to read: since 5.0 it is English and Gregorian unless you pass `locale`, the same function from the package root and from `@jirawatpyk/aura-react/server`. Values are always Gregorian ISO dates.
+`linkComponent` is used by Button `href`, Breadcrumb, Tabs and Menu items with `href`, BottomNav, Pagination `getHref` (page numbers and, since 4.17, the previous / next arrows), Stat and StatusTile `href`, Th `sortHref`, toast action `href`, SideNav and DataTable row/pager links. Each of them also takes its own `linkComponent`, which wins over the provider's. Pass `getHref` from a client component (it's a function too). The Next.js starter does all of this, and CI clicks every AURA link in it to check none triggers a full page load. Only `th` shows Buddhist-era years; `en` and `sv` are Gregorian (`sv` weeks start Monday). **Without a provider, components are English with Gregorian dates** — wrap Thai apps in `<AuraProvider locale="th">`. For dates in your own components use `useFormatDate()` — it follows the provider (`const fmt = useFormatDate(); fmt(iso, { format: 'long' })`). Plain `formatDate()` has no provider to read: since 5.0 it is English and Gregorian unless you pass `locale`, the same function from the package root and from `@jirawatpyk/aura-react/server`. Values are always Gregorian ISO dates.
+
+TanStack Start / TanStack Router (5.80): AURA gives `linkComponent` a plain `href`, so pass a small `<a>` that hands same-origin clicks to the router — not TanStack's `<Link>`, which adds `aria-current="page"` to every link its own matcher calls active (on `/members?page=3`, the page 1 link and the "All" tab as well), over AURA's own:
+
+```tsx
+// src/components/aura-link.tsx
+import * as React from 'react';
+import { useRouter } from '@tanstack/react-router';
+
+function routerHref(href?: string): string | null {
+  if (href == null || typeof window === 'undefined') return null;
+  let url: URL;
+  try {
+    url = new URL(href, window.location.href); // also '?page=2' and 'members'
+  } catch {
+    return null;
+  }
+  const here = window.location;
+  if (url.origin !== here.origin) return null; // other sites, mailto:, tel:
+  if (url.hash && url.pathname === here.pathname && url.search === here.search) return null; // #fragment here
+  return url.pathname + url.search + url.hash;
+}
+
+export const AuraLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
+  function AuraLink({ href, onClick, onMouseEnter, onFocus, ...rest }, ref) {
+    const router = useRouter();
+    const preload = () => {
+      const to = routerHref(href);
+      if (to) router.preloadRoute({ href: to } as Parameters<typeof router.preloadRoute>[0]).catch(() => undefined);
+    };
+    return (
+      <a ref={ref} href={href} {...rest}
+        onClick={(e) => {
+          onClick?.(e); // AURA's own handler first (a DataTable pager with onPageChange, a toast action)
+          if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+          const target = e.currentTarget.getAttribute('target');
+          if ((target && target !== '_self') || e.currentTarget.hasAttribute('download')) return;
+          const to = routerHref(href);
+          if (!to) return;
+          e.preventDefault();
+          void router.navigate({ href: to });
+        }}
+        onMouseEnter={(e) => { onMouseEnter?.(e); preload(); }}
+        onFocus={(e) => { onFocus?.(e); preload(); }}
+      />
+    );
+  },
+);
+
+// src/routes/__root.tsx — the provider inside the router (the root route's component), the document in shellComponent
+export const Route = createRootRoute({
+  head: () => ({ links: [{ rel: 'stylesheet', href: tokensCss }, { rel: 'stylesheet', href: auraCss }] }), // '…css?url' imports
+  shellComponent: RootDocument, // <html><head><HeadContent /><ColorSchemeScript /></head><body>{children}<Scripts /></body></html>
+  component: () => (
+    <AuraProvider locale="th" strings={th} linkComponent={AuraLink}>
+      <Outlet />
+      <Toaster />
+    </AuraProvider>
+  ),
+});
+```
+
+Write hrefs as URLs (`getHref={(p) => '/members?page=' + p}`) and read them back with the route's `validateSearch`. A client navigation passes the query through the router's search parser and serializer, so keep params single-valued (`?a=1&a=2` comes back as JSON, `?q=1e3` as `1000`) or set the router's `parseSearch` / `stringifySearch`. With a `basepath`, write hrefs with it; a same-origin href outside it goes to the router's not-found route. DataTable keyboard paging (PageDown / PageUp, arrows past the page) clicks the pager links, and since 5.80 the focus moves to the new page's row. The TanStack Start starter (`templates/tanstack-start-starter`) has all of this; CI builds it against the packed packages and clicks every AURA link in it — Button, Breadcrumb, link Tabs, DropdownMenu items, BottomNav, Pagination, Th `sortHref`, Stat, StatusTile, SideNav, DataTable rows and pager, toast actions — checking that none loads a full page, that `aria-current` is AURA's and that Ctrl/⌘-click still opens a tab.
 
 ## Compact density
 
@@ -186,6 +248,19 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.79 — visual audit, set 3 (component by component)
+
+- **One disabled look for every Button variant:** a faint fill (`--aura-button-disabled-bg`: zinc-100 light, none in dark), a faint edge (`--aura-button-disabled-border` — the variant's own border, or 1px inside for primary and danger) and the tertiary label, at full opacity — primary, secondary, danger, creative and `aria-disabled` alike; a ghost button has neither fill nor edge. (5.30 gave filled buttons a grey fill that read as a To Do pill and faded outline ones.)
+- **ActionBar `look="edge"` in an AppShell on a desktop** starts after the sidebar (the rail width when collapsed; the right edge in RTL) and lines its contents up with the content's 32px padding (not with `contentPadding={false}`), instead of running under the sidebar. It reads the sidebar's width from `--aura-sidenav-width` / `--aura-sidenav-rail-width`: to change it, set the token on `.aura-shell` or `:root`, not on the nav — and a custom `nav` set them to its width. Outside an AppShell it keeps the screen's width; `edgeBelow` is unchanged (no sidebar there).
+- **A list box** (`<Select multiple>` or `size` > 1) shows its rows, as tall as they need, without the chevron.
+- **Combobox `multiple`:** a chip no longer shrinks to "V.."; it keeps its label and moves to the next line (a label wider than the field still ends in "…").
+- **Switch with an `icon`** (a locked, read-only switch): the lock sits 8px after the label, not at the row's far end. Its colours stay as 5.19 set them.
+- **Menu / DropdownMenu:** a menu whose items have no icon, check box or radio has no empty icon column; it opens on its trigger's left edge when ending on its right would cross the screen (LTR; positioning stays physical, as before); and it is lifted with `--aura-shadow-overlay`, as Popover and the list boxes.
+- **Small fixes:** FileUpload's hint names formats (PNG, JPEG, SVG, DOCX, XLSX), not "IMAGE/PNG"; an outline Badge has a quieter edge (its colour at 45%), so it doesn't read as a secondary Button; a date range is a violet-100 band in light (`--aura-calendar-range-bg`, the brand's 100 step in `createTheme`), visible on white; a disabled field's edge shows in dark (`--aura-input-disabled-border`, zinc-700).
+- **Thai:** a Calendar with a Thai locale carries `lang="th"` and its weekday row is 13px; two-line Thai SideNav labels get room between lines; Combobox options have fixed line heights, so Thai and English rows are spaced alike.
+- **PageHeader:** where `actionsFullWidthBelow` reaches wider than `actionsBarBelow`, every button in the row is `radius-md` between the two breakpoints (5.78 left the bar's buttons as pills there).
+- **Stories:** the ⋯ beside outline buttons in action rows is `variant="outline"` (keep it so in an action row); the launch page shows with its own styles.
+
 ## 5.78 — visual audit, set 2 (phones)
 
 - **Bottom strips on a phone follow one rule:** ActionBar's edge strip (`look="edge"`, `edgeBelow`) now lays out as PageHeader's bar (5.48) — the status on its own row at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row each, as PageHeader's) — and both strips are 16px from either side, the page's phone gutter (they were 16 and 12). `edgeBelow="md"` follows it up to 768px. A single label wider than the screen still overflows, as in PageHeader's strip — keep bar labels short.

package/dist/aura.bundle.js

@@ -1929,7 +1929,8 @@ window.Aura = (() => {
           top = r2.top - above - 4;
         } else maxHeight = below2;
       }
-      const left = Math.max(8, Math.min(r2.right - mw, window.innerWidth - mw - 8));
+      const endAligned = r2.right - mw;
+      const left = Math.max(8, Math.min(endAligned >= 8 ? endAligned : r2.left, window.innerWidth - mw - 8));
       setPos(function(p) {
         return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
       });
@@ -2028,12 +2029,15 @@ window.Aura = (() => {
       });
       return out;
     }
+    const anyLead = items2.some(function(it) {
+      return !it.separator && (!!it.icon || it.type === "radio" || it.checked !== void 0);
+    });
     function renderItem(it, i) {
       if (it.separator) return /* @__PURE__ */ React9.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
       const isRadio = it.type === "radio";
       const isCheck = !isRadio && it.checked !== void 0;
       const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
-      const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
+      const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : anyLead ? /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" }) : null;
       const body = [
         /* @__PURE__ */ React9.createElement(React9.Fragment, { key: "l" }, lead),
         /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
@@ -3444,7 +3448,7 @@ window.Aura = (() => {
           setFocus(addMonths(focusDate, 1));
         }
       }
-    )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
+    )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle, lang: th2 ? "th" : void 0 }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
       return /* @__PURE__ */ React18.createElement("th", { key: i, scope: "col", abbr: n3.long }, /* @__PURE__ */ React18.createElement("span", { "aria-hidden": true }, n3.short));
     }))), /* @__PURE__ */ React18.createElement(
       "tbody",
@@ -6544,6 +6548,7 @@ window.Aura = (() => {
       if (next === page) return false;
       if (!quiet) emit(sort, next);
       if (linkPaging) {
+        if (focus) pending.current = { ...focus, page: next, at: Date.now() };
         const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
         if (a) a.click();
         else jumpState[1](next);
@@ -6642,6 +6647,11 @@ window.Aura = (() => {
     React34.useEffect(function() {
       const p = pending.current;
       if (!p || !gridRef.current) return;
+      if (p.at != null && Date.now() - p.at > 1e4) {
+        pending.current = null;
+        return;
+      }
+      if (p.page != null && p.page !== page) return;
       let c = p.c;
       if (p.key) {
         let at = -1;
@@ -10074,6 +10084,19 @@ window.Aura = (() => {
       a = a.trim();
       if (a === "image/*") return t.images;
       if (a === "application/pdf") return "PDF";
+      const known = {
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+        "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+        "application/msword": "DOC",
+        "application/vnd.ms-excel": "XLS",
+        "application/vnd.ms-powerpoint": "PPT",
+        "text/plain": "TXT"
+      };
+      if (known[a]) return known[a];
+      const slash = a.indexOf("/");
+      if (slash > 0 && a.slice(slash + 1) !== "*")
+        a = a.slice(slash + 1).replace(/^(?:vnd\.|x-)/, "").replace(/\+xml$/, "");
       return a.replace(/^\./, "").toUpperCase();
     }).filter(function(x, i, arr) {
       return arr.indexOf(x) === i;
@@ -10482,6 +10505,7 @@ window.Aura = (() => {
     L["accent-violet"] = L["fg-accent"];
     L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
     L["bg-selected"] = b[50];
+    L["calendar-range-bg"] = b[100];
     L["status-progress-bg"] = b[100];
     L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
     L["alert-info-bg"] = b[50];
@@ -10521,6 +10545,7 @@ window.Aura = (() => {
     D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
     D["control-checked-fg"] = onFill(D["control-checked-bg"]);
     D["nav-active-edge"] = D["control-checked-bg"];
+    D["calendar-range-bg"] = D["bg-selected"];
     const shadowLight = INK, shadowDark = D["accent-violet"];
     if (o.primary === "brand") {
       L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -10578,6 +10603,7 @@ window.Aura = (() => {
     check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
     check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
     check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+    check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
     check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
     check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
     check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/cjs/index.cjs

@@ -1911,7 +1911,8 @@ var Menu = React9.forwardRef(function Menu2(props, ref) {
         top = r2.top - above - 4;
       } else maxHeight = below2;
     }
-    const left = Math.max(8, Math.min(r2.right - mw, window.innerWidth - mw - 8));
+    const endAligned = r2.right - mw;
+    const left = Math.max(8, Math.min(endAligned >= 8 ? endAligned : r2.left, window.innerWidth - mw - 8));
     setPos(function(p) {
       return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
     });
@@ -2010,12 +2011,15 @@ var Menu = React9.forwardRef(function Menu2(props, ref) {
     });
     return out;
   }
+  const anyLead = items2.some(function(it) {
+    return !it.separator && (!!it.icon || it.type === "radio" || it.checked !== void 0);
+  });
   function renderItem(it, i) {
     if (it.separator) return /* @__PURE__ */ React9.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
     const isRadio = it.type === "radio";
     const isCheck = !isRadio && it.checked !== void 0;
     const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
-    const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
+    const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : anyLead ? /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" }) : null;
     const body = [
       /* @__PURE__ */ React9.createElement(React9.Fragment, { key: "l" }, lead),
       /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
@@ -3426,7 +3430,7 @@ var Calendar = React18.forwardRef(function Calendar2(props, ref) {
         setFocus(addMonths(focusDate, 1));
       }
     }
-  )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
+  )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle, lang: th2 ? "th" : void 0 }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
     return /* @__PURE__ */ React18.createElement("th", { key: i, scope: "col", abbr: n3.long }, /* @__PURE__ */ React18.createElement("span", { "aria-hidden": true }, n3.short));
   }))), /* @__PURE__ */ React18.createElement(
     "tbody",
@@ -6526,6 +6530,7 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     if (next === page) return false;
     if (!quiet) emit(sort, next);
     if (linkPaging) {
+      if (focus) pending.current = { ...focus, page: next, at: Date.now() };
       const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
       if (a) a.click();
       else jumpState[1](next);
@@ -6624,6 +6629,11 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
   React34.useEffect(function() {
     const p = pending.current;
     if (!p || !gridRef.current) return;
+    if (p.at != null && Date.now() - p.at > 1e4) {
+      pending.current = null;
+      return;
+    }
+    if (p.page != null && p.page !== page) return;
     let c = p.c;
     if (p.key) {
       let at = -1;
@@ -10056,6 +10066,19 @@ function describeAccept(accept, t) {
     a = a.trim();
     if (a === "image/*") return t.images;
     if (a === "application/pdf") return "PDF";
+    const known = {
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+      "application/msword": "DOC",
+      "application/vnd.ms-excel": "XLS",
+      "application/vnd.ms-powerpoint": "PPT",
+      "text/plain": "TXT"
+    };
+    if (known[a]) return known[a];
+    const slash = a.indexOf("/");
+    if (slash > 0 && a.slice(slash + 1) !== "*")
+      a = a.slice(slash + 1).replace(/^(?:vnd\.|x-)/, "").replace(/\+xml$/, "");
     return a.replace(/^\./, "").toUpperCase();
   }).filter(function(x, i, arr) {
     return arr.indexOf(x) === i;
@@ -10464,6 +10487,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -10503,6 +10527,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -10560,6 +10585,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/esm/DataTable.js

@@ -487,6 +487,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     if (next === page) return false;
     if (!quiet) emit(sort, next);
     if (linkPaging) {
+      if (focus) pending.current = { ...focus, page: next, at: Date.now() };
       const a = next === page - 1 ? prevLink.current : next === page + 1 ? nextLink.current : null;
       if (a) a.click();
       else jumpState[1](next);
@@ -585,6 +586,11 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   React.useEffect(function() {
     const p = pending.current;
     if (!p || !gridRef.current) return;
+    if (p.at != null && Date.now() - p.at > 1e4) {
+      pending.current = null;
+      return;
+    }
+    if (p.page != null && p.page !== page) return;
     let c = p.c;
     if (p.key) {
       let at = -1;

package/dist/esm/DatePicker.js

@@ -226,7 +226,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
         setFocus(addMonths(focusDate, 1));
       }
     }
-  )), /* @__PURE__ */ React.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, weekdayNames.map(function(n, i) {
+  )), /* @__PURE__ */ React.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle, lang: th ? "th" : void 0 }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, weekdayNames.map(function(n, i) {
     return /* @__PURE__ */ React.createElement("th", { key: i, scope: "col", abbr: n.long }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, n.short));
   }))), /* @__PURE__ */ React.createElement(
     "tbody",

package/dist/esm/FileUpload.js

@@ -26,6 +26,19 @@ function describeAccept(accept, t) {
     a = a.trim();
     if (a === "image/*") return t.images;
     if (a === "application/pdf") return "PDF";
+    const known = {
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+      "application/msword": "DOC",
+      "application/vnd.ms-excel": "XLS",
+      "application/vnd.ms-powerpoint": "PPT",
+      "text/plain": "TXT"
+    };
+    if (known[a]) return known[a];
+    const slash = a.indexOf("/");
+    if (slash > 0 && a.slice(slash + 1) !== "*")
+      a = a.slice(slash + 1).replace(/^(?:vnd\.|x-)/, "").replace(/\+xml$/, "");
     return a.replace(/^\./, "").toUpperCase();
   }).filter(function(x, i, arr) {
     return arr.indexOf(x) === i;

package/dist/esm/Menu.js

@@ -61,7 +61,8 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
         top = r.top - above - 4;
       } else maxHeight = below;
     }
-    const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
+    const endAligned = r.right - mw;
+    const left = Math.max(8, Math.min(endAligned >= 8 ? endAligned : r.left, window.innerWidth - mw - 8));
     setPos(function(p) {
       return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
     });
@@ -160,12 +161,15 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     });
     return out;
   }
+  const anyLead = items.some(function(it) {
+    return !it.separator && (!!it.icon || it.type === "radio" || it.checked !== void 0);
+  });
   function renderItem(it, i) {
     if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
     const isRadio = it.type === "radio";
     const isCheck = !isRadio && it.checked !== void 0;
     const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
-    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" });
+    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : anyLead ? /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" }) : null;
     const body = [
       /* @__PURE__ */ React.createElement(React.Fragment, { key: "l" }, lead),
       /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),

package/dist/esm/theme.js

@@ -131,6 +131,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -170,6 +171,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -227,6 +229,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/server/index.cjs

@@ -780,6 +780,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -819,6 +820,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -876,6 +878,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/server/index.js

@@ -713,6 +713,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -752,6 +753,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -809,6 +811,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/styles.css

@@ -50,18 +50,28 @@ button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[a
 button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
 button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
 button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
-/* 5.30: a disabled filled button (primary, danger, creative) is a quiet grey fill with muted text, not a faded copy of
- * itself — faded ink read as a separate grey button, faded red as pink. Outline and ghost buttons keep the fade. */
-.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)),
-.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
-  opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color: transparent; box-shadow: none;
-}
+/* 5.30: a disabled button is not a faded copy of itself (faded ink read as a separate grey button, faded red as pink).
+ * 5.79: one look for every variant — see below. */
+.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
+  opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color: var(--aura-button-disabled-border); box-shadow: none;
+}
+/* …a variant without a border of its own (primary, danger) draws the same edge inside, so none is edgeless */
+.aura-btn.aura-btn:is(.aura-btn--primary, .aura-btn--danger):is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn.aura-btn:is(.aura-btn--primary, .aura-btn--danger):is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
+  box-shadow: inset 0 0 0 1px var(--aura-button-disabled-border);
+}
+/* 5.79 (visual audit 6): one disabled look for every variant — a faint fill, a faint edge, the tertiary label — so a
+ * disabled primary doesn't read as a To Do pill and a disabled outline button isn't a crisp white one in dark. A ghost
+ * button stays without fill or edge. */
+.aura-btn.aura-btn.aura-btn--ghost:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn.aura-btn.aura-btn--ghost:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { background: transparent; border-color: transparent; box-shadow: none; }
 /* Forced colours drop the fills: filled buttons get a 1px edge (as outline buttons have), and a disabled or gated one
  * (still focusable) shows GrayText and keeps the fade, without changing size. */
 @media (forced-colors: active) {
   .aura-btn:is(.aura-btn--primary, .aura-btn--danger) { border: 1px solid ButtonText; }
-  .aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
-  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); }
+  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); } /* 5.79: one class more, over the ghost rule */
 }
 .aura-btn.is-loading:active { transform: none; }
 
@@ -295,7 +305,7 @@ a.aura-table__sort { text-decoration: none; }
   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);
+  box-shadow: var(--aura-shadow-overlay); /* 5.79 (visual audit 18): lifted as Popover and the list boxes are; its light edge alone was faint */
   font-family: var(--font-sans); font-size: max(13px, .8125rem);
 }
 .aura-menu__item {
@@ -583,7 +593,7 @@ a.aura-icon-btn { text-decoration: none; }
  * Field). */
 .aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]:not(:disabled)),
 .aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"]:not(:disabled) { border-color: var(--aura-border-danger); }
-.aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
+.aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
@@ -593,13 +603,18 @@ a.aura-icon-btn { text-decoration: none; }
 
 .aura-textarea { display: block; padding: 10px var(--aura-space-3); min-height: 96px; line-height: 1.6; resize: vertical; outline: none; }
 .aura-textarea:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
-.aura-field.is-disabled .aura-textarea { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
+.aura-field.is-disabled .aura-textarea { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); }
 
 .aura-select .aura-input__control { padding-right: calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); cursor: pointer; }
 .aura-select__chevron { position: absolute; right: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-select select:invalid, .aura-select select:has(option[value=""]:checked) { color: var(--aura-fg-tertiary); }
 /* 5.3: the field is a button over an invisible <select> (forms, refs, events); the list is AURA's, like Combobox. */
 .aura-select option { color: var(--aura-fg-primary); background: var(--aura-bg-input); }
+/* 5.79 (visual audit 15): a list box (multiple, or size > 1) shows its rows — as tall as they need, no chevron — instead
+ * of being squeezed into a one-line field with its third option cut in half. */
+.aura-select .aura-input__control:is([multiple], [size]:not([size='0'], [size='1'])) { height: auto; padding: var(--aura-space-1) var(--aura-space-2); overflow-y: auto; cursor: default; }
+.aura-select:has(> .aura-input__control:is([multiple], [size]:not([size='0'], [size='1']))) .aura-select__chevron { display: none; }
+.aura-select .aura-input__control:is([multiple], [size]:not([size='0'], [size='1'])) option { padding: var(--aura-space-1) var(--aura-space-2); border-radius: var(--aura-radius-xs); }
 .aura-select--custom { position: relative; }
 .aura-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }
 .aura-select__trigger { display: flex; align-items: center; text-align: start; background: none; border: 0; color: inherit; font: inherit; width: 100%; min-width: 0; }
@@ -659,7 +674,7 @@ a.aura-icon-btn { text-decoration: none; }
 /* 5.19 (Chamber-OS 113): a read-only switch keeps its colours (a locked "on" reads as on at full contrast) and stays
  * focusable; only the pointer says it won't change. The row's icon (a lock) sits at its end, like a field's icon. */
 .aura-switch-row.is-readonly, .aura-switch-row.is-readonly .aura-switch, .aura-switch-row.is-readonly .aura-choice__label { cursor: default; }
-.aura-switch-row__icon { flex: none; margin-inline-start: auto; margin-top: 2px; width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
+.aura-switch-row__icon { flex: none; margin-inline-start: calc(-1 * var(--aura-space-1)); margin-top: 2px; /* 5.79 (visual audit 17): beside the label it belongs to, 8px after it, not at the row's far end */  width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
 
 /* ---------- Alerts & toasts ---------- */
 .aura-alert {
@@ -1051,8 +1066,8 @@ a.aura-tab { text-decoration: none; }
 .aura-combo__option.is-selected { font-weight: 500; }
 .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.aura-combo__desc { font-size: max(12px, .75rem); line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: max(20px, 1.25rem); }
+.aura-combo__desc { font-size: max(12px, .75rem); line-height: max(18px, 1.125rem); color: var(--aura-fg-secondary); } /* 5.79: fixed line heights, so a Thai row and an English row are spaced alike (normal follows each font) */
 /* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
 .aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
 /* 5.16 (Chamber-OS 105): option groups under a heading. */
@@ -1095,9 +1110,9 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
 .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%); }
-.aura-cal__grid td.is-range-end { background: linear-gradient(to left, transparent 50%, var(--aura-bg-selected) 50%); }
+.aura-cal__grid td.is-in-range { background: var(--aura-calendar-range-bg); } /* 5.79 (visual audit 19) */
+.aura-cal__grid td.is-range-start { background: linear-gradient(to right, transparent 50%, var(--aura-calendar-range-bg) 50%); }
+.aura-cal__grid td.is-range-end { background: linear-gradient(to left, transparent 50%, var(--aura-calendar-range-bg) 50%); }
 .aura-cal__grid td.is-range-start.is-range-end { background: none; }
 .aura-cal__years { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aura-space-1); }
 .aura-cal__year {
@@ -1652,7 +1667,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-badge--success { background: var(--aura-alert-success-bg); color: var(--aura-alert-success-fg); }
 .aura-badge--warning { background: var(--aura-alert-warning-bg); color: var(--aura-alert-warning-fg); }
 .aura-badge--danger { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
-.aura-badge.is-outline { background: transparent; border-color: currentColor; }
+.aura-badge.is-outline { background: transparent; border-color: currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent); } /* 5.79 (visual audit 19): a quieter edge, so an outline badge doesn't read as a secondary button */
 .aura-badge--neutral.is-outline { border-color: var(--aura-border-control); }
 .aura-badge.is-solid { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
 .aura-badge--danger.is-solid { background: var(--aura-status-blocked-solid-bg); color: var(--aura-status-blocked-solid-fg); }
@@ -1791,6 +1806,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-combo__chips { display: contents; }
 .aura-combo__chip {
   display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 28px; box-sizing: border-box;
+  flex: none; /* 5.79 (visual audit 16): a chip keeps its label and goes to the next line, not shrunk to "V.." */
   padding: 0 2px 0 var(--aura-space-2); border-radius: var(--aura-radius-full);
   background: var(--aura-bg-selected); color: var(--aura-fg-primary); font-size: max(13px, .8125rem); font-weight: 500;
 }
@@ -2137,6 +2153,11 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar--fill .aura-filterbar__controls > .aura-filterselect .aura-filterselect__chevron { margin-inline-start: auto; }
 /* Compact filters sit closer together than full fields. */
 .aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+/* 5.80: on a phone 6px, so three filters and a Tag keep one 375px row with either font source — the self-hosted
+ * Inter (aura-fonts.local.css) measured 2.3px over at 8px. */
+@media (max-width: 639.98px) {
+  .aura-filterbar__controls:has(> .aura-filterselect) { gap: 6px; }
+}
 /* 5.42 (Chamber-OS 146): collapseBelow — below the breakpoint the controls fold into a "Filters" sheet; the button
  * shares a row with the search, at its end, as tall as the search (the count and actions wrap below). From the
  * breakpoint up the search and the hidden button sit in a display: contents box, so the bar lays out as before. */
@@ -2193,7 +2214,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect__face:focus-visible { outline-style: solid; }
 /* Before hydration: the real <select>, invisible, over the face (16px so iOS doesn't zoom when it opens). */
 .aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: max(16px, 1rem); cursor: pointer; appearance: none; }
-.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
+.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); cursor: not-allowed; }
 .aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
 /* 5.38 (Chamber-OS 140): touchHeight on FilterBar (its search and field-height controls) or on one FilterSelect —
  * 44px below 640px or on a coarse pointer (is-touch), or always. */
@@ -2393,6 +2414,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   :root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
   :root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
 }
+/* 5.79 (5.78 carry-over): where actionsFullWidthBelow reaches wider than actionsBarBelow, the bar isn't pinned between
+ * the two breakpoints and its buttons sit in the same full-width row — every button there is radius-md, not some. */
+@media (min-width: 640px) and (max-width: 767.98px) {
+  .aura-page-header--actions-full-below-md.aura-page-header--actions-bar-below-sm > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
+}
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg.aura-page-header--actions-bar-below-sm > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
+}
+@media (min-width: 768px) and (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg.aura-page-header--actions-bar-below-md > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
+}
+/* 5.79 (visual audit 10): in an AppShell on a desktop the edge strip starts where the content does — after the
+ * sidebar (its rail width when collapsed; the right edge in RTL) — and its contents line up with the content's 32px
+ * padding, instead of running under the sidebar. Outside an AppShell it keeps the screen's full width. */
+@media (min-width: 1024px) and (min-height: 30.00125rem) {
+  .aura-shell:has(> .aura-shell__nav) .aura-actionbar--edge:not(.is-idle) { inset-inline-start: var(--aura-sidenav-width); }
+  .aura-shell:has(> .aura-shell__nav .aura-nav--collapsed) .aura-actionbar--edge:not(.is-idle) { inset-inline-start: var(--aura-sidenav-rail-width); }
+  .aura-shell:not(:has(.aura-shell__content.is-flush)) .aura-actionbar--edge:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-8); } /* not with contentPadding={false} */
+}
 /* 5.78 (visual audit 9): one rule for the bottom strips on a phone, as PageHeader's (5.48) — the status on its own row
  * at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row
  * each), 16px both sides as the page. edgeBelow="md" follows it up to 768px, as PageHeader's md strip. */
@@ -2753,6 +2793,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
 .aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th), .aura-field__addon:lang(th) { line-height: 1.6; }
 .aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: max(13px, .8125rem); line-height: 1.6; }
+/* 5.79 (visual audit, Thai): the calendar's weekday row in Thai (อา จ อ …) at 13px — 12px was the hardest text on the
+ * page to read; the grid carries lang="th" with a Thai locale. Two-line Thai nav labels get room between lines. */
+.aura-cal__grid:lang(th) th { font-size: max(13px, .8125rem); }
+.aura-nav__label:lang(th) { line-height: 1.5; }
 .aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: max(12px, .75rem); line-height: max(18px, 1.125rem); }
 .aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }
 

package/dist/styles.layer.css

@@ -52,18 +52,28 @@ button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[a
 button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
 button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
 button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
-/* 5.30: a disabled filled button (primary, danger, creative) is a quiet grey fill with muted text, not a faded copy of
- * itself — faded ink read as a separate grey button, faded red as pink. Outline and ghost buttons keep the fade. */
-.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)),
-.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
-  opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color: transparent; box-shadow: none;
-}
+/* 5.30: a disabled button is not a faded copy of itself (faded ink read as a separate grey button, faded red as pink).
+ * 5.79: one look for every variant — see below. */
+.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
+  opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color: var(--aura-button-disabled-border); box-shadow: none;
+}
+/* …a variant without a border of its own (primary, danger) draws the same edge inside, so none is edgeless */
+.aura-btn.aura-btn:is(.aura-btn--primary, .aura-btn--danger):is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn.aura-btn:is(.aura-btn--primary, .aura-btn--danger):is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
+  box-shadow: inset 0 0 0 1px var(--aura-button-disabled-border);
+}
+/* 5.79 (visual audit 6): one disabled look for every variant — a faint fill, a faint edge, the tertiary label — so a
+ * disabled primary doesn't read as a To Do pill and a disabled outline button isn't a crisp white one in dark. A ghost
+ * button stays without fill or edge. */
+.aura-btn.aura-btn.aura-btn--ghost:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn.aura-btn.aura-btn--ghost:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { background: transparent; border-color: transparent; box-shadow: none; }
 /* Forced colours drop the fills: filled buttons get a 1px edge (as outline buttons have), and a disabled or gated one
  * (still focusable) shows GrayText and keeps the fade, without changing size. */
 @media (forced-colors: active) {
   .aura-btn:is(.aura-btn--primary, .aura-btn--danger) { border: 1px solid ButtonText; }
-  .aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
-  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); }
+  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); } /* 5.79: one class more, over the ghost rule */
 }
 .aura-btn.is-loading:active { transform: none; }
 
@@ -297,7 +307,7 @@ a.aura-table__sort { text-decoration: none; }
   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);
+  box-shadow: var(--aura-shadow-overlay); /* 5.79 (visual audit 18): lifted as Popover and the list boxes are; its light edge alone was faint */
   font-family: var(--font-sans); font-size: max(13px, .8125rem);
 }
 .aura-menu__item {
@@ -585,7 +595,7 @@ a.aura-icon-btn { text-decoration: none; }
  * Field). */
 .aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]:not(:disabled)),
 .aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"]:not(:disabled) { border-color: var(--aura-border-danger); }
-.aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
+.aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
@@ -595,13 +605,18 @@ a.aura-icon-btn { text-decoration: none; }
 
 .aura-textarea { display: block; padding: 10px var(--aura-space-3); min-height: 96px; line-height: 1.6; resize: vertical; outline: none; }
 .aura-textarea:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
-.aura-field.is-disabled .aura-textarea { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
+.aura-field.is-disabled .aura-textarea { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); }
 
 .aura-select .aura-input__control { padding-right: calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); cursor: pointer; }
 .aura-select__chevron { position: absolute; right: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-select select:invalid, .aura-select select:has(option[value=""]:checked) { color: var(--aura-fg-tertiary); }
 /* 5.3: the field is a button over an invisible <select> (forms, refs, events); the list is AURA's, like Combobox. */
 .aura-select option { color: var(--aura-fg-primary); background: var(--aura-bg-input); }
+/* 5.79 (visual audit 15): a list box (multiple, or size > 1) shows its rows — as tall as they need, no chevron — instead
+ * of being squeezed into a one-line field with its third option cut in half. */
+.aura-select .aura-input__control:is([multiple], [size]:not([size='0'], [size='1'])) { height: auto; padding: var(--aura-space-1) var(--aura-space-2); overflow-y: auto; cursor: default; }
+.aura-select:has(> .aura-input__control:is([multiple], [size]:not([size='0'], [size='1']))) .aura-select__chevron { display: none; }
+.aura-select .aura-input__control:is([multiple], [size]:not([size='0'], [size='1'])) option { padding: var(--aura-space-1) var(--aura-space-2); border-radius: var(--aura-radius-xs); }
 .aura-select--custom { position: relative; }
 .aura-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }
 .aura-select__trigger { display: flex; align-items: center; text-align: start; background: none; border: 0; color: inherit; font: inherit; width: 100%; min-width: 0; }
@@ -661,7 +676,7 @@ a.aura-icon-btn { text-decoration: none; }
 /* 5.19 (Chamber-OS 113): a read-only switch keeps its colours (a locked "on" reads as on at full contrast) and stays
  * focusable; only the pointer says it won't change. The row's icon (a lock) sits at its end, like a field's icon. */
 .aura-switch-row.is-readonly, .aura-switch-row.is-readonly .aura-switch, .aura-switch-row.is-readonly .aura-choice__label { cursor: default; }
-.aura-switch-row__icon { flex: none; margin-inline-start: auto; margin-top: 2px; width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
+.aura-switch-row__icon { flex: none; margin-inline-start: calc(-1 * var(--aura-space-1)); margin-top: 2px; /* 5.79 (visual audit 17): beside the label it belongs to, 8px after it, not at the row's far end */  width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
 
 /* ---------- Alerts & toasts ---------- */
 .aura-alert {
@@ -1053,8 +1068,8 @@ a.aura-tab { text-decoration: none; }
 .aura-combo__option.is-selected { font-weight: 500; }
 .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.aura-combo__desc { font-size: max(12px, .75rem); line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: max(20px, 1.25rem); }
+.aura-combo__desc { font-size: max(12px, .75rem); line-height: max(18px, 1.125rem); color: var(--aura-fg-secondary); } /* 5.79: fixed line heights, so a Thai row and an English row are spaced alike (normal follows each font) */
 /* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
 .aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
 /* 5.16 (Chamber-OS 105): option groups under a heading. */
@@ -1097,9 +1112,9 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
 .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%); }
-.aura-cal__grid td.is-range-end { background: linear-gradient(to left, transparent 50%, var(--aura-bg-selected) 50%); }
+.aura-cal__grid td.is-in-range { background: var(--aura-calendar-range-bg); } /* 5.79 (visual audit 19) */
+.aura-cal__grid td.is-range-start { background: linear-gradient(to right, transparent 50%, var(--aura-calendar-range-bg) 50%); }
+.aura-cal__grid td.is-range-end { background: linear-gradient(to left, transparent 50%, var(--aura-calendar-range-bg) 50%); }
 .aura-cal__grid td.is-range-start.is-range-end { background: none; }
 .aura-cal__years { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aura-space-1); }
 .aura-cal__year {
@@ -1654,7 +1669,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-badge--success { background: var(--aura-alert-success-bg); color: var(--aura-alert-success-fg); }
 .aura-badge--warning { background: var(--aura-alert-warning-bg); color: var(--aura-alert-warning-fg); }
 .aura-badge--danger { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
-.aura-badge.is-outline { background: transparent; border-color: currentColor; }
+.aura-badge.is-outline { background: transparent; border-color: currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent); } /* 5.79 (visual audit 19): a quieter edge, so an outline badge doesn't read as a secondary button */
 .aura-badge--neutral.is-outline { border-color: var(--aura-border-control); }
 .aura-badge.is-solid { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
 .aura-badge--danger.is-solid { background: var(--aura-status-blocked-solid-bg); color: var(--aura-status-blocked-solid-fg); }
@@ -1793,6 +1808,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-combo__chips { display: contents; }
 .aura-combo__chip {
   display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 28px; box-sizing: border-box;
+  flex: none; /* 5.79 (visual audit 16): a chip keeps its label and goes to the next line, not shrunk to "V.." */
   padding: 0 2px 0 var(--aura-space-2); border-radius: var(--aura-radius-full);
   background: var(--aura-bg-selected); color: var(--aura-fg-primary); font-size: max(13px, .8125rem); font-weight: 500;
 }
@@ -2139,6 +2155,11 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar--fill .aura-filterbar__controls > .aura-filterselect .aura-filterselect__chevron { margin-inline-start: auto; }
 /* Compact filters sit closer together than full fields. */
 .aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+/* 5.80: on a phone 6px, so three filters and a Tag keep one 375px row with either font source — the self-hosted
+ * Inter (aura-fonts.local.css) measured 2.3px over at 8px. */
+@media (max-width: 639.98px) {
+  .aura-filterbar__controls:has(> .aura-filterselect) { gap: 6px; }
+}
 /* 5.42 (Chamber-OS 146): collapseBelow — below the breakpoint the controls fold into a "Filters" sheet; the button
  * shares a row with the search, at its end, as tall as the search (the count and actions wrap below). From the
  * breakpoint up the search and the hidden button sit in a display: contents box, so the bar lays out as before. */
@@ -2195,7 +2216,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect__face:focus-visible { outline-style: solid; }
 /* Before hydration: the real <select>, invisible, over the face (16px so iOS doesn't zoom when it opens). */
 .aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: max(16px, 1rem); cursor: pointer; appearance: none; }
-.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
+.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); cursor: not-allowed; }
 .aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
 /* 5.38 (Chamber-OS 140): touchHeight on FilterBar (its search and field-height controls) or on one FilterSelect —
  * 44px below 640px or on a coarse pointer (is-touch), or always. */
@@ -2395,6 +2416,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   :root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
   :root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
 }
+/* 5.79 (5.78 carry-over): where actionsFullWidthBelow reaches wider than actionsBarBelow, the bar isn't pinned between
+ * the two breakpoints and its buttons sit in the same full-width row — every button there is radius-md, not some. */
+@media (min-width: 640px) and (max-width: 767.98px) {
+  .aura-page-header--actions-full-below-md.aura-page-header--actions-bar-below-sm > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
+}
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg.aura-page-header--actions-bar-below-sm > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
+}
+@media (min-width: 768px) and (max-width: 1023.98px) {
+  .aura-page-header--actions-full-below-lg.aura-page-header--actions-bar-below-md > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
+}
+/* 5.79 (visual audit 10): in an AppShell on a desktop the edge strip starts where the content does — after the
+ * sidebar (its rail width when collapsed; the right edge in RTL) — and its contents line up with the content's 32px
+ * padding, instead of running under the sidebar. Outside an AppShell it keeps the screen's full width. */
+@media (min-width: 1024px) and (min-height: 30.00125rem) {
+  .aura-shell:has(> .aura-shell__nav) .aura-actionbar--edge:not(.is-idle) { inset-inline-start: var(--aura-sidenav-width); }
+  .aura-shell:has(> .aura-shell__nav .aura-nav--collapsed) .aura-actionbar--edge:not(.is-idle) { inset-inline-start: var(--aura-sidenav-rail-width); }
+  .aura-shell:not(:has(.aura-shell__content.is-flush)) .aura-actionbar--edge:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-8); } /* not with contentPadding={false} */
+}
 /* 5.78 (visual audit 9): one rule for the bottom strips on a phone, as PageHeader's (5.48) — the status on its own row
  * at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row
  * each), 16px both sides as the page. edgeBelow="md" follows it up to 768px, as PageHeader's md strip. */
@@ -2755,6 +2795,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
 .aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th), .aura-field__addon:lang(th) { line-height: 1.6; }
 .aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: max(13px, .8125rem); line-height: 1.6; }
+/* 5.79 (visual audit, Thai): the calendar's weekday row in Thai (อา จ อ …) at 13px — 12px was the hardest text on the
+ * page to read; the grid carries lang="th" with a Thai locale. Two-line Thai nav labels get room between lines. */
+.aura-cal__grid:lang(th) th { font-size: max(13px, .8125rem); }
+.aura-nav__label:lang(th) { line-height: 1.5; }
 .aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: max(12px, .75rem); line-height: max(18px, 1.125rem); }
 .aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.78.0",
+  "version": "5.80.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",