@jirawatpyk/aura-react 5.65.0 → 5.66.0

package/README.md

@@ -186,6 +186,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.66 — Chamber-OS addenda 82–83 (#181, #182)
+
+- **A checkable menu item keeps its icon** (#181): an item with `icon` and `checked` (a `menuitemcheckbox`) now shows its icon at the start and its state as a check mark at the end — after the `hint`, in the checked colour, its 16px slot kept when unchecked so the hints of such items line up — instead of replacing the icon with a check box. An item with no icon keeps the leading check box (avoid mixing the two in one menu); `checkPlacement: 'start'` on an item keeps the 5.65 look. Radio items still draw their circle in place of an icon. `role` and `aria-checked` are unchanged; in forced colours the mark takes the text colour.
+- **Combobox takes `invalid` and `aria-describedby`** (#182), as TextField has since 5.50: `invalid` gives the danger border and `aria-invalid="true"` without AURA's message line, and `aria-describedby` adds your ids (a `role="alert"` message beside the picker) after the input's own (the hint or the error, the chip summary), each id once. `error` still wins.
+
 ## 5.65 — Chamber-OS addendum 81 (#180)
 
 - **A pressed IconButton looks on:** an IconButton with `aria-pressed="true"` — or the new `pressed` prop, which sets `aria-pressed` for you — draws the selected fill (`aura-bg-selected`, as a selected Tag or nav item) with an accent icon (`aura-fg-accent`, at least 3:1 on it in light and dark); `tone` is ignored while pressed. Hover still shows on a pressed one (an accent hairline inside), an `outline` toggle takes an accent border, a pressed menu trigger stays on while its menu is open, and the focus ring is unchanged. In forced colours a pressed toggle is Highlight with a CanvasText focus ring. `pressed={false}`, no prop and `aria-pressed="mixed"` draw as before. Inside a field the reveal eye of PasswordField (which uses `aria-pressed`) stays quiet. On a selected DataTable row, which has the same fill, only the accent icon shows it. For an editor toolbar's Bold / Italic / lists; drop `aria-pressed:bg-… aria-pressed:text-…` stand-ins.

package/dist/aura.bundle.js

@@ -1835,11 +1835,13 @@ window.Aura = (() => {
       if (it.separator) return /* @__PURE__ */ React9.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
       const isRadio = it.type === "radio";
       const isCheck = !isRadio && it.checked !== void 0;
-      const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
+      const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
+      const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
       const body = [
         /* @__PURE__ */ React9.createElement(React9.Fragment, { key: "l" }, lead),
         /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
-        it.hint ? /* @__PURE__ */ React9.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
+        it.hint ? /* @__PURE__ */ React9.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null,
+        checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { key: "c", className: cx("aura-menu__mark", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 16, strokeWidth: 2.5 }) : null) : null
       ];
       const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
       const reasonId = it.disabled && it.disabledReason ? itemId + "-r" + i : void 0;
@@ -4249,6 +4251,7 @@ window.Aura = (() => {
           label: props.label,
           hint: props.hint,
           error: props.error,
+          invalid: props.invalid,
           required: props.required,
           optional: props.optional,
           disabled: props.disabled,
@@ -4293,8 +4296,18 @@ window.Aura = (() => {
             "aria-controls": open && live.length ? listId : void 0,
             "aria-autocomplete": "list",
             "aria-activedescendant": open && live[activeIdx] ? optId(activeIdx) : void 0,
-            "aria-invalid": props.error ? true : void 0,
-            "aria-describedby": [props.error ? id + "-error" : props.hint ? id + "-hint" : "", multi && picked.length ? summaryId : ""].filter(Boolean).join(" ") || void 0,
+            "aria-invalid": props.error || props.invalid ? true : void 0,
+            "aria-describedby": (
+              /* each id once, in order: error or hint, the chip summary, then yours */
+              Array.from(
+                new Set(
+                  [
+                    props.error ? id + "-error" : props.hint ? id + "-hint" : "",
+                    multi && picked.length ? summaryId : ""
+                  ].concat(String(props["aria-describedby"] || "").split(/\s+/)).filter(Boolean)
+                )
+              ).join(" ") || void 0
+            ),
             placeholder: multi && values.length ? void 0 : props.placeholder,
             disabled: props.disabled,
             readOnly: props.readOnly,

package/dist/cjs/index.cjs

@@ -1817,11 +1817,13 @@ var Menu = React9.forwardRef(function Menu2(props, ref) {
     if (it.separator) return /* @__PURE__ */ React9.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
     const isRadio = it.type === "radio";
     const isCheck = !isRadio && it.checked !== void 0;
-    const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
+    const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
+    const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
     const body = [
       /* @__PURE__ */ React9.createElement(React9.Fragment, { key: "l" }, lead),
       /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
-      it.hint ? /* @__PURE__ */ React9.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
+      it.hint ? /* @__PURE__ */ React9.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null,
+      checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { key: "c", className: cx("aura-menu__mark", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 16, strokeWidth: 2.5 }) : null) : null
     ];
     const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
     const reasonId = it.disabled && it.disabledReason ? itemId + "-r" + i : void 0;
@@ -4231,6 +4233,7 @@ var Combobox = React22.forwardRef(
         label: props.label,
         hint: props.hint,
         error: props.error,
+        invalid: props.invalid,
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
@@ -4275,8 +4278,18 @@ var Combobox = React22.forwardRef(
           "aria-controls": open && live.length ? listId : void 0,
           "aria-autocomplete": "list",
           "aria-activedescendant": open && live[activeIdx] ? optId(activeIdx) : void 0,
-          "aria-invalid": props.error ? true : void 0,
-          "aria-describedby": [props.error ? id + "-error" : props.hint ? id + "-hint" : "", multi && picked.length ? summaryId : ""].filter(Boolean).join(" ") || void 0,
+          "aria-invalid": props.error || props.invalid ? true : void 0,
+          "aria-describedby": (
+            /* each id once, in order: error or hint, the chip summary, then yours */
+            Array.from(
+              new Set(
+                [
+                  props.error ? id + "-error" : props.hint ? id + "-hint" : "",
+                  multi && picked.length ? summaryId : ""
+                ].concat(String(props["aria-describedby"] || "").split(/\s+/)).filter(Boolean)
+              )
+            ).join(" ") || void 0
+          ),
           placeholder: multi && values.length ? void 0 : props.placeholder,
           disabled: props.disabled,
           readOnly: props.readOnly,

package/dist/esm/Combobox.js

@@ -310,6 +310,7 @@ const Combobox = React.forwardRef(
         label: props.label,
         hint: props.hint,
         error: props.error,
+        invalid: props.invalid,
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
@@ -354,8 +355,18 @@ const Combobox = React.forwardRef(
           "aria-controls": open && live.length ? listId : void 0,
           "aria-autocomplete": "list",
           "aria-activedescendant": open && live[activeIdx] ? optId(activeIdx) : void 0,
-          "aria-invalid": props.error ? true : void 0,
-          "aria-describedby": [props.error ? id + "-error" : props.hint ? id + "-hint" : "", multi && picked.length ? summaryId : ""].filter(Boolean).join(" ") || void 0,
+          "aria-invalid": props.error || props.invalid ? true : void 0,
+          "aria-describedby": (
+            /* each id once, in order: error or hint, the chip summary, then yours */
+            Array.from(
+              new Set(
+                [
+                  props.error ? id + "-error" : props.hint ? id + "-hint" : "",
+                  multi && picked.length ? summaryId : ""
+                ].concat(String(props["aria-describedby"] || "").split(/\s+/)).filter(Boolean)
+              )
+            ).join(" ") || void 0
+          ),
           placeholder: multi && values.length ? void 0 : props.placeholder,
           disabled: props.disabled,
           readOnly: props.readOnly,

package/dist/esm/Menu.js

@@ -164,11 +164,13 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
     const isRadio = it.type === "radio";
     const isCheck = !isRadio && it.checked !== void 0;
-    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" });
+    const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
+    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" });
     const body = [
       /* @__PURE__ */ React.createElement(React.Fragment, { key: "l" }, lead),
       /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
-      it.hint ? /* @__PURE__ */ React.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
+      it.hint ? /* @__PURE__ */ React.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null,
+      checkAtEnd ? /* @__PURE__ */ React.createElement("span", { key: "c", className: cx("aura-menu__mark", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 16, strokeWidth: 2.5 }) : null) : null
     ];
     const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
     const reasonId = it.disabled && it.disabledReason ? itemId + "-r" + i : void 0;

package/dist/index.d.cts

@@ -391,8 +391,13 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 export interface MenuItem {
 	label?: string | undefined;
 	icon?: IconInput | undefined;
-	/** Present = a checkable item (menuitemcheckbox). */
+	/** Present = a checkable item (menuitemcheckbox). 5.66 (Chamber-OS 181): with an `icon` too, the icon stays at the
+	 * start and the state is a check mark at the end (after `hint`); without one, a check box at the start. A radio
+	 * item (`type: 'radio'`) still draws its circle in place of an icon. */
 	checked?: boolean | undefined;
+	/** 5.66: where a checkable item with an `icon` shows its state — `end` (default: the icon stays, a check mark at the
+	 * end) or `start` (the check box in place of the icon, as before 5.66). */
+	checkPlacement?: "start" | "end" | undefined;
 	/** Dimmed and does nothing when chosen, but still reachable with the arrow keys and announced (5.10). */
 	disabled?: boolean | undefined;
 	/** Why it's disabled ("You can resend in 5 minutes"): shown in place of the hint and read with the item. (5.10) */
@@ -998,6 +1003,12 @@ export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "de
 	max?: number | undefined;
 }
 export interface ComboboxProps extends FieldProps {
+	/** 5.66 (Chamber-OS 182): ids added to the input's own description (the hint or error, the chip summary) — a page's
+	 * `role="alert"` message beside the field (each id once). With `invalid` the field is marked wrong without
+	 * AURA's message line; `error` still wins. */
+	"aria-describedby"?: string | undefined;
+	/** 5.66 (Chamber-OS 182): the danger border and `aria-invalid="true"` without AURA's message line, as on TextField. */
+	invalid?: boolean | undefined;
 	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
 	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
 	touchHeight?: TouchHeight | undefined;

package/dist/index.d.ts

@@ -391,8 +391,13 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 export interface MenuItem {
 	label?: string | undefined;
 	icon?: IconInput | undefined;
-	/** Present = a checkable item (menuitemcheckbox). */
+	/** Present = a checkable item (menuitemcheckbox). 5.66 (Chamber-OS 181): with an `icon` too, the icon stays at the
+	 * start and the state is a check mark at the end (after `hint`); without one, a check box at the start. A radio
+	 * item (`type: 'radio'`) still draws its circle in place of an icon. */
 	checked?: boolean | undefined;
+	/** 5.66: where a checkable item with an `icon` shows its state — `end` (default: the icon stays, a check mark at the
+	 * end) or `start` (the check box in place of the icon, as before 5.66). */
+	checkPlacement?: "start" | "end" | undefined;
 	/** Dimmed and does nothing when chosen, but still reachable with the arrow keys and announced (5.10). */
 	disabled?: boolean | undefined;
 	/** Why it's disabled ("You can resend in 5 minutes"): shown in place of the hint and read with the item. (5.10) */
@@ -998,6 +1003,12 @@ export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "de
 	max?: number | undefined;
 }
 export interface ComboboxProps extends FieldProps {
+	/** 5.66 (Chamber-OS 182): ids added to the input's own description (the hint or error, the chip summary) — a page's
+	 * `role="alert"` message beside the field (each id once). With `invalid` the field is marked wrong without
+	 * AURA's message line; `error` still wins. */
+	"aria-describedby"?: string | undefined;
+	/** 5.66 (Chamber-OS 182): the danger border and `aria-invalid="true"` without AURA's message line, as on TextField. */
+	invalid?: boolean | undefined;
 	/** 5.38 (Chamber-OS 141): a 44px box, its buttons 44px wide — `true` below 640px or on a coarse pointer, as
 	 * TextField's `touchHeight`; `'always'` at every width. Default: the density's input height. */
 	touchHeight?: TouchHeight | undefined;

package/dist/styles.css

@@ -317,6 +317,11 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 }
 .aura-menu__check.is-on { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-menu__check.is-on .aura-icon { color: inherit; }
+/* 5.66 (Chamber-OS 181): the trailing check mark of a checkable item that keeps its icon — the checked colour (text colour in forced colours), a fixed
+ * width so labels line up checked or not. */
+.aura-menu__mark { flex: none; width: var(--aura-icon-sm); height: var(--aura-icon-sm); display: inline-flex; align-items: center; justify-content: center; }
+.aura-menu__item .aura-menu__mark .aura-icon { color: var(--aura-control-checked-bg); }
+.aura-menu__item--danger .aura-menu__mark .aura-icon { color: inherit; } /* a danger item's mark is its danger text */
 .aura-menu__item--danger, .aura-menu__item--danger .aura-icon { color: var(--aura-fg-danger); }
 .aura-menu__item--danger:hover, .aura-menu__item--danger:focus { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
 .aura-menu__item--danger:hover .aura-icon, .aura-menu__item--danger:focus .aura-icon { color: var(--aura-alert-danger-fg); }
@@ -2559,6 +2564,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-switch-row.is-disabled .aura-choice__label { color: GrayText; }
   .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
   .aura-progress :is(.aura-progress__bar, .aura-progress__swatch), .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; } /* every tone (5.64) */
+  .aura-menu__item .aura-menu__mark .aura-icon { color: inherit; } /* 5.66: the item's text colour */
   .aura-icon-btn[aria-pressed="true"]:not(.aura-input *) { background: Highlight; color: HighlightText; forced-color-adjust: none; } /* 5.65 */
   .aura-icon-btn[aria-pressed="true"]:not(.aura-input *):hover { box-shadow: inset 0 0 0 1px HighlightText; }
   .aura-icon-btn[aria-pressed="true"]:not(.aura-input *):focus-visible { outline-color: CanvasText; }

package/dist/styles.layer.css

@@ -319,6 +319,11 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 }
 .aura-menu__check.is-on { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-menu__check.is-on .aura-icon { color: inherit; }
+/* 5.66 (Chamber-OS 181): the trailing check mark of a checkable item that keeps its icon — the checked colour (text colour in forced colours), a fixed
+ * width so labels line up checked or not. */
+.aura-menu__mark { flex: none; width: var(--aura-icon-sm); height: var(--aura-icon-sm); display: inline-flex; align-items: center; justify-content: center; }
+.aura-menu__item .aura-menu__mark .aura-icon { color: var(--aura-control-checked-bg); }
+.aura-menu__item--danger .aura-menu__mark .aura-icon { color: inherit; } /* a danger item's mark is its danger text */
 .aura-menu__item--danger, .aura-menu__item--danger .aura-icon { color: var(--aura-fg-danger); }
 .aura-menu__item--danger:hover, .aura-menu__item--danger:focus { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
 .aura-menu__item--danger:hover .aura-icon, .aura-menu__item--danger:focus .aura-icon { color: var(--aura-alert-danger-fg); }
@@ -2561,6 +2566,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-switch-row.is-disabled .aura-choice__label { color: GrayText; }
   .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
   .aura-progress :is(.aura-progress__bar, .aura-progress__swatch), .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; } /* every tone (5.64) */
+  .aura-menu__item .aura-menu__mark .aura-icon { color: inherit; } /* 5.66: the item's text colour */
   .aura-icon-btn[aria-pressed="true"]:not(.aura-input *) { background: Highlight; color: HighlightText; forced-color-adjust: none; } /* 5.65 */
   .aura-icon-btn[aria-pressed="true"]:not(.aura-input *):hover { box-shadow: inset 0 0 0 1px HighlightText; }
   .aura-icon-btn[aria-pressed="true"]:not(.aura-input *):focus-visible { outline-color: CanvasText; }

package/package.json

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