@jirawatpyk/aura-react 5.82.0 → 5.83.0

package/README.md

@@ -248,6 +248,11 @@ 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>`.

package/dist/aura.bundle.js

@@ -819,6 +819,7 @@ window.Aura = (() => {
       "children",
       "action",
       "onDismiss",
+      "dismissLabel",
       "className",
       "role",
       "icon"
@@ -4358,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);
@@ -4531,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;
@@ -4657,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
       );
     }
@@ -4670,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"
@@ -4340,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);
@@ -4513,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;
@@ -4639,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
     );
   }
@@ -4652,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"

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;

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;

package/dist/server/index.cjs

@@ -1204,6 +1204,7 @@ function alertElement(props, ref, close, autoId) {
     "children",
     "action",
     "onDismiss",
+    "dismissLabel",
     "className",
     "role",
     "icon"

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). */
@@ -535,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). */
@@ -535,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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.82.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",