@jirawatpyk/aura-react 5.64.0 → 5.65.0

package/README.md

@@ -186,6 +186,10 @@ 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.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.
+
 ## 5.64 — Chamber-OS addendum 80 (#179)
 
 - **Progress `legend` — a key for the reserved part:** `legend={{ value: 'Used', secondary: 'Reserved (in review or scheduled)' }}` draws a key under the bar (above the `hint`): a swatch in the bar's tone for each part (`value` is optional), the second striped like the reserved segment, so it follows `tone="danger"`. It shows only while the reserved segment is drawn and wraps on a phone. It is `aria-hidden`, so while it shows the bar reads both counts ("2 of 6 used, 1 reserved") even when you pass a `valueLabel` — pass `valueText` to word it yourself. In forced colours the bar and the swatches use Highlight in every tone (before 5.64 a toned bar kept its colour). Drop a hand-drawn key that copies the stripe.

package/dist/aura.bundle.js

@@ -1649,7 +1649,7 @@ window.Aura = (() => {
 
   // src/IconButton.tsx
   var IconButton = React8.forwardRef(function IconButton2(props, ref) {
-    const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant"]);
+    const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant", "pressed"]);
     useAutoTip();
     const own = props.title !== void 0;
     return /* @__PURE__ */ React8.createElement(
@@ -1659,6 +1659,7 @@ window.Aura = (() => {
         ref,
         type: props.type || "button",
         "aria-label": props.label,
+        "aria-pressed": props.pressed != null ? props.pressed : props["aria-pressed"],
         "data-aura-tip": own ? void 0 : props.label,
         className: cx(
           "aura-icon-btn",

package/dist/cjs/index.cjs

@@ -1631,7 +1631,7 @@ function useAutoTip() {
 
 // src/IconButton.tsx
 var IconButton = React8.forwardRef(function IconButton2(props, ref) {
-  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant"]);
+  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant", "pressed"]);
   useAutoTip();
   const own = props.title !== void 0;
   return /* @__PURE__ */ React8.createElement(
@@ -1641,6 +1641,7 @@ var IconButton = React8.forwardRef(function IconButton2(props, ref) {
       ref,
       type: props.type || "button",
       "aria-label": props.label,
+      "aria-pressed": props.pressed != null ? props.pressed : props["aria-pressed"],
       "data-aura-tip": own ? void 0 : props.label,
       className: cx(
         "aura-icon-btn",

package/dist/esm/IconButton.js

@@ -4,7 +4,7 @@ import { cx, omit } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { useAutoTip } from "./autoTip.js";
 const IconButton = React.forwardRef(function IconButton2(props, ref) {
-  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant"]);
+  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant", "pressed"]);
   useAutoTip();
   const own = props.title !== void 0;
   return /* @__PURE__ */ React.createElement(
@@ -14,6 +14,7 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
       ref,
       type: props.type || "button",
       "aria-label": props.label,
+      "aria-pressed": props.pressed != null ? props.pressed : props["aria-pressed"],
       "data-aura-tip": own ? void 0 : props.label,
       className: cx(
         "aura-icon-btn",

package/dist/index.d.cts

@@ -384,6 +384,9 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
 	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;
+	/** A toggle (5.65, Chamber-OS 180): sets `aria-pressed`, and a pressed button draws as on — the selected fill and the
+	 * accent icon. Omit for an ordinary button. An `aria-pressed` you pass draws the same. */
+	pressed?: boolean | undefined;
 }
 export interface MenuItem {
 	label?: string | undefined;

package/dist/index.d.ts

@@ -384,6 +384,9 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
 	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;
+	/** A toggle (5.65, Chamber-OS 180): sets `aria-pressed`, and a pressed button draws as on — the selected fill and the
+	 * accent icon. Omit for an ordinary button. An `aria-pressed` you pass draws the same. */
+	pressed?: boolean | undefined;
 }
 export interface MenuItem {
 	label?: string | undefined;

package/dist/styles.css

@@ -358,6 +358,13 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--outline { box-sizing: border-box; border: 1px solid var(--aura-button-secondary-border); } /* 5.44 (Chamber-OS 149): reads as a button beside outlined ones */
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+/* 5.65 (Chamber-OS 180): a toggle (aria-pressed="true", or the pressed prop) looks on — the selected fill and the
+ * accent icon — and hover still shows on top of it (an accent hairline inside). Outline toggles take an accent border.
+ * The focus ring is unchanged. Not inside a field: PasswordField's reveal eye (aria-pressed) stays quiet (5.30 #14).
+ * One class stronger than the open-menu fill, so a pressed menu trigger stays on while its menu is open. */
+.aura-icon-btn[aria-pressed="true"]:not(.aura-input *) { background: var(--aura-bg-selected); color: var(--aura-fg-accent); }
+.aura-icon-btn[aria-pressed="true"]:not(.aura-input *):hover { background: var(--aura-bg-selected); box-shadow: inset 0 0 0 1px var(--aura-fg-accent); }
+.aura-icon-btn--outline[aria-pressed="true"]:not(.aura-input *) { border-color: var(--aura-fg-accent); }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 /* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size.
  * 5.24 (Chamber-OS 123): also wherever the primary pointer is coarse — a tablet at 768–1366px is a finger, not a mouse.
@@ -2552,6 +2559,9 @@ 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-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; }
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }

package/dist/styles.layer.css

@@ -360,6 +360,13 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--outline { box-sizing: border-box; border: 1px solid var(--aura-button-secondary-border); } /* 5.44 (Chamber-OS 149): reads as a button beside outlined ones */
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+/* 5.65 (Chamber-OS 180): a toggle (aria-pressed="true", or the pressed prop) looks on — the selected fill and the
+ * accent icon — and hover still shows on top of it (an accent hairline inside). Outline toggles take an accent border.
+ * The focus ring is unchanged. Not inside a field: PasswordField's reveal eye (aria-pressed) stays quiet (5.30 #14).
+ * One class stronger than the open-menu fill, so a pressed menu trigger stays on while its menu is open. */
+.aura-icon-btn[aria-pressed="true"]:not(.aura-input *) { background: var(--aura-bg-selected); color: var(--aura-fg-accent); }
+.aura-icon-btn[aria-pressed="true"]:not(.aura-input *):hover { background: var(--aura-bg-selected); box-shadow: inset 0 0 0 1px var(--aura-fg-accent); }
+.aura-icon-btn--outline[aria-pressed="true"]:not(.aura-input *) { border-color: var(--aura-fg-accent); }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 /* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size.
  * 5.24 (Chamber-OS 123): also wherever the primary pointer is coarse — a tablet at 768–1366px is a finger, not a mouse.
@@ -2554,6 +2561,9 @@ 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-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; }
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }

package/package.json

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