@jirawatpyk/aura-react 5.14.0 → 5.15.0

package/dist/cjs/index.cjs

@@ -604,8 +604,11 @@ function cardElement(props, ref) {
     "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, {
@@ -614,12 +617,13 @@ function cardElement(props, ref) {
         "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
   );
@@ -754,6 +758,7 @@ function buttonClass(opts = {}) {
     "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
   );
@@ -883,6 +888,10 @@ var th = {
   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 ");
   }
@@ -1009,6 +1018,10 @@ var sv = {
   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(", ");
   }
@@ -1136,6 +1149,10 @@ var STRINGS = {
     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(", ");
     }
@@ -1202,7 +1219,8 @@ function ButtonLink(props, ref, Link) {
     "linkComponent",
     "href",
     "fullWidth",
-    "size"
+    "size",
+    "touchHeight"
   ]);
   const Tag3 = disabled ? "a" : Link;
   return /* @__PURE__ */ React6.createElement(
@@ -1218,6 +1236,7 @@ function ButtonLink(props, ref, Link) {
         variant,
         size: props.size,
         fullWidth: props.fullWidth,
+        touchHeight: props.touchHeight,
         className: props.className
       }),
       onClick: disabled ? void 0 : props.onClick
@@ -1248,7 +1267,8 @@ var Button = React6.forwardRef(
       "loading",
       "onClick",
       "fullWidth",
-      "size"
+      "size",
+      "touchHeight"
     ]);
     return /* @__PURE__ */ React6.createElement(
       "button",
@@ -1260,6 +1280,7 @@ var Button = React6.forwardRef(
           variant,
           size: props.size,
           fullWidth: props.fullWidth,
+          touchHeight: props.touchHeight,
           loading,
           className: props.className
         }),
