@jirawatpyk/aura-react 5.65.0 → 5.67.0

package/dist/esm/CheckboxGroup.js

@@ -0,0 +1,81 @@
+'use client';
+import * as React from "react";
+import { Checkbox } from "./Checkbox.js";
+import { describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, touchClass, uid, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { IconCircleAlert } from "./icons.js";
+const CheckboxGroup = React.forwardRef(
+  function CheckboxGroup2(props, ref) {
+    const t = useStrings();
+    const auto = uid(), id = props.id || auto;
+    const st = useMaybeControlled(props.value, props.defaultValue || [], props.onChange);
+    const picked = st[0] || [];
+    const opts = (props.options || []).map(function(o) {
+      return typeof o === "object" ? o : { value: o, label: o };
+    });
+    const name = props.name || id;
+    const setRef = React.useCallback(
+      function(el) {
+        if (el)
+          el.focus = function(o) {
+            const b = el.querySelector('input[type="checkbox"]:checked:not(:disabled)') || el.querySelector('input[type="checkbox"]:not(:disabled)');
+            if (b) b.focus(o);
+          };
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    return /* @__PURE__ */ React.createElement(
+      "fieldset",
+      {
+        ref: setRef,
+        className: cx(
+          "aura-field aura-radio-group aura-checkbox-group",
+          props.error && "is-invalid",
+          touchClass(props.touchHeight),
+          props.className
+        ),
+        "aria-describedby": describedBy(id, props),
+        disabled: props.disabled
+      },
+      props.label ? /* @__PURE__ */ React.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *"), /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, " (" + t.required + ")")) : null) : null,
+      /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, opts.map(function(v) {
+        return /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            key: v.value,
+            name,
+            value: v.value,
+            checked: picked.indexOf(v.value) >= 0,
+            disabled: props.disabled || v.disabled,
+            description: v.description,
+            touchHeight: props.touchHeight,
+            "aria-invalid": props.error ? true : void 0,
+            "aria-describedby": props.error ? id + "-error" : void 0,
+            onChange: function(on) {
+              const known = opts.map(function(o) {
+                return o.value;
+              });
+              const next = known.filter(function(val) {
+                return val === v.value ? on : picked.indexOf(val) >= 0;
+              }).concat(
+                picked.filter(function(val) {
+                  return known.indexOf(val) < 0;
+                })
+              );
+              st[1](next);
+            }
+          },
+          v.label
+        );
+      })),
+      props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+    );
+  }
+);
+export {
+  CheckboxGroup
+};

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/esm/index.js

@@ -13,6 +13,7 @@ import { Select } from "./Select.js";
 import { FilterSelect } from "./FilterSelect.js";
 import { FilterDateRange } from "./FilterDateRange.js";
 import { RadioGroup } from "./RadioGroup.js";
+import { CheckboxGroup } from "./CheckboxGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
 import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate, useFormatDate } from "./DatePicker.js";
