@jirawatpyk/aura-react 5.39.0 → 5.41.0

package/README.md

@@ -186,6 +186,21 @@ 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.41 — DxT Monitor requests 19–22
+
+- **No menu button on a page with a back arrow** (request 19): put `data-aura-hide-menubutton` on any element of the page (as with `data-aura-hide-bottomnav`) and AppShell's phone bar drops its menu button, giving the title its room (a shell with no `header` then has no bar on phones). The drawer stays reachable from pages without the mark. A browser without `:has()` keeps the button.
+- **PageHeader `titleHideBelow`** (request 20): `'sm' | 'md' | 'lg'` — below that width the title is visually hidden but stays the page's heading for screen readers, and the breadcrumb and eyebrow are hidden; the meta line then starts the header, or the actions when there is no meta (with neither, the header takes no room). For phone layouts that show the title in the top bar. Stateless, `/server` too.
+- **Menu links that open a new tab say so** (request 21): a Menu or DropdownMenu item with `href` and `target="_blank"` is named "Visit site (opens in a new tab)" — the words are visually hidden, after the label, in the locale's language (`opensInNewTab` in the strings: เปิดในแท็บใหม่, öppnas i en ny flik). A custom `strings` pack without the key falls back to the built-in words. Other links you give a `target` (Breadcrumb, Tabs, DataTable rows) don't add it yet; give their label the words yourself.
+- **Menu triggers look open while their menu shows** (request 22): an IconButton, secondary or ghost Button with `aria-haspopup` and `aria-expanded="true"` (DropdownMenu, Popover and Dialog triggers) keeps its hover fill. A disclosure button of your own (`aria-expanded` without `aria-haspopup`) keeps its plain look.
+
+## 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.

package/dist/aura.bundle.js

