@jirawatpyk/aura-react 5.40.0 → 5.41.0

package/README.md

@@ -186,6 +186,13 @@ 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.

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

package/dist/styles.css

@@ -70,10 +70,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-btn--primary:hover { background: var(--aura-button-primary-bg-hover); }
 
 .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
-.aura-btn--secondary:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--secondary:hover, .aura-btn--secondary[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
 .aura-btn--ghost { color: var(--aura-fg-primary); }
-.aura-btn--ghost:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--ghost:hover, .aura-btn--ghost[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
  * ::after grows the hit area to 44px, as IconButton does. */
 .aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
@@ -344,7 +344,7 @@ a.aura-icon-btn { text-decoration: none; }
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary);
   cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-icon-btn:hover, .aura-icon-btn[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); } /* 5.41 (DxT #22): looks open while its menu shows */
 .aura-icon-btn--danger { color: var(--aura-fg-danger); }
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
@@ -1124,6 +1124,9 @@ a.aura-tab { text-decoration: none; }
   .aura-shell__bar--menu-only { display: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
+/* 5.41 (DxT Monitor #19): a page with its own back arrow marks itself with data-aura-hide-menubutton (on any element)
+ * and the bar drops the menu button, as BottomNav does for data-aura-hide-bottomnav. */
+:root:has([data-aura-hide-menubutton]) :is(.aura-shell__menu, .aura-shell__bar--no-header) { display: none; } /* with no header the bar would be empty */
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
 /* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
 .aura-shell__content:focus { outline: none; }
@@ -1144,6 +1147,20 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.41 (DxT Monitor #20): titleHideBelow — the title is visually hidden (still the heading), the breadcrumb and eyebrow
+ * are gone; with no meta line the text block takes no room, so the actions start the header. */
+@media (max-width: 639.98px) {
+  .aura-page-header--title-hide-below-sm .aura-page-header__title, .aura-page-header--title-hide-below-sm.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-sm :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--title-hide-below-md .aura-page-header__title, .aura-page-header--title-hide-below-md.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-md :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--title-hide-below-lg .aura-page-header__title, .aura-page-header--title-hide-below-lg.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-lg :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
 /* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
  * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
  * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */

package/dist/styles.layer.css

@@ -72,10 +72,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-btn--primary:hover { background: var(--aura-button-primary-bg-hover); }
 
 .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
-.aura-btn--secondary:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--secondary:hover, .aura-btn--secondary[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
 .aura-btn--ghost { color: var(--aura-fg-primary); }
-.aura-btn--ghost:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--ghost:hover, .aura-btn--ghost[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
  * ::after grows the hit area to 44px, as IconButton does. */
 .aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
@@ -346,7 +346,7 @@ a.aura-icon-btn { text-decoration: none; }
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary);
   cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-icon-btn:hover, .aura-icon-btn[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); } /* 5.41 (DxT #22): looks open while its menu shows */
 .aura-icon-btn--danger { color: var(--aura-fg-danger); }
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
@@ -1126,6 +1126,9 @@ a.aura-tab { text-decoration: none; }
   .aura-shell__bar--menu-only { display: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
+/* 5.41 (DxT Monitor #19): a page with its own back arrow marks itself with data-aura-hide-menubutton (on any element)
+ * and the bar drops the menu button, as BottomNav does for data-aura-hide-bottomnav. */
+:root:has([data-aura-hide-menubutton]) :is(.aura-shell__menu, .aura-shell__bar--no-header) { display: none; } /* with no header the bar would be empty */
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
 /* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
 .aura-shell__content:focus { outline: none; }
@@ -1146,6 +1149,20 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.41 (DxT Monitor #20): titleHideBelow — the title is visually hidden (still the heading), the breadcrumb and eyebrow
+ * are gone; with no meta line the text block takes no room, so the actions start the header. */
+@media (max-width: 639.98px) {
+  .aura-page-header--title-hide-below-sm .aura-page-header__title, .aura-page-header--title-hide-below-sm.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-sm :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--title-hide-below-md .aura-page-header__title, .aura-page-header--title-hide-below-md.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-md :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--title-hide-below-lg .aura-page-header__title, .aura-page-header--title-hide-below-lg.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-lg :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
 /* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
  * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
  * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */

package/package.json

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