@@ -78,6 +79,7 @@ export {
   Calendar,
   Card,
   Checkbox,
+  CheckboxGroup,
   ColorSchemeScript,
   ColorSchemeToggle,
   Combobox,

package/dist/esm/strings.js

@@ -133,6 +133,7 @@ const STRINGS = {
     statusOk: "OK",
     statusUnknown: "No data",
     opensInNewTab: "opens in a new tab",
+    required: "required",
     filtersApplied: function(n2) {
       return "Filters, " + n2.toLocaleString("en") + " applied";
     },

package/dist/esm/strings.sv.js

@@ -129,6 +129,7 @@ const sv = {
   statusOk: "OK",
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
+  required: "obligatoriskt",
   filtersApplied: function(n) {
     return "Filter, " + n.toLocaleString("sv-SE") + " aktiva";
   },

package/dist/esm/strings.th.js

@@ -129,6 +129,7 @@ const th = {
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
+  required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
   filtersApplied: function(n2) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },

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) */
@@ -682,6 +687,25 @@ export interface RadioGroupProps extends FieldProps {
 	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
 	touchHeight?: TouchHeight | undefined;
 }
+/** 5.67 (Chamber-OS 183): RadioGroup's many-choice twin — one legend, one hint, one error over a set of checkboxes. */
+export interface CheckboxGroupProps extends FieldProps {
+	options: ChoiceOption[];
+	/** The ticked options' values, in option order (not the order they were ticked); values not among the options are
+	 * kept, after them. `required` shows the `*` and adds "(required)" to the group's name; "at least one" is yours to
+	 * check — pass `error`. */
+	value?: string[] | undefined;
+	defaultValue?: string[] | undefined;
+	onChange?: ((values: string[]) => void) | undefined;
+	/** Each box's `name` for a native form (one entry per ticked value). Default: the group's id. */
+	name?: string | undefined;
+	/** Default `vertical`. */
+	orientation?: "vertical" | "horizontal" | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
+	/** 44px rows, as RadioGroup: `true` below 640px or on a coarse pointer, `'always'` at every width. */
+	touchHeight?: TouchHeight | undefined;
+}
 export interface SwitchProps {
 	label?: string | undefined;
 	description?: string | undefined;
@@ -998,6 +1022,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;
@@ -1922,6 +1952,7 @@ export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelec
  * complete, a preset is picked or the range is cleared; never on a lone start day. */
 export declare const FilterDateRange: React$1.ForwardRefExoticComponent<FilterDateRangeProps & React$1.RefAttributes<HTMLButtonElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
+export declare const CheckboxGroup: React$1.ForwardRefExoticComponent<CheckboxGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */
 export interface ComboboxComponent {
@@ -2228,6 +2259,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

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) */
@@ -682,6 +687,25 @@ export interface RadioGroupProps extends FieldProps {
 	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
 	touchHeight?: TouchHeight | undefined;
 }
+/** 5.67 (Chamber-OS 183): RadioGroup's many-choice twin — one legend, one hint, one error over a set of checkboxes. */
+export interface CheckboxGroupProps extends FieldProps {
+	options: ChoiceOption[];
+	/** The ticked options' values, in option order (not the order they were ticked); values not among the options are
+	 * kept, after them. `required` shows the `*` and adds "(required)" to the group's name; "at least one" is yours to
+	 * check — pass `error`. */
+	value?: string[] | undefined;
+	defaultValue?: string[] | undefined;
+	onChange?: ((values: string[]) => void) | undefined;
+	/** Each box's `name` for a native form (one entry per ticked value). Default: the group's id. */
+	name?: string | undefined;
+	/** Default `vertical`. */
+	orientation?: "vertical" | "horizontal" | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
+	/** 44px rows, as RadioGroup: `true` below 640px or on a coarse pointer, `'always'` at every width. */
+	touchHeight?: TouchHeight | undefined;
+}
 export interface SwitchProps {
 	label?: string | undefined;
 	description?: string | undefined;
@@ -998,6 +1022,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;
@@ -1922,6 +1952,7 @@ export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelec
  * complete, a preset is picked or the range is cleared; never on a lone start day. */
 export declare const FilterDateRange: React$1.ForwardRefExoticComponent<FilterDateRangeProps & React$1.RefAttributes<HTMLButtonElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
+export declare const CheckboxGroup: React$1.ForwardRefExoticComponent<CheckboxGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */
 export interface ComboboxComponent {
@@ -2228,6 +2259,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/locales/sv.cjs

@@ -154,6 +154,7 @@ var sv = {
   statusOk: "OK",
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
+  required: "obligatoriskt",
   filtersApplied: function(n) {
     return "Filter, " + n.toLocaleString("sv-SE") + " aktiva";
   },

package/dist/locales/sv.d.cts

@@ -98,6 +98,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/locales/sv.d.ts

@@ -98,6 +98,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/locales/th.cjs

@@ -154,6 +154,7 @@ var th = {
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
+  required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
   filtersApplied: function(n2) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },

package/dist/locales/th.d.cts

@@ -98,6 +98,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/locales/th.d.ts

@@ -98,6 +98,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/server/index.cjs

@@ -345,6 +345,7 @@ var th = {
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
+  required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
   filtersApplied: function(n3) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n3.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },
@@ -486,6 +487,7 @@ var sv = {
   statusOk: "OK",
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
+  required: "obligatoriskt",
   filtersApplied: function(n3) {
     return "Filter, " + n3.toLocaleString("sv-SE") + " aktiva";
   },
@@ -628,6 +630,7 @@ var STRINGS = {
     statusOk: "OK",
     statusUnknown: "No data",
     opensInNewTab: "opens in a new tab",
+    required: "required",
     filtersApplied: function(n3) {
       return "Filters, " + n3.toLocaleString("en") + " applied";
     },

package/dist/server/index.d.cts

@@ -432,6 +432,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/server/index.d.ts

@@ -432,6 +432,8 @@ export interface AuraStrings {
 	statusUnknown: string;
 	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
 	opensInNewTab: string;
+	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
+	required: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/server/index.js

@@ -279,6 +279,7 @@ var th = {
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
+  required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
   filtersApplied: function(n3) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n3.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },
@@ -420,6 +421,7 @@ var sv = {
   statusOk: "OK",
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
+  required: "obligatoriskt",
   filtersApplied: function(n3) {
     return "Filter, " + n3.toLocaleString("sv-SE") + " aktiva";
   },
@@ -562,6 +564,7 @@ var STRINGS = {
     statusOk: "OK",
     statusUnknown: "No data",
     opensInNewTab: "opens in a new tab",
+    required: "required",
     filtersApplied: function(n3) {
       return "Filters, " + n3.toLocaleString("en") + " applied";
     },

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); }
@@ -603,6 +608,8 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-radio:checked { border: 5px solid var(--aura-control-checked-bg); background: var(--aura-control-checked-fg); }
 .aura-radio:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-radio-group.is-invalid .aura-radio:not(:checked) { border-color: var(--aura-border-danger); }
+/* 5.67 (Chamber-OS 183): CheckboxGroup shares RadioGroup's legend, list and touch rows; an error edges the empty boxes. */
+.aura-checkbox-group.is-invalid .aura-check__input:not(:checked) + .aura-check__box { 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); }
 /* 5.10.1: disabled rows, on or off, are treated alike and stay readable — the label turns secondary, the description
@@ -2559,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/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); }
@@ -605,6 +610,8 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-radio:checked { border: 5px solid var(--aura-control-checked-bg); background: var(--aura-control-checked-fg); }
 .aura-radio:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-radio-group.is-invalid .aura-radio:not(:checked) { border-color: var(--aura-border-danger); }
+/* 5.67 (Chamber-OS 183): CheckboxGroup shares RadioGroup's legend, list and touch rows; an error edges the empty boxes. */
+.aura-checkbox-group.is-invalid .aura-check__input:not(:checked) + .aura-check__box { 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); }
 /* 5.10.1: disabled rows, on or off, are treated alike and stay readable — the label turns secondary, the description
@@ -2561,6 +2568,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.67.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",