@jirawatpyk/aura-react 5.81.0 → 5.83.0

package/README.md

@@ -248,6 +248,15 @@ 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.83 — Chamber-OS 195–196 (Combobox announcements, Alert dismissLabel)
+
+- **Combobox status region** (#195): one `role="status"` region is part of the field for its whole life (beside the input, so inside a Dialog too, where the portaled list sits outside the modal) and only its text changes. Closed: empty. Open: the loading text, then the empty text or — with `onSearch`, once a search has come back (`loading` back to `false` after the person typed) — the result count ("12 results", the `results` string in EN, TH, SV). The count needs a managed `loading` prop. An `onSearch` field says nothing before the person types (an empty server list doesn't say "No matches" on open). Without `onSearch`, "no matches" and "keep typing" are the same words as before, now announced reliably. A region inserted already holding text is often not announced (NVDA, VoiceOver), which is why the old line was mostly silent. The visible note is unchanged and hidden from screen readers, which hear the region. A test that finds the note by its words (`getByText('No matches')`) now matches the region too: scope it to `.aura-combo__note`, or use `getByRole('status')`.
+- **Alert `dismissLabel`** (#196): the close button's accessible name, for a page with several notices or a notice about a named thing — `<Alert onDismiss={…} dismissLabel="Dismiss starter warning for Monthly Newsletter">`. Default: the `dismiss` string.
+
+## 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.

package/dist/aura.bundle.js

@@ -819,6 +819,7 @@ window.Aura = (() => {
       "children",
       "action",
       "onDismiss",
+      "dismissLabel",
       "className",
       "role",
       "icon"
@@ -923,7 +924,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 +938,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
     );
   }
@@ -4354,6 +4359,9 @@ window.Aura = (() => {
         [activeIdx, open]
       );
       const live = props.loading ? [] : shown;
+      const listShown = open && mounted && !!posState[0];
+      const searching = !!props.onSearch;
+      const statusText = !listShown ? "" : props.loading ? props.loadingText || t.searching : searching && query == null ? "" : !live.length ? props.emptyText || t.noMatches : more ? t.keepTyping(options.length) : searching && props.loading === false ? t.results(live.length) : "";
       function openList() {
         if (!open && !props.disabled && !props.readOnly) {
           setOpen(true);
@@ -4527,7 +4535,7 @@ window.Aura = (() => {
               })));
             })
           ) : null,
-          props.loading || !live.length || more ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React23.createElement(Icon, { name: /* @__PURE__ */ React23.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, t.keepTyping(options.length))) : null
+          props.loading || !live.length || more ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__list", "aria-hidden": "true" }, props.loading ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React23.createElement(Icon, { name: /* @__PURE__ */ React23.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, t.keepTyping(options.length))) : null
         ),
         document.body
       ) : null;
@@ -4653,6 +4661,7 @@ window.Aura = (() => {
           },
           /* @__PURE__ */ React23.createElement(Icon, { name: /* @__PURE__ */ React23.createElement(IconChevronDown, null) })
         )),
+        /* @__PURE__ */ React23.createElement("div", { role: "status", className: "aura-sr-only aura-combo__status" }, statusText),
         list
       );
     }
@@ -4666,7 +4675,15 @@ window.Aura = (() => {
     return alertElement(
       props,
       ref,
-      props.onDismiss ? /* @__PURE__ */ React24.createElement(IconButton, { icon: /* @__PURE__ */ React24.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null,
+      props.onDismiss ? /* @__PURE__ */ React24.createElement(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ React24.createElement(IconX, null),
+          label: props.dismissLabel || t.dismiss,
+          className: "aura-alert__close",
+          onClick: props.onDismiss
+        }
+      ) : null,
       autoId
     );
   });

package/dist/cjs/index.cjs

@@ -801,6 +801,7 @@ function alertElement(props, ref, close, autoId) {
     "children",
     "action",
     "onDismiss",
+    "dismissLabel",
     "className",
     "role",
     "icon"
@@ -905,7 +906,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 +920,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
   );
 }
@@ -4336,6 +4341,9 @@ var Combobox = React23.forwardRef(
       [activeIdx, open]
     );
     const live = props.loading ? [] : shown;
+    const listShown = open && mounted && !!posState[0];
+    const searching = !!props.onSearch;
+    const statusText = !listShown ? "" : props.loading ? props.loadingText || t.searching : searching && query == null ? "" : !live.length ? props.emptyText || t.noMatches : more ? t.keepTyping(options.length) : searching && props.loading === false ? t.results(live.length) : "";
     function openList() {
       if (!open && !props.disabled && !props.readOnly) {
         setOpen(true);
@@ -4509,7 +4517,7 @@ var Combobox = React23.forwardRef(
             })));
           })
         ) : null,
