@jirawatpyk/aura-react 5.31.0 → 5.32.0

package/dist/esm/Accordion.js

@@ -49,7 +49,6 @@ const Accordion = React.forwardRef(function Accordion2(props, ref) {
       {
         type: "button",
         id: bid,
-        "aria-labelledby": it.description ? bid + "-title" : void 0,
         "aria-describedby": it.description ? bid + "-desc" : void 0,
         "aria-expanded": on,
         "aria-controls": pid,
@@ -59,7 +58,7 @@ const Accordion = React.forwardRef(function Accordion2(props, ref) {
         }
       },
       it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
-      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, /* @__PURE__ */ React.createElement("span", { id: it.description ? bid + "-title" : void 0 }, it.title), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc", id: bid + "-desc" }, it.description) : null),
+      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, /* @__PURE__ */ React.createElement("span", { id: it.description ? bid + "-title" : void 0 }, it.title), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc", id: bid + "-desc", "aria-hidden": true }, it.description) : null),
       /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-accordion__chevron" })
     )), /* @__PURE__ */ React.createElement(
       "div",

package/dist/esm/BottomNav.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, plainClick, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, plainClick, useMaybeControlled } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
   const t = useStrings();
@@ -21,13 +21,18 @@ const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
       "aria-label": props.label || t.mainNav
     },
     /* @__PURE__ */ React.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {
+      if (it.ariaLabel && typeof it.label === "string" && it.ariaLabel.toLowerCase().indexOf(it.label.toLowerCase()) < 0)
+        devWarnOnce(
+          "bottomnav-label-" + it.id,
+          'BottomNav: ariaLabel "' + it.ariaLabel + '" should contain the visible label "' + it.label + '" (WCAG 2.5.3).'
+        );
       const on = active === it.id;
       const count = it.count != null && it.count > 0 ? it.count > 99 ? "99+" : String(it.count) : null;
       const suffix = count || it.badge && it.badgeLabel ? " (" + (count || it.badgeLabel) + ")" : "";
       const common = {
         className: cx("aura-bottomnav__item", on && "is-active"),
-        /* 5.7: a full name when the label is shortened; the count / badge words still follow. */
-        "aria-label": it.ariaLabel ? it.ariaLabel + suffix : void 0,
+        /* 5.7: a full name when the label is shortened; the count / badge words still follow. 5.32 (WCAG 2.5.3;
+         * axe 4.14): as content — the full name sr-only, the short label aria-hidden — not aria-label. */
         "aria-current": on ? "page" : void 0,
         onClick: function(e) {
           if (!it.href) e.preventDefault();
@@ -37,7 +42,8 @@ const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
       };
       const inner = [
         /* @__PURE__ */ React.createElement("span", { key: "i", className: "aura-bottomnav__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: it.icon, size: "md" }), count ? /* @__PURE__ */ React.createElement("span", { className: "aura-bottomnav__count", "aria-hidden": "true" }, count) : it.badge ? /* @__PURE__ */ React.createElement("span", { className: "aura-bottomnav__dot", "aria-hidden": "true" }) : null),
-        /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-bottomnav__label" }, it.label),
+        it.ariaLabel ? /* @__PURE__ */ React.createElement("span", { key: "n", className: "aura-sr-only" }, it.ariaLabel + suffix) : null,
+        /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-bottomnav__label", "aria-hidden": it.ariaLabel ? true : void 0 }, it.label),
         suffix && !it.ariaLabel ? /* @__PURE__ */ React.createElement("span", { key: "s", className: "aura-sr-only" }, suffix) : null
       ];
       return /* @__PURE__ */ React.createElement("li", { key: it.id, className: "aura-bottomnav__cell" }, it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));

package/dist/esm/Combobox.js

@@ -234,7 +234,6 @@ const Combobox = React.forwardRef(
           id: optId(i),
           role: "option",
           "data-idx": i,
-          "aria-labelledby": o.description ? optId(i) + "-label" : void 0,
           "aria-describedby": o.description ? optId(i) + "-desc" : void 0,
           "aria-selected": isSel,
           "aria-disabled": blocked || void 0,
@@ -255,7 +254,7 @@ const Combobox = React.forwardRef(
           }
         },
         o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
-        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label", id: o.description ? optId(i) + "-label" : void 0 }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc", id: optId(i) + "-desc" }, o.description) : null),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label", id: o.description ? optId(i) + "-label" : void 0 }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc", id: optId(i) + "-desc", "aria-hidden": true }, o.description) : null),
         isSel ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : null
       );
     }

