@jirawatpyk/aura-react 5.10.0 → 5.10.1

package/README.md

@@ -186,6 +186,12 @@ 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.10.1 — fixes from a new project
+
+- **Switch**: a disabled switch that is on ("always on", enforced by policy) no longer fades into the same grey as an off one. Disabled rows, on or off, now look alike and stay readable: the label turns `aura-fg-secondary`, the description (often the reason it's locked) keeps its colour, the row shows a not-allowed cursor, and only the switch fades — off to the disabled opacity, on to 0.75, at least 3:1 apart in both themes. In forced colours a locked switch is `GrayText`. Use it instead of a Badge for settings people can see but not change.
+- **Tag**: the remove button is named from the words inside any children — `<Tag onRemove={…}><strong>Acme</strong> AB</Tag>` is "Remove Acme AB" (was "Remove "). With no text at all (an icon only), a dev notice asks for `removeLabel`.
+- **SideNav** (docs): an item's `badge` takes any element, so a fault or warning is a toned Badge — `badge: <Badge tone="danger">Fault</Badge>`; `count` stays a neutral number.
+
 ## 5.10 — Chamber-OS addendum 10 (adopting 5.9)
 
 - **Tabs `variant="segmented"`** (item 72): the tab list as a pill track with the selected tab raised — SegmentedControl's look — keeping every Tabs behaviour (tab / tabpanel roles, `keepMounted`, `activation`, `tabProps`). `fullWidth` stretches the track and shares it equally. Tabs are 44px on touch screens, the list doesn't scroll so the focus ring is never clipped, and in forced colours the selected tab gets a `Highlight` outline. Default (`underline`) output is unchanged.

package/dist/aura.bundle.js

@@ -3883,6 +3883,16 @@ window.Aura = (() => {
 
   // src/Tag.tsx
   var React24 = __toESM(require_react(), 1);
+  function textOf(node) {
+    if (node == null || typeof node === "boolean") return "";
+    if (typeof node === "string" || typeof node === "number") return String(node);
+    if (Array.isArray(node)) return node.map(textOf).join("");
+    if (React24.isValidElement(node)) {
+      const p = node.props;
+      return p["aria-hidden"] === true || p["aria-hidden"] === "true" ? "" : textOf(p.children);
+    }
+    return "";
+  }
   var Tag = React24.forwardRef(function Tag2(props, ref) {
     const t = useStrings();
     const selectable = props.onClick != null || props.selected != null;
@@ -3906,12 +3916,18 @@ window.Aura = (() => {
         inner[1]
       );
     }
+    const name = props.onRemove && !props.removeLabel ? textOf(props.children).replace(/\s+/g, " ").trim() : "";
+    if (props.onRemove && !props.disabled && !props.removeLabel && !name)
+      devWarnOnce(
+        "tag-remove-label",
+        'Tag: the remove button has no name \u2014 its children have no text. Pass removeLabel (e.g. "Remove Acme AB").'
+      );
     return /* @__PURE__ */ React24.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React24.createElement(
       "button",
       {
         type: "button",
         className: "aura-tag__remove",
-        "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
+        "aria-label": props.removeLabel || t.remove(name),
         onClick: props.onRemove
       },
       /* @__PURE__ */ React24.createElement(Icon, { name: /* @__PURE__ */ React24.createElement(IconX, null), size: 12 })

package/dist/cjs/index.cjs

@@ -3865,6 +3865,16 @@ var React25 = __toESM(require("react"), 1);
 
 // src/Tag.tsx
 var React24 = __toESM(require("react"), 1);
+function textOf(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (React24.isValidElement(node)) {
+    const p = node.props;
+    return p["aria-hidden"] === true || p["aria-hidden"] === "true" ? "" : textOf(p.children);
+  }
+  return "";
+}
 var Tag = React24.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
@@ -3888,12 +3898,18 @@ var Tag = React24.forwardRef(function Tag2(props, ref) {
       inner[1]
     );
   }
+  const name = props.onRemove && !props.removeLabel ? textOf(props.children).replace(/\s+/g, " ").trim() : "";
+  if (props.onRemove && !props.disabled && !props.removeLabel && !name)
+    devWarnOnce(
+      "tag-remove-label",
+      'Tag: the remove button has no name \u2014 its children have no text. Pass removeLabel (e.g. "Remove Acme AB").'
+    );
   return /* @__PURE__ */ React24.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React24.createElement(
     "button",
     {
       type: "button",
       className: "aura-tag__remove",
-      "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
+      "aria-label": props.removeLabel || t.remove(name),
       onClick: props.onRemove
     },
     /* @__PURE__ */ React24.createElement(Icon, { name: /* @__PURE__ */ React24.createElement(IconX, null), size: 12 })

package/dist/esm/Tag.js

@@ -1,9 +1,19 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, omit } from "./internal.js";
+import { cx, devWarnOnce, omit } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { IconCheck, IconX } from "./icons.js";
+function textOf(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (React.isValidElement(node)) {
+    const p = node.props;
+    return p["aria-hidden"] === true || p["aria-hidden"] === "true" ? "" : textOf(p.children);
+  }
+  return "";
+}
 const Tag = React.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
@@ -27,12 +37,18 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
       inner[1]
     );
   }
+  const name = props.onRemove && !props.removeLabel ? textOf(props.children).replace(/\s+/g, " ").trim() : "";
+  if (props.onRemove && !props.disabled && !props.removeLabel && !name)
+    devWarnOnce(
+      "tag-remove-label",
+      'Tag: the remove button has no name \u2014 its children have no text. Pass removeLabel (e.g. "Remove Acme AB").'
+    );
   return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
       className: "aura-tag__remove",
-      "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
+      "aria-label": props.removeLabel || t.remove(name),
       onClick: props.onRemove
     },
     /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })

package/dist/styles.css

@@ -466,7 +466,13 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-radio-group.is-invalid .aura-radio:not(:checked) { border-color: var(--aura-border-danger); }
 
 .aura-switch-row { display: flex; align-items: flex-start; gap: var(--aura-space-3); font-family: var(--font-sans); }
-.aura-switch-row.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.10.1: disabled rows, on or off, are treated alike and stay readable — the label turns secondary, the description
+ * keeps its colour (often the reason it's locked) — and only the switch fades: off to the disabled opacity, on to 0.75,
+ * ≥3:1 apart in both themes, so "locked on" never looks like "off". */
+.aura-switch-row.is-disabled { cursor: not-allowed; }
+.aura-switch-row.is-disabled .aura-choice__label { color: var(--aura-fg-secondary); cursor: not-allowed; }
+.aura-switch:disabled { opacity: var(--aura-disabled-opacity); }
+.aura-switch.is-on:disabled { opacity: 0.75; }
 .aura-switch {
   position: relative; flex: none; box-sizing: border-box; margin: 0; padding: 0;
   width: var(--aura-switch-width); height: var(--aura-switch-height); border-radius: var(--aura-radius-full);
@@ -1601,6 +1607,11 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-switch__thumb { background: CanvasText; forced-color-adjust: none; }
   .aura-switch.is-on { background: Highlight; forced-color-adjust: none; }
   .aura-switch.is-on .aura-switch__thumb { background: HighlightText; }
+  .aura-switch:disabled, .aura-switch.is-on:disabled { border-color: GrayText; opacity: 1; }
+  .aura-switch:disabled .aura-switch__thumb { background: GrayText; }
+  .aura-switch.is-on:disabled { background: GrayText; }
+  .aura-switch.is-on:disabled .aura-switch__thumb { background: Canvas; }
+  .aura-switch-row.is-disabled .aura-choice__label { color: GrayText; }
   .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
   .aura-progress__bar, .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; }
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }

package/dist/styles.layer.css

@@ -468,7 +468,13 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-radio-group.is-invalid .aura-radio:not(:checked) { border-color: var(--aura-border-danger); }
 
 .aura-switch-row { display: flex; align-items: flex-start; gap: var(--aura-space-3); font-family: var(--font-sans); }
-.aura-switch-row.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.10.1: disabled rows, on or off, are treated alike and stay readable — the label turns secondary, the description
+ * keeps its colour (often the reason it's locked) — and only the switch fades: off to the disabled opacity, on to 0.75,
+ * ≥3:1 apart in both themes, so "locked on" never looks like "off". */
+.aura-switch-row.is-disabled { cursor: not-allowed; }
+.aura-switch-row.is-disabled .aura-choice__label { color: var(--aura-fg-secondary); cursor: not-allowed; }
+.aura-switch:disabled { opacity: var(--aura-disabled-opacity); }
+.aura-switch.is-on:disabled { opacity: 0.75; }
 .aura-switch {
   position: relative; flex: none; box-sizing: border-box; margin: 0; padding: 0;
   width: var(--aura-switch-width); height: var(--aura-switch-height); border-radius: var(--aura-radius-full);
@@ -1603,6 +1609,11 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-switch__thumb { background: CanvasText; forced-color-adjust: none; }
   .aura-switch.is-on { background: Highlight; forced-color-adjust: none; }
   .aura-switch.is-on .aura-switch__thumb { background: HighlightText; }
+  .aura-switch:disabled, .aura-switch.is-on:disabled { border-color: GrayText; opacity: 1; }
+  .aura-switch:disabled .aura-switch__thumb { background: GrayText; }
+  .aura-switch.is-on:disabled { background: GrayText; }
+  .aura-switch.is-on:disabled .aura-switch__thumb { background: Canvas; }
+  .aura-switch-row.is-disabled .aura-choice__label { color: GrayText; }
   .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
   .aura-progress__bar, .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; }
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }

package/package.json

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