-        props.loading || !live.length || more ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React23.createElement(Icon, { name: /* @__PURE__ */ React23.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, t.keepTyping(options.length))) : null
+        props.loading || !live.length || more ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__list", "aria-hidden": "true" }, props.loading ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React23.createElement(Icon, { name: /* @__PURE__ */ React23.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React23.createElement("div", { className: "aura-combo__note" }, t.keepTyping(options.length))) : null
       ),
       document.body
     ) : null;
@@ -4635,6 +4643,7 @@ var Combobox = React23.forwardRef(
         },
         /* @__PURE__ */ React23.createElement(Icon, { name: /* @__PURE__ */ React23.createElement(IconChevronDown, null) })
       )),
+      /* @__PURE__ */ React23.createElement("div", { role: "status", className: "aura-sr-only aura-combo__status" }, statusText),
       list
     );
   }
@@ -4648,7 +4657,15 @@ var Alert = React24.forwardRef(function Alert2(props, ref) {
   return alertElement(
     props,
     ref,
-    props.onDismiss ? /* @__PURE__ */ React24.createElement(IconButton, { icon: /* @__PURE__ */ React24.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null,
+    props.onDismiss ? /* @__PURE__ */ React24.createElement(
+      IconButton,
+      {
+        icon: /* @__PURE__ */ React24.createElement(IconX, null),
+        label: props.dismissLabel || t.dismiss,
+        className: "aura-alert__close",
+        onClick: props.onDismiss
+      }
+    ) : null,
     autoId
   );
 });

package/dist/esm/Alert.js

@@ -12,7 +12,15 @@ const Alert = React.forwardRef(function Alert2(props, ref) {
   return alertElement(
     props,
     ref,
-    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: /* @__PURE__ */ React.createElement(IconX, null), label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null,
+    props.onDismiss ? /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: /* @__PURE__ */ React.createElement(IconX, null),
+        label: props.dismissLabel || t.dismiss,
+        className: "aura-alert__close",
+        onClick: props.onDismiss
+      }
+    ) : null,
     autoId
   );
 });

package/dist/esm/Combobox.js

@@ -138,6 +138,9 @@ const Combobox = React.forwardRef(
       [activeIdx, open]
     );
     const live = props.loading ? [] : shown;
+    const listShown = open && mounted && !!posState[0];
+    const searching = !!props.onSearch;
+    const statusText = !listShown ? "" : props.loading ? props.loadingText || t.searching : searching && query == null ? "" : !live.length ? props.emptyText || t.noMatches : more ? t.keepTyping(options.length) : searching && props.loading === false ? t.results(live.length) : "";
     function openList() {
       if (!open && !props.disabled && !props.readOnly) {
         setOpen(true);
@@ -311,7 +314,7 @@ const Combobox = React.forwardRef(
             })));
           })
         ) : null,
-        props.loading || !live.length || more ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, t.keepTyping(options.length))) : null
+        props.loading || !live.length || more ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__list", "aria-hidden": "true" }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement("div", { className: "aura-combo__note" }, t.keepTyping(options.length))) : null
       ),
       document.body
     ) : null;
@@ -437,6 +440,7 @@ const Combobox = React.forwardRef(
         },
         /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null) })
       )),
+      /* @__PURE__ */ React.createElement("div", { role: "status", className: "aura-sr-only aura-combo__status" }, statusText),
       list
     );
   }

package/dist/esm/display.js

@@ -33,6 +33,7 @@ function alertElement(props, ref, close, autoId) {
     "children",
     "action",
     "onDismiss",
+    "dismissLabel",
     "className",
     "role",
     "icon"
@@ -137,7 +138,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 +152,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/index.d.cts

@@ -773,6 +773,10 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	action?: React$1.ReactNode | undefined;
 	/** Adds a close button. */
 	onDismiss?: (() => void) | undefined;
+	/** 5.83 (Chamber-OS 196): the close button's accessible name — say what is dismissed when a page has several
+	 * notices or the notice is about a named thing ("Dismiss starter warning for Monthly Newsletter"). Default: the
+	 * `dismiss` string ("Dismiss"). */
+	dismissLabel?: string | undefined;
 	className?: string | undefined;
 }
 /** A button (or, with `href`, a link through AuraProvider's `linkComponent`) on a toast (5.6: `href`, `dismiss`). */