package/dist/esm/Command.js

@@ -202,7 +202,6 @@ function Command(props) {
                     key: it.id,
                     id: optId(n),
                     role: "option",
-                    "aria-labelledby": it.description ? optId(n) + "-label" + (it.shortcut ? " " + optId(n) + "-kbd" : "") : void 0,
                     "aria-describedby": it.description ? optId(n) + "-desc" : void 0,
                     "aria-selected": n === active,
                     "aria-disabled": it.disabled || void 0,
@@ -222,7 +221,7 @@ function Command(props) {
                     }
                   },
                   it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : null,
-                  /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label", id: it.description ? optId(n) + "-label" : void 0 }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc", id: optId(n) + "-desc" }, it.description) : null),
+                  /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label", id: it.description ? optId(n) + "-label" : void 0 }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc", id: optId(n) + "-desc", "aria-hidden": true }, it.description) : null),
                   it.shortcut ? /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd", id: it.description ? optId(n) + "-kbd" : void 0 }, it.shortcut) : null
                 );
               })

package/dist/esm/FilterDateRange.js

@@ -48,6 +48,7 @@ const FilterDateRange = React.forwardRef(
       choose(a <= iso ? { start: a, end: iso } : { start: iso, end: a });
     }
     const isAny = !v.start || !v.end;
+    const own = props["aria-label"] || void 0;
     const attrs = {};
     Object.keys(props).forEach(function(k) {
       if (k === "style" || /^(aria|data)-/.test(k) && k !== "aria-label")
@@ -136,7 +137,7 @@ const FilterDateRange = React.forwardRef(
           type: "button",
           className: "aura-filterselect__face",
           disabled: props.disabled,
-          "aria-label": props["aria-label"] || props.label + ": " + value,
+          "aria-label": own || void 0,
           "aria-haspopup": "dialog",
           "aria-expanded": pop.open,
           "aria-controls": pop.open ? dialogId : void 0,
@@ -145,8 +146,9 @@ const FilterDateRange = React.forwardRef(
             draft[1](null);
           }
         },
-        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__name" }, props.label),
-        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__value" }, value),
+        own ? null : /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, props.label + ": " + value),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__name", "aria-hidden": own ? void 0 : true }, props.label),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__value", "aria-hidden": own ? void 0 : true }, value),
         /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })
       )
     ), cal);

package/dist/esm/IconButton.js

@@ -2,8 +2,11 @@
 import * as React from "react";
 import { cx, omit } from "./internal.js";
 import { Icon } from "./Icon.js";
