@jirawatpyk/aura-react 4.17.0 → 4.19.0

package/dist/esm/ActionBar.js

@@ -0,0 +1,47 @@
+'use client';
+import * as React from "react";
+import { Button } from "./Button.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
+  const t = useStrings();
+  const bulk = props.selected != null;
+  const idle = bulk && !props.selected;
+  const count = bulk && props.selected ? t.selectedCount(props.selected) : null;
+  const cameFrom = React.useRef(null);
+  const own = React.useRef(null);
+  function clear() {
+    props.onClearSelection();
+    setTimeout(function() {
+      const back = cameFrom.current;
+      const a = document.activeElement;
+      if ((!a || a === document.body || !a.isConnected) && back && back.isConnected) back.focus();
+    }, 0);
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: function(el) {
+        own.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      onFocus: function(e) {
+        const from = e.relatedTarget;
+        if (from && own.current && !own.current.contains(from)) cameFrom.current = from;
+      },
+      role: "region",
+      "aria-label": props.label || t.actions,
+      className: cx(
+        "aura-actionbar",
+        "aura-actionbar--" + (props.position || "viewport"),
+        idle && "is-idle",
+        props.className
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__inner" }, /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+  );
+});
+export {
+  ActionBar
+};

package/dist/esm/AppShell.js

@@ -26,7 +26,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
     collapsed: false,
     collapsible: false
   }) : props.nav;
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", props.className) }, props.nav ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", props.bottomNav && "aura-shell--bottomnav", props.className) }, props.nav ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React.createElement(
     Drawer,
     {
       open,
@@ -51,7 +51,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
       },
       "aria-expanded": open
     }
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children), props.bottomNav || null));
 });
 export {
   AppShell

package/dist/esm/BottomNav.js

@@ -0,0 +1,45 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, useMaybeControlled } from "./internal.js";
+import { useLinkComponent, useStrings } from "./locale.js";
+const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
+  const t = useStrings();
+  const Link = useLinkComponent(props.linkComponent);
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+  const active = st[0];
+  const hide = props.hideFrom === false ? "always" : "below-" + (props.hideFrom || "lg");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: cx("aura-bottomnav-spacer", "aura-bottomnav--" + hide), "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      className: cx("aura-bottomnav", "aura-bottomnav--" + hide, props.className),
+      "aria-label": props.label || t.mainNav
+    },
+    /* @__PURE__ */ React.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {
+      const on = active === it.id;
+      const count = it.count != null && it.count > 0 ? it.count > 99 ? "99+" : String(it.count) : null;
+      const common = {
+        className: cx("aura-bottomnav__item", on && "is-active"),
+        "aria-current": on ? "page" : void 0,
+        onClick: function(e) {
+          if (!it.href) e.preventDefault();
+          st[1](it.id);
+        }
+      };
+      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),
+        count || it.badge && it.badgeLabel ? /* @__PURE__ */ React.createElement("span", { key: "s", className: "aura-sr-only" }, " (" + (count || it.badgeLabel) + ")") : 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));
+    }))
+  ));
+});
+export {
+  BottomNav
+};

package/dist/esm/Command.js

@@ -155,8 +155,8 @@ function Command(props) {
             "data-autofocus": "",
             type: "text",
             role: "combobox",
-            "aria-expanded": true,
-            "aria-controls": listId,
+            "aria-expanded": flat.length > 0,
+            "aria-controls": flat.length ? listId : void 0,
             "aria-autocomplete": "list",
             "aria-activedescendant": active >= 0 ? optId(active) : void 0,
             "aria-label": props.label || t.commandMenu,
@@ -172,17 +172,15 @@ function Command(props) {
             onKeyDown: onKey
           }
         ), /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
-        /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "aura-command__list", "aria-busy": props.loading || void 0 }, props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__loading" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null, !flat.length ? props.loading ? null : /* @__PURE__ */ React.createElement("div", { className: "aura-command__empty" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: "aura-command__list",
             id: listId,
             role: "listbox",
             "aria-label": props.label || t.commandMenu,
             "aria-busy": props.loading || void 0
           },
