@jirawatpyk/aura-react 5.16.0 → 5.17.0

package/README.md

@@ -186,6 +186,16 @@ 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.17 — Chamber-OS addendum 18
+
+- **Stat attributes, status line and a link on the label** (item 110): `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root, from the root package and `/server` — a `data-testid`, or `aria-hidden` on a loading placeholder. `status` is a line under the value ("Active · renews 1 Jan" with its tone icon), hidden while loading. With `href`, `linkArea="label"` puts the link on the label (inside the heading when there is one) and stretches its hit area over the tile: a click anywhere follows it, the tile shows the focus ring and hover edge, and other controls in the tile (links, buttons, fields, anything focusable) stay clickable above it. `aria-label`, `aria-labelledby`, `aria-describedby` and `aria-current` then go on the link, and an `onClick` too. Text in such a tile can't be selected by dragging (the click belongs to the link). The default (`tile`) is unchanged. Only the documented attributes reach the root; anything else passed is dropped, as before.
+- **Progress `valueText`** (item 111): what screen readers hear (`aria-valuetext`), apart from the shown `valueLabel` — show "2 of 6 used", read "2 used, 1 reserved, 3 remaining of 6".
+- The CSS budget is 26 kB (was 25).
+
+## 5.16.1 — Select ground (Chamber-OS 109)
+
+- **A custom Select keeps the input ground.** The read-only rule for text fields matched the Select's trigger button too (`:read-only` matches anything not editable), so every custom Select showed the disabled ground and looked disabled. It now applies to a read-only `input` only; a read-only TextField still takes the disabled ground, and a read-only Textarea now does too.
+
 ## 5.16 — Chamber-OS addenda 15–16, the larger items
 
 - **SideNav action rows** (item 95): an item with `selectable: false` is an action row — Sign out, Help — with the rows' look, 44px on touch screens and the arrow keys, that runs `onSelect` and never becomes the current item (no `aria-current`, no `onChange`). In the rail it is its icon, the label its name. Any item can take `onSelect`. `collapseToggle="row"` shows `collapsible`'s toggle as a labelled row ("Collapse sidebar" / "Expand sidebar") instead of an icon button. In AppShell's phone drawer an action row closes the drawer; `onAction(id)` on SideNav reports action rows.

package/dist/aura.bundle.js

@@ -717,8 +717,17 @@ window.Aura = (() => {
     const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
     const v = props.value;
     const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
-    const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
+    const labelLink = !!props.href && props.linkArea === "label";
+    const Tag3 = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
     const interactive = !!(props.href || props.onClick);
+    const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+    const root = {}, toLink = {};
+    Object.keys(props).forEach(function(k) {
+      const v2 = props[k];
+      if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+      else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+    });
+    const busy = props.loading || props["aria-busy"] || void 0;
     if (props.headingLevel && Tag3 === "button")
       devWarnOnce(
         "stat-heading-button",
@@ -729,15 +738,23 @@ window.Aura = (() => {
     return /* @__PURE__ */ React4.createElement(
       Tag3,
       {
+        ...root,
         ref,
-        className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-        href: props.href,
-        onClick: props.onClick,
+        className: cx(
+          "aura-stat",
+          interactive && "is-interactive",
+          labelLink && "aura-stat--label-link",
+          props.loading && "is-loading",
+          props.className
+        ),
+        href: labelLink ? void 0 : props.href,
+        onClick: labelLink ? void 0 : props.onClick,
         type: Tag3 === "button" ? "button" : void 0,
-        "aria-busy": props.loading || void 0
+        "aria-busy": busy
       },
-      /* @__PURE__ */ React4.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React4.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React4.createElement(Icon, { name: props.icon })) : null),
+      /* @__PURE__ */ React4.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React4.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React4.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.label) : props.label), props.icon ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React4.createElement(Icon, { name: props.icon })) : null),
       props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React4.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React4.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+      props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__status" }, props.status) : null,
       ch && !props.loading || props.caption ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React4.createElement(
         Icon,
         {
@@ -8344,7 +8361,7 @@ window.Aura = (() => {
     const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
     const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
     const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
-    const valueText = props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+    const valueText = props.valueText != null ? props.valueText : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
     const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
     return /* @__PURE__ */ React53.createElement(
       "div",

package/dist/cjs/index.cjs

@@ -699,8 +699,17 @@ function statElement(props, ref, Link) {
   const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
   const v = props.value;
   const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
-  const Tag3 = props.href ? Link : props.onClick ? "button" : "div";
+  const labelLink = !!props.href && props.linkArea === "label";
+  const Tag3 = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag3 === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -711,15 +720,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React4.createElement(
     Tag3,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag3 === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__PURE__ */ React4.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React4.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React4.createElement(Icon, { name: props.icon })) : null),
+    /* @__PURE__ */ React4.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React4.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React4.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.label) : props.label), props.icon ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React4.createElement(Icon, { name: props.icon })) : null),
     props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React4.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React4.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__status" }, props.status) : null,
     ch && !props.loading || props.caption ? /* @__PURE__ */ React4.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React4.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React4.createElement(
       Icon,
       {
@@ -8326,7 +8343,7 @@ var Progress = React53.forwardRef(function Progress2(props, ref) {
   const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
   const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
   const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
-  const valueText = props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+  const valueText = props.valueText != null ? props.valueText : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
   const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
   return /* @__PURE__ */ React53.createElement(
     "div",

package/dist/esm/Progress.js

@@ -9,7 +9,7 @@ const Progress = React.forwardRef(function Progress2(props, ref) {
   const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
   const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
   const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
-  const valueText = props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
+  const valueText = props.valueText != null ? props.valueText : props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
   const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
   return /* @__PURE__ */ React.createElement(
     "div",

package/dist/esm/display.js

@@ -146,8 +146,17 @@ function statElement(props, ref, Link) {
   const tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
   const v = props.value;
   const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
-  const Tag = props.href ? Link : props.onClick ? "button" : "div";
+  const labelLink = !!props.href && props.linkArea === "label";
+  const Tag = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -158,15 +167,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React.createElement(
     Tag,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__PURE__ */ React.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
+    /* @__PURE__ */ React.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.label) : props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
     props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__status" }, props.status) : null,
     ch && !props.loading || props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__change", "is-" + tone) }, /* @__PURE__ */ React.createElement(
       Icon,
       {

package/dist/index.d.cts

@@ -1215,7 +1215,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** Your router's link (e.g. `Link` from `next/link`) for this component; defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
 	label: React$1.ReactNode;
@@ -1233,6 +1234,13 @@ export interface StatProps {
 	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
 	 * can't sit in a button); a link is fine. Default: a plain label. */
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1316,6 +1324,9 @@ export interface ProgressProps {
 	showValue?: boolean | undefined;
 	/** Replaces the % text, e.g. "3 of 5 files". Also read out as aria-valuetext. */
 	valueLabel?: React$1.ReactNode | undefined;
+	/** What screen readers hear (`aria-valuetext`), apart from the shown `valueLabel` (5.17, Chamber-OS 111): show
+	 * "2 of 6 used", read "2 used, 1 reserved, 3 remaining of 6". */
+	valueText?: string | undefined;
 	/** A reserved amount drawn after `value` as a striped segment of the same tone — queued sends on a quota
 	 * (5.15, Chamber-OS 89). Both counts are read out ("2 of 6 used, 1 reserved") unless `valueLabel` is given. */
 	secondaryValue?: number | undefined;

package/dist/index.d.ts

@@ -1215,7 +1215,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** Your router's link (e.g. `Link` from `next/link`) for this component; defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
 	label: React$1.ReactNode;
@@ -1233,6 +1234,13 @@ export interface StatProps {
 	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
 	 * can't sit in a button); a link is fine. Default: a plain label. */
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1316,6 +1324,9 @@ export interface ProgressProps {
 	showValue?: boolean | undefined;
 	/** Replaces the % text, e.g. "3 of 5 files". Also read out as aria-valuetext. */
 	valueLabel?: React$1.ReactNode | undefined;
+	/** What screen readers hear (`aria-valuetext`), apart from the shown `valueLabel` (5.17, Chamber-OS 111): show
+	 * "2 of 6 used", read "2 used, 1 reserved, 3 remaining of 6". */
+	valueText?: string | undefined;
 	/** A reserved amount drawn after `value` as a striped segment of the same tone — queued sends on a quota
 	 * (5.15, Chamber-OS 89). Both counts are read out ("2 of 6 used, 1 reserved") unless `valueLabel` is given. */
 	secondaryValue?: number | undefined;

package/dist/server/index.cjs

@@ -1212,8 +1212,17 @@ function statElement(props, ref, Link) {
   const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
   const v = props.value;
   const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
-  const Tag = props.href ? Link : props.onClick ? "button" : "div";
+  const labelLink = !!props.href && props.linkArea === "label";
+  const Tag = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -1224,15 +1233,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React3.createElement(
     Tag,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__PURE__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon })) : null),
+    /* @__PURE__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React3.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.label) : props.label), props.icon ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon })) : null),
     props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React3.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__status" }, props.status) : null,
     ch && !props.loading || props.caption ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React3.createElement(
       Icon,
       {

package/dist/server/index.d.cts

@@ -107,6 +107,10 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+/** `data-*` attributes in an object prop (TypeScript checks object literals, where JSX would allow them anyway). */
+export type DataAttributes = {
+	[key: `data-${string}`]: string | number | boolean | undefined;
+};
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -116,7 +120,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** Your router's link (e.g. `Link` from `next/link`) for this component; defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
 	label: React$1.ReactNode;
@@ -134,6 +139,13 @@ export interface StatProps {
 	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
 	 * can't sit in a button); a link is fine. Default: a plain label. */
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";

package/dist/server/index.d.ts

@@ -107,6 +107,10 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+/** `data-*` attributes in an object prop (TypeScript checks object literals, where JSX would allow them anyway). */
+export type DataAttributes = {
+	[key: `data-${string}`]: string | number | boolean | undefined;
+};
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -116,7 +120,8 @@ export interface StatChange {
 	/** e.g. "vs last month". */
 	label?: React$1.ReactNode | undefined;
 }
-export interface StatProps {
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-stat` root (5.17, Chamber-OS 110). */
+export interface StatProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** Your router's link (e.g. `Link` from `next/link`) for this component; defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
 	label: React$1.ReactNode;
