@jirawatpyk/aura-react 5.80.0 → 5.82.0

package/README.md

@@ -248,6 +248,14 @@ 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.82 — DxT Monitor 25 (Badge xs)
+
+- **Badge `size="xs"`**: 16px high (a larger default font grows it), weight 500, 6px inset — a mark under a cell's main value that keeps a `rowHeight="density"` row at 48px (a 12px line with line-height 12px, 4px gap, the badge; a 12px text at its normal line-height is about 18px and the row grows). Thai text stays 11px at this size — the one exception to the 5.30 rule that Thai labels are at least 12px, so stacked tone marks stay off the 16px outline. Every tone and variant; no icon at this size (a dev warning says so). Also from `@jirawatpyk/aura-react/server`. `<Badge size="xs" variant="outline">Confirm</Badge>`.
+
+## 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.)
@@ -560,7 +568,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

@@ -923,7 +923,10 @@ window.Aura = (() => {
     );
   }
   function badgeElement(props, ref) {
-    const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+    const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+    const xs = props.size === "xs";
+    if (xs && props.icon)
+      devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
     return /* @__PURE__ */ React4.createElement(
       "span",
       {
@@ -934,10 +937,11 @@ window.Aura = (() => {
           "aura-badge--" + tone(props.tone),
           props.variant === "solid" && "is-solid",
           props.variant === "outline" && "is-outline",
+          xs && "aura-badge--xs",
           props.className
         )
       },
-      props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
+      props.icon && !xs ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
       props.children
     );
   }
@@ -8751,8 +8755,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") {
@@ -8762,6 +8768,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;
@@ -8776,7 +8787,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;
@@ -8796,7 +8807,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;
@@ -8806,7 +8822,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");
@@ -8822,7 +8839,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);
@@ -8832,7 +8849,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

@@ -905,7 +905,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React4.createElement(
     "span",
     {
@@ -916,10 +919,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + tone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }
@@ -8733,8 +8737,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") {
@@ -8744,6 +8750,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;
@@ -8758,7 +8769,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;
@@ -8778,7 +8789,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;
@@ -8788,7 +8804,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");
@@ -8804,7 +8821,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);
@@ -8814,7 +8831,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/display.js

@@ -137,7 +137,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React.createElement(
     "span",
     {
@@ -148,10 +151,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + badgeTone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }

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/index.d.cts

@@ -1719,6 +1719,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;

package/dist/index.d.ts

@@ -1719,6 +1719,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;

package/dist/server/index.cjs

@@ -1308,7 +1308,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
@@ -1319,10 +1322,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + tone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }

package/dist/server/index.d.cts

@@ -222,6 +222,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;

package/dist/server/index.d.ts

@@ -222,6 +222,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;

package/dist/server/index.js

@@ -1241,7 +1241,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
@@ -1252,10 +1255,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + tone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }

package/dist/styles.css

@@ -1671,6 +1671,12 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .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); }
+/* 5.82 (DxT Monitor 25): xs — a mark under a cell's value in a density row (48px: a 12px line, 4px, this). 16px at the
+ * default font (min-, so a larger default font grows it), weight 500, 6px inset. Same tones and variants. */
+.aura-badge--xs { min-height: 16px; padding: 0 6px; font-weight: 500; }
+/* Thai keeps 11px at xs — the one exception to the 5.30 Thai 12px floor: at 12px with line-height 1 the stacked tone
+ * marks (ซ้ำ) touch the outline; 11px keeps them off the border. */
+.aura-badge.aura-badge--xs:lang(th) { font-size: max(11px, .6875rem); }
 
 /* ---------- Tag ---------- */
 .aura-tag {

package/dist/styles.layer.css

@@ -1673,6 +1673,12 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .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); }
+/* 5.82 (DxT Monitor 25): xs — a mark under a cell's value in a density row (48px: a 12px line, 4px, this). 16px at the
+ * default font (min-, so a larger default font grows it), weight 500, 6px inset. Same tones and variants. */
+.aura-badge--xs { min-height: 16px; padding: 0 6px; font-weight: 500; }
+/* Thai keeps 11px at xs — the one exception to the 5.30 Thai 12px floor: at 12px with line-height 1 the stacked tone
+ * marks (ซ้ำ) touch the outline; 11px keeps them off the border. */
+.aura-badge.aura-badge--xs:lang(th) { font-size: max(11px, .6875rem); }
 
 /* ---------- Tag ---------- */
 .aura-tag {

package/package.json

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