-          props.loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-command__loading", role: "presentation" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null,
-          !flat.length ? props.loading ? null : /* @__PURE__ */ React.createElement("div", { className: "aura-command__empty", role: "presentation" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : groups.map(function(g, gi) {
+          groups.map(function(g, gi) {
             const gid = id + "-g" + gi;
             return /* @__PURE__ */ React.createElement(
               "div",
@@ -204,7 +202,11 @@ function Command(props) {
                     role: "option",
                     "aria-selected": n === active,
                     "aria-disabled": it.disabled || void 0,
-                    className: cx("aura-command__item", n === active && "is-active", it.disabled && "is-disabled"),
+                    className: cx(
+                      "aura-command__item",
+                      n === active && "is-active",
+                      it.disabled && "is-disabled"
+                    ),
                     onPointerDown: function(e) {
                       e.preventDefault();
                     },
@@ -222,8 +224,8 @@ function Command(props) {
               })
             );
           })
-        ),
-        /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : props.loading === false && query ? t.results(flat.length) : ""),
+        )),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : query && !flat.length ? t.noMatches : props.loading === false && query ? t.results(flat.length) : ""),
         /* @__PURE__ */ React.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
       )
     ),

package/dist/esm/DataTable.js

@@ -1,5 +1,6 @@
 'use client';
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { useStrings, useLinkComponent } from "./locale.js";
 import { cx, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
@@ -116,6 +117,29 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return px != null && boxWidth[0] < px;
   }
   const scrollRef = React.useRef(null);
+  const tipState = React.useState(null), tip = tipState[0], setTip = tipState[1];
+  function showFull(e) {
+    const el = e.target.closest ? e.target.closest(".aura-table__td, .aura-table__card-fields dd") : null;
+    if (!el || el.scrollWidth <= el.clientWidth + 1 || el.querySelector("button, input, .aura-pill"))
+      return setTip(null);
+    const r = el.getBoundingClientRect();
+    setTip({ text: (el.textContent || "").trim(), left: r.left, top: r.top });
+  }
+  function hideFull() {
+    setTip(null);
+  }
+  const tipEl = tip && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-tooltip aura-tooltip--above",
+        "aria-hidden": "true",
+        style: { left: tip.left, top: tip.top - 6 }
+      },
+      tip.text
+    ),
+    document.body
+  ) : null;
   const rowH = React.useState(ROW_H_DEFAULT);
   const ROW_H = rowH[0];
   useIsoLayoutEffect(function() {
@@ -984,7 +1008,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
             return /* @__PURE__ */ React.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
           })),
           rest.length ? /* @__PURE__ */ React.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
-            return /* @__PURE__ */ React.createElement("div", { key: c.key }, /* @__PURE__ */ React.createElement("dt", null, c.label), /* @__PURE__ */ React.createElement("dd", { className: c.mono ? "aura-table__mono" : void 0 }, cellVal(c, r)));
+            return /* @__PURE__ */ React.createElement("div", { key: c.key }, /* @__PURE__ */ React.createElement("dt", null, c.label), /* @__PURE__ */ React.createElement("dd", { className: cx(c.mono && "aura-table__mono", c.align === "end" && "is-end") }, cellVal(c, r)));
           })) : null
         );
       }));
@@ -995,6 +1019,10 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         ref: wrapRefArg,
         "data-density": props.density,
         className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
+        onMouseOver: showFull,
+        onMouseLeave: hideFull,
+        onFocus: showFull,
+        onBlur: hideFull,
         role: "region",
         "aria-label": props.label,
         "aria-busy": busy || void 0
@@ -1010,10 +1038,55 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         }
       ), /* @__PURE__ */ React.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
       cardBody,
-      foot
+      props.footer && rows.length && !loading ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__card aura-table__card--total", role: "group", "aria-label": t.totals }, /* @__PURE__ */ React.createElement("dl", { className: "aura-table__card-fields" }, vis.filter(function(c) {
+        return props.footer[c.key] != null;
+      }).map(function(c) {
+        return /* @__PURE__ */ React.createElement("div", { key: c.key }, /* @__PURE__ */ React.createElement("dt", null, c.label || t.totals), /* @__PURE__ */ React.createElement("dd", { className: cx(c.mono && "aura-table__mono", c.align === "end" && "is-end") }, props.footer[c.key]));
+      }))) : null,
+      foot,
+      tipEl
     );
   }
   if (stacked) return renderStacked(wrapMerged);
