@jirawatpyk/aura-react 5.79.0 → 5.81.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,10 @@ 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.81 — DxT Monitor 24 (the tab bar hides after a tap)
+
+- **BottomNav `hideOnScroll` and AppShell `headerHideOnScroll` after a tap**: with client-side navigation the bar stays mounted, and on Chrome / Android a tap leaves focus on the tapped tab — the bar then never hid on the next page. Focus in the bar now holds it only when it came from the keyboard: focus that enters right after a pointer press doesn't count, and focus moved with the keyboard does (Tab into or within the bar brings it back and keeps it; keys that only scroll the page, such as Space or PageDown, don't). A text field in the bar holds it however it was focused. No new prop; drop any wrapper that blurs the tab on click.
+
 ## 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.)
@@ -498,7 +564,7 @@ What Chamber-OS's own page header did that PageHeader didn't, so it can be rebui
 
 - **Breadcrumb touch targets** (request 11): on a touch screen (`pointer: coarse`) every crumb link or button (and "…") gets a hit area 44px tall and as wide as its text plus 24px; the text doesn't move. It reaches 12px into the gutter on each side, so short neighbours never share a spot, and only 4px below the text, so it stops short of a PageHeader title right underneath — the rest of the height is above, so keep about 20px clear above a breadcrumb (AppShell's content padding already is). When the crumbs wrap, the rows sit 24px apart on touch screens so one row never covers the next. The current page (not a link) gets none; a link component must render its `<a>` directly in the crumb's `li`. Apps that added their own `.aura-crumbs a::after` rule should drop it.
 - **StatusTile `status="unknown"`** (request 12): for a thing with no data yet (a site before its first check) — a dashed circle (circle-dot-dashed) in `aura-fg-tertiary` on the plain surface and border, status word "No data" (th: ยังไม่มีข้อมูล, sv: Ingen data), value in the text colour. An unrecognised `status` now shows as unknown rather than OK, with a dev warning.
-- **AppShell `headerHideOnScroll`** (request 13): below 1024px the top bar slides up out of view while the page scrolls down (after it has moved past the bar's height and kept going 8px) and comes back after 8px up, near the top, and whenever focus enters it. `--aura-shell-bar-height` is 0 while it is away, so a sticky table header pinned under the bar moves up with it. No slide with reduced motion. The page must scroll the window (AppShell's does).
+- **AppShell `headerHideOnScroll`** (request 13): below 1024px the top bar slides up out of view while the page scrolls down (after it has moved past the bar's height and kept going 8px) and comes back after 8px up, near the top, and whenever focus enters it (5.81: a tap's focus doesn't keep it there; keyboard focus does). `--aura-shell-bar-height` is 0 while it is away, so a sticky table header pinned under the bar moves up with it. No slide with reduced motion. The page must scroll the window (AppShell's does).
 - **BottomNav `hideOnScroll`** (request 14): the same for the tab bar, sliding down. Its spacer stays (nothing shifts) and `--aura-bottomnav-offset` drops while it is away, so viewport ActionBars and toasts follow it down. **ActionBar `hidesBottomNav`**: while that bar is on the page the BottomNav and its spacer are gone and the bar sits on the bottom edge — for a page whose own actions (Acknowledge, Visit site) replace the tabs. Any element can do the same with `data-aura-hide-bottomnav`.
 
 ## 5.34 — StatusTile, TileGrid, Sparkline (DxT Monitor Overview S06)

package/dist/aura.bundle.js