@@ -134,6 +139,13 @@ export interface StatProps {
 	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
 	 * can't sit in a button); a link is fine. Default: a plain label. */
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** A status line under the value — "Active · renews 1 Jan" with its tone icon (5.17, Chamber-OS 110). Hidden while
+	 * `loading`. */
+	status?: React$1.ReactNode | undefined;
+	/** With `href`: `tile` (default) makes the whole tile the link; `label` puts the link on the label (inside its
+	 * heading) and stretches its hit area over the tile, so a click anywhere follows it and the tile shows the focus
+	 * ring (5.17, Chamber-OS 110). Other links or buttons in the tile stay clickable above it. */
+	linkArea?: "tile" | "label" | undefined;
 	className?: string | undefined;
 }
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";

package/dist/server/index.js

@@ -1153,8 +1153,17 @@ function statElement(props, ref, Link) {
   const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
   const v = props.value;
   const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
-  const Tag = props.href ? Link : props.onClick ? "button" : "div";
+  const labelLink = !!props.href && props.linkArea === "label";
+  const Tag = labelLink ? "div" : props.href ? Link : props.onClick ? "button" : "div";
   const interactive = !!(props.href || props.onClick);
+  const LINK_ARIA = ["aria-label", "aria-labelledby", "aria-describedby", "aria-current"];
+  const root = {}, toLink = {};
+  Object.keys(props).forEach(function(k) {
+    const v2 = props[k];
+    if (labelLink && LINK_ARIA.indexOf(k) >= 0) toLink[k] = v2;
+    else if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k)) root[k] = v2;
+  });
+  const busy = props.loading || props["aria-busy"] || void 0;
   if (props.headingLevel && Tag === "button")
     devWarnOnce(
       "stat-heading-button",
@@ -1165,15 +1174,23 @@ function statElement(props, ref, Link) {
   return /* @__PURE__ */ React3.createElement(
     Tag,
     {
+      ...root,
       ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
+      className: cx(
+        "aura-stat",
+        interactive && "is-interactive",
+        labelLink && "aura-stat--label-link",
+        props.loading && "is-loading",
+        props.className
+      ),
+      href: labelLink ? void 0 : props.href,
+      onClick: labelLink ? void 0 : props.onClick,
       type: Tag === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
+      "aria-busy": busy
     },
-    /* @__PURE__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon })) : null),
+    /* @__PURE__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, labelLink ? /* @__PURE__ */ React3.createElement(Link, { ...toLink, href: props.href, onClick: props.onClick, className: "aura-stat__link" }, props.label) : props.label), props.icon ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon })) : null),
     props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React3.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    props.status != null && props.status !== false && props.status !== "" && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__status" }, props.status) : null,
     ch && !props.loading || props.caption ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React3.createElement(
       Icon,
       {

package/dist/styles.css

@@ -464,7 +464,11 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
-.aura-input:has(.aura-input__control:read-only:not(select)) { background: var(--aura-bg-input-disabled); }
+/* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
+ * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
+.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
+/* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
+.aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
 
 .aura-textarea { display: block; padding: 10px var(--aura-space-3); min-height: 96px; line-height: 1.6; resize: vertical; outline: none; }
 .aura-textarea:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
@@ -1028,6 +1032,20 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat__change.is-negative { color: var(--aura-fg-danger); }
 .aura-stat__change.is-neutral { color: var(--aura-fg-secondary); }
 .aura-stat__caption { color: var(--aura-fg-secondary); }
+/* 5.17 (Chamber-OS 110): a status line under the value, and a link on the label that covers the tile. */
+.aura-stat__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
+.aura-stat--label-link { position: relative; }
+.aura-stat__link { color: inherit; text-decoration: none; }
+.aura-stat__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--aura-card-radius); }
+/* The ring is drawn on the tile where :has() works; elsewhere the link keeps its own. */
+.aura-stat__link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+@supports selector(:has(*)) {
+  .aura-stat__link:focus-visible { outline: none; }
+  .aura-stat--label-link:has(.aura-stat__link:focus-visible) { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+}
+.aura-stat--label-link:hover .aura-stat__link { text-decoration: underline; text-underline-offset: 3px; }
+/* Anything else interactive in the tile sits above the stretched link. No specificity, so a control's own position wins. */
+:where(.aura-stat--label-link) :where(a, button, input, select, textarea, label, summary, [tabindex]):not(:where(.aura-stat__link)) { position: relative; z-index: 1; }
 
 /* ---------- TimePicker ---------- */
 .aura-time__popover { min-width: 160px; }

package/dist/styles.layer.css

@@ -466,7 +466,11 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
-.aura-input:has(.aura-input__control:read-only:not(select)) { background: var(--aura-bg-input-disabled); }
+/* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
+ * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
+.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
+/* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
+.aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
 
 .aura-textarea { display: block; padding: 10px var(--aura-space-3); min-height: 96px; line-height: 1.6; resize: vertical; outline: none; }
 .aura-textarea:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
@@ -1030,6 +1034,20 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat__change.is-negative { color: var(--aura-fg-danger); }
 .aura-stat__change.is-neutral { color: var(--aura-fg-secondary); }
 .aura-stat__caption { color: var(--aura-fg-secondary); }
+/* 5.17 (Chamber-OS 110): a status line under the value, and a link on the label that covers the tile. */
+.aura-stat__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
+.aura-stat--label-link { position: relative; }
+.aura-stat__link { color: inherit; text-decoration: none; }
+.aura-stat__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--aura-card-radius); }
+/* The ring is drawn on the tile where :has() works; elsewhere the link keeps its own. */
+.aura-stat__link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+@supports selector(:has(*)) {
+  .aura-stat__link:focus-visible { outline: none; }
+  .aura-stat--label-link:has(.aura-stat__link:focus-visible) { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+}
+.aura-stat--label-link:hover .aura-stat__link { text-decoration: underline; text-underline-offset: 3px; }
+/* Anything else interactive in the tile sits above the stretched link. No specificity, so a control's own position wins. */
+:where(.aura-stat--label-link) :where(a, button, input, select, textarea, label, summary, [tabindex]):not(:where(.aura-stat__link)) { position: relative; z-index: 1; }
 
 /* ---------- TimePicker ---------- */
 .aura-time__popover { min-width: 160px; }

package/package.json

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