@@ -950,6 +950,7 @@ window.Aura = (() => {
     statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
     statusOk: "\u0E1B\u0E01\u0E15\u0E34",
     statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
+    opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
     accepts: function(list, max) {
       return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
     }
@@ -1086,6 +1087,7 @@ window.Aura = (() => {
     statusMaintenance: "Underh\xE5ll",
     statusOk: "OK",
     statusUnknown: "Ingen data",
+    opensInNewTab: "\xF6ppnas i en ny flik",
     accepts: function(list, max) {
       return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
     }
@@ -1223,6 +1225,7 @@ window.Aura = (() => {
       statusMaintenance: "Maintenance",
       statusOk: "OK",
       statusUnknown: "No data",
+      opensInNewTab: "opens in a new tab",
       accepts: function(list, max) {
         return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
       }
@@ -1624,6 +1627,7 @@ window.Aura = (() => {
     const headerId = uid(), itemId = uid();
     const hasHeader = props.header != null && props.header !== false && props.header !== "";
     const Link = useLinkComponent(props.linkComponent);
+    const t = useStrings();
     function place2() {
       const a = props.anchor, m = own.current;
       if (!a || !m) return;
@@ -1750,6 +1754,8 @@ window.Aura = (() => {
       if (reasonId)
         body[2] = /* Hidden from the name (it would be read twice); aria-describedby still reads it. */
         /* @__PURE__ */ React9.createElement("span", { key: "h", id: reasonId, className: "aura-menu__hint aura-menu__reason", "aria-hidden": true }, it.disabledReason);
+      if (it.href && !it.disabled && it.target === "_blank")
+        body[1] = /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label, /* @__PURE__ */ React9.createElement("span", { className: "aura-sr-only" }, " (" + t.opensInNewTab + ")"));
       if (it.href && !it.disabled)
         return /* @__PURE__ */ React9.createElement(
           Link,
@@ -7698,6 +7704,8 @@ window.Aura = (() => {
     });
     const level = props.headingLevel || 1;
     const below2 = props.actionsFullWidthBelow;
+    const hide2 = props.titleHideBelow;
+    const hasMeta = props.meta != null && props.meta !== false;
     return h8(
       "div",
       Object.assign(attrs2, {
@@ -7705,6 +7713,8 @@ window.Aura = (() => {
         className: cx(
           "aura-page-header",
           (below2 === "sm" || below2 === "md" || below2 === "lg") && "aura-page-header--actions-full-below-" + below2,
+          (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && "aura-page-header--title-hide-below-" + hide2,
+          (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && !hasMeta && "has-no-meta",
           props.className
         ),
         style: props.style
@@ -8183,6 +8193,7 @@ window.Aura = (() => {
           className: cx(
             "aura-shell__bar",
             (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only",
+            !props.header && "aura-shell__bar--no-header",
             props.headerHideOnScroll && "aura-shell__bar--hides",
             away && "is-away"
           )

package/dist/cjs/index.cjs

@@ -932,6 +932,7 @@ var th = {
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
+  opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -1068,6 +1069,7 @@ var sv = {
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
   statusUnknown: "Ingen data",
+  opensInNewTab: "\xF6ppnas i en ny flik",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -1205,6 +1207,7 @@ var STRINGS = {
     statusMaintenance: "Maintenance",
     statusOk: "OK",
     statusUnknown: "No data",
+    opensInNewTab: "opens in a new tab",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1606,6 +1609,7 @@ var Menu = React9.forwardRef(function Menu2(props, ref) {
   const headerId = uid(), itemId = uid();
   const hasHeader = props.header != null && props.header !== false && props.header !== "";
   const Link = useLinkComponent(props.linkComponent);
+  const t = useStrings();
   function place2() {
     const a = props.anchor, m = own.current;
     if (!a || !m) return;
@@ -1732,6 +1736,8 @@ var Menu = React9.forwardRef(function Menu2(props, ref) {
     if (reasonId)
       body[2] = /* Hidden from the name (it would be read twice); aria-describedby still reads it. */
       /* @__PURE__ */ React9.createElement("span", { key: "h", id: reasonId, className: "aura-menu__hint aura-menu__reason", "aria-hidden": true }, it.disabledReason);
+    if (it.href && !it.disabled && it.target === "_blank")
+      body[1] = /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label, /* @__PURE__ */ React9.createElement("span", { className: "aura-sr-only" }, " (" + t.opensInNewTab + ")"));
     if (it.href && !it.disabled)
       return /* @__PURE__ */ React9.createElement(
         Link,
@@ -7680,6 +7686,8 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
   });
   const level = props.headingLevel || 1;
   const below2 = props.actionsFullWidthBelow;
+  const hide2 = props.titleHideBelow;
+  const hasMeta = props.meta != null && props.meta !== false;
   return h8(
     "div",
     Object.assign(attrs2, {
@@ -7687,6 +7695,8 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
       className: cx(
         "aura-page-header",
         (below2 === "sm" || below2 === "md" || below2 === "lg") && "aura-page-header--actions-full-below-" + below2,
+        (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && "aura-page-header--title-hide-below-" + hide2,
+        (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && !hasMeta && "has-no-meta",
         props.className
       ),
       style: props.style
@@ -8165,6 +8175,7 @@ var AppShell = React47.forwardRef(function AppShell2(props, ref) {
         className: cx(
           "aura-shell__bar",
           (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only",
+          !props.header && "aura-shell__bar--no-header",
           props.headerHideOnScroll && "aura-shell__bar--hides",
           away && "is-away"
         )

package/dist/esm/AppShell.js

@@ -116,6 +116,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
         className: cx(
           "aura-shell__bar",
           (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only",
+          !props.header && "aura-shell__bar--no-header",
           props.headerHideOnScroll && "aura-shell__bar--hides",
           away && "is-away"
         )

package/dist/esm/Menu.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { cx, uid, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
-import { useLinkComponent } from "./locale.js";
+import { useLinkComponent, useStrings } from "./locale.js";
 import { IconCheck } from "./icons.js";
 const ITEMS = '[role^="menuitem"]';
 function makesBlock(s) {
@@ -48,6 +48,7 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
   const headerId = uid(), itemId = uid();
   const hasHeader = props.header != null && props.header !== false && props.header !== "";
   const Link = useLinkComponent(props.linkComponent);
+  const t = useStrings();
   function place() {
     const a = props.anchor, m = own.current;
     if (!a || !m) return;
@@ -174,6 +175,8 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     if (reasonId)
       body[2] = /* Hidden from the name (it would be read twice); aria-describedby still reads it. */
       /* @__PURE__ */ React.createElement("span", { key: "h", id: reasonId, className: "aura-menu__hint aura-menu__reason", "aria-hidden": true }, it.disabledReason);
+    if (it.href && !it.disabled && it.target === "_blank")
+      body[1] = /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-menu__label" }, it.label, /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, " (" + t.opensInNewTab + ")"));
     if (it.href && !it.disabled)
       return /* @__PURE__ */ React.createElement(
         Link,

package/dist/esm/PageHeader.js

@@ -10,6 +10,8 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   });
   const level = props.headingLevel || 1;
   const below = props.actionsFullWidthBelow;
+  const hide = props.titleHideBelow;
+  const hasMeta = props.meta != null && props.meta !== false;
   return h(
     "div",
     Object.assign(attrs, {
@@ -17,6 +19,8 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
       className: cx(
         "aura-page-header",
         (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        (hide === "sm" || hide === "md" || hide === "lg") && "aura-page-header--title-hide-below-" + hide,
+        (hide === "sm" || hide === "md" || hide === "lg") && !hasMeta && "has-no-meta",
         props.className
       ),
       style: props.style

package/dist/esm/strings.js

@@ -132,6 +132,7 @@ const STRINGS = {
     statusMaintenance: "Maintenance",
     statusOk: "OK",
     statusUnknown: "No data",
+    opensInNewTab: "opens in a new tab",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }

package/dist/esm/strings.sv.js

@@ -128,6 +128,7 @@ const sv = {
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
   statusUnknown: "Ingen data",
+  opensInNewTab: "\xF6ppnas i en ny flik",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/esm/strings.th.js

@@ -128,6 +128,7 @@ const th = {
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
+  opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/index.d.cts

@@ -1936,6 +1936,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
 	 * than that, the actions hug their content at the end as before. */
 	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
+	/** 5.41 (DxT Monitor #20): below this breakpoint the title moves out of sight — still the page's heading for screen
+	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
+	 * meta line and actions stay; with no meta, the actions start the header. */
+	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */
@@ -2044,6 +2048,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/index.d.ts

@@ -1936,6 +1936,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
 	 * than that, the actions hug their content at the end as before. */
 	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
+	/** 5.41 (DxT Monitor #20): below this breakpoint the title moves out of sight — still the page's heading for screen
+	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
+	 * meta line and actions stay; with no meta, the actions start the header. */
+	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */
@@ -2044,6 +2048,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.cjs

@@ -153,6 +153,7 @@ var sv = {
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
   statusUnknown: "Ingen data",
+  opensInNewTab: "\xF6ppnas i en ny flik",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/locales/sv.d.cts

@@ -96,6 +96,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.d.ts

@@ -96,6 +96,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.cjs

@@ -153,6 +153,7 @@ var th = {
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
+  opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/locales/th.d.cts

@@ -96,6 +96,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.d.ts

@@ -96,6 +96,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/server/index.cjs

@@ -342,6 +342,7 @@ var th = {
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
+  opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -478,6 +479,7 @@ var sv = {
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
   statusUnknown: "Ingen data",
+  opensInNewTab: "\xF6ppnas i en ny flik",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -615,6 +617,7 @@ var STRINGS = {
     statusMaintenance: "Maintenance",
     statusOk: "OK",
     statusUnknown: "No data",
+    opensInNewTab: "opens in a new tab",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1426,6 +1429,8 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   });
   const level = props.headingLevel || 1;
   const below = props.actionsFullWidthBelow;
+  const hide = props.titleHideBelow;
+  const hasMeta = props.meta != null && props.meta !== false;
   return h4(
     "div",
     Object.assign(attrs2, {
@@ -1433,6 +1438,8 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       className: cx(
         "aura-page-header",
         (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        (hide === "sm" || hide === "md" || hide === "lg") && "aura-page-header--title-hide-below-" + hide,
+        (hide === "sm" || hide === "md" || hide === "lg") && !hasMeta && "has-no-meta",
         props.className
       ),
       style: props.style

package/dist/server/index.d.cts

@@ -383,6 +383,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
@@ -501,6 +503,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
 	 * than that, the actions hug their content at the end as before. */
 	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
+	/** 5.41 (DxT Monitor #20): below this breakpoint the title moves out of sight — still the page's heading for screen
+	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
+	 * meta line and actions stay; with no meta, the actions start the header. */
+	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.d.ts

@@ -383,6 +383,8 @@ export interface AuraStrings {
 	statusOk: string;
 	/** StatusTile `unknown` (5.35). */
 	statusUnknown: string;
+	/** Read after a Menu link item with `target="_blank"` (5.41): "Visit site (opens in a new tab)". */
+	opensInNewTab: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
@@ -501,6 +503,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * Tooltip or Popover too; IconButtons keep their size) — a single Button or your own grid spans the row. Wider
 	 * than that, the actions hug their content at the end as before. */
 	actionsFullWidthBelow?: "sm" | "md" | "lg" | undefined;
+	/** 5.41 (DxT Monitor #20): below this breakpoint the title moves out of sight — still the page's heading for screen
+	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
+	 * meta line and actions stay; with no meta, the actions start the header. */
+	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.js

@@ -278,6 +278,7 @@ var th = {
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
+  opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -414,6 +415,7 @@ var sv = {
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
   statusUnknown: "Ingen data",
+  opensInNewTab: "\xF6ppnas i en ny flik",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -551,6 +553,7 @@ var STRINGS = {
     statusMaintenance: "Maintenance",
     statusOk: "OK",
     statusUnknown: "No data",
+    opensInNewTab: "opens in a new tab",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1362,6 +1365,8 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   });
   const level = props.headingLevel || 1;
   const below = props.actionsFullWidthBelow;
+  const hide = props.titleHideBelow;
+  const hasMeta = props.meta != null && props.meta !== false;
   return h4(
     "div",
     Object.assign(attrs2, {
@@ -1369,6 +1374,8 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       className: cx(
         "aura-page-header",
         (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
+        (hide === "sm" || hide === "md" || hide === "lg") && "aura-page-header--title-hide-below-" + hide,
+        (hide === "sm" || hide === "md" || hide === "lg") && !hasMeta && "has-no-meta",
         props.className
       ),
       style: props.style