@jirawatpyk/aura-react 5.77.0 → 5.79.0

package/README.md

@@ -186,6 +186,31 @@ 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.79 — visual audit, set 3 (component by component)
+
+- **One disabled look for every Button variant:** a faint fill (`--aura-button-disabled-bg`: zinc-100 light, none in dark), a faint edge (`--aura-button-disabled-border` — the variant's own border, or 1px inside for primary and danger) and the tertiary label, at full opacity — primary, secondary, danger, creative and `aria-disabled` alike; a ghost button has neither fill nor edge. (5.30 gave filled buttons a grey fill that read as a To Do pill and faded outline ones.)
+- **ActionBar `look="edge"` in an AppShell on a desktop** starts after the sidebar (the rail width when collapsed; the right edge in RTL) and lines its contents up with the content's 32px padding (not with `contentPadding={false}`), instead of running under the sidebar. It reads the sidebar's width from `--aura-sidenav-width` / `--aura-sidenav-rail-width`: to change it, set the token on `.aura-shell` or `:root`, not on the nav — and a custom `nav` set them to its width. Outside an AppShell it keeps the screen's width; `edgeBelow` is unchanged (no sidebar there).
+- **A list box** (`<Select multiple>` or `size` > 1) shows its rows, as tall as they need, without the chevron.
+- **Combobox `multiple`:** a chip no longer shrinks to "V.."; it keeps its label and moves to the next line (a label wider than the field still ends in "…").
+- **Switch with an `icon`** (a locked, read-only switch): the lock sits 8px after the label, not at the row's far end. Its colours stay as 5.19 set them.
+- **Menu / DropdownMenu:** a menu whose items have no icon, check box or radio has no empty icon column; it opens on its trigger's left edge when ending on its right would cross the screen (LTR; positioning stays physical, as before); and it is lifted with `--aura-shadow-overlay`, as Popover and the list boxes.
+- **Small fixes:** FileUpload's hint names formats (PNG, JPEG, SVG, DOCX, XLSX), not "IMAGE/PNG"; an outline Badge has a quieter edge (its colour at 45%), so it doesn't read as a secondary Button; a date range is a violet-100 band in light (`--aura-calendar-range-bg`, the brand's 100 step in `createTheme`), visible on white; a disabled field's edge shows in dark (`--aura-input-disabled-border`, zinc-700).
+- **Thai:** a Calendar with a Thai locale carries `lang="th"` and its weekday row is 13px; two-line Thai SideNav labels get room between lines; Combobox options have fixed line heights, so Thai and English rows are spaced alike.
+- **PageHeader:** where `actionsFullWidthBelow` reaches wider than `actionsBarBelow`, every button in the row is `radius-md` between the two breakpoints (5.78 left the bar's buttons as pills there).
+- **Stories:** the ⋯ beside outline buttons in action rows is `variant="outline"` (keep it so in an action row); the launch page shows with its own styles.
+
+## 5.78 — visual audit, set 2 (phones)
+
+- **Bottom strips on a phone follow one rule:** ActionBar's edge strip (`look="edge"`, `edgeBelow`) now lays out as PageHeader's bar (5.48) — the status on its own row at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row each, as PageHeader's) — and both strips are 16px from either side, the page's phone gutter (they were 16 and 12). `edgeBelow="md"` follows it up to 768px. A single label wider than the screen still overflows, as in PageHeader's strip — keep bar labels short.
+- **PageHeader `actionsFullWidthBelow`:** on a phone its buttons are `--aura-radius-md` boxes, so a label that wraps to two lines is a rounded box, not a lozenge (the ⋯ IconButton stays round) — also the header's own actions beside an `actionsBar` strip. The bottom strip keeps its pill buttons.
+- **A document number in a PageHeader title stays whole:** in a plain-text title, a short token with a digit and a hyphen ("Invoice SC-2026-900001") never breaks at its hyphens; the line breaks before it. The text is unchanged (a `.aura-nowrap` span, a utility you can use too).
+- **DataTable cards with `columnControls`:** the column picker's slot no longer squeezes the card's title (it took 48px of the first line).
+- **StatusTile:** a host or a path in a plain-text title ("api.example.co.th") breaks after a dot or a slash, not in the middle of a label.
+- **Tabs:** a tab list wider than its box fades the end that has more tabs (both ends once scrolled; mirrored in RTL), so a cut tab reads as "scroll for more". `data-aura-more="start" | "end" | "start end"` on the list.
+- **Combobox and TimePicker:** room is kept for the clear button only while there is one — an empty TimePicker in a narrow column showed "hh:m".
+- **Development warning:** a `DataTable` or `Table` that scrolls sideways on a screen under 640px without `stackBelow` warns once — its last columns are off screen. `stackBelow` stays opt-in in 5.x (it changes the layout) and becomes the default in 6.0.
+- **Stories:** the examples that scrolled the page sideways at 390px (fixed grids, rows that didn't wrap, fixed-width demo boxes) and the demo tables now fit a phone.
+
 ## 5.77 — Chamber-OS addendum 95 follow-up (#194)
 
 - **A confirmation opens at its top on a short screen:** when a Dialog scrolls as one box (5.76) and its first focus lands in the footer — `data-autofocus` on Cancel, or a dialog with nothing to fill in — it no longer scrolls to its end on open: the title, the description and the summary of what is being confirmed are what show first, with Cancel focused below. Tab or a scroll reaches the buttons as before. A field in the body that takes the first focus is still scrolled into view (it is what you type in next). By design the focused Cancel then starts below the fold: focus is in the dialog, on the safe action, and a screen reader reads the title and description first. Above 30rem nothing changes — where the panel can't scroll, the browser keeps the focused button in view as before; a Drawer is unaffected. With `autoFocus={false}`, a footer button you focus yourself scrolls as the browser does.

package/dist/aura.bundle.js

@@ -174,15 +174,16 @@ window.Aura = (() => {
     return TONES.indexOf(t) >= 0 ? t : "neutral";
   }
   var warned = {};
-  function devWarnOnce(key, message) {
-    if (warned[key]) return;
-    let dev = false;
+  function isDev() {
     try {
-      dev = true;
+      return true;
     } catch (e) {
-      dev = false;
+      return false;
     }
-    if (!dev) return;
+  }
+  function devWarnOnce(key, message) {
+    if (warned[key]) return;
+    if (!isDev()) return;
     warned[key] = true;
     console.warn("[AURA] " + message);
   }
@@ -518,6 +519,48 @@ window.Aura = (() => {
   function pointerModality() {
     setModality("pointer");
   }
+  function useScrollEdges(r2, key) {
+    React3.useEffect(
+      function() {
+        const el = r2.current;
+        if (!el || typeof ResizeObserver === "undefined") return;
+        let raf = 0;
+        const mark = function() {
+          raf = 0;
+          const max = el.scrollWidth - el.clientWidth;
+          const x = Math.abs(el.scrollLeft);
+          const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+          if ((el.getAttribute("data-aura-more") || "") === v) return;
+          if (v) el.setAttribute("data-aura-more", v);
+          else el.removeAttribute("data-aura-more");
+        };
+        const on = function() {
+          if (!raf) raf = requestAnimationFrame(mark);
+        };
+        mark();
+        el.addEventListener("scroll", on, { passive: true });
+        const ro = new ResizeObserver(on);
+        ro.observe(el);
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        const mo = new MutationObserver(function() {
+          Array.prototype.forEach.call(el.children, function(c) {
+            ro.observe(c);
+          });
+          on();
+        });
+        mo.observe(el, { childList: true });
+        return function() {
+          cancelAnimationFrame(raf);
+          el.removeEventListener("scroll", on);
+          ro.disconnect();
+          mo.disconnect();
+        };
+      },
+      [key]
+    );
+  }
 
   // src/display.tsx
   var React4 = __toESM(require_react(), 1);
@@ -1886,7 +1929,8 @@ window.Aura = (() => {
           top = r2.top - above - 4;
         } else maxHeight = below2;
       }
-      const left = Math.max(8, Math.min(r2.right - mw, window.innerWidth - mw - 8));
+      const endAligned = r2.right - mw;
+      const left = Math.max(8, Math.min(endAligned >= 8 ? endAligned : r2.left, window.innerWidth - mw - 8));
       setPos(function(p) {
         return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
       });
@@ -1985,12 +2029,15 @@ window.Aura = (() => {
       });
       return out;
     }
+    const anyLead = items2.some(function(it) {
+      return !it.separator && (!!it.icon || it.type === "radio" || it.checked !== void 0);
+    });
     function renderItem(it, i) {
       if (it.separator) return /* @__PURE__ */ React9.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
       const isRadio = it.type === "radio";
       const isCheck = !isRadio && it.checked !== void 0;
       const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
-      const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
+      const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : anyLead ? /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" }) : null;
       const body = [
         /* @__PURE__ */ React9.createElement(React9.Fragment, { key: "l" }, lead),
         /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
@@ -3401,7 +3448,7 @@ window.Aura = (() => {
           setFocus(addMonths(focusDate, 1));
         }
       }
-    )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
+    )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle, lang: th2 ? "th" : void 0 }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
       return /* @__PURE__ */ React18.createElement("th", { key: i, scope: "col", abbr: n3.long }, /* @__PURE__ */ React18.createElement("span", { "aria-hidden": true }, n3.short));
     }))), /* @__PURE__ */ React18.createElement(
       "tbody",
@@ -6199,6 +6246,24 @@ window.Aura = (() => {
       [measure, levelShape]
     );
     const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+    React34.useEffect(
+      function() {
+        if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+          return;
+        const sc = wrapRef.current.querySelector(".aura-table__scroll");
+        const raf = requestAnimationFrame(function() {
+          if (sc && sc.scrollWidth > sc.clientWidth + 1)
+            devWarnOnce(
+              "datatable-no-stack",
+              'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+            );
+        });
+        return function() {
+          cancelAnimationFrame(raf);
+        };
+      },
+      [props.stackBelow]
+    );
     const noCardSel = !!props.hideSelectionInCards && selectable;
     useIsoLayoutEffect(
       function() {
@@ -7593,6 +7658,8 @@ window.Aura = (() => {
     };
     const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
     const [focusId, setFocusId] = React36.useState(null);
+    const listRef = React36.useRef(null);
+    useScrollEdges(listRef, asLinks);
     items2.forEach(function(t) {
       const al = t.tabProps && t.tabProps["aria-label"];
       if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -7609,7 +7676,7 @@ window.Aura = (() => {
           "aria-label": props.label,
           className: cx(rootCls, "aura-tabs--links", props.className)
         },
-        /* @__PURE__ */ React36.createElement("div", { className: listCls }, items2.map(function(t) {
+        /* @__PURE__ */ React36.createElement("div", { ref: listRef, className: listCls }, items2.map(function(t) {
           const on = t.id === cur2;
           const inner = [
             t.icon ? /* @__PURE__ */ React36.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -7662,7 +7729,11 @@ window.Aura = (() => {
       const t = enabled[(i + enabled.length) % enabled.length];
       if (manual) setFocusId(t.id);
       else st[1](t.id);
-      if (refs.current[t.id]) refs.current[t.id].focus();
+      if (refs.current[t.id]) {
+        refs.current[t.id].focus();
+        const tab = refs.current[t.id];
+        if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
     }
     const stop2 = manual && focusId && items2.filter(function(t) {
       return t.id === focusId && !t.disabled;
@@ -7670,6 +7741,7 @@ window.Aura = (() => {
     return /* @__PURE__ */ React36.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React36.createElement(
       "div",
       {
+        ref: listRef,
         role: "tablist",
         "aria-label": props.label,
         className: listCls,
@@ -8182,6 +8254,15 @@ window.Aura = (() => {
   var React44 = __toESM(require_react(), 1);
   var h8 = React44.createElement;
   var LAZY = Symbol.for("react.lazy");
+  var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+  function keepIds(title) {
+    if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+    const parts = title.split(ID);
+    if (parts.length < 2) return title;
+    return parts.map(function(p, i) {
+      return i % 2 && /\d/.test(p) && p.length <= 24 ? h8("span", { key: i, className: "aura-nowrap" }, p) : p;
+    });
+  }
   function chipsOnly(node) {
     let el = 0;
     const walk = function(n3) {
@@ -8233,7 +8314,7 @@ window.Aura = (() => {
         tabIndex: props.focusTitleOnMount ? -1 : void 0,
         "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
       },
-      props.title
+      keepIds(props.title)
     );
     const hasActions = props.actions != null && props.actions !== false;
     const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -8415,6 +8496,21 @@ window.Aura = (() => {
     ok: "statusOk",
     unknown: "statusUnknown"
   };
+  function breakAtDots(title) {
+    if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+    const out = [];
+    let run = "";
+    for (let i = 0; i < title.length; i++) {
+      const c = title.charAt(i);
+      run += c;
+      if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+        out.push(run, h9("wbr", { key: i }));
+        run = "";
+      }
+    }
+    if (run) out.push(run);
+    return out;
+  }
   function statusWord(status, t) {
     return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
   }
@@ -8453,7 +8549,7 @@ window.Aura = (() => {
         "span",
         { className: "aura-status-tile__head" },
         h9(Icon, { name: h9(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-        h9("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+        h9("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
         h9("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
         hasValue ? h9(
           "span",
@@ -9284,6 +9380,11 @@ window.Aura = (() => {
       function check() {
         const sideways = el.scrollWidth > el.clientWidth + 1;
         wide[1](sideways);
+        if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+          devWarnOnce(
+            "table-no-stack",
+            "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+          );
         sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
       }
       check();
@@ -9977,6 +10078,19 @@ window.Aura = (() => {
       a = a.trim();
       if (a === "image/*") return t.images;
       if (a === "application/pdf") return "PDF";
+      const known = {
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+        "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+        "application/msword": "DOC",
+        "application/vnd.ms-excel": "XLS",
+        "application/vnd.ms-powerpoint": "PPT",
+        "text/plain": "TXT"
+      };
+      if (known[a]) return known[a];
+      const slash = a.indexOf("/");
+      if (slash > 0 && a.slice(slash + 1) !== "*")
+        a = a.slice(slash + 1).replace(/^(?:vnd\.|x-)/, "").replace(/\+xml$/, "");
       return a.replace(/^\./, "").toUpperCase();
     }).filter(function(x, i, arr) {
       return arr.indexOf(x) === i;
@@ -10385,6 +10499,7 @@ window.Aura = (() => {
     L["accent-violet"] = L["fg-accent"];
     L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
     L["bg-selected"] = b[50];
+    L["calendar-range-bg"] = b[100];
     L["status-progress-bg"] = b[100];
     L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
     L["alert-info-bg"] = b[50];
@@ -10424,6 +10539,7 @@ window.Aura = (() => {
     D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
     D["control-checked-fg"] = onFill(D["control-checked-bg"]);
     D["nav-active-edge"] = D["control-checked-bg"];
+    D["calendar-range-bg"] = D["bg-selected"];
     const shadowLight = INK, shadowDark = D["accent-violet"];
     if (o.primary === "brand") {
       L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -10481,6 +10597,7 @@ window.Aura = (() => {
     check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
     check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
     check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+    check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
     check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
     check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
     check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/cjs/index.cjs

@@ -156,15 +156,16 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 var warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = process.env.NODE_ENV !== "production";
+    return process.env.NODE_ENV !== "production";
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
@@ -500,6 +501,48 @@ function useInputModality() {
 function pointerModality() {
   setModality("pointer");
 }
+function useScrollEdges(r2, key) {
+  React3.useEffect(
+    function() {
+      const el = r2.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      let raf = 0;
+      const mark = function() {
+        raf = 0;
+        const max = el.scrollWidth - el.clientWidth;
+        const x = Math.abs(el.scrollLeft);
+        const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+        if ((el.getAttribute("data-aura-more") || "") === v) return;
+        if (v) el.setAttribute("data-aura-more", v);
+        else el.removeAttribute("data-aura-more");
+      };
+      const on = function() {
+        if (!raf) raf = requestAnimationFrame(mark);
+      };
+      mark();
+      el.addEventListener("scroll", on, { passive: true });
+      const ro = new ResizeObserver(on);
+      ro.observe(el);
+      Array.prototype.forEach.call(el.children, function(c) {
+        ro.observe(c);
+      });
+      const mo = new MutationObserver(function() {
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        on();
+      });
+      mo.observe(el, { childList: true });
+      return function() {
+        cancelAnimationFrame(raf);
+        el.removeEventListener("scroll", on);
+        ro.disconnect();
+        mo.disconnect();
+      };
+    },
+    [key]
+  );
+}
 
 // src/display.tsx
 var React4 = __toESM(require("react"), 1);
@@ -1868,7 +1911,8 @@ var Menu = React9.forwardRef(function Menu2(props, ref) {
         top = r2.top - above - 4;
       } else maxHeight = below2;
     }
-    const left = Math.max(8, Math.min(r2.right - mw, window.innerWidth - mw - 8));
+    const endAligned = r2.right - mw;
+    const left = Math.max(8, Math.min(endAligned >= 8 ? endAligned : r2.left, window.innerWidth - mw - 8));
     setPos(function(p) {
       return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
     });
@@ -1967,12 +2011,15 @@ var Menu = React9.forwardRef(function Menu2(props, ref) {
     });
     return out;
   }
+  const anyLead = items2.some(function(it) {
+    return !it.separator && (!!it.icon || it.type === "radio" || it.checked !== void 0);
+  });
   function renderItem(it, i) {
     if (it.separator) return /* @__PURE__ */ React9.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
     const isRadio = it.type === "radio";
     const isCheck = !isRadio && it.checked !== void 0;
     const checkAtEnd = isCheck && !!it.icon && it.checkPlacement !== "start";
-    const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" });
+    const lead = isRadio ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck && !checkAtEnd ? /* @__PURE__ */ React9.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React9.createElement(Icon, { name: /* @__PURE__ */ React9.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React9.createElement(Icon, { name: it.icon }) : anyLead ? /* @__PURE__ */ React9.createElement("span", { className: "aura-menu__blank" }) : null;
     const body = [
       /* @__PURE__ */ React9.createElement(React9.Fragment, { key: "l" }, lead),
       /* @__PURE__ */ React9.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
@@ -3383,7 +3430,7 @@ var Calendar = React18.forwardRef(function Calendar2(props, ref) {
         setFocus(addMonths(focusDate, 1));
       }
     }
-  )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
+  )), /* @__PURE__ */ React18.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle, lang: th2 ? "th" : void 0 }, /* @__PURE__ */ React18.createElement("thead", null, /* @__PURE__ */ React18.createElement("tr", null, weekdayNames.map(function(n3, i) {
     return /* @__PURE__ */ React18.createElement("th", { key: i, scope: "col", abbr: n3.long }, /* @__PURE__ */ React18.createElement("span", { "aria-hidden": true }, n3.short));
   }))), /* @__PURE__ */ React18.createElement(
     "tbody",
@@ -6181,6 +6228,24 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  React34.useEffect(
+    function() {
+      if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+        return;
+      const sc = wrapRef.current.querySelector(".aura-table__scroll");
+      const raf = requestAnimationFrame(function() {
+        if (sc && sc.scrollWidth > sc.clientWidth + 1)
+          devWarnOnce(
+            "datatable-no-stack",
+            'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+          );
+      });
+      return function() {
+        cancelAnimationFrame(raf);
+      };
+    },
+    [props.stackBelow]
+  );
   const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {
@@ -7575,6 +7640,8 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
   };
   const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React36.useState(null);
+  const listRef = React36.useRef(null);
+  useScrollEdges(listRef, asLinks);
   items2.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
     if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -7591,7 +7658,7 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
         "aria-label": props.label,
         className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React36.createElement("div", { className: listCls }, items2.map(function(t) {
+      /* @__PURE__ */ React36.createElement("div", { ref: listRef, className: listCls }, items2.map(function(t) {
         const on = t.id === cur2;
         const inner = [
           t.icon ? /* @__PURE__ */ React36.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -7644,7 +7711,11 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
     const t = enabled[(i + enabled.length) % enabled.length];
     if (manual) setFocusId(t.id);
     else st[1](t.id);
-    if (refs.current[t.id]) refs.current[t.id].focus();
+    if (refs.current[t.id]) {
+      refs.current[t.id].focus();
+      const tab = refs.current[t.id];
+      if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
   }
   const stop2 = manual && focusId && items2.filter(function(t) {
     return t.id === focusId && !t.disabled;
@@ -7652,6 +7723,7 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
   return /* @__PURE__ */ React36.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React36.createElement(
     "div",
     {
+      ref: listRef,
       role: "tablist",
       "aria-label": props.label,
       className: listCls,
@@ -8164,6 +8236,15 @@ var React45 = __toESM(require("react"), 1);
 var React44 = __toESM(require("react"), 1);
 var h8 = React44.createElement;
 var LAZY = Symbol.for("react.lazy");
+var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h8("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -8215,7 +8296,7 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -8397,6 +8478,21 @@ var STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h9("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -8435,7 +8531,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h9(Icon, { name: h9(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h9("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h9("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h9("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h9(
         "span",
@@ -9266,6 +9362,11 @@ var Table = React53.forwardRef(function Table2(props, ref) {
     function check() {
       const sideways = el.scrollWidth > el.clientWidth + 1;
       wide[1](sideways);
+      if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+        devWarnOnce(
+          "table-no-stack",
+          "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+        );
       sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();
@@ -9959,6 +10060,19 @@ function describeAccept(accept, t) {
     a = a.trim();
     if (a === "image/*") return t.images;
     if (a === "application/pdf") return "PDF";
+    const known = {
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+      "application/msword": "DOC",
+      "application/vnd.ms-excel": "XLS",
+      "application/vnd.ms-powerpoint": "PPT",
+      "text/plain": "TXT"
+    };
+    if (known[a]) return known[a];
+    const slash = a.indexOf("/");
+    if (slash > 0 && a.slice(slash + 1) !== "*")
+      a = a.slice(slash + 1).replace(/^(?:vnd\.|x-)/, "").replace(/\+xml$/, "");
     return a.replace(/^\./, "").toUpperCase();
   }).filter(function(x, i, arr) {
     return arr.indexOf(x) === i;
@@ -10367,6 +10481,7 @@ function createTheme(opts) {
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
   L["bg-selected"] = b[50];
+  L["calendar-range-bg"] = b[100];
   L["status-progress-bg"] = b[100];
   L["status-progress-fg"] = fit(b[800], [b[100]], 4.5, -1);
   L["alert-info-bg"] = b[50];
@@ -10406,6 +10521,7 @@ function createTheme(opts) {
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   D["nav-active-edge"] = D["control-checked-bg"];
+  D["calendar-range-bg"] = D["bg-selected"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -10463,6 +10579,7 @@ function createTheme(opts) {
   check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
+  check("light", "fg-primary", "calendar-range-bg", 4.5, INK, L["calendar-range-bg"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
   check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);

package/dist/esm/DataTable.js

@@ -2,7 +2,15 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { useStrings, useLinkComponent } from "./locale.js";
-import { cx, devWarnOnce, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import {
+  cx,
+  devWarnOnce,
+  isDev,
+  useMaybeControlled,
+  compare,
+  useIsoLayoutEffect,
+  useMergedRef
+} from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Checkbox } from "./Checkbox.js";
@@ -177,6 +185,24 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  React.useEffect(
+    function() {
+      if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+        return;
+      const sc = wrapRef.current.querySelector(".aura-table__scroll");
+      const raf = requestAnimationFrame(function() {
+        if (sc && sc.scrollWidth > sc.clientWidth + 1)
+          devWarnOnce(
+            "datatable-no-stack",
+            'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+          );
+      });
+      return function() {
+        cancelAnimationFrame(raf);
+      };
+    },
+    [props.stackBelow]
+  );
   const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {

package/dist/esm/DatePicker.js

@@ -226,7 +226,7 @@ const Calendar = React.forwardRef(function Calendar2(props, ref) {
         setFocus(addMonths(focusDate, 1));
       }
     }
-  )), /* @__PURE__ */ React.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, weekdayNames.map(function(n, i) {
+  )), /* @__PURE__ */ React.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle, lang: th ? "th" : void 0 }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, weekdayNames.map(function(n, i) {
     return /* @__PURE__ */ React.createElement("th", { key: i, scope: "col", abbr: n.long }, /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, n.short));
   }))), /* @__PURE__ */ React.createElement(
     "tbody",