@jirawatpyk/aura-react 5.24.0 → 5.25.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.25 — Chamber-OS addendum 27
+
+- **Toggle `Tag` takes `touchHeight`** (item 124): a selectable Tag (`selected` / `onClick`) with `touchHeight` is at least 44px tall below 640px and wherever the primary pointer is coarse, the same rule as Button's (5.24) — filter chips tapped with a finger. The pill grows rather than keeping 32px with a larger invisible hit area, so it lines up with 44px buttons on the same row and a tap lands where it looks. With a mouse from 640px up it stays 32px. A plain or removable Tag ignores the prop, and the remove button is unchanged; the prop is never written to the DOM. In a flex row with the default `align-items: stretch`, other items stretch to the chips' 44px; put them in their own row or set `align-items: center` if they should keep their size.
+
 ## 5.24 — Chamber-OS addendum 26
 
 - **`touchHeight` follows the pointer, not only the width** (item 123): Button, IconButton and the ActionBar Clear are 44px wherever the primary pointer is coarse — a tablet in portrait (768px) or landscape (1024–1366px) — as well as below 640px. With a mouse (`pointer: fine`) from 640px up nothing changes. Visible on tablets for every control that already passes `touchHeight`. A touch laptop reports its trackpad as the primary pointer (`pointer: fine`), so it keeps the compact size, as AURA's other touch rules do.

package/dist/aura.bundle.js

@@ -4242,7 +4242,16 @@ window.Aura = (() => {
   var Tag = React25.forwardRef(function Tag2(props, ref) {
     const t = useStrings();
     const selectable = props.onClick != null || props.selected != null;
-    const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+    const rest = omit(props, [
+      "onRemove",
+      "selected",
+      "icon",
+      "className",
+      "children",
+      "disabled",
+      "removeLabel",
+      "touchHeight"
+    ]);
     const inner = [
       props.icon ? /* @__PURE__ */ React25.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
       /* @__PURE__ */ React25.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
@@ -4256,7 +4265,12 @@ window.Aura = (() => {
           type: "button",
           "aria-pressed": !!props.selected,
           disabled: props.disabled,
-          className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+          className: cx(
+            "aura-tag is-selectable",
+            props.selected && "is-selected",
+            props.touchHeight && "aura-tag--touch",
+            props.className
+          )
         },
         props.selected ? /* @__PURE__ */ React25.createElement(Icon, { name: /* @__PURE__ */ React25.createElement(IconCheck, null), size: 14 }) : inner[0],
         inner[1]

package/dist/cjs/index.cjs

@@ -4224,7 +4224,16 @@ function textOf2(node) {
 var Tag = React25.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
-  const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+  const rest = omit(props, [
+    "onRemove",
+    "selected",
+    "icon",
+    "className",
+    "children",
+    "disabled",
+    "removeLabel",
+    "touchHeight"
+  ]);
   const inner = [
     props.icon ? /* @__PURE__ */ React25.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
     /* @__PURE__ */ React25.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
@@ -4238,7 +4247,12 @@ var Tag = React25.forwardRef(function Tag2(props, ref) {
         type: "button",
         "aria-pressed": !!props.selected,
         disabled: props.disabled,
-        className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+        className: cx(
+          "aura-tag is-selectable",
+          props.selected && "is-selected",
+          props.touchHeight && "aura-tag--touch",
+          props.className
+        )
       },
       props.selected ? /* @__PURE__ */ React25.createElement(Icon, { name: /* @__PURE__ */ React25.createElement(IconCheck, null), size: 14 }) : inner[0],
       inner[1]

package/dist/esm/Tag.js

@@ -17,7 +17,16 @@ function textOf(node) {
 const Tag = React.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
-  const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+  const rest = omit(props, [
+    "onRemove",
+    "selected",
+    "icon",
+    "className",
+    "children",
+    "disabled",
+    "removeLabel",
+    "touchHeight"
+  ]);
   const inner = [
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
     /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
@@ -31,7 +40,12 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
         type: "button",
         "aria-pressed": !!props.selected,
         disabled: props.disabled,
-        className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+        className: cx(
+          "aura-tag is-selectable",
+          props.selected && "is-selected",
+          props.touchHeight && "aura-tag--touch",
+          props.className
+        )
       },
       props.selected ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 14 }) : inner[0],
       inner[1]

package/dist/index.d.cts

@@ -1350,6 +1350,10 @@ export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onC
 	selected?: boolean | undefined;
 	onClick?: ((e: React$1.MouseEvent<HTMLButtonElement>) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** A toggle chip (`selected` / `onClick`) at least 44px tall below 640px or wherever the primary pointer is coarse
+	 * — filter chips tapped with a finger (5.25, Chamber-OS 124); with a mouse from 640px up it keeps 32px, as Button's
+	 * `touchHeight`. A plain or removable Tag ignores it. */
+	touchHeight?: boolean | undefined;
 }
 export interface ProgressProps {
 	/** Omit for indeterminate. */

package/dist/index.d.ts

@@ -1350,6 +1350,10 @@ export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onC
 	selected?: boolean | undefined;
 	onClick?: ((e: React$1.MouseEvent<HTMLButtonElement>) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** A toggle chip (`selected` / `onClick`) at least 44px tall below 640px or wherever the primary pointer is coarse
+	 * — filter chips tapped with a finger (5.25, Chamber-OS 124); with a mouse from 640px up it keeps 32px, as Button's
+	 * `touchHeight`. A plain or removable Tag ignores it. */
+	touchHeight?: boolean | undefined;
 }
 export interface ProgressProps {
 	/** Omit for indeterminate. */

package/dist/styles.css

@@ -314,11 +314,12 @@ a.aura-icon-btn { text-decoration: none; }
 .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.
- * A mouse on a wide screen (pointer: fine) keeps the compact size. */
+ * A mouse on a wide screen (pointer: fine) keeps the compact size. 5.25 (Chamber-OS 124): toggle Tags too. */
 @media (max-width: 639.98px), (pointer: coarse) {
   .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
+  .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {

package/dist/styles.layer.css

@@ -316,11 +316,12 @@ a.aura-icon-btn { text-decoration: none; }
 .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.
- * A mouse on a wide screen (pointer: fine) keeps the compact size. */
+ * A mouse on a wide screen (pointer: fine) keeps the compact size. 5.25 (Chamber-OS 124): toggle Tags too. */
 @media (max-width: 639.98px), (pointer: coarse) {
   .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
+  .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {

package/package.json

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