@portnet/ui 5.0.27 → 6.0.0

package/dist/v2/patterns/ActionBar.js

@@ -0,0 +1,601 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+var _Home = _interopRequireDefault(require("@mui/icons-material/Home"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _styles = require("@mui/material/styles");
+var _Button = _interopRequireDefault(require("../components/Button"));
+var _OverflowMenu = _interopRequireDefault(require("../components/OverflowMenu"));
+var _tokens = require("../tokens");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["_slot", "label", "icon", "iconRight", "onClick", "disabled", "loading", "variant"],
+  _excluded2 = ["_slot"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
+ * ActionBar - Portnet UI v2 (pattern)
+ *
+ * Charter §07 — render order (left → right):
+ *
+ *   [ghost/secondary…]  [primary]  […overflow]
+ *
+ * Slot-based variant resolution:
+ *   slot="primary"   → Button variant="primary"
+ *   slot="secondary" → Button variant={action.variant || "secondary"}
+ *   slot="overflow"  → Button variant={action.variant || "ghost"}
+ *
+ * maxVisible (default 2):
+ *   orderedAll = [primary, ...secondary, ...overflow]
+ *   first maxVisible → visible buttons / rest → "…"
+ *
+ * Breadcrumb collapse (R-RS.5):
+ *   Below the `sm` breakpoint TOKEN (< 481px) a long trail used to
+ *   flex-wrap onto several lines, pushing the page title down. When the
+ *   trail has more than `collapseAfter` crumbs (default 3) the middle is
+ *   collapsed to a single "…" toggle that shows [first] › … › [last];
+ *   pressing it expands the full trail in place. Desktop always renders
+ *   the full trail. Keeps the nav to one line on phones (WCAG 1.4.10
+ *   Reflow) without hiding navigation from AT — the toggle is a real
+ *   button with an accessible name.
+ *
+ * ── `surface` DEFAULTS TO false — A PAGE HEADER IS NOT A CARD ────────
+ *
+ * The platform rule is that a page header sits on the page background, never
+ * on a white card. This default used to be `true`, which meant every call site
+ * that did not opt out rendered a --surface card with a bottom border — making
+ * the exception the norm across the GU modules.
+ *
+ * Note that `surface` drives TWO things, because `useAccent` is derived from
+ * it: the background/border AND the colour of the title, icon, back-arrow and
+ * crumb trail (--accent when non-surface, --fg / --fg-subtle when surfaced).
+ * They are deliberately coupled — an accent title on a white card reads as a
+ * link, and a near-black title on the page background loses the visual anchor
+ * the header needs. Decoupling them would need a separate prop and a design
+ * decision, not a default change.
+ *
+ * Pass surface={true} to opt back in to the card treatment where a header is
+ * genuinely nested inside a panel rather than heading a page.
+ *
+ * ── Subtitle visibility (S-01) ───────────────────────────────────────
+ *
+ * The subtitle renders at EVERY breakpoint. It used to be hidden below the `sm`
+ * token via `display: none`, which made every consuming module fail the
+ * mandatory "Never omit subtitles" pattern on phones — and removed the text from
+ * the accessibility tree, not just from the layout. On `xs` it is now bounded to
+ * two lines with a line-clamp instead; `sm` and above are unchanged. See the
+ * inline note at the render site for the full rationale.
+ */ /** Variant union, derived from Button (single source of truth). */ /** Structured breadcrumb entry (as opposed to a plain renderable node). */ /** A breadcrumb entry is either a plain node or a structured item. */ /** Action descriptor for primary / secondary / overflow slots. */
+var DEFAULT_LABELS = Object.freeze({
+  back: "Retour",
+  breadcrumb: "Fil d'Ariane",
+  home: "Accueil",
+  expandCrumbs: "Afficher le chemin complet"
+});
+var CRUMB_LINK_BASE_SX = Object.freeze({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--s-1)",
+  textDecoration: "none",
+  cursor: "pointer",
+  borderRadius: "var(--r-sm)",
+  padding: "2px 4px",
+  margin: "-2px -4px",
+  "&:hover": {
+    background: "var(--bg-hover)"
+  },
+  "&:focus-visible": {
+    outline: "2px solid var(--accent)",
+    outlineOffset: "var(--pui-outline-offset-inset, 0)"
+  }
+});
+var CRUMB_ELLIPSIS_SX = Object.freeze(_objectSpread(_objectSpread({}, CRUMB_LINK_BASE_SX), {}, {
+  background: "none",
+  border: "none",
+  font: "inherit",
+  fontSize: "var(--text-xs)",
+  lineHeight: 1
+}));
+function isStructuredCrumb(entry) {
+  return entry != null && _typeof(entry) === "object" && ! /*#__PURE__*/React.isValidElement(entry);
+}
+function getCrumbColor(isLast, useAccent) {
+  if (useAccent) return "var(--accent)";
+  return isLast ? "var(--fg)" : "var(--fg-subtle)";
+}
+function renderCrumbContent(entry, isLast, useAccent) {
+  var baseColor = getCrumbColor(isLast, useAccent);
+  var baseFontWeight = isLast ? "var(--fw-semibold)" : "var(--fw-regular)";
+  if (!isStructuredCrumb(entry)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      component: "span",
+      "aria-current": isLast ? "page" : undefined,
+      sx: {
+        color: baseColor,
+        fontWeight: baseFontWeight
+      },
+      children: entry
+    });
+  }
+  var label = entry.label,
+    icon = entry.icon,
+    onClick = entry.onClick,
+    href = entry.href,
+    ariaLabel = entry.ariaLabel;
+  var computedAria = ariaLabel || (typeof label === "string" ? label : undefined);
+  if (isLast) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      component: "span",
+      "aria-current": "page",
+      sx: {
+        color: baseColor,
+        fontWeight: baseFontWeight,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "var(--s-1)"
+      },
+      children: [icon, label]
+    });
+  }
+  if (href) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      component: "a",
+      href: href,
+      onClick: onClick,
+      "aria-label": computedAria,
+      sx: _objectSpread(_objectSpread({}, CRUMB_LINK_BASE_SX), {}, {
+        color: baseColor
+      }),
+      children: [icon, label]
+    });
+  }
+  if (onClick) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      component: "button",
+      type: "button",
+      onClick: onClick,
+      "aria-label": computedAria,
+      sx: _objectSpread(_objectSpread({}, CRUMB_LINK_BASE_SX), {}, {
+        color: baseColor,
+        background: "none",
+        border: "none",
+        font: "inherit",
+        fontSize: "var(--text-xs)"
+      }),
+      children: [icon, label]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+    component: "span",
+    sx: {
+      color: baseColor,
+      fontWeight: baseFontWeight,
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "var(--s-1)"
+    },
+    children: [icon, label]
+  });
+}
+function ActionBar(_ref) {
+  var home = _ref.home,
+    back = _ref.back,
+    breadcrumb = _ref.breadcrumb,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    icon = _ref.icon,
+    primary = _ref.primary,
+    _ref$secondary = _ref.secondary,
+    secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? [] : _ref$overflow,
+    _ref$maxVisible = _ref.maxVisible,
+    maxVisible = _ref$maxVisible === void 0 ? 2 : _ref$maxVisible,
+    meta = _ref.meta,
+    _ref$sticky = _ref.sticky,
+    sticky = _ref$sticky === void 0 ? true : _ref$sticky,
+    _ref$surface = _ref.surface,
+    surface = _ref$surface === void 0 ? false : _ref$surface,
+    _ref$collapseAfter = _ref.collapseAfter,
+    collapseAfter = _ref$collapseAfter === void 0 ? 3 : _ref$collapseAfter,
+    labels = _ref.labels;
+  var L = labels ? _objectSpread(_objectSpread({}, DEFAULT_LABELS), labels) : DEFAULT_LABELS;
+
+  // R-RS.5 — collapse the middle of a long breadcrumb on mobile (< sm
+  // token, 481px). Reads the live theme so a host breakpoint override is
+  // honoured. `crumbsExpanded` lets the user reveal the full trail in place.
+  var theme = (0, _styles.useTheme)();
+  var isMobile = (0, _useMediaQuery["default"])(theme.breakpoints.down("sm"));
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    crumbsExpanded = _React$useState2[0],
+    setCrumbsExpanded = _React$useState2[1];
+  var effectiveBreadcrumb = React.useMemo(function () {
+    var base = breadcrumb || [];
+    if (!home) return base;
+    var homeItem = _objectSpread({
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Home["default"], {
+        fontSize: "small"
+      }),
+      ariaLabel: L.home
+    }, typeof home === "function" ? {
+      onClick: home
+    } : {
+      href: home
+    });
+    return [homeItem].concat(_toConsumableArray(base));
+  }, [home, breadcrumb, L.home]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Decide whether to collapse: only on mobile, only when the trail is
+  // longer than collapseAfter, and only while not user-expanded.
+  var shouldCollapse = isMobile && !crumbsExpanded && effectiveBreadcrumb.length > Math.max(2, collapseAfter);
+  var orderedAll = React.useMemo(function () {
+    var list = [];
+    if (primary) list.push(_objectSpread(_objectSpread({}, primary), {}, {
+      _slot: "primary"
+    }));
+    var _iterator = _createForOfIteratorHelper(secondary || []),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var s = _step.value;
+        list.push(_objectSpread(_objectSpread({}, s), {}, {
+          _slot: "secondary"
+        }));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    var _iterator2 = _createForOfIteratorHelper(overflow || []),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var o = _step2.value;
+        list.push(_objectSpread(_objectSpread({}, o), {}, {
+          _slot: "overflow"
+        }));
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return list;
+  }, [primary, secondary, overflow]);
+  var visibleActions = orderedAll.slice(0, maxVisible);
+  var hiddenActions = orderedAll.slice(maxVisible);
+  var visiblePrimary = visibleActions.filter(function (a) {
+    return a._slot === "primary";
+  });
+  var visibleOthers = visibleActions.filter(function (a) {
+    return a._slot !== "primary";
+  });
+  var hasNavRow = !!(back || effectiveBreadcrumb.length > 0);
+  var useAccent = !surface;
+  var accentOrFgMuted = useAccent ? "var(--accent)" : "var(--fg-muted)";
+  var accentOrFg = useAccent ? "var(--accent)" : "var(--fg)";
+  function resolveVariant(action) {
+    if (action._slot === "primary") return "primary";
+    if (action._slot === "overflow") return action.variant || "ghost";
+    return action.variant || "secondary";
+  }
+  function renderButton(action, i) {
+    var _slot = action._slot,
+      label = action.label,
+      actionIcon = action.icon,
+      iconRight = action.iconRight,
+      onClick = action.onClick,
+      disabled = action.disabled,
+      loading = action.loading,
+      _variant = action.variant,
+      rest = _objectWithoutProperties(action, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread(_objectSpread({
+      variant: resolveVariant(action),
+      size: "sm",
+      icon: actionIcon,
+      iconRight: iconRight,
+      onClick: onClick,
+      disabled: disabled
+    }, rest), loading !== undefined ? {
+      loading: loading
+    } : {}), {}, {
+      children: label
+    }), i);
+  }
+  var lastCrumbIndex = effectiveBreadcrumb.length - 1;
+  var chevron = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight["default"], {
+    "aria-hidden": "true",
+    sx: {
+      fontSize: "var(--text-xs)",
+      color: useAccent ? "var(--accent)" : "var(--fg-subtle)",
+      transform: "scaleX(var(--pui-rtl-flip, 1))"
+    }
+  });
+
+  /* Render either the full trail or the collapsed [first] › … › [last].
+   * Each branch returns an array of <li> rows so the <ol> stays valid. */
+  function renderCrumbItems() {
+    if (!shouldCollapse) {
+      return effectiveBreadcrumb.map(function (b, i) {
+        var isLast = i === lastCrumbIndex;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+          component: "li",
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [renderCrumbContent(b, isLast, useAccent), !isLast && chevron]
+        }, i);
+      });
+    }
+
+    // Collapsed: first crumb, an expand toggle, then the last crumb.
+    var first = effectiveBreadcrumb[0];
+    var last = effectiveBreadcrumb[lastCrumbIndex];
+    return [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      component: "li",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5
+      },
+      children: [renderCrumbContent(first, false, useAccent), chevron]
+    }, "first"), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      component: "li",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        component: "button",
+        type: "button",
+        onClick: function onClick() {
+          return setCrumbsExpanded(true);
+        },
+        "aria-label": L.expandCrumbs,
+        "aria-expanded": "false",
+        sx: _objectSpread(_objectSpread({}, CRUMB_ELLIPSIS_SX), {}, {
+          color: useAccent ? "var(--accent)" : "var(--fg-subtle)"
+        }),
+        children: "\u2026"
+      }), chevron]
+    }, "ellipsis"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      component: "li",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5
+      },
+      children: renderCrumbContent(last, true, useAccent)
+    }, "last")];
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+    sx: {
+      background: surface ? "var(--surface)" : "var(--bg)",
+      borderBottom: surface ? "1px solid var(--border)" : "none",
+      padding: {
+        xs: "var(--s-3)",
+        sm: "var(--s-3) var(--s-4)",
+        lg: "var(--s-3) var(--s-6)"
+      },
+      position: sticky ? "sticky" : "static",
+      top: 0,
+      zIndex: _tokens.zIndex.sticky
+    },
+    children: [hasNavRow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        marginBottom: 1
+      },
+      children: [back && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton["default"], {
+        size: "small",
+        onClick: back,
+        "aria-label": L.back,
+        sx: {
+          color: accentOrFgMuted,
+          "& svg": {
+            transform: "scaleX(var(--pui-rtl-flip, 1))"
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBack["default"], {
+          fontSize: "small"
+        })
+      }), effectiveBreadcrumb.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        component: "nav",
+        "aria-label": L.breadcrumb,
+        sx: {
+          minWidth: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+          component: "ol",
+          sx: {
+            listStyle: "none",
+            margin: 0,
+            padding: 0,
+            display: "flex",
+            alignItems: "center",
+            flexWrap: {
+              xs: "nowrap",
+              sm: "wrap"
+            },
+            gap: 0.5,
+            fontSize: "var(--text-xs)",
+            color: useAccent ? "var(--accent)" : "var(--fg-subtle)",
+            minWidth: 0
+          },
+          children: renderCrumbItems()
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      sx: {
+        display: "flex",
+        alignItems: {
+          xs: "flex-start",
+          sm: "center"
+        },
+        justifyContent: "space-between",
+        flexWrap: {
+          xs: "wrap",
+          sm: "nowrap"
+        },
+        gap: {
+          xs: "var(--s-2)",
+          sm: 2
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+        sx: {
+          minWidth: 0,
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          color: accentOrFg,
+          "& svg": {
+            color: "inherit"
+          }
+        },
+        children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
+          component: "h1",
+          sx: {
+            fontSize: {
+              xs: 18,
+              sm: 22
+            },
+            fontWeight: "var(--fw-bold)",
+            color: accentOrFg,
+            lineHeight: "var(--lh-tight)",
+            whiteSpace: {
+              xs: "normal",
+              sm: "nowrap"
+            },
+            overflow: {
+              xs: "visible",
+              sm: "hidden"
+            },
+            textOverflow: {
+              xs: "clip",
+              sm: "ellipsis"
+            }
+          },
+          children: title
+        }), meta]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          width: {
+            xs: "100%",
+            sm: "auto"
+          },
+          justifyContent: {
+            xs: "flex-end",
+            sm: "flex-start"
+          },
+          flexShrink: 0
+        },
+        children: [visibleOthers.map(function (action, i) {
+          return renderButton(action, i);
+        }), visiblePrimary.map(function (action, i) {
+          return renderButton(action, "p".concat(i));
+        }), hiddenActions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverflowMenu["default"], {
+          actions: hiddenActions.map(function (_ref2) {
+            var _s = _ref2._slot,
+              a = _objectWithoutProperties(_ref2, _excluded2);
+            return a;
+          })
+        })]
+      })]
+    }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
+      sx: {
+        /* ── S-01 — THE SUBTITLE IS RENDERED AT EVERY BREAKPOINT ──────────
+         *
+         * This was `display: { xs: "none", sm: "block" }`, which removed the
+         * subtitle below the sm token (481 px) from the layout AND from the
+         * accessibility tree. On a 320-414 px viewport it did not exist for
+         * any user, sighted or not.
+         *
+         * That conflicted with three normative rules at once:
+         *   - Platform Mandatory UX Patterns / Page Subtitle: "Mandatory.
+         *     Every page must contain a meaningful subtitle describing the
+         *     purpose of the page. NEVER OMIT SUBTITLES."
+         *   - the same document lists `missing subtitle` under Forbidden
+         *     Practices, i.e. a certification failure;
+         *   - Responsive Pattern mandates support from 320 px, so `xs` is the
+         *     primary mobile range, not an edge case.
+         *
+         * Charter 7.1 bis also puts "Page title (H1) + subtitle + CTA" in the
+         * canonical vertical order, with no breakpoint exemption.
+         *
+         * The original motivation was presumably vertical space on phones.
+         * That concern is met by BOUNDING the height instead of deleting the
+         * content -- two lines, mirroring the EmptyState rule already in this
+         * library ("description <= 2 lignes"). Clamped text stays in the
+         * accessibility tree, so screen-reader users get the full string.
+         *
+         * SCOPED TO xs ON PURPOSE. At sm and above `display: block` makes
+         * line-clamp inert, so the rendering is byte-identical to before this
+         * fix. Clamping desktop too would be a NEW restriction on existing
+         * behaviour and could truncate a long subtitle that a module renders
+         * over three lines today. Zero regression surface for the ~150
+         * services consuming this component.
+         *
+         * Raised from procuration-portnet-fe (Batch 3), fixed here rather
+         * than worked around locally: a module-side subtitle would duplicate
+         * a shared component's responsibility (R-2.1 / R-AI.2) and would need
+         * local breakpoint logic to avoid doubling at >= sm.
+         * ──────────────────────────────────────────────────────────────── */
+        display: {
+          xs: "-webkit-box",
+          sm: "block"
+        },
+        WebkitBoxOrient: "vertical",
+        WebkitLineClamp: 2,
+        overflow: {
+          xs: "hidden",
+          sm: "visible"
+        },
+        fontSize: "var(--text-sm)",
+        color: "var(--fg-muted)",
+        marginTop: 0.5
+      },
+      children: subtitle
+    })]
+  });
+}
+var _default = exports["default"] = ActionBar;
+//# sourceMappingURL=ActionBar.js.map