@jirawatpyk/aura-react 5.38.0 → 5.40.0

package/README.md

@@ -186,6 +186,20 @@ 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.40 — Chamber-OS addendum 48
+
+- **Type follows the browser's default font size** (#145, WCAG 1.4.4). Every font size and px line height in `styles.css`, the `.aura-text-*` classes and `--aura-input-font-size` is now `max(<px>, <rem>)` — for example `max(13px, .8125rem)`. At the default 16px root nothing changes. When someone raises the browser's default font size (Settings → Font size, not page zoom), AURA's text grows with the app's own: at 32px a card's description, a Switch's description and a table cell are twice the size. Spacing, borders and control heights stay in px; boxes that hold text grow where they already could (fields, cards, rows with `rowHeight="auto"`), and one-line controls keep their height with larger text inside.
+- An app that sets a smaller root (`html { font-size: 62.5% }`) keeps AURA's px sizes as a floor, so nothing gets smaller than before. An app with a fixed larger root (`html { font-size: 18px }`) will see AURA's text grow with it.
+- Boxes with text that had a fixed height now have a minimum instead, so they grow with the text: Badge, the small SegmentedControl option, the calendar's month title (it wraps under the arrows rather than overlapping the weekdays), the DataTable footer (which also wraps the count and the pager) and BottomNav's count. Avatar initials stay in px, sized to their circle; the name is the accessible name.
+- A smaller browser default never makes AURA's text smaller than its px size.
+- A row `Stack` without `wrap` holding buttons or tags can run past a phone's edge at a large default size; give it `wrap`.
+
+## 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;