@jirawatpyk/aura-react 5.14.0 → 5.16.0

package/dist/aura.bundle.js

@@ -138,6 +138,7 @@ window.Aura = (() => {
     useBreakpoint: () => useBreakpoint,
     useColorScheme: () => useColorScheme,
     useDensity: () => useDensity,
+    useDialogClose: () => useDialogClose,
     useFormatDate: () => useFormatDate,
     useResponsive: () => useResponsive
   });
@@ -622,8 +623,11 @@ window.Aura = (() => {
       "interactive",
       "as",
       "className",
-      "titleId"
+      "titleId",
+      "header",
+      "flushBelow"
     ]);
+    const head = props.header !== void 0 && props.header !== null && props.header !== false;
     return h2(
       props.as || "section",
       Object.assign({}, rest, {
@@ -632,12 +636,13 @@ window.Aura = (() => {
           "aura-card",
           creative && "aura-card--creative",
           props.interactive && "is-interactive",
+          props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
           props.className
         ),
         /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-        "aria-labelledby": props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+        "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
       }),
-      props.title || props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React4.createElement("div", { className: "aura-card__heading" }, props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React4.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+      head || props.title || props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React4.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React4.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
       props.children ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__body" }, props.children) : null,
       props.footer ? /* @__PURE__ */ React4.createElement("div", { className: "aura-card__foot" }, props.footer) : null
     );
@@ -772,6 +777,7 @@ window.Aura = (() => {
       "aura-btn--" + (opts.variant || "primary"),
       opts.size === "sm" && "aura-btn--sm",
       opts.fullWidth && "aura-btn--full",
+      opts.touchHeight && "aura-btn--touch",
       opts.loading && "is-loading",
       opts.className
     );
@@ -901,6 +907,10 @@ window.Aura = (() => {
     pageN: function(p) {
       return "\u0E2B\u0E19\u0E49\u0E32 " + p;
     },
+    progressReserved: function(v, r, max) {
+      return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
+    },
+    breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
     accepts: function(list, max) {
       return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
     }
@@ -1027,6 +1037,10 @@ window.Aura = (() => {
     pageN: function(p) {
       return "Sida " + p;
     },
+    progressReserved: function(v, r, max) {
+      return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
+    },
+    breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
     accepts: function(list, max) {
       return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
     }
@@ -1154,6 +1168,10 @@ window.Aura = (() => {
       pageN: function(p) {
         return "Page " + p;
       },
+      progressReserved: function(v, r, max) {
+        return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
+      },
+      breadcrumbMore: "Show the full path",
       accepts: function(list, max) {
         return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
       }
@@ -1220,7 +1238,8 @@ window.Aura = (() => {
       "linkComponent",
       "href",
       "fullWidth",
-      "size"
+      "size",
+      "touchHeight"
     ]);
     const Tag3 = disabled ? "a" : Link;
     return /* @__PURE__ */ React6.createElement(
@@ -1236,6 +1255,7 @@ window.Aura = (() => {
           variant,
           size: props.size,
           fullWidth: props.fullWidth,
+          touchHeight: props.touchHeight,
           className: props.className
         }),
         onClick: disabled ? void 0 : props.onClick
@@ -1266,7 +1286,8 @@ window.Aura = (() => {
         "loading",
         "onClick",
         "fullWidth",
-        "size"
+        "size",
+        "touchHeight"
       ]);
       return /* @__PURE__ */ React6.createElement(
         "button",
@@ -1278,6 +1299,7 @@ window.Aura = (() => {
             variant,
             size: props.size,
             fullWidth: props.fullWidth,
+            touchHeight: props.touchHeight,
             loading,
             className: props.className
           }),
@@ -1297,7 +1319,7 @@ window.Aura = (() => {
   // src/IconButton.tsx
   var React7 = __toESM(require_react(), 1);
   var IconButton = React7.forwardRef(function IconButton2(props, ref) {
-    const rest = omit(props, ["icon", "label", "className", "size", "tone"]);
+    const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight"]);
     return /* @__PURE__ */ React7.createElement(
       "button",
       {
@@ -1306,7 +1328,12 @@ window.Aura = (() => {
         type: props.type || "button",
         "aria-label": props.label,
         title: props.label,
-        className: cx("aura-icon-btn", props.tone === "danger" && "aura-icon-btn--danger", props.className)
+        className: cx(
+          "aura-icon-btn",
+          props.tone === "danger" && "aura-icon-btn--danger",
+          props.touchHeight && "aura-icon-btn--touch",
+          props.className
+        )
       },
       /* @__PURE__ */ React7.createElement(Icon, { name: props.icon, size: props.size || "sm" })
     );
@@ -1578,7 +1605,8 @@ window.Aura = (() => {
       "description",
       "className",
       "tabIndex",
-      "disabled"
+      "disabled",
+      "hitArea"
     ]);
     const text2 = props.children;
     const labelled = text2 != null && text2 !== "";
@@ -1588,10 +1616,19 @@ window.Aura = (() => {
         "Checkbox `label` is only the accessible name: it is not shown. In 6.0 it will be shown beside the box, like Switch and TextField. For visible text now pass it as children; for a bare box (a table row) add `hideLabel`."
       );
     const descId = props.description ? (props.id || auto) + "-desc" : void 0;
+    const ha = props.hitArea;
+    const hit = !labelled && ha && ha !== "box" ? ha === "target" ? { x: 4, y: 4 } : ha : null;
     return /* @__PURE__ */ React10.createElement(
       "label",
       {
-        className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
+        className: cx(
+          "aura-check",
+          labelled && "aura-check--labelled",
+          hit && "has-hit",
+          props.disabled && "is-disabled",
+          props.className
+        ),
+        style: hit ? { "--aura-check-hit-x": hit.x + "px", "--aura-check-hit-y": hit.y + "px" } : void 0,
         onClick: function(e) {
           e.stopPropagation();
         }
@@ -2430,6 +2467,13 @@ window.Aura = (() => {
       const density = useDensity();
       const auto = uid(), id = props.id || auto, listId = id + "-list";
       const options = (props.options || []).map(toOpt);
+      const groups = props.groups || [];
+      groups.forEach(function(g, gi) {
+        g.options.forEach(function(o) {
+          options.push(Object.assign({}, toOpt(o), { __g: gi }));
+        });
+      });
+      const custom = !multi && !!props.allowCustomValue;
       const st = useMaybeControlled(
         multi ? mp.value : props.value === void 0 ? void 0 : props.value == null ? [] : [props.value],
         multi ? mp.defaultValue || [] : props.defaultValue == null ? [] : [props.defaultValue],
@@ -2469,7 +2513,9 @@ window.Aura = (() => {
       });
       const more = shown.length > limit;
       shown = shown.slice(0, limit);
-      const activeIdx = Math.min(active, shown.length - 1);
+      const activeIdx = active < 0 ? query ? shown.findIndex(function(o) {
+        return !o.disabled && norm(o.label) === norm(query.trim());
+      }) : -1 : Math.min(active, shown.length - 1);
       function place() {
         if (!boxRef.current) return;
         const r = boxRef.current.getBoundingClientRect();
@@ -2494,6 +2540,7 @@ window.Aura = (() => {
           function outside(e) {
             if (boxRef.current && boxRef.current.contains(e.target)) return;
             if (listRef.current && listRef.current.contains(e.target)) return;
+            if (commitRef.current()) return;
             close(false);
           }
           function onScroll(e) {
@@ -2530,6 +2577,27 @@ window.Aura = (() => {
         setOpen(false);
         setQuery(null);
       }
+      const committed = React19.useRef(false);
+      const commitRef = React19.useRef(function() {
+        return false;
+      });
+      function commitTyped() {
+        if (!custom || query == null || committed.current) return false;
+        committed.current = true;
+        const q = query.trim();
+        if (!q) {
+          if (props.clearable !== false) setValue(null);
+        } else {
+          const hit = options.filter(function(o) {
+            return !o.disabled && norm(o.label) === norm(q);
+          })[0];
+          setValue(hit ? hit.value : q);
+        }
+        setQuery(null);
+        setOpen(false);
+        return true;
+      }
+      commitRef.current = commitTyped;
       function choose(o) {
         if (!o || o.disabled) return;
         if (multi) {
@@ -2570,7 +2638,7 @@ window.Aura = (() => {
           if (open && live[activeIdx]) {
             e.preventDefault();
             choose(live[activeIdx]);
-          }
+          } else if (commitTyped()) e.preventDefault();
         } else if (k === "Escape") {
           if (open) {
             e.preventDefault();
@@ -2582,58 +2650,95 @@ window.Aura = (() => {
         } else if (k === "Backspace" && multi && !props.readOnly && !text2 && values.length) {
           setValues(values.slice(0, -1));
         } else if (k === "Tab") {
+          if (custom && open && query != null && live[activeIdx]) {
+            choose(live[activeIdx]);
+            return;
+          }
+          if (commitTyped()) return;
           if (open) close();
         }
       }
-      const text2 = query != null ? query : selected ? selected.label : "";
+      const text2 = query != null ? query : selected ? selected.label : custom && value != null ? value : "";
       const summaryId = id + "-picked";
       const optId = function(i) {
         return id + "-opt-" + i;
       };
+      function renderOpt(o, i) {
+        const isSel = multi ? isPicked(o.value) : !!selected && o.value === selected.value;
+        const blocked = o.disabled || multi && full && !isSel;
+        return /* @__PURE__ */ React19.createElement(
+          "li",
+          {
+            key: o.value,
+            id: optId(i),
+            role: "option",
+            "data-idx": i,
+            "aria-selected": isSel,
+            "aria-disabled": blocked || void 0,
+            className: cx(
+              "aura-combo__option",
+              i === activeIdx && "is-active",
+              isSel && "is-selected",
+              blocked && "is-disabled"
+            ),
+            onPointerDown: function(e) {
+              e.preventDefault();
+            },
+            onClick: function() {
+              if (!blocked || isSel) choose(o);
+            },
+            onPointerMove: function() {
+              if (activeIdx !== i) setActive(i);
+            }
+          },
+          o.icon ? /* @__PURE__ */ React19.createElement(Icon, { name: o.icon }) : null,
+          /* @__PURE__ */ React19.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React19.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React19.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
+          isSel ? /* @__PURE__ */ React19.createElement(Icon, { name: /* @__PURE__ */ React19.createElement(IconCheck, null), className: "aura-combo__check" }) : null
+        );
+      }
+      function grouped(list2) {
+        const out = [];
+        list2.forEach(function(o, i) {
+          const last = out[out.length - 1];
+          if (last && last.g === o.__g) last.items.push([o, i]);
+          else out.push({ g: o.__g, items: [[o, i]] });
+        });
+        return out;
+      }
       const list = open && mounted && posState[0] ? (0, import_react_dom3.createPortal)(
-        /* @__PURE__ */ React19.createElement("div", { ref: listRef, "data-density": density, className: "aura-combo__popover", style: posState[0] }, live.length ? /* @__PURE__ */ React19.createElement(
-          "ul",
+        /* @__PURE__ */ React19.createElement(
+          "div",
           {
-            id: listId,
-            role: "listbox",
-            "aria-label": props.label,
-            "aria-multiselectable": multi || void 0,
-            className: "aura-combo__list"
+            ref: listRef,
+            "data-density": density,
+            className: "aura-combo__popover",
+            style: posState[0],
+            onPointerDown: function(e) {
+              e.preventDefault();
+            }
           },
-          live.map(function(o, i) {
-            const isSel = multi ? isPicked(o.value) : !!selected && o.value === selected.value;
-            const blocked = o.disabled || multi && full && !isSel;
-            return /* @__PURE__ */ React19.createElement(
-              "li",
-              {
-                key: o.value,
-                id: optId(i),
-                role: "option",
-                "data-idx": i,
-                "aria-selected": isSel,
-                "aria-disabled": blocked || void 0,
-                className: cx(
-                  "aura-combo__option",
-                  i === activeIdx && "is-active",
-                  isSel && "is-selected",
-                  blocked && "is-disabled"
-                ),
-                onPointerDown: function(e) {
-                  e.preventDefault();
-                },
-                onClick: function() {
-                  if (!blocked || isSel) choose(o);
-                },
-                onPointerMove: function() {
-                  if (activeIdx !== i) setActive(i);
-                }
-              },
-              o.icon ? /* @__PURE__ */ React19.createElement(Icon, { name: o.icon }) : null,
-              /* @__PURE__ */ React19.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React19.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React19.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
-              isSel ? /* @__PURE__ */ React19.createElement(Icon, { name: /* @__PURE__ */ React19.createElement(IconCheck, null), className: "aura-combo__check" }) : null
-            );
-          })
-        ) : null, props.loading || !live.length || more ? /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React19.createElement(Icon, { name: /* @__PURE__ */ React19.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__note" }, t.keepTyping((props.options || []).length))) : null),
+          live.length ? /* @__PURE__ */ React19.createElement(
+            "ul",
+            {
+              id: listId,
+              role: "listbox",
+              "aria-label": props.label,
+              "aria-multiselectable": multi || void 0,
+              className: "aura-combo__list"
+            },
+            grouped(live).map(function(seg) {
+              if (seg.g == null)
+                return /* @__PURE__ */ React19.createElement(React19.Fragment, { key: "u" + seg.items[0][1] }, seg.items.map(function(p) {
+                  return renderOpt(p[0], p[1]);
+                }));
+              const gid = id + "-group-" + seg.g + "-" + seg.items[0][1];
+              return /* @__PURE__ */ React19.createElement("li", { key: gid, role: "group", "aria-labelledby": gid, className: "aura-combo__group" }, /* @__PURE__ */ React19.createElement("span", { id: gid, role: "presentation", className: "aura-combo__group-label" }, groups[seg.g].label), /* @__PURE__ */ React19.createElement("ul", { role: "none", className: "aura-combo__grouplist" }, seg.items.map(function(p) {
+                return renderOpt(p[0], p[1]);
+              })));
+            })
+          ) : null,
+          props.loading || !live.length || more ? /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__list", role: "status" }, props.loading ? /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__note" }, /* @__PURE__ */ React19.createElement(Icon, { name: /* @__PURE__ */ React19.createElement(IconLoaderCircle, null), className: "aura-spin" }), props.loadingText || t.searching) : !live.length ? /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__note" }, props.emptyText || t.noMatches) : /* @__PURE__ */ React19.createElement("div", { className: "aura-combo__note" }, t.keepTyping(options.length))) : null
+        ),
         document.body
       ) : null;
       return /* @__PURE__ */ React19.createElement(
@@ -2695,8 +2800,9 @@ window.Aura = (() => {
             required: props.required && (!multi || !values.length),
             value: text2,
             onChange: function(e) {
+              committed.current = false;
               setQuery(e.target.value);
-              setActive(0);
+              setActive(custom ? -1 : 0);
               if (!open) setOpen(true);
               if (props.onSearch) props.onSearch(e.target.value);
             },
@@ -2705,6 +2811,8 @@ window.Aura = (() => {
             onBlur: function() {
               setTimeout(function() {
                 if (listRef.current && listRef.current.contains(document.activeElement)) return;
+                if (custom && document.activeElement === inputRef.current) return;
+                if (commitRef.current()) return;
                 setOpen(false);
                 setQuery(null);
               }, 0);
@@ -4140,7 +4248,13 @@ window.Aura = (() => {
         ref,
         role: "region",
         "aria-label": props.label || t.filters,
-        className: cx("aura-filterbar", props.searchGrow && "aura-filterbar--grow", props.className)
+        className: cx(
+          "aura-filterbar",
+          props.searchGrow && "aura-filterbar--grow",
+          props.controlsLayout === "fill" && "aura-filterbar--fill",
+          props.stackBelow === "lg" && "aura-filterbar--stack-lg",
+          props.className
+        )
       },
       /* @__PURE__ */ React26.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React26.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React26.createElement(Icon, { name: /* @__PURE__ */ React26.createElement(IconSearch, null), className: "aura-input__icon" }), /* @__PURE__ */ React26.createElement(
         "input",
@@ -4228,6 +4342,8 @@ window.Aura = (() => {
     const mounted = useMounted();
     const prev = React27.useRef(null);
     const o = opts || {};
+    const latest = React27.useRef(o);
+    latest.current = o;
     React27.useEffect(
       function() {
         if (!open || !mounted) return;
@@ -4248,7 +4364,12 @@ window.Aura = (() => {
         if (target && o.autoFocus !== false) target.focus();
         return function() {
           unlock();
-          if (prev.current && prev.current.focus) prev.current.focus();
+          const l = latest.current;
+          const ff = l.finalFocus;
+          const to = ff ? typeof ff === "function" ? ff() : ff.current : null;
+          const back = to && to.isConnected ? to : prev.current;
+          if (back && back.focus) back.focus();
+          if (l.onCloseComplete) l.onCloseComplete();
         };
       },
       [open, mounted]
@@ -4630,22 +4751,77 @@ window.Aura = (() => {
   // src/Dialog.tsx
   var React30 = __toESM(require_react(), 1);
   var import_react_dom8 = __toESM(require_react_dom(), 1);
+  var DialogClose = React30.createContext(null);
+  function useDialogClose() {
+    return React30.useContext(DialogClose) || function() {
+    };
+  }
   var Dialog = React30.forwardRef(function Dialog2(props, ref) {
     const t = useStrings();
     const density = useDensity();
     const own = React30.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
+    const openState = useMaybeControlled(props.open, false, null), open = openState[0];
+    if (props.open === void 0 && !props.trigger)
+      devWarnOnce("dialog-no-open", "Dialog has neither `open` nor `trigger`, so it can never open. Pass one of them.");
+    const trigId = uid();
+    function closeNow() {
+      if (props.open === void 0) openState[1](false);
+      if (props.onClose) props.onClose();
+    }
     function close() {
-      if (props.dismissible !== false && props.onClose) props.onClose();
+      if (props.dismissible === false) return;
+      closeNow();
     }
     const scrimCloses = props.dismissible !== false && (props.dismissOnScrim !== void 0 ? props.dismissOnScrim : props.role !== "alertdialog");
-    const modal = useModal(props.open, own, {
+    const modal = useModal(open, own, {
       autoFocus: props.autoFocus,
       onEscape: close,
       bodySelector: ".aura-dialog__body",
-      footSelector: ".aura-dialog__foot"
+      footSelector: ".aura-dialog__foot",
+      /* With a trigger, focus goes back to it even where a click doesn't focus buttons (Safari). */
+      finalFocus: props.trigger ? function() {
+        const ff = props.finalFocus;
+        const to = ff ? typeof ff === "function" ? ff() : ff.current : null;
+        return to || document.querySelector('[data-aura-trigger="' + trigId + '"]');
+      } : props.finalFocus,
+      onCloseComplete: props.onCloseComplete
     });
-    if (!modal.ready) return null;
-    return (0, import_react_dom8.createPortal)(
+    const trig = props.trigger;
+    const trigger = trig && React30.isValidElement(trig) ? React30.cloneElement(trig, {
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "data-aura-trigger": trigId,
+      onClick: function(e) {
+        const own2 = trig.props.onClick;
+        if (own2) own2(e);
+        if (e.defaultPrevented) return;
+        if (props.open === void 0) openState[1](true);
+        if (props.onOpen) props.onOpen();
+      }
+    }) : null;
+    if (!modal.ready) return trigger;
+    const rest = omit(props, [
+      "open",
+      "onClose",
+      "title",
+      "description",
+      "children",
+      "footer",
+      "size",
+      "dismissible",
+      "dismissOnScrim",
+      "role",
+      "autoFocus",
+      "className",
+      "trigger",
+      "onOpen",
+      "finalFocus",
+      "onCloseComplete",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-modal"
+    ]);
+    const panel = (0, import_react_dom8.createPortal)(
       /* @__PURE__ */ React30.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React30.createElement(
         "div",
         {
@@ -4659,21 +4835,22 @@ window.Aura = (() => {
       ), /* @__PURE__ */ React30.createElement(
         "div",
         {
+          ...rest,
           ref: merged,
           role: props.role || "dialog",
           "aria-modal": true,
           "aria-labelledby": titleId,
-          "aria-describedby": props.description ? descId : void 0,
+          "aria-describedby": cx(props.description ? descId : "", props["aria-describedby"]) || void 0,
           tabIndex: -1,
           className: cx("aura-dialog", "aura-dialog--" + (props.size || "md"), props.className)
         },
         /* @__PURE__ */ React30.createElement("div", { className: "aura-dialog__head" }, /* @__PURE__ */ React30.createElement("h2", { className: "aura-dialog__title", id: titleId }, props.title), props.dismissible !== false ? /* @__PURE__ */ React30.createElement(IconButton, { icon: /* @__PURE__ */ React30.createElement(IconX, null), label: t.close, className: "aura-dialog__close", onClick: close }) : null),
         props.description ? /* @__PURE__ */ React30.createElement("p", { className: "aura-dialog__desc", id: descId }, props.description) : null,
-        props.children ? /* @__PURE__ */ React30.createElement("div", { className: "aura-dialog__body" }, props.children) : null,
-        props.footer ? /* @__PURE__ */ React30.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null
+        /* @__PURE__ */ React30.createElement(DialogClose.Provider, { value: closeNow }, props.children ? /* @__PURE__ */ React30.createElement("div", { className: "aura-dialog__body" }, props.children) : null, props.footer ? /* @__PURE__ */ React30.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null)
       )),
       document.body
     );
+    return trigger ? /* @__PURE__ */ React30.createElement(React30.Fragment, null, trigger, panel) : panel;
   });
   var Drawer = React30.forwardRef(function Drawer2(props, ref) {
     const t = useStrings();
@@ -4686,7 +4863,9 @@ window.Aura = (() => {
       autoFocus: props.autoFocus,
       onEscape: close,
       bodySelector: ".aura-drawer__body",
-      footSelector: ".aura-drawer__foot"
+      footSelector: ".aura-drawer__foot",
+      finalFocus: props.finalFocus,
+      onCloseComplete: props.onCloseComplete
     });
     if (!modal.ready) return null;
     const side = props.side === "left" ? "left" : "right";
@@ -4707,7 +4886,9 @@ window.Aura = (() => {
       "aria-labelledby",
       "className",
       "closeLabel",
-      "closeProps"
+      "closeProps",
+      "finalFocus",
+      "onCloseComplete"
     ]);
     const drawerScrimCloses = props.dismissible !== false && props.dismissOnScrim !== false;
     return (0, import_react_dom8.createPortal)(
@@ -4803,7 +4984,9 @@ window.Aura = (() => {
       oneCallback ? null : props.onSortChange
     );
     const sort = sortState[0], setSort = sortState[1];
-    const selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
+    const selState = useMaybeControlled(props.selected, props.defaultSelected || [], null);
+    const onSel = React31.useRef(props.onSelectionChange);
+    onSel.current = props.onSelectionChange;
     const canSelect = function(r) {
       return !!r && (!props.isRowSelectable || !!props.isRowSelectable(r));
     };
@@ -4814,7 +4997,11 @@ window.Aura = (() => {
       });
     const selected = selState[0].filter(function(k) {
       return !rejected[String(k)];
-    }), setSelected = selState[1];
+    });
+    function setSelected(next, change) {
+      selState[1](next);
+      if (onSel.current) onSel.current(next, change || { key: null, shiftKey: false, source: "sync" });
+    }
     const droppedSig = selState[0].length === selected.length ? "" : "#" + selState[0].filter(function(k) {
       return rejected[String(k)];
     }).join("\0") + "#" + selected.join("\0");
@@ -5302,11 +5489,39 @@ window.Aura = (() => {
       return selSet[String(k)];
     }).length;
     const all = nSel > 0 && nSel === pageKeys.length;
-    function toggle(k, on) {
+    const anchor = React31.useRef(null);
+    const shiftClick = React31.useRef(false);
+    function toggle(k, on, how) {
+      const same2 = function(x) {
+        return String(x) === String(k);
+      };
+      let range = null;
+      if (props.rangeSelect && how.shiftKey && anchor.current != null) {
+        const from = pageKeys.findIndex(function(x) {
+          return String(x) === String(anchor.current);
+        });
+        const to = pageKeys.findIndex(same2);
+        if (from >= 0 && to >= 0) range = pageKeys.slice(Math.min(from, to), Math.max(from, to) + 1);
+      }
+      anchor.current = k;
+      const change = { key: k, shiftKey: how.shiftKey, source: how.source };
+      if (range) {
+        const inRange = {};
+        range.forEach(function(x) {
+          inRange[String(x)] = true;
+        });
+        const rest = selected.filter(function(x) {
+          return !inRange[String(x)];
+        });
+        change.range = range;
+        setSelected(on ? rest.concat(range) : rest, change);
+        return;
+      }
       setSelected(
         on ? selected.concat([k]) : selected.filter(function(x) {
-          return String(x) !== String(k);
-        })
+          return !same2(x);
+        }),
+        change
       );
     }
     function toggleAll() {
@@ -5319,7 +5534,8 @@ window.Aura = (() => {
           pageKeys.filter(function(k) {
             return !selSet[String(k)];
           })
-        )
+        ),
+        { key: null, shiftKey: false, source: "all" }
       );
     }
     function canResize(c) {
@@ -5498,8 +5714,8 @@ window.Aura = (() => {
         };
       }).concat([{ separator: true }, { label: t.resetColumns, icon: /* @__PURE__ */ React31.createElement(IconRotateCcw, null), onSelect: resetColumns }]);
     }
-    function openMenu(kind, key, anchor, rc) {
-      setMenu({ kind, key, anchor, rc });
+    function openMenu(kind, key, anchor2, rc) {
+      setMenu({ kind, key, anchor: anchor2, rc });
     }
     function closeMenu(restore) {
       const m = menu;
@@ -5559,7 +5775,8 @@ window.Aura = (() => {
           if (pageKeys.length) toggleAll();
         } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
         else if (r > 0 && k === " " && selectable) {
-          if (canSelect(row) && !(stacked && noCardSel)) toggle(row[rowKey], !selSet[row[rowKey]]);
+          if (canSelect(row) && !(stacked && noCardSel))
+            toggle(row[rowKey], !selSet[row[rowKey]], { shiftKey: e.shiftKey, source: "keyboard" });
         } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
           followRow(target.closest('[role="row"]'), e);
         else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
@@ -5749,6 +5966,9 @@ window.Aura = (() => {
               "aria-label": canSelect(r) ? selLabel : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
               onFocus: function(e) {
                 if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
+              },
+              onClickCapture: function(e) {
+                shiftClick.current = e.shiftKey;
               }
             },
             canSelect(r) ? /* @__PURE__ */ React31.createElement(
@@ -5759,7 +5979,9 @@ window.Aura = (() => {
                 tabIndex: -1,
                 label: selLabel,
                 onChange: function(on) {
-                  toggle(k, on);
+                  const shift = shiftClick.current;
+                  shiftClick.current = false;
+                  toggle(k, on, { shiftKey: shift, source: "click" });
                 }
               }
             ) : null
@@ -6142,7 +6364,13 @@ window.Aura = (() => {
     const Link = useLinkComponent(props.linkComponent);
     const manual = props.activation === "manual";
     const seg = props.variant === "segmented";
-    const listCls = cx("aura-tabs__list", seg && "aura-segmented", seg && props.fullWidth && "is-full");
+    const fw = props.fullWidth;
+    const listCls = cx(
+      "aura-tabs__list",
+      seg && "aura-segmented",
+      fw === true && (seg ? "is-full" : "is-fill"),
+      typeof fw === "string" && (seg ? "is-full-" : "is-fill-") + fw
+    );
     const tabCls = function(on, extra) {
       return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
     };
@@ -6463,16 +6691,19 @@ window.Aura = (() => {
           return item(c, depth + 1);
         })));
       }
-      const on = active === it.id;
+      const action = it.selectable === false;
+      const on = !action && active === it.id;
       const common = {
         ...tipHandlers(it.label),
-        className: cx("aura-nav__item", on && "is-active"),
+        className: cx("aura-nav__item", action && "aura-nav__item--action", on && "is-active"),
         "aria-current": on ? "page" : void 0,
         style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
         onClick: function(e) {
           if (!it.href) e.preventDefault();
           else if (!plainClick(e)) return;
-          st[1](it.id);
+          if (!action) st[1](it.id);
+          if (it.onSelect) it.onSelect();
+          if (action && props.onAction) props.onAction(it.id);
         }
       };
       return /* @__PURE__ */ React34.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React34.createElement(Link, { href: it.href, ...common }, inner(it, false, false)) : /* @__PURE__ */ React34.createElement("button", { type: "button", ...common }, inner(it, false, false)));
@@ -6489,6 +6720,7 @@ window.Aura = (() => {
           "aura-nav",
           collapsed && "aura-nav--collapsed",
           props.bordered === false && "aura-nav--borderless",
+          props.chevron === "right" && "aura-nav--chevron-right",
           props.className
         ),
         "data-collapsed": collapsed ? "" : void 0,
@@ -6502,7 +6734,20 @@ window.Aura = (() => {
         })));
       })),
       props.footer ? /* @__PURE__ */ React34.createElement("div", { className: "aura-nav__footer" }, props.footer) : null,
-      props.collapsible ? /* @__PURE__ */ React34.createElement("div", { className: "aura-nav__toggle" }, /* @__PURE__ */ React34.createElement(
+      props.collapsible && props.collapseToggle === "row" ? /* @__PURE__ */ React34.createElement("div", { className: "aura-nav__toggle aura-nav__toggle--row" }, /* @__PURE__ */ React34.createElement(
+        "button",
+        {
+          type: "button",
+          className: "aura-nav__item aura-nav__item--action",
+          ...tipHandlers(collapsed ? t.expandNav : t.collapseNav),
+          onClick: function() {
+            setTip(null);
+            col[1](!collapsed);
+          }
+        },
+        /* @__PURE__ */ React34.createElement(Icon, { name: collapsed ? /* @__PURE__ */ React34.createElement(IconPanelLeftOpen, null) : /* @__PURE__ */ React34.createElement(IconPanelLeftClose, null) }),
+        /* @__PURE__ */ React34.createElement("span", { className: "aura-nav__label" }, collapsed ? t.expandNav : t.collapseNav)
+      )) : props.collapsible ? /* @__PURE__ */ React34.createElement("div", { className: "aura-nav__toggle" }, /* @__PURE__ */ React34.createElement(
         IconButton,
         {
           icon: collapsed ? /* @__PURE__ */ React34.createElement(IconPanelLeftOpen, null) : /* @__PURE__ */ React34.createElement(IconPanelLeftClose, null),
@@ -6535,13 +6780,83 @@ window.Aura = (() => {
     const t = useStrings();
     const Link = useLinkComponent(props.linkComponent);
     const items2 = props.items || [];
-    return /* @__PURE__ */ React35.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React35.createElement("ol", null, items2.map(function(it, i) {
+    const collapsible = !!props.collapseBelow && items2.length > 2;
+    const trail = items2.map(function(it) {
+      return it.label + "
" + (it.href || "");
+    }).join("");
+    const st = React35.useState(null), expanded = st[0] === trail, setExpanded = function() {
+      st[1](trail);
+    };
+    const listRef = React35.useRef(null);
+    const focusNext = React35.useRef(false);
+    React35.useEffect(
+      function() {
+        if (!expanded || !focusNext.current) return;
+        focusNext.current = false;
+        const ol = listRef.current;
+        if (!ol) return;
+        let target = ol.querySelector(".aura-crumbs__middle a, .aura-crumbs__middle button");
+        if (!target) {
+          target = ol.querySelector(".aura-crumbs__middle > *");
+          if (target) target.tabIndex = -1;
+        }
+        if (target) target.focus();
+      },
+      [expanded]
+    );
+    const sep = /* @__PURE__ */ React35.createElement(Icon, { name: /* @__PURE__ */ React35.createElement(IconChevronRight, null), size: 12, className: "aura-crumbs__sep" });
+    const more = collapsible && !expanded ? /* @__PURE__ */ React35.createElement("li", { key: "more", className: "aura-crumbs__more" }, /* @__PURE__ */ React35.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": t.breadcrumbMore,
+        onClick: function() {
+          focusNext.current = true;
+          setExpanded();
+        }
+      },
+      "\u2026"
+    ), sep) : null;
+    const out = [];
+    items2.forEach(function(it, i) {
       const last = i === items2.length - 1;
-      return /* @__PURE__ */ React35.createElement("li", { key: i }, last ? /* @__PURE__ */ React35.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React35.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React35.createElement("button", { type: "button", onClick: it.onClick }, it.label) : (
-        /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
-        /* @__PURE__ */ React35.createElement("span", { className: "aura-crumbs__text" }, it.label)
-      ), last ? null : /* @__PURE__ */ React35.createElement(Icon, { name: /* @__PURE__ */ React35.createElement(IconChevronRight, null), size: 12, className: "aura-crumbs__sep" }));
-    })));
+      const lp = it.linkProps || {};
+      const plain = lp;
+      const own = lp.onClick;
+      const click = own || it.onClick ? function(e) {
+        if (own) own(e);
+        if (it.onClick) it.onClick();
+      } : void 0;
+      out.push(
+        /* @__PURE__ */ React35.createElement(
+          "li",
+          {
+            key: i,
+            ...it.itemProps,
+            className: cx(it.itemProps && it.itemProps.className, collapsible && !last && i > 0 && "aura-crumbs__middle") || void 0
+          },
+          last ? /* @__PURE__ */ React35.createElement("span", { ...plain, "aria-current": "page", className: cx("aura-crumbs__current", lp.className) }, it.label) : it.href ? /* @__PURE__ */ React35.createElement(Link, { ...lp, href: it.href, onClick: click }, it.label) : it.onClick ? /* @__PURE__ */ React35.createElement("button", { ...lp, type: "button", onClick: click }, it.label) : (
+            /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
+            /* @__PURE__ */ React35.createElement("span", { ...plain, className: cx("aura-crumbs__text", lp.className) }, it.label)
+          ),
+          last ? null : sep
+        )
+      );
+      if (i === 0 && more) out.push(more);
+    });
+    return /* @__PURE__ */ React35.createElement(
+      "nav",
+      {
+        ref,
+        "aria-label": props.label || t.breadcrumb,
+        className: cx(
+          "aura-crumbs",
+          collapsible && !expanded && "aura-crumbs--collapse-" + props.collapseBelow,
+          props.className
+        )
+      },
+      /* @__PURE__ */ React35.createElement("ol", { ref: listRef }, out)
+    );
   });
 
   // src/Avatar.tsx
@@ -6699,6 +7014,11 @@ window.Aura = (() => {
         onNav(id);
         setOpen(false);
       },
+      /* 5.16: an action row (Sign out) closes the drawer too. */
+      onAction: function(id) {
+        setOpen(false);
+        if (navEl.props.onAction) navEl.props.onAction(id);
+      },
       className: cx(navEl.props.className, "is-in-drawer"),
       collapsed: false,
       collapsible: false
@@ -6862,7 +7182,8 @@ window.Aura = (() => {
     return out;
   }
   var Table = React44.forwardRef(function Table2(props, ref) {
-    const { caption, captionHidden, density, stackBelow, align, bordered, className, children, ...rest } = props;
+    const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+    const cards = !!stackBelow && stackStyle === "cards";
     const labels = stackBelow ? headerLabels(children) : null;
     if (labels && !labels.length)
       devWarnOnce(
@@ -6886,7 +7207,7 @@ window.Aura = (() => {
         ro.disconnect();
       };
     }, []);
-    return /* @__PURE__ */ React44.createElement(
+    const table = /* @__PURE__ */ React44.createElement(
       "div",
       {
         ref: wrap,
@@ -6905,6 +7226,7 @@ window.Aura = (() => {
             "aura-tbl",
             stackBelow && "aura-tbl--stack-" + stackBelow,
             align === "middle" && "aura-tbl--middle",
+            cards && "aura-tbl--cards",
             className
           ),
           role: stackBelow ? "table" : void 0,
@@ -6914,6 +7236,7 @@ window.Aura = (() => {
         labels ? /* @__PURE__ */ React44.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React44.createElement(StackLabels.Provider, { value: null }, children) : children
       )
     );
+    return cards ? /* @__PURE__ */ React44.createElement("div", { className: "aura-tbl-cards aura-tbl-cards--" + stackBelow }, table) : table;
   });
   function section(tag, cls) {
     const C = React44.forwardRef(function TableSection(props, ref) {
@@ -8015,9 +8338,13 @@ window.Aura = (() => {
   // src/Progress.tsx
   var React53 = __toESM(require_react(), 1);
   var Progress = React53.forwardRef(function Progress2(props, ref) {
+    const t = useStrings();
     const auto = uid(), id = props.id || auto;
     const max = props.max || 100, det = props.value != null;
     const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
+    const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
+    const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
+    const valueText = props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
     const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
     return /* @__PURE__ */ React53.createElement(
       "div",
@@ -8041,9 +8368,16 @@ window.Aura = (() => {
           "aria-valuemin": det ? 0 : void 0,
           "aria-valuemax": det ? max : void 0,
           "aria-valuenow": det ? props.value : void 0,
-          "aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
+          "aria-valuetext": det ? valueText : void 0
         },
-        /* @__PURE__ */ React53.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
+        /* @__PURE__ */ React53.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 }),
+        sec ? /* @__PURE__ */ React53.createElement(
+          "span",
+          {
+            className: "aura-progress__bar aura-progress__bar--reserved",
+            style: { left: pct + "%", width: spct + "%" }
+          }
+        ) : null
       ),
       props.hint ? /* @__PURE__ */ React53.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
     );