+import { useAutoTip } from "./autoTip.js";
 const IconButton = React.forwardRef(function IconButton2(props, ref) {
   const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight"]);
+  useAutoTip();
+  const own = props.title !== void 0;
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -11,7 +14,7 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
       ref,
       type: props.type || "button",
       "aria-label": props.label,
-      title: props.label,
+      "data-aura-tip": own ? void 0 : props.label,
       className: cx(
         "aura-icon-btn",
         props.tone === "danger" && "aura-icon-btn--danger",

package/dist/esm/PageHeader.js

@@ -0,0 +1,27 @@
+'use client';
+import * as React from "react";
+import { cx } from "./classes.js";
+const h = React.createElement;
+const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  const level = props.headingLevel || 1;
+  return h(
+    "div",
+    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    h(
+      "div",
+      { className: "aura-page-header__text" },
+      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
+    ),
+    props.actions != null && props.actions !== false ? h("div", { className: "aura-page-header__actions" }, props.actions) : null
+  );
+});
+export {
+  PageHeader
+};

package/dist/esm/Pagination.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { cx, plainClick, useMaybeControlled } from "./internal.js";
+import { useAutoTip } from "./autoTip.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 import { IconChevronLeft, IconChevronRight } from "./icons.js";
 function pageList(page, count, sib) {
@@ -26,6 +27,7 @@ function pageList(page, count, sib) {
 }
 const Pagination = React.forwardRef(function Pagination2(props, ref) {
   const t = useStrings();
+  useAutoTip();
   const count = Math.max(1, props.pageCount || 1);
   const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
   const page = Math.min(count, Math.max(1, st[0]));
@@ -88,7 +90,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
         rel,
         className: "aura-icon-btn",
         "aria-label": label,
-        title: label,
+        "data-aura-tip": label,
         onClick: function(e) {
           if (props.onChange && plainClick(e)) {
             e.preventDefault();

package/dist/esm/SegmentedControl.js

@@ -2,12 +2,14 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
+import { useAutoTip } from "./autoTip.js";
 function toOpt(o) {
   return typeof o === "object" ? o : { value: o, label: o };
 }
 const SegmentedControl = React.forwardRef(
   function SegmentedControl2(props, ref) {
     const options = (props.options || []).map(toOpt);
+    useAutoTip();
     const firstEnabled = options.filter(function(o) {
       return !o.disabled;
     })[0];
@@ -81,7 +83,7 @@ const SegmentedControl = React.forwardRef(
             role: "radio",
             "aria-checked": on,
             "aria-label": o.iconOnly ? o.label : void 0,
-            title: o.iconOnly ? o.label : void 0,
+            "data-aura-tip": o.iconOnly ? o.label : void 0,
             tabIndex: i === tabIdx && !props.disabled ? 0 : -1,
             disabled: off,
             className: cx("aura-segmented__option", on && "is-selected", o.iconOnly && "is-icon"),

package/dist/esm/SideNav.js

@@ -176,6 +176,7 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
         "aura-nav",
         collapsed && "aura-nav--collapsed",
         props.bordered === false && "aura-nav--borderless",
+        props.headerDivider && props.header && "aura-nav--header-divider",
         props.chevron === "right" && "aura-nav--chevron-right",
         props.className
       ),

package/dist/esm/Stepper.js

@@ -30,7 +30,15 @@ const Stepper = React.forwardRef(function Stepper2(props, ref) {
       const clickable = state === "done" && !!props.onStepClick;
       const named = clickable && (typeof s.label === "string" || typeof s.label === "number") && String(s.label).trim() !== "";
       const descId = idBase + "-step-" + i;
-      const text = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__label" }, s.label, note ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, ", " + note) : null), s.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__desc", id: named ? descId : void 0 }, s.description) : null);
+      const text = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__text" }, named ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, String(s.label) + (note ? ", " + note : "")) : null, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__label", "aria-hidden": named ? true : void 0 }, s.label, note && !named ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, ", " + note) : null), s.description ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "aura-stepper__desc",
+          id: named ? descId : void 0,
+          "aria-hidden": named ? true : void 0
+        },
+        s.description
+      ) : null);
       return /* @__PURE__ */ React.createElement(
         "li",
         {
@@ -43,7 +51,6 @@ const Stepper = React.forwardRef(function Stepper2(props, ref) {
           {
             type: "button",
             className: "aura-stepper__step aura-focusable",
-            "aria-label": named ? String(s.label) + (note ? ", " + note : "") : void 0,
             "aria-describedby": named && s.description ? descId : void 0,
             onClick: function() {
               props.onStepClick(s.id);

package/dist/esm/Tag.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, devWarnOnce, omit, useIsoLayoutEffect } from "./internal.js";
 import { Tooltip } from "./Tooltip.js";
+import { useAutoTip } from "./autoTip.js";
 import { useStrings } from "./locale.js";
 import { IconCheck, IconX } from "./icons.js";
 function textOf(node, all) {
@@ -32,6 +33,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
     "touchHeight"
   ]);
   const textRef = React.useRef(null);
+  useAutoTip();
   const cutState = React.useState(false), isCut = cutState[0];
   const check = React.useCallback(function() {
     const el = textRef.current;
@@ -53,7 +55,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
   const fullText = isCut ? textOf(props.children, true).replace(/\s+/g, " ").trim() : "";
   const inner = [
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
-    /* @__PURE__ */ React.createElement("span", { key: "t", ref: textRef, className: "aura-tag__text", title: fullText || void 0 }, props.children)
+    /* @__PURE__ */ React.createElement("span", { key: "t", ref: textRef, className: "aura-tag__text", "data-aura-tip": fullText || void 0 }, props.children)
   ];
   if (selectable) {
     return /* @__PURE__ */ React.createElement(

package/dist/esm/autoTip.js

@@ -0,0 +1,182 @@
+'use client';
+import * as React from "react";
+const ATTR = "data-aura-tip";
+let installed = false;
+let tip = null;
+let cur = null;
+let byFocus = false;
+let hiding = false;
+let timer;
+let watch = null;
+let gone = null;
+function targetOf(e) {
+  const path = typeof e.composedPath === "function" ? e.composedPath() : null;
+  return path && path.length ? path[0] : e.target;
+}
+function source(t) {
+  if (!t || typeof t.closest !== "function") return null;
+  const el = t;
+  if (el.closest(".aura-tooltip-anchor")) return null;
+  let s = el.closest("[" + ATTR + "]");
+  if (!s) {
+    const tag = el.closest(".aura-tag");
+    if (tag) s = tag.querySelector(".aura-tag__text[" + ATTR + "]");
+  }
+  if (!s || !s.getAttribute(ATTR) || !s.isConnected) return null;
+  if (s.getAttribute("aria-expanded") === "true") return null;
+  return s;
+}
+function place() {
+  if (!tip || !cur) return;
+  if (!cur.isConnected) {
+    hide();
+    return;
+  }
+  const r = cur.getBoundingClientRect(), t = tip.getBoundingClientRect(), vw = window.innerWidth, vh = window.innerHeight, gap = 8, m = 8;
+  let top = r.top - t.height - gap;
+  if (top < m && r.bottom + gap + t.height <= vh - m) top = r.bottom + gap;
+  top = Math.max(m, Math.min(top, vh - t.height - m));
+  const left = Math.max(m, Math.min(r.left + r.width / 2 - t.width / 2, vw - t.width - m));
+  tip.style.top = top + "px";
+  tip.style.left = left + "px";
+}
+function inZone(x, y) {
+  if (!cur || !tip || !up()) return false;
+  const a = cur.getBoundingClientRect(), b = tip.getBoundingClientRect();
+  return x >= Math.min(a.left, b.left) - 1 && x <= Math.max(a.right, b.right) + 1 && y >= Math.min(a.top, b.top) - 1 && y <= Math.max(a.bottom, b.bottom) + 1;
+}
+function stop() {
+  clearTimeout(timer);
+  hiding = false;
+}
+function show(s, focus) {
+  stop();
+  if (!tip) {
+    tip = document.createElement("div");
+    tip.className = "aura-tooltip aura-tooltip--auto";
+    tip.setAttribute("aria-hidden", "true");
+  }
+  cur = s;
+  byFocus = focus;
+  tip.textContent = s.getAttribute(ATTR);
+  const lang = s.closest("[lang]"), dir = s.closest("[dir]");
+  tip.lang = lang ? lang.getAttribute("lang") || "" : "";
+  tip.dir = dir ? dir.getAttribute("dir") || "" : "";
+  tip.style.top = tip.style.left = "-9999px";
+  if (!tip.isConnected) document.body.appendChild(tip);
+  place();
+  if (typeof MutationObserver === "undefined") return;
+  if (watch) watch.disconnect();
+  watch = new MutationObserver(function() {
+    if (!cur || !tip) return;
+    const text = cur.getAttribute(ATTR);
+    if (!text || cur.getAttribute("aria-expanded") === "true") hide();
+    else {
+      tip.textContent = text;
+      place();
+    }
+  });
+  watch.observe(s, { attributes: true, attributeFilter: [ATTR, "aria-expanded"] });
+  if (!gone) {
+    gone = new MutationObserver(function() {
+      if (cur && !cur.isConnected) hide();
+    });
+    gone.observe(document.body, { childList: true, subtree: true });
+  }
+}
+function hide() {
+  stop();
+  if (watch) watch.disconnect();
+  if (gone) gone.disconnect();
+  watch = gone = null;
+  cur = null;
+  byFocus = false;
+  if (tip && tip.isConnected) tip.remove();
+}
+function hideSoon() {
+  if (hiding) return;
+  clearTimeout(timer);
+  hiding = true;
+  timer = setTimeout(hide, 120);
+}
+function up() {
+  return !!(tip && tip.isConnected);
+}
+function focusVisible(el) {
+  try {
+    return el.matches(":focus-visible");
+  } catch (e) {
+    return true;
+  }
+}
+function installAutoTip() {
+  if (installed || typeof document === "undefined") return;
+  installed = true;
+  const w = window;
+  if (w.__auraAutoTip) return;
+  w.__auraAutoTip = true;
+  document.addEventListener("pointerover", function(e) {
+    if (e.pointerType === "touch") return;
+    const s = source(targetOf(e));
+    if (s) {
+      if (s === cur && up()) {
+        stop();
+        return;
+      }
+      stop();
+      if (up()) show(s, false);
+      else
+        timer = setTimeout(function() {
+          if (source(s) === s) show(s, false);
+        }, 400);
+      return;
+    }
+    if (!cur) stop();
+    else if (!byFocus && !inZone(e.clientX, e.clientY)) hideSoon();
+  });
+  document.addEventListener("pointermove", function(e) {
+    if (!cur || byFocus || e.pointerType === "touch") return;
+    if (inZone(e.clientX, e.clientY)) stop();
+    else hideSoon();
+  });
+  document.addEventListener("pointerout", function(e) {
+    if (!cur) {
+      if (!e.relatedTarget) stop();
+      return;
+    }
+    if (byFocus) return;
+    const to = e.relatedTarget;
+    if (to && (cur.contains(to) || inZone(e.clientX, e.clientY))) return;
+    hideSoon();
+  });
+  document.addEventListener("focusin", function(e) {
+    const t = targetOf(e), s = source(t);
+    if (s && focusVisible(t)) show(s, true);
+    else if (cur) hide();
+  });
+  document.addEventListener("focusout", function(e) {
+    const t = targetOf(e);
+    if (cur && byFocus && t && (cur === t || cur.contains(t) || t.contains(cur))) hide();
+  });
+  document.addEventListener("pointerdown", hide);
+  document.addEventListener("keydown", function(e) {
+    if (e.key === "Escape" && up()) hide();
+  });
+  window.addEventListener(
+    "scroll",
+    function() {
+      if (up()) place();
+    },
+    true
+  );
+  window.addEventListener("resize", function() {
+    if (up()) place();
+  });
+}
+function useAutoTip() {
+  React.useEffect(installAutoTip, []);
+}
+export {
+  installAutoTip,
+  useAutoTip
+};

package/dist/esm/index.js

@@ -35,6 +35,7 @@ import { Avatar } from "./Avatar.js";
 import { Stack } from "./Stack.js";
 import { Grid } from "./Grid.js";
 import { Container } from "./Container.js";
+import { PageHeader } from "./PageHeader.js";
 import { AppShell } from "./AppShell.js";
 import { ActionBar } from "./ActionBar.js";
 import { Separator } from "./Separator.js";
@@ -98,6 +99,7 @@ export {
   IconButton,
   Menu,
   NumberField,
+  PageHeader,
   Pagination,
   PasswordField,
   Popover,

package/dist/index.d.cts

@@ -344,7 +344,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	icon: IconInput;
 	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
 	tone?: "neutral" | "danger" | undefined;
-	/** Accessible name and tooltip (required). */
+	/** Accessible name and tooltip (required). Since 5.32 the tooltip is AURA's own (hover and keyboard focus), not a
+	 * native `title`; pass `title` yourself to keep a native one instead. */
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
@@ -828,6 +829,10 @@ export interface SideNavProps {
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
 	header?: React$1.ReactNode | undefined;
+	/** 5.32 (DxT Monitor request 1): a full-width 1px aura-border-default line under `header`, with the board's metrics:
+	 * the header at least 72px tall with its content 20px from the top and start, the line at its foot, and 16px
+	 * before the first item. Default `false`. */
+	headerDivider?: boolean | undefined;
 	footer?: React$1.ReactNode | undefined;
 	/** Default "Main". */
 	label?: string | undefined;
@@ -1214,7 +1219,9 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
-	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	/** The content padding is the page margin: 16px at the sides and 24px top and bottom on phones, 24px from 640px,
+	 * 32px from 1024px. Pages don't add their own (a PageHeader has none, 5.32). `false` (5.14): `<main>` has no
+	 * padding, for pages whose containers own the page padding and column. */
 	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
@@ -1338,7 +1345,8 @@ export interface BottomNavItem {
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
 	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
-	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3); a dev warning says when it doesn't (5.32). The count or badge is
+	 * still appended. */
 	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
@@ -1490,7 +1498,10 @@ export interface ProgressProps {
 	className?: string | undefined;
 }
 export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle" | undefined;
+	/** 5.32 (DxT Monitor request 4): `pill` is a StatusPill's size (20px tall, 22px under `lang="th"`, 72px wide) and
+	 * `badge` a Badge's (20px, 56px wide), both fully rounded, so the row doesn't move when the real one arrives.
+	 * `width` overrides the width. */
+	variant?: "text" | "rect" | "circle" | "pill" | "badge" | undefined;
 	/** text only: number of lines (the last is shorter). */
 	lines?: number | undefined;
 	width?: number | string | undefined;
@@ -1783,6 +1794,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+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;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | 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. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 /** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
  * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
  * hydration; JavaScript only opens and closes the drawer. */