+  const totalRow = props.footer && rows.length && !loading ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "row",
+      "aria-rowindex": shownTotal + 2,
+      "aria-label": t.totals,
+      className: cx("aura-table__row aura-table__total", props.stickyFooter && "is-sticky"),
+      style: rowStyle
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "aura-table__gutter", "aria-hidden": true }),
+    selectable ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-table__sel", nPinned && "is-pinned"), "aria-hidden": true }) : null,
+    vis.map(function(c, j) {
+      const pin = isPinned(c);
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: c.key,
+          role: "gridcell",
+          "aria-colindex": j + (selectable ? 2 : 1),
+          className: cx(
+            "aura-table__td",
+            c.mono && "aura-table__mono",
+            c.align === "end" && "is-end",
+            pin && "is-pinned",
+            pin && j === nPinned - 1 && "is-pin-edge"
+          ),
+          style: cellStyle(c, j)
+        },
+        props.footer[c.key]
+      );
+    }),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker"),
+        "aria-hidden": true
+      }
+    )
+  ) : null;
   const scrollStyle = {
     scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
     scrollPaddingTop: ROW_H + "px"
@@ -1035,11 +1108,15 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
           gridRef.current = el;
         },
         className: "aura-table__scroll",
+        onMouseOver: showFull,
+        onMouseLeave: hideFull,
+        onFocus: showFull,
+        onBlur: hideFull,
         style: scrollStyle,
         role: "grid",
         "aria-label": props.label,
         "aria-busy": busy || void 0,
-        "aria-rowcount": loading ? -1 : shownTotal + 1,
+        "aria-rowcount": loading ? -1 : shownTotal + 1 + (totalRow ? 1 : 0),
         "aria-colcount": nCols,
         "aria-multiselectable": selectable || void 0,
         onKeyDown: onGridKey,
@@ -1053,7 +1130,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         }
       },
       /* @__PURE__ */ React.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
-      body
+      body,
+      totalRow
     ),
     busy ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null,
     controls ? /* @__PURE__ */ React.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React.createElement(
@@ -1076,7 +1154,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         label: menu.kind === "picker" ? t.columns : t.column(byKey[menu.key] && byKey[menu.key].label),
         items: menu.kind === "picker" ? pickerItems() : byKey[menu.key] ? columnMenuItems(byKey[menu.key]) : []
       }
-    ) : null
+    ) : null,
+    tipEl
   );
   if (!dual) return gridEl;
   return /* @__PURE__ */ React.createElement("div", { ref: wrapMerged, className: "aura-table-dual", "data-stack-below": props.stackBelow }, renderStacked(void 0), gridEl);

package/dist/esm/DatePicker.js