@@ -1279,7 +1300,7 @@ var Button = React6.forwardRef(
 // 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",
     {
@@ -1288,7 +1309,12 @@ var IconButton = React7.forwardRef(function IconButton2(props, ref) {
       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" })
   );
@@ -1560,7 +1586,8 @@ var Checkbox = React10.forwardRef(function Checkbox2(props, ref) {
     "description",
     "className",
     "tabIndex",
-    "disabled"
+    "disabled",
+    "hitArea"
   ]);
   const text2 = props.children;
   const labelled = text2 != null && text2 !== "";
@@ -1570,10 +1597,19 @@ var Checkbox = React10.forwardRef(function Checkbox2(props, ref) {
       "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();
       }
@@ -4122,7 +4158,13 @@ var FilterBar = React26.forwardRef(function FilterBar2(props, ref) {
       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",
@@ -6124,7 +6166,13 @@ var Tabs = React33.forwardRef(function Tabs2(props, ref) {
   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);
   };
@@ -6517,13 +6565,83 @@ var Breadcrumb = React35.forwardRef(function Breadcrumb2(props, ref) {
   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
@@ -6844,7 +6962,8 @@ function headerLabels(children) {
   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(
@@ -6868,7 +6987,7 @@ var Table = React44.forwardRef(function Table2(props, ref) {
       ro.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ React44.createElement(
+  const table = /* @__PURE__ */ React44.createElement(
     "div",
     {
       ref: wrap,
@@ -6887,6 +7006,7 @@ var Table = React44.forwardRef(function Table2(props, ref) {
           "aura-tbl",
           stackBelow && "aura-tbl--stack-" + stackBelow,
           align === "middle" && "aura-tbl--middle",
+          cards && "aura-tbl--cards",
           className
         ),
         role: stackBelow ? "table" : void 0,
@@ -6896,6 +7016,7 @@ var Table = React44.forwardRef(function Table2(props, ref) {
       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) {
@@ -7997,9 +8118,13 @@ var Badge = React52.forwardRef(function Badge2(props, ref) {
 // 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",
@@ -8023,9 +8148,16 @@ var Progress = React53.forwardRef(function Progress2(props, ref) {
         "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
   );

package/dist/esm/Breadcrumb.js

@@ -8,13 +8,83 @@ const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
   const t = useStrings();
   const Link = useLinkComponent(props.linkComponent);
   const items = props.items || [];
-  return /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React.createElement("ol", null, items.map(function(it, i) {
+  const collapsible = !!props.collapseBelow && items.length > 2;
+  const trail = items.map(function(it) {
+    return it.label + "
" + (it.href || "");
+  }).join("");
+  const st = React.useState(null), expanded = st[0] === trail, setExpanded = function() {
+    st[1](trail);
+  };
+  const listRef = React.useRef(null);
+  const focusNext = React.useRef(false);
+  React.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__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronRight, null), size: 12, className: "aura-crumbs__sep" });
+  const more = collapsible && !expanded ? /* @__PURE__ */ React.createElement("li", { key: "more", className: "aura-crumbs__more" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-label": t.breadcrumbMore,
+      onClick: function() {
+        focusNext.current = true;
+        setExpanded();
+      }
+    },
+    "\u2026"
+  ), sep) : null;
+  const out = [];
+  items.forEach(function(it, i) {
     const last = i === items.length - 1;
-    return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React.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__ */ React.createElement("span", { className: "aura-crumbs__text" }, it.label)
-    ), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.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__ */ React.createElement(
+        "li",
+        {
+          key: i,
+          ...it.itemProps,
+          className: cx(it.itemProps && it.itemProps.className, collapsible && !last && i > 0 && "aura-crumbs__middle") || void 0
+        },
+        last ? /* @__PURE__ */ React.createElement("span", { ...plain, "aria-current": "page", className: cx("aura-crumbs__current", lp.className) }, it.label) : it.href ? /* @__PURE__ */ React.createElement(Link, { ...lp, href: it.href, onClick: click }, it.label) : it.onClick ? /* @__PURE__ */ React.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__ */ React.createElement("span", { ...plain, className: cx("aura-crumbs__text", lp.className) }, it.label)
+        ),
+        last ? null : sep
+      )
+    );
+    if (i === 0 && more) out.push(more);
+  });
+  return /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": props.label || t.breadcrumb,
+      className: cx(
+        "aura-crumbs",
+        collapsible && !expanded && "aura-crumbs--collapse-" + props.collapseBelow,
+        props.className
+      )
+    },
+    /* @__PURE__ */ React.createElement("ol", { ref: listRef }, out)
+  );
 });
 export {
   Breadcrumb

package/dist/esm/Button.js

@@ -18,7 +18,8 @@ function ButtonLink(props, ref, Link) {
     "linkComponent",
     "href",
     "fullWidth",
-    "size"
+    "size",
+    "touchHeight"
   ]);
   const Tag = disabled ? "a" : Link;
   return /* @__PURE__ */ React.createElement(
@@ -34,6 +35,7 @@ function ButtonLink(props, ref, Link) {
         variant,
         size: props.size,
         fullWidth: props.fullWidth,
+        touchHeight: props.touchHeight,
         className: props.className
       }),
       onClick: disabled ? void 0 : props.onClick
@@ -64,7 +66,8 @@ const Button = React.forwardRef(
       "loading",
       "onClick",
       "fullWidth",
-      "size"
+      "size",
+      "touchHeight"
     ]);
     return /* @__PURE__ */ React.createElement(
       "button",
@@ -76,6 +79,7 @@ const Button = React.forwardRef(
           variant,
           size: props.size,
           fullWidth: props.fullWidth,
+          touchHeight: props.touchHeight,
           loading,
           className: props.className
         }),

package/dist/esm/Checkbox.js

@@ -22,7 +22,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
     "description",
     "className",
     "tabIndex",
-    "disabled"
+    "disabled",
+    "hitArea"
   ]);
   const text = props.children;
   const labelled = text != null && text !== "";
@@ -32,10 +33,19 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       "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__ */ React.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();
       }

package/dist/esm/FilterBar.js

@@ -55,7 +55,13 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
       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__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",

package/dist/esm/IconButton.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cx, omit } from "./internal.js";
 import { Icon } from "./Icon.js";
 const IconButton = React.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__ */ React.createElement(
     "button",
     {
@@ -12,7 +12,12 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
       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__ */ React.createElement(Icon, { name: props.icon, size: props.size || "sm" })
   );

package/dist/esm/Progress.js

@@ -1,10 +1,15 @@
 'use client';
 import * as React from "react";
 import { cx, tone, uid } from "./internal.js";
+import { useStrings } from "./locale.js";
 const Progress = React.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__ */ React.createElement(
     "div",
@@ -28,9 +33,16 @@ const Progress = React.forwardRef(function Progress2(props, ref) {
         "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__ */ React.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
+      /* @__PURE__ */ React.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 }),
+      sec ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "aura-progress__bar aura-progress__bar--reserved",
+          style: { left: pct + "%", width: spct + "%" }
+        }
+      ) : null
     ),
     props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
   );

package/dist/esm/Table.js

@@ -47,7 +47,8 @@ function headerLabels(children) {
   return out;
 }
 const Table = React.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(
@@ -71,7 +72,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
       ro.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  const table = /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: wrap,
@@ -90,6 +91,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
           "aura-tbl",
           stackBelow && "aura-tbl--stack-" + stackBelow,
           align === "middle" && "aura-tbl--middle",
+          cards && "aura-tbl--cards",
           className
         ),
         role: stackBelow ? "table" : void 0,
@@ -99,6 +101,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
       labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
     )
   );
+  return cards ? /* @__PURE__ */ React.createElement("div", { className: "aura-tbl-cards aura-tbl-cards--" + stackBelow }, table) : table;
 });
 function section(tag, cls) {
   const C = React.forwardRef(function TableSection(props, ref) {

package/dist/esm/Tabs.js

@@ -24,7 +24,13 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   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);
   };