@@ -1076,6 +1080,8 @@ export interface ComboboxProps extends FieldProps {
 	clearable?: boolean | undefined;
 	/** Server-side search: called with the typed text; the component stops filtering and shows `options` as given. */
 	onSearch?: ((query: string) => void) | undefined;
+	/** A search is running: the list shows `loadingText`. 5.83: with `onSearch`, the result count is announced when
+	 * `loading` goes back to `false` after a search — pass `false`, not leave it out, once results arrive. */
 	loading?: boolean | undefined;
 	loadingText?: string | undefined;
 	emptyText?: string | undefined;
@@ -1719,6 +1725,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

@@ -773,6 +773,10 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	action?: React$1.ReactNode | undefined;
 	/** Adds a close button. */
 	onDismiss?: (() => void) | undefined;
+	/** 5.83 (Chamber-OS 196): the close button's accessible name — say what is dismissed when a page has several
+	 * notices or the notice is about a named thing ("Dismiss starter warning for Monthly Newsletter"). Default: the
+	 * `dismiss` string ("Dismiss"). */
+	dismissLabel?: string | undefined;
 	className?: string | undefined;
 }
 /** A button (or, with `href`, a link through AuraProvider's `linkComponent`) on a toast (5.6: `href`, `dismiss`). */
@@ -1076,6 +1080,8 @@ export interface ComboboxProps extends FieldProps {
 	clearable?: boolean | undefined;
 	/** Server-side search: called with the typed text; the component stops filtering and shows `options` as given. */
 	onSearch?: ((query: string) => void) | undefined;
+	/** A search is running: the list shows `loadingText`. 5.83: with `onSearch`, the result count is announced when
+	 * `loading` goes back to `false` after a search — pass `false`, not leave it out, once results arrive. */
 	loading?: boolean | undefined;
 	loadingText?: string | undefined;
 	emptyText?: string | undefined;
@@ -1719,6 +1725,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

@@ -1204,6 +1204,7 @@ function alertElement(props, ref, close, autoId) {
     "children",
     "action",
     "onDismiss",
+    "dismissLabel",
     "className",
     "role",
     "icon"
@@ -1308,7 +1309,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 +1323,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

@@ -92,6 +92,10 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	action?: React$1.ReactNode | undefined;
 	/** Adds a close button. */
 	onDismiss?: (() => void) | undefined;
+	/** 5.83 (Chamber-OS 196): the close button's accessible name — say what is dismissed when a page has several
+	 * notices or the notice is about a named thing ("Dismiss starter warning for Monthly Newsletter"). Default: the
+	 * `dismiss` string ("Dismiss"). */
+	dismissLabel?: string | undefined;
 	className?: string | undefined;
 }
 /** Other attributes (`id`, `data-*`, `aria-*`) go on the card's root (5.8). */
@@ -222,6 +226,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;
@@ -532,7 +539,7 @@ export declare function linkClass(opts?: {
 	touchHeight?: boolean | "always" | undefined;
 	className?: string | undefined;
 }): string;
-declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
+declare function ServerAlert(props: Omit<AlertProps, "onDismiss" | "dismissLabel">): React$1.ReactElement;
 declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
 declare function ServerSpinner(props: SpinnerProps): React$1.ReactElement;

package/dist/server/index.d.ts

@@ -92,6 +92,10 @@ export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
 	action?: React$1.ReactNode | undefined;
 	/** Adds a close button. */
 	onDismiss?: (() => void) | undefined;
+	/** 5.83 (Chamber-OS 196): the close button's accessible name — say what is dismissed when a page has several
+	 * notices or the notice is about a named thing ("Dismiss starter warning for Monthly Newsletter"). Default: the
+	 * `dismiss` string ("Dismiss"). */
+	dismissLabel?: string | undefined;
 	className?: string | undefined;
 }
 /** Other attributes (`id`, `data-*`, `aria-*`) go on the card's root (5.8). */
@@ -222,6 +226,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;
@@ -532,7 +539,7 @@ export declare function linkClass(opts?: {
 	touchHeight?: boolean | "always" | undefined;
 	className?: string | undefined;
 }): string;
-declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
+declare function ServerAlert(props: Omit<AlertProps, "onDismiss" | "dismissLabel">): React$1.ReactElement;
 declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
 declare function ServerSpinner(props: SpinnerProps): React$1.ReactElement;

package/dist/server/index.js

@@ -1137,6 +1137,7 @@ function alertElement(props, ref, close, autoId) {
     "children",
     "action",
     "onDismiss",
+    "dismissLabel",
     "className",
     "role",
     "icon"
@@ -1241,7 +1242,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 +1256,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.81.0",
+  "version": "5.83.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",