@jirawatpyk/aura-react 5.38.0 → 5.39.0

package/README.md

@@ -186,6 +186,12 @@ 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.39 — Chamber-OS addendum 46
+
+- **Tabs `touchHeight`** (#143): 44px tabs — buttons or links, underline or segmented — with `true` below 640px or on a coarse pointer (Button's rule), or `'always'` at every width. The count badge and icon stay centred on the label (above the 2px underline). The height is set on the tabs themselves, so fields in the panels keep their own size. Without it nothing changes.
+- **Link tabs are as tall as button tabs.** A link tab (`href`) was 2px taller than a button tab — its 2px underline sat outside the height (38px instead of 36px in compact density, 46px instead of 44px on touch screens). Tests that measure link tabs will see 2px less.
+- **FilterDateRange `touchHeight`**: a 44px face on its own, as FilterSelect's. A FilterBar with `touchHeight` already reaches it (checked for Chamber-OS's audit log filter row).
+
 ## 5.38 — Chamber-OS addenda 43–45
 
 - **FilterBar and FilterSelect `touchHeight`** (#140): `true` makes the search (and its clear button) and every field-height control in the bar (FilterSelect, Select, Combobox, DatePicker and TimePicker with their buttons, SegmentedControl's options) 44px below 640px or on a coarse pointer — the same rule as Button's and TextField's `touchHeight` — and `'always'` at every width; `touchHeight` on one FilterSelect does the same for it alone. Without it nothing changes: the density's input height with a mouse, 44px on a coarse pointer. Buttons in `actions` take their own `touchHeight`. A SegmentedControl's track is 50px there (44px options plus its edge and padding), as with its own `touchHeight`. Opt-in rather than a new default, like every other `touchHeight`, so a narrow desktop window doesn't change size unasked.

package/dist/aura.bundle.js

@@ -3686,7 +3686,13 @@ window.Aura = (() => {
         "div",
         {
           ref: boxRef,
-          className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+          className: cx(
+            "aura-filterselect",
+            pop.open && "is-open",
+            props.disabled && "is-disabled",
+            touchClass(props.touchHeight),
+            props.className
+          )
         },
         /* @__PURE__ */ React19.createElement(
           "button",
@@ -7077,7 +7083,7 @@ window.Aura = (() => {
     const tabCls = function(on, extra) {
       return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
     };
-    const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
+    const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
     const [focusId, setFocusId] = React35.useState(null);
     items2.forEach(function(t) {
       const al = t.tabProps && t.tabProps["aria-label"];

package/dist/cjs/index.cjs

@@ -3668,7 +3668,13 @@ var FilterDateRange = React19.forwardRef(
       "div",
       {
         ref: boxRef,
-        className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+        className: cx(
+          "aura-filterselect",
+          pop.open && "is-open",
+          props.disabled && "is-disabled",
+          touchClass(props.touchHeight),
+          props.className
+        )
       },
       /* @__PURE__ */ React19.createElement(
         "button",
@@ -7059,7 +7065,7 @@ var Tabs = React35.forwardRef(function Tabs2(props, ref) {
   const tabCls = function(on, extra) {
     return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
   };
-  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
+  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React35.useState(null);
   items2.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];

package/dist/esm/FilterDateRange.js

@@ -5,7 +5,7 @@ import { Calendar, allowedDate, useCalendarPopover } from "./DatePicker.js";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { IconChevronDown } from "./icons.js";
-import { cx, trapTab, uid, useMaybeControlled, useMergedRef } from "./internal.js";
+import { cx, touchClass, trapTab, uid, useMaybeControlled, useMergedRef } from "./internal.js";
 import { useAuraLocale } from "./locale.js";
 import { dateText, defaultCalendar, formatDateRange } from "./dates.js";
 const NONE = { start: null, end: null };
@@ -126,7 +126,13 @@ const FilterDateRange = React.forwardRef(
       "div",
       {
         ref: boxRef,
-        className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+        className: cx(
+          "aura-filterselect",
+          pop.open && "is-open",
+          props.disabled && "is-disabled",
+          touchClass(props.touchHeight),
+          props.className
+        )
       },
       /* @__PURE__ */ React.createElement(
         "button",

package/dist/esm/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, devWarnOnce, omit, uid, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
@@ -34,7 +34,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const tabCls = function(on, extra) {
     return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
   };
-  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
+  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React.useState(null);
   items.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];

package/dist/index.d.cts

@@ -812,6 +812,10 @@ export interface TabsProps {
 	/** Link tabs: what the current link is (5.14). `page` (default) for routes; `location` for links to sections of
 	 * this page (`#contacts`). */
 	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. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface NavItem {
 	id: string;
@@ -1157,6 +1161,8 @@ export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.H
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 5.39: a 44px face, as FilterSelect's `touchHeight` (FilterBar's `touchHeight` already reaches it). */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;

package/dist/index.d.ts

@@ -812,6 +812,10 @@ export interface TabsProps {
 	/** Link tabs: what the current link is (5.14). `page` (default) for routes; `location` for links to sections of
 	 * this page (`#contacts`). */
 	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. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface NavItem {
 	id: string;
@@ -1157,6 +1161,8 @@ export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.H
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 5.39: a 44px face, as FilterSelect's `touchHeight` (FilterBar's `touchHeight` already reaches it). */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;

package/dist/styles.css

@@ -756,6 +756,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-tabs__list { display: flex; gap: var(--aura-space-6); box-shadow: inset 0 -1px 0 var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
 .aura-tab {
   position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
+  box-sizing: border-box; /* 5.39: a link tab (<a>) was 2px taller than a button tab — its underline sat outside the height */
   height: var(--aura-input-height); padding: 0;
   border: 0; border-bottom: 2px solid transparent; background: transparent;
   color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
@@ -772,6 +773,10 @@ a.aura-tab { text-decoration: none; }
   font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
 }
 .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); } }
 .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

@@ -758,6 +758,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-tabs__list { display: flex; gap: var(--aura-space-6); box-shadow: inset 0 -1px 0 var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
 .aura-tab {
   position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
+  box-sizing: border-box; /* 5.39: a link tab (<a>) was 2px taller than a button tab — its underline sat outside the height */
   height: var(--aura-input-height); padding: 0;
   border: 0; border-bottom: 2px solid transparent; background: transparent;
   color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
@@ -774,6 +775,10 @@ a.aura-tab { text-decoration: none; }
   font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
 }
 .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); } }
 .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.38.0",
+  "version": "5.39.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",