@@ -18,7 +18,8 @@ import {
   localeTag,
   parseDate,
   same,
-  toISO
+  toISO,
+  todayIn
 } from "./dates.js";
 import { formatDate as formatDate2, parseDate as parseDate2 } from "./dates.js";
 function useFormatDate() {
@@ -40,9 +41,9 @@ function useFormatDate() {
 const Calendar = React.forwardRef(function Calendar2(props, ref) {
   const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
   const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
-  let today = /* @__PURE__ */ new Date();
-  today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-  const min = fromISO(props.min), max = fromISO(props.max);
+  const todayISO = props.today || todayIn(props.timeZone || ctx.timeZone);
+  const today = fromISO(todayISO);
+  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
   const start = fromISO(props.start), end = fromISO(props.end);
   const focusState = React.useState(fromISO(props.focus) || start || today);
   const focusDate = focusState[0], setFocus = focusState[1];
@@ -428,6 +429,8 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
           weekStartsOn: props.weekStartsOn,
           min: props.min,
           max: props.max,
+          timeZone: props.timeZone,
+          today: props.today,
           isDateDisabled: props.isDateDisabled,
           start: st[0],
           focus: st[0],
@@ -544,6 +547,8 @@ const DateRangePicker = React.forwardRef(
             weekStartsOn: props.weekStartsOn,
             min: props.min,
             max: props.max,
+            timeZone: props.timeZone,
+            today: props.today,
             isDateDisabled: props.isDateDisabled,
             start: draft[0] || v.start,
             end: draft[0] ? null : v.end,

package/dist/esm/DropdownMenu.js

@@ -23,6 +23,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
       anchor,
       label: props.label,
       items: props.items,
+      linkComponent: props.linkComponent,
       onClose: function(restore) {
         setAnchor(null);
         if (restore && typeof anchor.focus === "function") anchor.focus();

package/dist/esm/Menu.js

@@ -3,12 +3,14 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { cx, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
+import { useLinkComponent } from "./locale.js";
 const Menu = React.forwardRef(function Menu2(props, ref) {
   const own = React.useRef(null), merged = useMergedRef(ref, own);
   const posState = React.useState(null);
   const pos = posState[0], setPos = posState[1];
   const items = props.items || [];
   const mounted = useMounted();
+  const Link = useLinkComponent(props.linkComponent);
   useIsoLayoutEffect(
     function() {
       const a = props.anchor, m = own.current;
@@ -69,6 +71,63 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     }
     e.stopPropagation();
   }
+  function groupItems(list) {
+    const out = [];
+    list.forEach(function(it, i) {
+      const g = it.type === "radio" && it.group ? it.group : null;
+      const last = out[out.length - 1];
+      if (last && last.group === g && g !== null) last.items.push({ it, i });
+      else out.push({ group: g, items: [{ it, i }] });
+    });
+    return out;
+  }
+  function renderItem(it, i) {
+    if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
+    const isRadio = it.type === "radio";
+    const isCheck = !isRadio && it.checked !== void 0;
+    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" });
+    const body = [
+      /* @__PURE__ */ React.createElement(React.Fragment, { key: "l" }, lead),
+      /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
+      it.hint ? /* @__PURE__ */ React.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
+    ];
+    const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
+    if (it.href && !it.disabled)
+      return /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          key: i,
+          href: it.href,
+          target: it.target,
+          rel: it.target === "_blank" ? "noreferrer" : void 0,
+          tabIndex: -1,
+          role: "menuitem",
+          className: cls,
+          onClick: function() {
+            if (it.onSelect) it.onSelect();
+            props.onClose(false);
+          }
+        },
+        body
+      );
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: i,
+        type: "button",
+        tabIndex: -1,
+        disabled: it.disabled,
+        role: isRadio ? "menuitemradio" : isCheck ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": isRadio || isCheck ? !!it.checked : void 0,
+        className: cls,
+        onClick: function() {
+          if (it.onSelect) it.onSelect();
+          if (!it.keepOpen) props.onClose(true);
+        }
+      },
+      body
+    );
+  }
   const el = /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -79,28 +138,11 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       onKeyDown,
       style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
     },
-    items.map(function(it, i) {
-      if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
-      const isCheck = it.checked !== void 0;
-      return /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          key: i,
-          type: "button",
-          tabIndex: -1,
-          disabled: it.disabled,
-          role: isCheck ? "menuitemcheckbox" : "menuitem",
-          "aria-checked": isCheck ? !!it.checked : void 0,
-          className: "aura-menu__item",
-          onClick: function() {
-            it.onSelect();
-            if (!it.keepOpen) props.onClose(true);
-          }
-        },
-        isCheck ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" }),
-        /* @__PURE__ */ React.createElement("span", { className: "aura-menu__label" }, it.label),
-        it.hint ? /* @__PURE__ */ React.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
-      );
+    groupItems(items).map(function(block, bi) {
+      const rendered = block.items.map(function(x) {
+        return renderItem(x.it, x.i);
+      });
+      return block.group ? /* @__PURE__ */ React.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React.createElement(React.Fragment, { key: "f" + bi }, rendered);
     })
   );
   return mounted ? createPortal(el, document.body) : null;

package/dist/esm/Tabs.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
+import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
   const st = useMaybeControlled(
@@ -13,6 +14,40 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const current = items.filter(function(t) {
     return t.id === st[0];
   })[0] || items[0];
+  const Link = useLinkComponent(props.linkComponent);
+  const asLinks = items.length > 0 && items.every(function(t) {
+    return !!t.href;
+  });
+  if (asLinks)
+    return /* @__PURE__ */ React.createElement(
+      "nav",
+      {
+        ref,
+        "aria-label": props.label,
+        className: cx("aura-tabs aura-tabs--links", props.className)
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "aura-tabs__list" }, items.map(function(t) {
+        const on = current && t.id === current.id;
+        const inner = [
+          t.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: t.icon }) : null,
+          t.label,
+          t.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-tab__count" }, t.count) : null
+        ];
+        return t.disabled ? /* @__PURE__ */ React.createElement("span", { key: t.id, className: "aura-tab is-disabled", "aria-disabled": true }, inner) : /* @__PURE__ */ React.createElement(
+          Link,
+          {
+            key: t.id,
+            href: t.href,
+            className: cx("aura-tab", on && "is-active"),
+            "aria-current": on ? "page" : void 0,
+            onClick: function() {
+              st[1](t.id);
+            }
+          },
+          inner
+        );
+      }))
+    );
   function go(i) {
     const enabled = items.filter(function(t2) {
       return !t2.disabled;

package/dist/esm/Toaster.js

@@ -6,11 +6,19 @@ import { IconButton } from "./IconButton.js";
 import { cx, useMounted } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
+const MAX_VISIBLE = 3;
 const toastState = {
   list: [],
+  queue: [],
   subs: [],
   n: 0
 };
+function promote() {
+  while (toastState.list.length < MAX_VISIBLE && toastState.queue.length) {
+    toastState.list = toastState.list.concat([toastState.queue[0]]);
+    toastState.queue = toastState.queue.slice(1);
+  }
+}
 function emitToasts() {
   toastState.subs.forEach(function(f) {
     f(toastState.list.slice());
@@ -18,18 +26,24 @@ function emitToasts() {
 }
 function show(opts) {
   const id = opts.id || "t" + ++toastState.n;
-  const at = toastState.list.findIndex(function(t) {
+  const byId = function(t) {
     return t.id === id;
-  });
+  };
+  const at = toastState.list.findIndex(byId), queued = toastState.queue.findIndex(byId);
+  const prev = at >= 0 ? toastState.list[at] : queued >= 0 ? toastState.queue[queued] : null;
   const entry = Object.assign({ tone: "info" }, opts, {
     id,
     loading: !!opts.loading,
-    rev: at >= 0 ? toastState.list[at].rev + 1 : 0
+    rev: prev ? prev.rev + 1 : 0
   });
   if (at >= 0) {
     toastState.list = toastState.list.slice();
     toastState.list[at] = entry;
-  } else toastState.list = toastState.list.concat([entry]).slice(-3);
+  } else if (queued >= 0) {
+    toastState.queue = toastState.queue.slice();
+    toastState.queue[queued] = entry;
+  } else if (toastState.list.length < MAX_VISIBLE) toastState.list = toastState.list.concat([entry]);
+  else toastState.queue = toastState.queue.concat([entry]);
   emitToasts();
   return id;
 }
@@ -51,9 +65,12 @@ toast.loading = function(title, opts) {
   );
 };
 toast.dismiss = function(id) {
-  toastState.list = toastState.list.filter(function(t) {
+  const keep = function(t) {
     return t.id !== id;
-  });
+  };
+  toastState.list = toastState.list.filter(keep);
+  toastState.queue = toastState.queue.filter(keep);
+  promote();
   emitToasts();
 };
 function ToastItem(props) {

package/dist/esm/dates.js

@@ -141,6 +141,16 @@ function parseDate(text) {
   const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
+function todayIn(timeZone) {
+  const now = /* @__PURE__ */ new Date();
+  if (!timeZone) return toISO(now);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(now);
+}
 export {
   DATE_TEXT,
   ERA,
@@ -160,5 +170,6 @@ export {
   pad,
   parseDate,
   same,
-  toISO
+  toISO,
+  todayIn
 };

package/dist/esm/index.js

@@ -14,6 +14,7 @@ import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
 import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate, useFormatDate } from "./DatePicker.js";
+import { todayIn } from "./dates.js";
 import { Alert } from "./Alert.js";
 import { Toaster, toast } from "./Toaster.js";
 import { PasswordField } from "./PasswordField.js";
@@ -32,6 +33,8 @@ import { Stack } from "./Stack.js";
 import { Grid } from "./Grid.js";
 import { Container } from "./Container.js";
 import { AppShell } from "./AppShell.js";
+import { ActionBar } from "./ActionBar.js";
+import { BottomNav } from "./BottomNav.js";
 import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
 import { AuraProvider, useAuraLocale, useDensity, STRINGS } from "./locale.js";
@@ -54,11 +57,13 @@ import { Stepper } from "./Stepper.js";
 import { SegmentedControl } from "./SegmentedControl.js";
 export {
   Accordion,
+  ActionBar,
   Alert,
   AppShell,
   AuraProvider,
   Avatar,
   Badge,
+  BottomNav,
   Breadcrumb,
   Button,
   Calendar,
@@ -123,6 +128,7 @@ export {
   parseTime,
   statusTone,
   toast,
+  todayIn,
   useAuraLocale,
   useBreakpoint,
   useColorScheme,