@jirawatpyk/aura-react 5.57.0 → 5.58.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.58 — Chamber-OS addendum 72 (#171)
+
+- **A short touchHeight tab is a 44×44 target:** with `touchHeight`, below 640px or on a coarse pointer (or always, with `'always'`) each tab is now at least 44px wide as well as 44px tall, its label centred, so a one-word tab such as "Tax" is 44×44. Tabs with longer labels keep their width and the gap between tabs is unchanged; a short tab's underline spans its 44px. With a mouse from 640px nothing changes. Inside its breakpoint a `fullWidth` row sizes its own tabs (equal shares, 12px either side of the label), so it is unchanged there; a one-letter tab in a full-width row that overflows and scrolls can stay under 44px wide.
+
 ## 5.57 — Chamber-OS addenda 70–71 (#169, #170)
 
 - **A Dialog or Drawer always opens with focus inside:** a control inside a closed `<details>` is no longer picked as the first control (Chromium reports it as focusable, but `focus()` on it did nothing, so focus stayed on the trigger and Escape didn't close the modal). The `<details>`'s own `<summary>` now counts as a control, so a body whose only control is a closed `<details>` opens on its summary. And focus is checked after each try: if a control doesn't take focus (or pass it on to a field inside it), the next one is tried, then the panel itself — focus is always in the modal, so Escape and the Tab trap work whatever the content. Command works the same way, and so does a Popover's first focus — which now also skips `tabindex="-1"` controls, so a Popover holding a SegmentedControl or Tabs opens on the selected item, as Tab would reach it. A summary is a control whether its `<details>` is open or closed, so a body that starts with an open `<details>` ("Advanced" above a form) now opens on its summary, the first Tab stop, rather than the first field.

package/dist/index.d.cts

@@ -865,7 +865,8 @@ export interface TabsProps {
 	current?: "page" | "location" | undefined;
 	/** 5.39 (Chamber-OS 143): 44px tabs, button or link form, either variant — `true` below 640px or on a coarse
 	 * pointer, as Button's `touchHeight`; `'always'` at every width. Without it: the density's input height (44px on a
-	 * coarse pointer). Panels are not affected. */
+	 * coarse pointer). Panels are not affected. 5.58 (Chamber-OS 171): also at least 44px wide, label centred, so a
+	 * short label is a 44×44 target; longer tabs keep their width. */
 	touchHeight?: TouchHeight | undefined;
 }
 export interface NavItem {

package/dist/index.d.ts

@@ -865,7 +865,8 @@ export interface TabsProps {
 	current?: "page" | "location" | undefined;
 	/** 5.39 (Chamber-OS 143): 44px tabs, button or link form, either variant — `true` below 640px or on a coarse
 	 * pointer, as Button's `touchHeight`; `'always'` at every width. Without it: the density's input height (44px on a
-	 * coarse pointer). Panels are not affected. */
+	 * coarse pointer). Panels are not affected. 5.58 (Chamber-OS 171): also at least 44px wide, label centred, so a
+	 * short label is a 44×44 target; longer tabs keep their width. */
 	touchHeight?: TouchHeight | undefined;
 }
 export interface NavItem {

package/dist/styles.css

@@ -805,8 +805,12 @@ a.aura-tab { text-decoration: none; }
 .aura-tabs__panel { padding-top: var(--aura-space-6); outline: none; }
 /* 5.39 (Chamber-OS 143): touchHeight — 44px tabs (underline or segmented, buttons or links) below 640px or on a coarse
  * pointer (is-touch), or always. The height is set on the tabs, not through --aura-input-height, so panels keep theirs. */
-.aura-tabs.is-touch-always .aura-tab { height: var(--aura-touch-target); }
-@media (max-width: 639.98px), (pointer: coarse) { .aura-tabs.is-touch .aura-tab { height: var(--aura-touch-target); } }
+/* 5.58 (Chamber-OS 171): and at least 44px wide, the label centred, so a short label ("Tax") is a 44×44 target; a
+ * longer tab keeps its width and the gap. A full-width row (later rules, max-content) already sizes its tabs. */
+.aura-tabs.is-touch-always .aura-tab { height: var(--aura-touch-target); min-width: var(--aura-touch-target); justify-content: center; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-tabs.is-touch .aura-tab { height: var(--aura-touch-target); min-width: var(--aura-touch-target); justify-content: center; }
+}
 .aura-tabs__panel[hidden] { display: none; }
 .aura-tabs__panel:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-sm); }
 

package/dist/styles.layer.css

@@ -807,8 +807,12 @@ a.aura-tab { text-decoration: none; }
 .aura-tabs__panel { padding-top: var(--aura-space-6); outline: none; }
 /* 5.39 (Chamber-OS 143): touchHeight — 44px tabs (underline or segmented, buttons or links) below 640px or on a coarse
  * pointer (is-touch), or always. The height is set on the tabs, not through --aura-input-height, so panels keep theirs. */
-.aura-tabs.is-touch-always .aura-tab { height: var(--aura-touch-target); }
-@media (max-width: 639.98px), (pointer: coarse) { .aura-tabs.is-touch .aura-tab { height: var(--aura-touch-target); } }
+/* 5.58 (Chamber-OS 171): and at least 44px wide, the label centred, so a short label ("Tax") is a 44×44 target; a
+ * longer tab keeps its width and the gap. A full-width row (later rules, max-content) already sizes its tabs. */
+.aura-tabs.is-touch-always .aura-tab { height: var(--aura-touch-target); min-width: var(--aura-touch-target); justify-content: center; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-tabs.is-touch .aura-tab { height: var(--aura-touch-target); min-width: var(--aura-touch-target); justify-content: center; }
+}
 .aura-tabs__panel[hidden] { display: none; }
 .aura-tabs__panel:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-sm); }
 

package/package.json

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