@jirawatpyk/aura-react 5.32.0 → 5.33.0

package/README.md

@@ -186,6 +186,14 @@ 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.33 — DxT Monitor requests 5–8
+
+- **Hover shows on the canvas** (request 5): in light, `aura-bg-surface-hover` is zinc-50 — the canvas itself — so SideNav's rows, an IconButton or ghost Button in its header or footer (Sign out), and the same on the page's canvas (PageHeader actions, Pagination, a selectable Tag) showed no hover. A new token, `aura-bg-canvas-hover` (zinc-100 light, zinc-800 dark), is the hover inside AppShell and SideNav; cards, tables, inputs, the top bar, dialogs, drawers and popovers inside them keep `aura-bg-surface-hover`. Hover fills now read `--aura-hover`, falling back to the surface hover: outside AppShell, set `--aura-hover: var(--aura-bg-canvas-hover)` on your own canvas-coloured area.
+- **AppShell `headerHideFrom="lg"`** (request 6): the top bar, `header` and all, shows only below 1024px — where the menu button is — as a header-less bar does: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone pages draw a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width.
+- **PageHeader `breadcrumb`** (request 7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` — a `nav` can't sit in the eyebrow's `p` (invalid HTML, a hydration error) — with Breadcrumb's own 13px sans. With an eyebrow too, the breadcrumb comes first.
+- **Phone drawer header = bar height** (request 8): in AppShell's phone drawer, a SideNav with `headerDivider` takes the top bar's height (56px, or more when the bar's header wraps), content centred, so its line meets the bar's line beside it; the close button is centred on it. The fixed desktop sidebar keeps 72px.
+- **Also:** the nav drawer's close button is a 44px target on phones and touch screens (the header leaves it 60px); the divided header's layout no longer needs `:has()` (older Safari and Firefox centre the close button too); a DatePicker's or read-only Select's toggle shows its hover on the grey read-only ground.
+
 ## 5.32 — Icon tips, PageHeader, SideNav header divider, pill skeletons (DxT Monitor requests 1–4)
 
 ### DxT Monitor requests 1, 3, 4

package/dist/aura.bundle.js

@@ -7637,6 +7637,7 @@ window.Aura = (() => {
       h8(
         "div",
         { className: "aura-page-header__text" },
+        props.breadcrumb != null && props.breadcrumb !== false ? h8("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
         props.eyebrow != null && props.eyebrow !== false ? h8("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
         h8("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
         props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
@@ -7669,12 +7670,15 @@ window.Aura = (() => {
     const barRef = React44.useRef(null);
     const mergedRef = useMergedRef(ref, rootRef);
     const hasBar = !!(props.header || props.nav);
+    const barH = React44.useState(null);
     useIsoLayoutEffect(
       function() {
         const root = rootRef.current, bar = barRef.current;
         if (!root || !bar) return;
         function sync() {
-          root.style.setProperty("--aura-shell-bar-height", bar.getBoundingClientRect().height + "px");
+          const h10 = bar.getBoundingClientRect().height;
+          root.style.setProperty("--aura-shell-bar-height", h10 + "px");
+          if (h10 > 0) barH[1](Math.round(h10));
         }
         sync();
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
@@ -7712,6 +7716,8 @@ window.Aura = (() => {
           /* 5.14: no top bar at all, or one that only holds the menu button (gone from lg up): the bar-height token is 0. */
           !props.header && !props.nav && "aura-shell--no-bar",
           !props.header && props.nav && "aura-shell--menu-bar",
+          /* 5.33 (DxT Monitor #6): a header bar for phones only. */
+          props.header && props.headerHideFrom === "lg" && "aura-shell--menu-bar",
           props.className
         )
       },
@@ -7726,23 +7732,37 @@ window.Aura = (() => {
           side: "left",
           size: "nav",
           "aria-label": props.navLabel || t.navigation,
-          dismissible: true
+          dismissible: true,
+          closeProps: { touchHeight: true },
+          className: navEl && navEl.props.headerDivider && navEl.props.header ? "aura-drawer--nav-divided" : void 0,
+          style: barH[0] ? { "--aura-shell-bar-height": barH[0] + "px" } : void 0
         },
         drawerNav
       ) : null,
-      /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React44.createElement("header", { ref: barRef, className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React44.createElement(
-        IconButton,
+      /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React44.createElement(
+        "header",
         {
-          className: "aura-shell__menu",
-          icon: /* @__PURE__ */ React44.createElement(IconMenu, null),
-          label: props.menuLabel || t.openNav,
-          size: "md",
-          onClick: function() {
-            setOpen(true);
-          },
-          "aria-expanded": open
-        }
-      ) : null, /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React44.createElement(
+          ref: barRef,
+          className: cx(
+            "aura-shell__bar",
+            (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only"
+          )
+        },
+        props.nav ? /* @__PURE__ */ React44.createElement(
+          IconButton,
+          {
+            className: "aura-shell__menu",
+            icon: /* @__PURE__ */ React44.createElement(IconMenu, null),
+            label: props.menuLabel || t.openNav,
+            size: "md",
+            onClick: function() {
+              setOpen(true);
+            },
+            "aria-expanded": open
+          }
+        ) : null,
+        /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+      ) : null, /* @__PURE__ */ React44.createElement(
         "main",
         {
           className: cx("aura-shell__content", props.contentPadding === false && "is-flush"),

package/dist/cjs/index.cjs

@@ -7619,6 +7619,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
     h8(
       "div",
       { className: "aura-page-header__text" },
+      props.breadcrumb != null && props.breadcrumb !== false ? h8("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
       props.eyebrow != null && props.eyebrow !== false ? h8("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
       h8("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
       props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
@@ -7651,12 +7652,15 @@ var AppShell = React44.forwardRef(function AppShell2(props, ref) {
   const barRef = React44.useRef(null);
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
+  const barH = React44.useState(null);
   useIsoLayoutEffect(
     function() {
       const root = rootRef.current, bar = barRef.current;
       if (!root || !bar) return;
       function sync() {
-        root.style.setProperty("--aura-shell-bar-height", bar.getBoundingClientRect().height + "px");
+        const h10 = bar.getBoundingClientRect().height;
+        root.style.setProperty("--aura-shell-bar-height", h10 + "px");
+        if (h10 > 0) barH[1](Math.round(h10));
       }
       sync();
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
@@ -7694,6 +7698,8 @@ var AppShell = React44.forwardRef(function AppShell2(props, ref) {
         /* 5.14: no top bar at all, or one that only holds the menu button (gone from lg up): the bar-height token is 0. */
         !props.header && !props.nav && "aura-shell--no-bar",
         !props.header && props.nav && "aura-shell--menu-bar",
+        /* 5.33 (DxT Monitor #6): a header bar for phones only. */
+        props.header && props.headerHideFrom === "lg" && "aura-shell--menu-bar",
         props.className
       )
     },
@@ -7708,23 +7714,37 @@ var AppShell = React44.forwardRef(function AppShell2(props, ref) {
         side: "left",
         size: "nav",
         "aria-label": props.navLabel || t.navigation,
-        dismissible: true
+        dismissible: true,
+        closeProps: { touchHeight: true },
+        className: navEl && navEl.props.headerDivider && navEl.props.header ? "aura-drawer--nav-divided" : void 0,
+        style: barH[0] ? { "--aura-shell-bar-height": barH[0] + "px" } : void 0
       },
       drawerNav
     ) : null,
-    /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React44.createElement("header", { ref: barRef, className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React44.createElement(
-      IconButton,
+    /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React44.createElement(
+      "header",
       {
-        className: "aura-shell__menu",
-        icon: /* @__PURE__ */ React44.createElement(IconMenu, null),
-        label: props.menuLabel || t.openNav,
-        size: "md",
-        onClick: function() {
-          setOpen(true);
-        },
-        "aria-expanded": open
-      }
-    ) : null, /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React44.createElement(
+        ref: barRef,
+        className: cx(
+          "aura-shell__bar",
+          (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only"
+        )
+      },
+      props.nav ? /* @__PURE__ */ React44.createElement(
+        IconButton,
+        {
+          className: "aura-shell__menu",
+          icon: /* @__PURE__ */ React44.createElement(IconMenu, null),
+          label: props.menuLabel || t.openNav,
+          size: "md",
+          onClick: function() {
+            setOpen(true);
+          },
+          "aria-expanded": open
+        }
+      ) : null,
+      /* @__PURE__ */ React44.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+    ) : null, /* @__PURE__ */ React44.createElement(
       "main",
       {
         className: cx("aura-shell__content", props.contentPadding === false && "is-flush"),

package/dist/esm/AppShell.js

@@ -28,12 +28,15 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const barRef = React.useRef(null);
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
+  const barH = React.useState(null);
   useIsoLayoutEffect(
     function() {
       const root = rootRef.current, bar = barRef.current;
       if (!root || !bar) return;
       function sync() {
-        root.style.setProperty("--aura-shell-bar-height", bar.getBoundingClientRect().height + "px");
+        const h = bar.getBoundingClientRect().height;
+        root.style.setProperty("--aura-shell-bar-height", h + "px");
+        if (h > 0) barH[1](Math.round(h));
       }
       sync();
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
@@ -71,6 +74,8 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
         /* 5.14: no top bar at all, or one that only holds the menu button (gone from lg up): the bar-height token is 0. */
         !props.header && !props.nav && "aura-shell--no-bar",
         !props.header && props.nav && "aura-shell--menu-bar",
+        /* 5.33 (DxT Monitor #6): a header bar for phones only. */
+        props.header && props.headerHideFrom === "lg" && "aura-shell--menu-bar",
         props.className
       )
     },
@@ -85,23 +90,37 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
         side: "left",
         size: "nav",
         "aria-label": props.navLabel || t.navigation,
-        dismissible: true
+        dismissible: true,
+        closeProps: { touchHeight: true },
+        className: navEl && navEl.props.headerDivider && navEl.props.header ? "aura-drawer--nav-divided" : void 0,
+        style: barH[0] ? { "--aura-shell-bar-height": barH[0] + "px" } : void 0
       },
       drawerNav
     ) : null,
-    /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React.createElement("header", { ref: barRef, className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React.createElement(
-      IconButton,
+    /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React.createElement(
+      "header",
       {
-        className: "aura-shell__menu",
-        icon: /* @__PURE__ */ React.createElement(IconMenu, null),
-        label: props.menuLabel || t.openNav,
-        size: "md",
-        onClick: function() {
-          setOpen(true);
-        },
-        "aria-expanded": open
-      }
-    ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement(
+        ref: barRef,
+        className: cx(
+          "aura-shell__bar",
+          (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only"
+        )
+      },
+      props.nav ? /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          className: "aura-shell__menu",
+          icon: /* @__PURE__ */ React.createElement(IconMenu, null),
+          label: props.menuLabel || t.openNav,
+          size: "md",
+          onClick: function() {
+            setOpen(true);
+          },
+          "aria-expanded": open
+        }
+      ) : null,
+      /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+    ) : null, /* @__PURE__ */ React.createElement(
       "main",
       {
         className: cx("aura-shell__content", props.contentPadding === false && "is-flush"),

package/dist/esm/PageHeader.js

@@ -15,6 +15,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
     h(
       "div",
       { className: "aura-page-header__text" },
+      props.breadcrumb != null && props.breadcrumb !== false ? h("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
       props.eyebrow != null && props.eyebrow !== false ? h("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
       h("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
       props.meta != null && props.meta !== false ? h("div", { className: "aura-page-header__meta" }, props.meta) : null

package/dist/index.d.cts

@@ -1210,6 +1210,10 @@ export interface AppShellProps {
 	nav?: React$1.ReactElement | undefined;
 	/** Top bar content (title, search, account menu). */
 	header?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #6): `'lg'` shows the top bar, `header` and all, only below 1024px — where the menu button is —
+	 * as when there is no `header`: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone
+	 * pages have a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width. */
+	headerHideFrom?: "lg" | undefined;
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
@@ -1802,6 +1806,10 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
 	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
 	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
 	/** A line under the title — counts, last update, owner. */

package/dist/index.d.ts

@@ -1210,6 +1210,10 @@ export interface AppShellProps {
 	nav?: React$1.ReactElement | undefined;
 	/** Top bar content (title, search, account menu). */
 	header?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #6): `'lg'` shows the top bar, `header` and all, only below 1024px — where the menu button is —
+	 * as when there is no `header`: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone
+	 * pages have a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width. */
+	headerHideFrom?: "lg" | undefined;
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
@@ -1802,6 +1806,10 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
 	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
 	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
 	/** A line under the title — counts, last update, owner. */

package/dist/server/index.cjs

@@ -1393,6 +1393,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
     h4(
       "div",
       { className: "aura-page-header__text" },
+      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
       props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
       h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
       props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null

package/dist/server/index.d.cts

@@ -412,6 +412,10 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
 	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
 	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
 	/** A line under the title — counts, last update, owner. */

package/dist/server/index.d.ts

@@ -412,6 +412,10 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
 	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
 	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
 	/** A line under the title — counts, last update, owner. */

package/dist/server/index.js

@@ -1332,6 +1332,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
     h4(
       "div",
       { className: "aura-page-header__text" },
+      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
       props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
       h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
       props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null

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-bg-surface-hover); }
+.aura-btn--secondary:hover { 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-bg-surface-hover); }
+.aura-btn--ghost:hover { 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; }
@@ -128,7 +128,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   font-size: 13px;
 }
 .aura-table__row:last-child { border-bottom: 0; }
-.aura-table__row:hover { background: var(--aura-bg-surface-hover); }
+.aura-table__row:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-table__row.is-actionable { cursor: pointer; }
 .aura-table__row--skeleton:hover { background: var(--aura-bg-surface); }
 .aura-table__row--skeleton .aura-table__td { display: flex; align-items: center; }
@@ -236,7 +236,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 }
 .aura-table__th:hover .aura-table__menu-btn, .aura-table__th:focus-within .aura-table__menu-btn,
 .aura-table__th:focus .aura-table__menu-btn, .aura-table__menu-btn[aria-expanded="true"] { opacity: 1; }
-.aura-table__menu-btn:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-table__menu-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 @media (hover: none) { .aura-table__menu-btn { opacity: 1; } }
 
 /* Drag to reorder */
@@ -273,7 +273,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   border: 0; border-radius: var(--aura-radius-sm); background: transparent;
   color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
 }
-.aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-bg-surface-hover); outline: none; }
+.aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: none; }
 .aura-menu__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 /* 5.10: a disabled item is dimmed but focusable; its reason stays at full strength (it is the information). */
@@ -328,7 +328,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-bg-surface-hover); }
+.aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .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; }
@@ -507,7 +507,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
-.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
+.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); } /* 5.33: a DatePicker's toggle shows its hover on the grey ground */
 /* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
 .aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
 
@@ -530,7 +530,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
 /* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
  * open), no pointer; the value keeps full contrast. */
-.aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
+.aura-select.is-readonly { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); }
 .aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
@@ -644,7 +644,7 @@ a.aura-icon-btn { text-decoration: none; }
   .aura-toast__action::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
   .aura-toast__text a { padding-block: 2px; }
 }
-.aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
+.aura-toast__action:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
 .aura-toast__close { margin-top: -6px; margin-bottom: -6px; }
 
@@ -784,7 +784,17 @@ a.aura-tab { text-decoration: none; }
   text-decoration: none; text-align: left; cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-nav__item:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-nav__item:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
+/* 5.33 (DxT Monitor #5): hover fills read --aura-hover, else aura-bg-surface-hover. On the canvas — AppShell, which
+ * is canvas, and SideNav — the surface hover (zinc-50 in light, the canvas itself) didn't show, so there it is
+ * aura-bg-canvas-hover; white surfaces inside set it back. A :root override of aura-bg-surface-hover still applies
+ * on surfaces; override aura-bg-canvas-hover for the canvas. */
+.aura-shell, .aura-nav { --aura-hover: var(--aura-bg-canvas-hover); }
+.aura-card, .aura-surface, .aura-stat, .aura-tbl-wrap, .aura-table, .aura-shell__bar, .aura-bottomnav, .aura-actionbar,
+.aura-input, .aura-upload, .aura-upload__list, .aura-tag, .aura-dialog, .aura-drawer, .aura-popover, .aura-combo__popover,
+.aura-cal__popover, .aura-menu, .aura-toast, .aura-command { --aura-hover: var(--aura-bg-surface-hover); }
+/* Canvas-coloured bands inside those surfaces: SideNav in the drawer, the DataTable header, picker corner and totals. */
+.aura-drawer .aura-nav, .aura-table__head, .aura-table__picker, .aura-table__total { --aura-hover: var(--aura-bg-canvas-hover); }
 .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
@@ -896,7 +906,7 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-combo__toggle { right: 6px; }
 .aura-combo__clear { right: calc(6px + var(--aura-control-sm) - 4px); }
-.aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 .aura-combo__toggle .aura-icon { transition: transform var(--aura-duration-fast) var(--aura-ease); }
 .aura-combo.is-open .aura-combo__toggle .aura-icon { transform: rotate(180deg); }
 .aura-date__toggle:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -912,7 +922,7 @@ a.aura-tab { text-decoration: none; }
   border-radius: var(--aura-radius-sm); cursor: pointer;
 }
 .aura-combo__option > .aura-icon { color: var(--aura-fg-secondary); }
-.aura-combo__option.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+.aura-combo__option.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-combo__option.is-selected { font-weight: 500; }
 .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -945,7 +955,7 @@ a.aura-tab { text-decoration: none; }
   border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
   font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
 }
-.aura-cal__title:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__title:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__title:focus-visible, .aura-cal__link:focus-visible, .aura-cal__year:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
 .aura-cal__grid { border-collapse: separate; border-spacing: 0 2px; width: 100%; }
 .aura-cal__grid th { height: 28px; padding: 0; font-size: 12px; font-weight: 500; color: var(--aura-fg-secondary); }
@@ -954,7 +964,7 @@ a.aura-tab { text-decoration: none; }
   width: var(--aura-cal-cell); height: var(--aura-cal-cell); padding: 0; border: 0; border-radius: var(--aura-radius-full);
   background: transparent; color: var(--aura-fg-primary); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
 }
-.aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__day:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
 .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
 .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
@@ -969,14 +979,14 @@ a.aura-tab { text-decoration: none; }
   height: 40px; border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
   font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
 }
-.aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__year:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-cal__foot { display: flex; justify-content: space-between; margin-top: var(--aura-space-2); padding-top: var(--aura-space-2); border-top: 1px solid var(--aura-border-subtle); }
 .aura-cal__link {
   height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
   background: transparent; color: var(--aura-fg-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
 }
-.aura-cal__link:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__link:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__link:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
 
 /* ---------- Drawer ---------- */
@@ -1008,6 +1018,12 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
 /* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
 .aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
+/* 5.33: the drawer's close button is 44px on phones and touch screens (touchHeight), so the header leaves 60px. */
+@media (max-width: 639.98px), (pointer: coarse) { .aura-drawer--nav .aura-nav__header { padding-inline-end: 60px; } }
+/* 5.33 (DxT Monitor #8): in the phone drawer a divided header takes the top bar's height (its line meets the bar's
+ * line beside it), its content centred; the close button is centred on it. The desktop sidebar keeps 72px. */
+.aura-drawer--nav .aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: var(--aura-shell-bar-height, 56px); padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
+.aura-drawer--nav-divided .aura-drawer__head { top: 0; height: var(--aura-shell-bar-height, 56px); } /* a class from AppShell, not :has(), so older browsers centre it too */
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
@@ -1093,6 +1109,7 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
 .aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.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: 13px; 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); }
 @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
@@ -1216,7 +1233,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 }
 .aura-tag__text { overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
 .aura-tag.is-selectable { cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease); }
-.aura-tag.is-selectable:hover { background: var(--aura-bg-surface-hover); }
+.aura-tag.is-selectable:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-tag.is-selected { background: var(--aura-bg-selected); border-color: var(--aura-fg-accent); color: var(--aura-fg-primary); }
 .aura-tag.is-selectable:focus-visible, .aura-tag__remove:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-tag.is-selectable:disabled, .aura-tag.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
@@ -1224,7 +1241,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: -6px; padding: 0; border: 0; border-radius: var(--aura-radius-full);
   background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
 }
-.aura-tag__remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-tag__remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 
 /* ---------- Progress ---------- */
 .aura-progress { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -1277,7 +1294,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--aura-space-2); box-sizing: border-box;
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary); font: inherit; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
 }
-.aura-page:hover { background: var(--aura-bg-surface-hover); }
+.aura-page:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
 .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
@@ -1295,7 +1312,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: flex; align-items: center; gap: var(--aura-space-3); width: 100%; min-height: 48px; padding: var(--aura-space-3) var(--aura-space-1); box-sizing: border-box;
   border: 0; background: transparent; color: var(--aura-fg-primary); font: inherit; text-align: left; cursor: pointer;
 }
-.aura-accordion__heading > button:hover { background: var(--aura-bg-surface-hover); }
+.aura-accordion__heading > button:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-accordion__heading > button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); border-radius: var(--aura-radius-sm); }
 .aura-accordion__heading > button:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-accordion__title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
@@ -1336,7 +1353,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
 }
-.aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-combo__chip-remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 .aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
 
 /* ---------- NumberField ---------- */
@@ -1352,7 +1369,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 }
 .aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
 .aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
-.aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-number__step:hover:not(:disabled) { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 .aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 
 /* ---------- Stepper ---------- */
@@ -1599,7 +1616,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
 }
-.aura-filterbar__clear:hover { background: var(--aura-bg-surface-hover); }
+.aura-filterbar__clear:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-filterbar__clear:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 @media (max-width: 767.98px) {
   .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1684,7 +1701,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-command__heading { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-secondary); }
 .aura-command__item { display: flex; align-items: center; gap: var(--aura-space-3); min-height: 40px; padding: 6px var(--aura-space-2); border-radius: var(--aura-radius-sm); cursor: pointer; font-size: 14px; }
 .aura-command__item > .aura-icon { color: var(--aura-fg-secondary); }
-.aura-command__item.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+.aura-command__item.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-command__item.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-command__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .aura-command__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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-bg-surface-hover); }
+.aura-btn--secondary:hover { 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-bg-surface-hover); }
+.aura-btn--ghost:hover { 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; }
@@ -130,7 +130,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   font-size: 13px;
 }
 .aura-table__row:last-child { border-bottom: 0; }
-.aura-table__row:hover { background: var(--aura-bg-surface-hover); }
+.aura-table__row:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-table__row.is-actionable { cursor: pointer; }
 .aura-table__row--skeleton:hover { background: var(--aura-bg-surface); }
 .aura-table__row--skeleton .aura-table__td { display: flex; align-items: center; }
@@ -238,7 +238,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 }
 .aura-table__th:hover .aura-table__menu-btn, .aura-table__th:focus-within .aura-table__menu-btn,
 .aura-table__th:focus .aura-table__menu-btn, .aura-table__menu-btn[aria-expanded="true"] { opacity: 1; }
-.aura-table__menu-btn:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-table__menu-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 @media (hover: none) { .aura-table__menu-btn { opacity: 1; } }
 
 /* Drag to reorder */
@@ -275,7 +275,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   border: 0; border-radius: var(--aura-radius-sm); background: transparent;
   color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
 }
-.aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-bg-surface-hover); outline: none; }
+.aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: none; }
 .aura-menu__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 /* 5.10: a disabled item is dimmed but focusable; its reason stays at full strength (it is the information). */
@@ -330,7 +330,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-bg-surface-hover); }
+.aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .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; }
@@ -509,7 +509,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
-.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
+.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); } /* 5.33: a DatePicker's toggle shows its hover on the grey ground */
 /* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
 .aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
 
@@ -532,7 +532,7 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
 /* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
  * open), no pointer; the value keeps full contrast. */
-.aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
+.aura-select.is-readonly { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); }
 .aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
@@ -646,7 +646,7 @@ a.aura-icon-btn { text-decoration: none; }
   .aura-toast__action::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
   .aura-toast__text a { padding-block: 2px; }
 }
-.aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
+.aura-toast__action:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
 .aura-toast__close { margin-top: -6px; margin-bottom: -6px; }
 
@@ -786,7 +786,17 @@ a.aura-tab { text-decoration: none; }
   text-decoration: none; text-align: left; cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-nav__item:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-nav__item:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
+/* 5.33 (DxT Monitor #5): hover fills read --aura-hover, else aura-bg-surface-hover. On the canvas — AppShell, which
+ * is canvas, and SideNav — the surface hover (zinc-50 in light, the canvas itself) didn't show, so there it is
+ * aura-bg-canvas-hover; white surfaces inside set it back. A :root override of aura-bg-surface-hover still applies
+ * on surfaces; override aura-bg-canvas-hover for the canvas. */
+.aura-shell, .aura-nav { --aura-hover: var(--aura-bg-canvas-hover); }
+.aura-card, .aura-surface, .aura-stat, .aura-tbl-wrap, .aura-table, .aura-shell__bar, .aura-bottomnav, .aura-actionbar,
+.aura-input, .aura-upload, .aura-upload__list, .aura-tag, .aura-dialog, .aura-drawer, .aura-popover, .aura-combo__popover,
+.aura-cal__popover, .aura-menu, .aura-toast, .aura-command { --aura-hover: var(--aura-bg-surface-hover); }
+/* Canvas-coloured bands inside those surfaces: SideNav in the drawer, the DataTable header, picker corner and totals. */
+.aura-drawer .aura-nav, .aura-table__head, .aura-table__picker, .aura-table__total { --aura-hover: var(--aura-bg-canvas-hover); }
 .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
@@ -898,7 +908,7 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-combo__toggle { right: 6px; }
 .aura-combo__clear { right: calc(6px + var(--aura-control-sm) - 4px); }
-.aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 .aura-combo__toggle .aura-icon { transition: transform var(--aura-duration-fast) var(--aura-ease); }
 .aura-combo.is-open .aura-combo__toggle .aura-icon { transform: rotate(180deg); }
 .aura-date__toggle:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -914,7 +924,7 @@ a.aura-tab { text-decoration: none; }
   border-radius: var(--aura-radius-sm); cursor: pointer;
 }
 .aura-combo__option > .aura-icon { color: var(--aura-fg-secondary); }
-.aura-combo__option.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+.aura-combo__option.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-combo__option.is-selected { font-weight: 500; }
 .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -947,7 +957,7 @@ a.aura-tab { text-decoration: none; }
   border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
   font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
 }
-.aura-cal__title:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__title:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__title:focus-visible, .aura-cal__link:focus-visible, .aura-cal__year:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
 .aura-cal__grid { border-collapse: separate; border-spacing: 0 2px; width: 100%; }
 .aura-cal__grid th { height: 28px; padding: 0; font-size: 12px; font-weight: 500; color: var(--aura-fg-secondary); }
@@ -956,7 +966,7 @@ a.aura-tab { text-decoration: none; }
   width: var(--aura-cal-cell); height: var(--aura-cal-cell); padding: 0; border: 0; border-radius: var(--aura-radius-full);
   background: transparent; color: var(--aura-fg-primary); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
 }
-.aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__day:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
 .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
 .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
@@ -971,14 +981,14 @@ a.aura-tab { text-decoration: none; }
   height: 40px; border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
   font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
 }
-.aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__year:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-cal__foot { display: flex; justify-content: space-between; margin-top: var(--aura-space-2); padding-top: var(--aura-space-2); border-top: 1px solid var(--aura-border-subtle); }
 .aura-cal__link {
   height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
   background: transparent; color: var(--aura-fg-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
 }
-.aura-cal__link:hover { background: var(--aura-bg-surface-hover); }
+.aura-cal__link:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-cal__link:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
 
 /* ---------- Drawer ---------- */
@@ -1010,6 +1020,12 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
 /* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
 .aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
+/* 5.33: the drawer's close button is 44px on phones and touch screens (touchHeight), so the header leaves 60px. */
+@media (max-width: 639.98px), (pointer: coarse) { .aura-drawer--nav .aura-nav__header { padding-inline-end: 60px; } }
+/* 5.33 (DxT Monitor #8): in the phone drawer a divided header takes the top bar's height (its line meets the bar's
+ * line beside it), its content centred; the close button is centred on it. The desktop sidebar keeps 72px. */
+.aura-drawer--nav .aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: var(--aura-shell-bar-height, 56px); padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
+.aura-drawer--nav-divided .aura-drawer__head { top: 0; height: var(--aura-shell-bar-height, 56px); } /* a class from AppShell, not :has(), so older browsers centre it too */
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
@@ -1095,6 +1111,7 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
 .aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.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: 13px; 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); }
 @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
@@ -1218,7 +1235,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 }
 .aura-tag__text { overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
 .aura-tag.is-selectable { cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease); }
-.aura-tag.is-selectable:hover { background: var(--aura-bg-surface-hover); }
+.aura-tag.is-selectable:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-tag.is-selected { background: var(--aura-bg-selected); border-color: var(--aura-fg-accent); color: var(--aura-fg-primary); }
 .aura-tag.is-selectable:focus-visible, .aura-tag__remove:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-tag.is-selectable:disabled, .aura-tag.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
@@ -1226,7 +1243,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: -6px; padding: 0; border: 0; border-radius: var(--aura-radius-full);
   background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
 }
-.aura-tag__remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-tag__remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 
 /* ---------- Progress ---------- */
 .aura-progress { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -1279,7 +1296,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--aura-space-2); box-sizing: border-box;
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary); font: inherit; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
 }
-.aura-page:hover { background: var(--aura-bg-surface-hover); }
+.aura-page:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
 .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
@@ -1297,7 +1314,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: flex; align-items: center; gap: var(--aura-space-3); width: 100%; min-height: 48px; padding: var(--aura-space-3) var(--aura-space-1); box-sizing: border-box;
   border: 0; background: transparent; color: var(--aura-fg-primary); font: inherit; text-align: left; cursor: pointer;
 }
-.aura-accordion__heading > button:hover { background: var(--aura-bg-surface-hover); }
+.aura-accordion__heading > button:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-accordion__heading > button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); border-radius: var(--aura-radius-sm); }
 .aura-accordion__heading > button:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-accordion__title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
@@ -1338,7 +1355,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
 }
-.aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-combo__chip-remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 .aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
 
 /* ---------- NumberField ---------- */
@@ -1354,7 +1371,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 }
 .aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
 .aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
-.aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-number__step:hover:not(:disabled) { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
 .aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 
 /* ---------- Stepper ---------- */
@@ -1601,7 +1618,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
 }
-.aura-filterbar__clear:hover { background: var(--aura-bg-surface-hover); }
+.aura-filterbar__clear:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 .aura-filterbar__clear:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 @media (max-width: 767.98px) {
   .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1686,7 +1703,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-command__heading { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-secondary); }
 .aura-command__item { display: flex; align-items: center; gap: var(--aura-space-3); min-height: 40px; padding: 6px var(--aura-space-2); border-radius: var(--aura-radius-sm); cursor: pointer; font-size: 14px; }
 .aura-command__item > .aura-icon { color: var(--aura-fg-secondary); }
-.aura-command__item.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+.aura-command__item.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-command__item.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-command__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .aura-command__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/package.json

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