@@ -6548,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);
@@ -6646,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;
@@ -8745,8 +8751,10 @@ window.Aura = (() => {
   // src/scrollHide.ts
   var React48 = __toESM(require_react(), 1);
   var STEP = 8;
+  var TEXT_ENTRY = 'textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"]';
   function useHideOnScroll(enabled, el, media, from) {
     const st = React48.useState(false), hidden = st[0], setHidden = st[1];
+    const tap = React48.useRef({ pressedAt: -1e9, focus: false });
     React48.useEffect(
       function() {
         if (!enabled || typeof window === "undefined") {
@@ -8756,6 +8764,11 @@ window.Aura = (() => {
         const mq = window.matchMedia ? window.matchMedia(media) : null;
         let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
         let restore = null;
+        function holdsBar(node2) {
+          const a = document.activeElement;
+          if (!node2 || !a || !node2.contains(a)) return false;
+          return !tap.current.focus || a.matches(TEXT_ENTRY);
+        }
         function update() {
           if (restore) {
             const r2 = restore;
@@ -8770,7 +8783,7 @@ window.Aura = (() => {
           const y = window.scrollY, dy = y - last;
           last = y;
           const node2 = el.current;
-          if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+          if (mq && !mq.matches || y <= from || holdsBar(node2)) {
             run = 0;
             setHidden(false);
             return;
@@ -8790,7 +8803,12 @@ window.Aura = (() => {
         function disarm() {
           restore = null;
         }
+        function onPress(e) {
+          restore = null;
+          tap.current.pressedAt = e.timeStamp;
+        }
         function onKey(e) {
+          tap.current.pressedAt = -1e9;
           if (e.key !== "Tab" && e.code !== "Tab") {
             if (e.key !== "Shift") restore = null;
             return;
@@ -8800,7 +8818,8 @@ window.Aura = (() => {
             tabbing = false;
           });
         }
-        function reveal() {
+        function reveal(e) {
+          tap.current.focus = e.timeStamp - tap.current.pressedAt < 1e3;
           const n3 = el.current;
           if (n3 && n3.classList.contains("is-away")) {
             n3.classList.remove("is-away");
@@ -8816,7 +8835,7 @@ window.Aura = (() => {
         document.addEventListener("keydown", onKey, true);
         window.addEventListener("wheel", disarm, { passive: true, capture: true });
         window.addEventListener("touchstart", disarm, { passive: true, capture: true });
-        window.addEventListener("pointerdown", disarm, true);
+        window.addEventListener("pointerdown", onPress, true);
         const node = el.current;
         if (node) node.addEventListener("focusin", reveal);
         if (mq && mq.addEventListener) mq.addEventListener("change", update);
@@ -8826,7 +8845,7 @@ window.Aura = (() => {
           document.removeEventListener("keydown", onKey, true);
           window.removeEventListener("wheel", disarm, true);
           window.removeEventListener("touchstart", disarm, true);
-          window.removeEventListener("pointerdown", disarm, true);
+          window.removeEventListener("pointerdown", onPress, true);
           if (node) node.removeEventListener("focusin", reveal);
           if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
         };

package/dist/cjs/index.cjs

@@ -6530,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);
@@ -6628,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;
@@ -8727,8 +8733,10 @@ var React49 = __toESM(require("react"), 1);
 // src/scrollHide.ts
 var React48 = __toESM(require("react"), 1);
 var STEP = 8;
+var TEXT_ENTRY = 'textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"]';
 function useHideOnScroll(enabled, el, media, from) {
   const st = React48.useState(false), hidden = st[0], setHidden = st[1];
+  const tap = React48.useRef({ pressedAt: -1e9, focus: false });
   React48.useEffect(
     function() {
       if (!enabled || typeof window === "undefined") {
@@ -8738,6 +8746,11 @@ function useHideOnScroll(enabled, el, media, from) {
       const mq = window.matchMedia ? window.matchMedia(media) : null;
       let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
       let restore = null;
+      function holdsBar(node2) {
+        const a = document.activeElement;
+        if (!node2 || !a || !node2.contains(a)) return false;
+        return !tap.current.focus || a.matches(TEXT_ENTRY);
+      }
       function update() {
         if (restore) {
           const r2 = restore;
@@ -8752,7 +8765,7 @@ function useHideOnScroll(enabled, el, media, from) {
         const y = window.scrollY, dy = y - last;
         last = y;
         const node2 = el.current;
-        if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+        if (mq && !mq.matches || y <= from || holdsBar(node2)) {
           run = 0;
           setHidden(false);
           return;
@@ -8772,7 +8785,12 @@ function useHideOnScroll(enabled, el, media, from) {
       function disarm() {
         restore = null;
       }
+      function onPress(e) {
+        restore = null;
+        tap.current.pressedAt = e.timeStamp;
+      }
       function onKey(e) {
+        tap.current.pressedAt = -1e9;
         if (e.key !== "Tab" && e.code !== "Tab") {
           if (e.key !== "Shift") restore = null;
           return;
@@ -8782,7 +8800,8 @@ function useHideOnScroll(enabled, el, media, from) {
           tabbing = false;
         });
       }
-      function reveal() {
+      function reveal(e) {
+        tap.current.focus = e.timeStamp - tap.current.pressedAt < 1e3;
         const n3 = el.current;
         if (n3 && n3.classList.contains("is-away")) {
           n3.classList.remove("is-away");
@@ -8798,7 +8817,7 @@ function useHideOnScroll(enabled, el, media, from) {
       document.addEventListener("keydown", onKey, true);
       window.addEventListener("wheel", disarm, { passive: true, capture: true });
       window.addEventListener("touchstart", disarm, { passive: true, capture: true });
-      window.addEventListener("pointerdown", disarm, true);
+      window.addEventListener("pointerdown", onPress, true);
       const node = el.current;
       if (node) node.addEventListener("focusin", reveal);
       if (mq && mq.addEventListener) mq.addEventListener("change", update);
@@ -8808,7 +8827,7 @@ function useHideOnScroll(enabled, el, media, from) {
         document.removeEventListener("keydown", onKey, true);
         window.removeEventListener("wheel", disarm, true);
         window.removeEventListener("touchstart", disarm, true);
-        window.removeEventListener("pointerdown", disarm, true);
+        window.removeEventListener("pointerdown", onPress, true);
         if (node) node.removeEventListener("focusin", reveal);
         if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
       };

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/scrollHide.js

@@ -1,8 +1,10 @@
 'use client';
 import * as React from "react";
 const STEP = 8;
+const TEXT_ENTRY = 'textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"]';
 function useHideOnScroll(enabled, el, media, from) {
   const st = React.useState(false), hidden = st[0], setHidden = st[1];
+  const tap = React.useRef({ pressedAt: -1e9, focus: false });
   React.useEffect(
     function() {
       if (!enabled || typeof window === "undefined") {
@@ -12,6 +14,11 @@ function useHideOnScroll(enabled, el, media, from) {
       const mq = window.matchMedia ? window.matchMedia(media) : null;
       let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
       let restore = null;
+      function holdsBar(node2) {
+        const a = document.activeElement;
+        if (!node2 || !a || !node2.contains(a)) return false;
+        return !tap.current.focus || a.matches(TEXT_ENTRY);
+      }
       function update() {
         if (restore) {
           const r = restore;
@@ -26,7 +33,7 @@ function useHideOnScroll(enabled, el, media, from) {
         const y = window.scrollY, dy = y - last;
         last = y;
         const node2 = el.current;
-        if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+        if (mq && !mq.matches || y <= from || holdsBar(node2)) {
           run = 0;
           setHidden(false);
           return;
@@ -46,7 +53,12 @@ function useHideOnScroll(enabled, el, media, from) {
       function disarm() {
         restore = null;
       }
+      function onPress(e) {
+        restore = null;
+        tap.current.pressedAt = e.timeStamp;
+      }
       function onKey(e) {
+        tap.current.pressedAt = -1e9;
         if (e.key !== "Tab" && e.code !== "Tab") {
           if (e.key !== "Shift") restore = null;
           return;
@@ -56,7 +68,8 @@ function useHideOnScroll(enabled, el, media, from) {
           tabbing = false;
         });
       }
-      function reveal() {
+      function reveal(e) {
+        tap.current.focus = e.timeStamp - tap.current.pressedAt < 1e3;
         const n = el.current;
         if (n && n.classList.contains("is-away")) {
           n.classList.remove("is-away");
@@ -72,7 +85,7 @@ function useHideOnScroll(enabled, el, media, from) {
       document.addEventListener("keydown", onKey, true);
       window.addEventListener("wheel", disarm, { passive: true, capture: true });
       window.addEventListener("touchstart", disarm, { passive: true, capture: true });
-      window.addEventListener("pointerdown", disarm, true);
+      window.addEventListener("pointerdown", onPress, true);
       const node = el.current;
       if (node) node.addEventListener("focusin", reveal);
       if (mq && mq.addEventListener) mq.addEventListener("change", update);
@@ -82,7 +95,7 @@ function useHideOnScroll(enabled, el, media, from) {
         document.removeEventListener("keydown", onKey, true);
         window.removeEventListener("wheel", disarm, true);
         window.removeEventListener("touchstart", disarm, true);
-        window.removeEventListener("pointerdown", disarm, true);
+        window.removeEventListener("pointerdown", onPress, true);
         if (node) node.removeEventListener("focusin", reveal);
         if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
       };

package/dist/styles.css

@@ -2153,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. */

package/dist/styles.layer.css

@@ -2155,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. */

package/package.json

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