@jirawatpyk/aura-react 5.30.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/Field.js

@@ -20,6 +20,7 @@ const Field = React.forwardRef(function Field2(props, ref) {
       props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
       props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
     ) : null,
+    hasAddon(props.labelAddon) ? /* @__PURE__ */ React.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
     props.children,
     props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
   );
@@ -27,6 +28,20 @@ const Field = React.forwardRef(function Field2(props, ref) {
 function describedBy(id, p) {
   return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
 }
+function hasAddon(n) {
+  return n != null && typeof n !== "boolean" && n !== "";
+}
+function joinDescribedBy(id, p, own) {
+  const ids = [
+    hasAddon(p.labelAddon) && p.labelAddonDescribes !== false ? id + "-addon" : "",
+    describedBy(id, p) || ""
+  ].concat(typeof own === "string" ? own.split(/\s+/) : []);
+  const out = [];
+  ids.forEach(function(x) {
+    if (x && out.indexOf(x) < 0) out.push(x);
+  });
+  return out.join(" ") || void 0;
+}
 const FIELD_KEYS = [
   "label",
   "hint",
@@ -39,10 +54,14 @@ const FIELD_KEYS = [
   "suffix",
   "options",
   "placeholder",
-  "touchHeight"
+  "touchHeight",
+  "labelAddon",
+  "labelAddonDescribes"
 ];
 export {
   FIELD_KEYS,
   Field,
-  describedBy
+  describedBy,
+  hasAddon,
+  joinDescribedBy
 };

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/TextField.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { FIELD_KEYS, Field, joinDescribedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { cx, omit, touchClass, uid } from "./internal.js";
 const TextField = React.forwardRef(function TextField2(props, ref) {
@@ -15,6 +15,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
       error: props.error,
       required: props.required,
       optional: props.optional,
+      labelAddon: props.labelAddon,
       disabled: props.disabled,
       className: cx(touchClass(props.touchHeight), props.className)
     },
@@ -29,7 +30,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
         placeholder: props.placeholder,
         required: props.required,
         "aria-invalid": props.error ? true : rest["aria-invalid"],
-        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+        "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     ), props.suffix ? /* @__PURE__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
   );

package/dist/esm/Textarea.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { FIELD_KEYS, Field, joinDescribedBy } from "./Field.js";
 import { cx, omit, touchClass, uid } from "./internal.js";
 const Textarea = React.forwardRef(function Textarea2(props, ref) {
   const auto = uid(), id = props.id || auto;
@@ -14,6 +14,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
       error: props.error,
       required: props.required,
       optional: props.optional,
+      labelAddon: props.labelAddon,
       disabled: props.disabled,
       className: cx(touchClass(props.touchHeight), props.className)
     },
@@ -28,7 +29,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
         placeholder: props.placeholder,
         required: props.required,
         "aria-invalid": props.error ? true : rest["aria-invalid"],
-        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+        "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     )
   );

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/esm/theme.js

@@ -162,6 +162,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -244,6 +251,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');