@qoretechnologies/reqore 0.78.6-pr.715.g3e70b13 → 0.78.6-pr.715.g4e6c5cf

package/dist/components/Panel/index.js

@@ -58,11 +58,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReqorePanel = exports.ReqorePanelSkeleton = exports.StyledFloatingActions = exports.StyledPanelMedia = exports.StyledPanelContent = exports.StyledPanelBottomActions = exports.StyledPanelTopBar = exports.StyledPanelTitle = exports.StyledPanel = exports.StyledPanelTitleHeaderLabelAndBadge = exports.StyledPanelTitleHeaderLabelAndDescription = exports.StyledPanelTitleHeaderContent = exports.StyledPanelTitleHeader = void 0;
+exports.ReqorePanel = exports.ReqorePanelSkeleton = exports.StyledFloatingActions = exports.StyledPanelMedia = exports.StyledPanelContent = exports.StyledPanelBottomActions = exports.StyledPanelTopBar = exports.StyledPanelTitle = exports.StyledPanel = exports.REQORE_PANEL_STYLE_PROPS = exports.StyledPanelTitleHeaderLabelAndBadge = exports.StyledPanelTitleHeaderLabelAndDescription = exports.StyledPanelTitleHeaderContent = exports.StyledPanelTitleHeader = void 0;
 var react_1 = require("react");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
@@ -73,12 +82,14 @@ var react_2 = require("react");
 var react_dom_1 = require("react-dom");
 var react_use_1 = require("react-use");
 var responsive_1 = require("./responsive");
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = require("styled-components");
 var colors_1 = require("../../constants/colors");
 var sizes_1 = require("../../constants/sizes");
+var typeScale_1 = require("../../helpers/typeScale");
 var colors_2 = require("../../helpers/colors");
-var styled_1 = require("../../helpers/styled");
+var styled_1 = __importStar(require("../../helpers/styled"));
 var utils_1 = require("../../helpers/utils");
+var hoveringPointer_1 = require("../../helpers/hoveringPointer");
 var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
 var useReqoreContext_1 = require("../../hooks/useReqoreContext");
 var useFitTextSize_1 = require("../../hooks/useFitTextSize");
@@ -145,12 +156,44 @@ var getScrollportInset = function (el) {
  * opening a line box around the inline-flex heading — a block wrapper adds the row's leading on
  * top of the heading's own box, which made a `tiny` panel 3px taller than it used to be.
  */
-var StyledPanelTitleLabelBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"], ["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"])), function (_a) {
+var StyledPanelTitleLabelBox = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"], ["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"])), function (_a) {
     var $clampLines = _a.$clampLines;
     return $clampLines > 1 && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and `-webkit-line-clamp` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "], ["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and \\`-webkit-line-clamp\\` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "])), $clampLines);
 });
-exports.StyledPanelTitleHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"], ["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"])));
-exports.StyledPanelTitleHeaderContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"], ["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"])), function (_a) {
+/**
+ * How much more than the title a group of actions that do not collapse takes of the room left over: so much
+ * that the title's box widens only once the group is at its own width (a flex item takes its grow factor's
+ * share of the free space, and the title's is 1).
+ */
+var ACTIONS_GROW_BEFORE_TITLE = 1000;
+/**
+ * The flex of the group of actions that do not collapse, beside a title in a NARROW bar
+ * (qorus#646): sized from what the title leaves, between what its controls cannot do without and
+ * its own width. See where it is used. A wide bar leaves the group at its own width (`0 0 auto`),
+ * as it always was.
+ */
+var NARROW_ACTIONS_BESIDE_TITLE = {
+    flex: "".concat(ACTIONS_GROW_BEFORE_TITLE, " 1 0%"),
+    maxWidth: 'max-content',
+};
+/** The class of the bar's group of actions that do not collapse, which the title's fit measures. */
+var NON_RESPONSIVE_ACTIONS_CLASS = 'reqore-panel-non-responsive-actions';
+/**
+ * How much wider `element` is than the least it can be: its width less its min-content width, read
+ * with its flex and width set aside for the measurement and put back before anything is drawn.
+ */
+var getWidthAboveMinimum = function (element) {
+    var width = element.getBoundingClientRect().width;
+    var _a = element.style, flex = _a.flex, styleWidth = _a.width;
+    element.style.flex = '0 0 auto';
+    element.style.width = 'min-content';
+    var minimum = element.getBoundingClientRect().width;
+    element.style.flex = flex;
+    element.style.width = styleWidth;
+    return Math.max(0, width - minimum);
+};
+exports.StyledPanelTitleHeader = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"], ["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"])));
+exports.StyledPanelTitleHeaderContent = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"], ["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"])), function (_a) {
     var $hasOuterIcon = _a.$hasOuterIcon;
     return ($hasOuterIcon ? 'grid' : 'flex');
 }, function (_a) {
@@ -167,8 +210,8 @@ exports.StyledPanelTitleHeaderContent = styled_components_1.default.div(template
     }
     return width;
 });
-exports.StyledPanelTitleHeaderLabelAndDescription = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"])));
-exports.StyledPanelTitleHeaderLabelAndBadge = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"])));
+exports.StyledPanelTitleHeaderLabelAndDescription = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"])));
+exports.StyledPanelTitleHeaderLabelAndBadge = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"])));
 /**
  * Does the panel wrapper draw its 1px border?
  *
@@ -216,16 +259,103 @@ var getPanelHoverBorderColor = function (theme, _a) {
         ? (0, colors_2.changeLightness)(themed.border, 0.12)
         : (0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.25);
 };
-exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).withConfig({
-    // `fill` controls panel layout and must not become a boolean DOM attribute. Neither must
-    // `accentPosition`: when the panel renders as a `Resizable` (a COMPONENT target) the rule
-    // below forwards everything, and re-resizable spreads the leftovers onto its wrapper div.
-    // Filtering here still leaves the styled-component's own interpolations reading the prop.
-    // Everything else follows styled-components' own rule, so re-resizable still receives its
-    // `enable` / size / handle config — those are component props, not HTML attributes.
-    // `opacity` is the surface's background opacity, an SVG attribute a `div` would keep; the
-    // remaining flags only style the surface, and re-resizable would write them onto its div.
-    shouldForwardProp: (0, styled_1.omitStyleProps)('accentPosition', 'fill', 'flat', 'fluid', 'interactive', 'isCollapsed', 'opacity', 'rounded'),
+/**
+ * Every panel prop that only styles or configures the panel. None of them reaches the rendered
+ * element — the `div`, re-resizable's `Resizable` (which spreads every prop it does not know onto
+ * its wrapper div), or a component given as `as`. The compiler checks the record against
+ * `IStyledPanel`, so a new prop that is not added here fails the build instead of leaking.
+ *
+ * re-resizable's own props (`size`, `enable`, `minWidth`, handles, ...) are not in it: they are
+ * the `Resizable`'s to receive. `opacity` is the surface's background opacity, an SVG attribute
+ * a `div` would keep.
+ */
+exports.REQORE_PANEL_STYLE_PROPS = (0, styled_1.listReqoreStyleProps)({
+    accentPosition: true,
+    actions: true,
+    badge: true,
+    blur: true,
+    bottomActions: true,
+    breadcrumbs: true,
+    closeButtonProps: true,
+    closePopover: true,
+    closeTooltip: true,
+    collapseButtonProps: true,
+    collapseTooltip: true,
+    collapsible: true,
+    compactTitle: true,
+    contentEffect: true,
+    contentSize: true,
+    contentStyle: true,
+    customLabelTooltip: true,
+    customTheme: true,
+    description: true,
+    descriptionEffect: true,
+    descriptionIntent: true,
+    descriptionMaxLines: true,
+    descriptionPosition: true,
+    disabled: true,
+    errorBoundaryOptions: true,
+    expandTooltip: true,
+    fill: true,
+    fitLabel: true,
+    flat: true,
+    floatingActions: true,
+    fluid: true,
+    getContentRef: true,
+    icon: true,
+    iconColor: true,
+    iconImage: true,
+    iconProps: true,
+    iconVerticalAlign: true,
+    iconWithLabel: true,
+    inheritCustomTheme: true,
+    intent: true,
+    isCollapsed: true,
+    isStuck: true,
+    label: true,
+    labelEffect: true,
+    labelMaxLines: true,
+    labelMinTextSize: true,
+    labelProps: true,
+    labelSize: true,
+    loading: true,
+    loadingIconType: true,
+    media: true,
+    mediaAlt: true,
+    mediaAspectRatio: true,
+    mediaPosition: true,
+    mediaProps: true,
+    minimal: true,
+    noHorizontalPadding: true,
+    onClose: true,
+    onCollapseChange: true,
+    onLabelEdit: true,
+    opacity: true,
+    padded: true,
+    radiusSize: true,
+    raised: true,
+    resizable: true,
+    responsiveActions: true,
+    responsiveActionsWrapperProps: true,
+    responsiveTitle: true,
+    rounded: true,
+    showActionsWhenCollapsed: true,
+    showLabelTooltip: true,
+    skeleton: true,
+    stickyHeader: true,
+    stickyHeaderInset: true,
+    stickyHeaderOffset: true,
+    theme: true,
+    tooltip: true,
+    transparent: true,
+    unMountContentOnCollapse: true,
+    wrapperPadding: true,
+});
+exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
+    // Its own props, `interactive` (set by the panel for its hover styles) and the layout flags a
+    // containing ControlGroup hands it — except `size`, which a panel never forwards but a
+    // `Resizable` reads as its own.
+    shouldForwardProp: styled_1.omitStyleProps.apply(void 0, __spreadArray(__spreadArray(__spreadArray([], exports.REQORE_PANEL_STYLE_PROPS, false), styled_1.REQORE_CONTROL_GROUP_CHILD_PROPS.filter(function (prop) { return prop !== 'size'; }), false), ['interactive'], false)),
 })(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a `show: 'hover'` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a \\`show: 'hover'\\` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return (0, polished_1.rgba)((0, colors_2.getPanelBackgroundColor)(theme), opacity);
@@ -297,14 +427,14 @@ exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).wi
     var disabled = _a.disabled;
     return disabled && styles_1.DisabledElement;
 });
-exports.StyledPanelTitle = styled_components_1.default.div.withConfig({
+exports.StyledPanelTitle = styled_1.default.div.withConfig({
     shouldForwardProp: (0, styled_1.omitStyleProps)('opacity'),
 })(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"], ["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"])), function (_a) {
     var $descriptionBelow = _a.$descriptionBelow;
     return ($descriptionBelow ? 'row wrap' : 'row');
 }, function (_a) {
     var $descriptionFontPx = _a.$descriptionFontPx;
-    return !!$descriptionFontPx && (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      /* The description is a fixed px from `TEXT_FROM_SIZE` and knows nothing about the title\n         having shrunk, so a fitted title crosses under it: at the 12px floor the support text\n         renders at 15px and outranks the heading it supports. Scaling it by the SAME factor the\n         title took keeps the two in their original proportion instead of giving the description\n         a fit of its own \u2014 which would size it against its own box and let the pair drift apart\n         again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "], ["\n      /* The description is a fixed px from \\`TEXT_FROM_SIZE\\` and knows nothing about the title\n         having shrunk, so a fitted title crosses under it: at the 12px floor the support text\n         renders at 15px and outranks the heading it supports. Scaling it by the SAME factor the\n         title took keeps the two in their original proportion instead of giving the description\n         a fit of its own \u2014 which would size it against its own box and let the pair drift apart\n         again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "])), $descriptionFontPx);
+    return !!$descriptionFontPx && (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      /* The description is a fixed px from the type scale (`getTextSize`) and knows nothing\n         about the title having shrunk, so a fitted title crosses under it: at the 12px floor\n         the support text renders at 15px and outranks the heading it supports. Scaling it by\n         the SAME factor the title took keeps the two in their original proportion instead of\n         giving the description a fit of its own \u2014 which would size it against its own box and\n         let the pair drift apart again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "], ["\n      /* The description is a fixed px from the type scale (\\`getTextSize\\`) and knows nothing\n         about the title having shrunk, so a fitted title crosses under it: at the 12px floor\n         the support text renders at 15px and outranks the heading it supports. Scaling it by\n         the SAME factor the title took keeps the two in their original proportion instead of\n         giving the description a fit of its own \u2014 which would size it against its own box and\n         let the pair drift apart again, in the other direction. */\n      .reqore-panel-title-description {\n        font-size: ", "px;\n      }\n    "])), $descriptionFontPx);
 }, function (_a) {
     var $descriptionBelow = _a.$descriptionBelow;
     return $descriptionBelow && (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      /* Only on a wrapping bar. The header claims the row so the action group beside it gets\n         squeezed and folds \u2014 that is what the base rule is for \u2014 but in a WRAPPING row a\n         full-width claim takes the whole line and pushes the actions onto their own, which is\n         not what \"description below\" asked for. Here the header grows from 0 into whatever the\n         actions leave, on line one, and the description takes line two. */\n      > .reqore-panel-title-header {\n        width: auto;\n        flex: 1 1 0%;\n        min-width: 0;\n      }\n    "], ["\n      /* Only on a wrapping bar. The header claims the row so the action group beside it gets\n         squeezed and folds \u2014 that is what the base rule is for \u2014 but in a WRAPPING row a\n         full-width claim takes the whole line and pushes the actions onto their own, which is\n         not what \"description below\" asked for. Here the header grows from 0 into whatever the\n         actions leave, on line one, and the description takes line two. */\n      > .reqore-panel-title-header {\n        width: auto;\n        flex: 1 1 0%;\n        min-width: 0;\n      }\n    "])));
@@ -329,7 +459,7 @@ exports.StyledPanelTitle = styled_components_1.default.div.withConfig({
         return (0, polished_1.rgba)(getPanelHeaderColor(theme, true), opacity);
     });
 });
-exports.StyledPanelTopBar = (0, styled_components_1.default)(exports.StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* `top: 0` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. `stickyHeaderInset` is\n     that padding, measured from the real scroll ancestor at runtime;\n     `stickyHeaderOffset` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"], ["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* \\`top: 0\\` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. \\`stickyHeaderInset\\` is\n     that padding, measured from the real scroll ancestor at runtime;\n     \\`stickyHeaderOffset\\` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"])), function (_a) {
+exports.StyledPanelTopBar = (0, styled_1.default)(exports.StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* `top: 0` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. `stickyHeaderInset` is\n     that padding, measured from the real scroll ancestor at runtime;\n     `stickyHeaderOffset` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"], ["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* \\`top: 0\\` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. \\`stickyHeaderInset\\` is\n     that padding, measured from the real scroll ancestor at runtime;\n     \\`stickyHeaderOffset\\` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"])), function (_a) {
     var padded = _a.padded, size = _a.size, isCollapsed = _a.isCollapsed, minimal = _a.minimal;
     return !padded || isCollapsed || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -376,7 +506,7 @@ exports.StyledPanelTopBar = (0, styled_components_1.default)(exports.StyledPanel
     return stickyHeader &&
         opacity === 0 && (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "], ["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "])));
 });
-exports.StyledPanelBottomActions = (0, styled_components_1.default)(exports.StyledPanelTitle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"], ["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"])), function (_a) {
+exports.StyledPanelBottomActions = (0, styled_1.default)(exports.StyledPanelTitle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"], ["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"])), function (_a) {
     var padded = _a.padded, size = _a.size, minimal = _a.minimal;
     return !padded || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -396,7 +526,7 @@ exports.StyledPanelBottomActions = (0, styled_components_1.default)(exports.Styl
         ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.getPanelHairlineColor)(theme), opacity))
         : null;
 });
-exports.StyledPanelContent = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"], ["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"])), function (_a) {
+exports.StyledPanelContent = styled_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"], ["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"])), function (_a) {
     var isCollapsed = _a.isCollapsed;
     return (isCollapsed ? 'none !important' : undefined);
 }, function (_a) {
@@ -407,13 +537,13 @@ exports.StyledPanelContent = styled_components_1.default.div(templateObject_29 |
             ? "".concat(getPaddingSize(padded, size), "px 0")
             : "".concat(getPaddingSize(padded, size), "px ").concat(getPaddingSize(padded, size), "px");
 }, function (_a) {
-    var size = _a.size;
-    return sizes_1.TEXT_FROM_SIZE[size];
+    var size = _a.size, theme = _a.theme;
+    return (0, typeScale_1.getTextSize)(theme, size);
 });
 /** The media frame. Its outer corners take the panel's inner curve, so the media is clipped to
  *  the panel's shape even where the panel cannot clip it (a sticky header makes the panel
  *  overflow visible). */
-exports.StyledPanelMedia = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"])), function (_a) {
+exports.StyledPanelMedia = styled_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"])), function (_a) {
     var $position = _a.$position, $radius = _a.$radius;
     return $position === 'top'
         ? (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n          border-top-left-radius: ", "px;\n          border-top-right-radius: ", "px;\n        "], ["\n          border-top-left-radius: ", "px;\n          border-top-right-radius: ", "px;\n        "])), $radius, $radius) : (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n          border-bottom-left-radius: ", "px;\n          border-bottom-right-radius: ", "px;\n        "], ["\n          border-bottom-left-radius: ", "px;\n          border-bottom-right-radius: ", "px;\n        "])), $radius, $radius);
@@ -421,7 +551,7 @@ exports.StyledPanelMedia = styled_components_1.default.div(templateObject_33 ||
     var $aspectRatio = _a.$aspectRatio;
     return $aspectRatio !== undefined && (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      aspect-ratio: ", ";\n\n      > img,\n      > video,\n      > picture,\n      > picture > img,\n      > svg,\n      > canvas,\n      > iframe {\n        height: 100%;\n        object-fit: cover;\n      }\n    "], ["\n      aspect-ratio: ", ";\n\n      > img,\n      > video,\n      > picture,\n      > picture > img,\n      > svg,\n      > canvas,\n      > iframe {\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), $aspectRatio);
 });
-exports.StyledFloatingActions = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"], ["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"])), function (_a) {
+exports.StyledFloatingActions = styled_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"], ["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"])), function (_a) {
     var size = _a.size;
     return sizes_1.PADDING_FROM_SIZE[size];
 }, function (_a) {
@@ -450,7 +580,7 @@ exports.ReqorePanelSkeleton = (0, react_2.memo)(function (_a) {
 });
 exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, label = _a.label, description = _a.description, _d = _a.collapseButtonProps, collapseButtonProps = _d === void 0 ? {} : _d, collapsible = _a.collapsible, onClose = _a.onClose, _e = _a.closeButtonProps, closeButtonProps = _e === void 0 ? {} : _e, _f = _a.rounded, rounded = _f === void 0 ? true : _f, _g = _a.actions, actions = _g === void 0 ? [] : _g, _h = _a.bottomActions, bottomActions = _h === void 0 ? [] : _h, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, _j = _a.iconWithLabel, iconWithLabel = _j === void 0 ? false : _j, _k = _a.iconVerticalAlign, iconVerticalAlign = _k === void 0 ? 'center' : _k, intent = _a.intent, className = _a.className, flat = _a.flat, _l = _a.unMountContentOnCollapse, unMountContentOnCollapse = _l === void 0 ? true : _l, onCollapseChange = _a.onCollapseChange, _m = _a.padded, padded = _m === void 0 ? true : _m, _o = _a.wrapperPadding, wrapperPadding = _o === void 0 ? 'both' : _o, contentStyle = _a.contentStyle, contentEffect = _a.contentEffect, _p = _a.labelEffect, labelEffect = _p === void 0 ? {} : _p, _q = _a.descriptionEffect, descriptionEffect = _q === void 0 ? {} : _q, descriptionIntent = _a.descriptionIntent, labelSize = _a.labelSize, contentSize = _a.contentSize, minimal = _a.minimal, badge = _a.badge, iconColor = _a.iconColor, _r = _a.iconProps, iconProps = _r === void 0 ? {} : _r, fluid = _a.fluid, _s = _a.responsiveActions, responsiveActions = _s === void 0 ? true : _s, _t = _a.responsiveTitle, responsiveTitle = _t === void 0 ? true : _t, _u = _a.compactTitle, compactTitle = _u === void 0 ? false : _u, _v = _a.fitLabel, fitLabel = _v === void 0 ? true : _v, _w = _a.labelMaxLines, labelMaxLines = _w === void 0 ? 2 : _w, _x = _a.descriptionPosition, descriptionPosition = _x === void 0 ? 'inline' : _x, _y = _a.descriptionMaxLines, descriptionMaxLines = _y === void 0 ? 2 : _y, labelMinTextSize = _a.labelMinTextSize, _z = _a.size, panelSize = _z === void 0 ? 'normal' : _z, getContentRef = _a.getContentRef, _0 = _a.labelProps, labelProps = _0 === void 0 ? {} : _0, disabled = _a.disabled, breadcrumbs = _a.breadcrumbs, _1 = _a.showActionsWhenCollapsed, showActionsWhenCollapsed = _1 === void 0 ? true : _1, showLabelTooltip = _a.showLabelTooltip, customLabelTooltip = _a.customLabelTooltip, resizable = _a.resizable, onLabelEdit = _a.onLabelEdit, responsiveActionsWrapperProps = _a.responsiveActionsWrapperProps, loading = _a.loading, loadingIconType = _a.loadingIconType, skeleton = _a.skeleton, errorBoundaryOptions = _a.errorBoundaryOptions, floatingActions = _a.floatingActions, _2 = _a.collapseTooltip, collapseTooltip = _2 === void 0 ? 'Collapse' : _2, _3 = _a.expandTooltip, expandTooltip = _3 === void 0 ? 'Expand' : _3, _4 = _a.closeTooltip, closeTooltip = _4 === void 0 ? 'Close' : _4, accentPosition = _a.accentPosition, accentSize = _a.accentSize, media = _a.media, _5 = _a.mediaAlt, mediaAlt = _5 === void 0 ? '' : _5, _6 = _a.mediaPosition, mediaPosition = _6 === void 0 ? 'top' : _6, mediaAspectRatio = _a.mediaAspectRatio, mediaProps = _a.mediaProps, rest = __rest(_a, ["children", "label", "description", "collapseButtonProps", "collapsible", "onClose", "closeButtonProps", "rounded", "actions", "bottomActions", "isCollapsed", "customTheme", "inheritCustomTheme", "icon", "iconImage", "iconWithLabel", "iconVerticalAlign", "intent", "className", "flat", "unMountContentOnCollapse", "onCollapseChange", "padded", "wrapperPadding", "contentStyle", "contentEffect", "labelEffect", "descriptionEffect", "descriptionIntent", "labelSize", "contentSize", "minimal", "badge", "iconColor", "iconProps", "fluid", "responsiveActions", "responsiveTitle", "compactTitle", "fitLabel", "labelMaxLines", "descriptionPosition", "descriptionMaxLines", "labelMinTextSize", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions", "collapseTooltip", "expandTooltip", "closeTooltip", "accentPosition", "accentSize", "media", "mediaAlt", "mediaPosition", "mediaAspectRatio", "mediaProps"]);
+    var children = _a.children, label = _a.label, description = _a.description, _d = _a.collapseButtonProps, collapseButtonProps = _d === void 0 ? {} : _d, collapsible = _a.collapsible, onClose = _a.onClose, _e = _a.closeButtonProps, closeButtonProps = _e === void 0 ? {} : _e, _f = _a.rounded, rounded = _f === void 0 ? true : _f, _g = _a.actions, actions = _g === void 0 ? [] : _g, _h = _a.bottomActions, bottomActions = _h === void 0 ? [] : _h, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, _j = _a.iconWithLabel, iconWithLabel = _j === void 0 ? false : _j, _k = _a.iconVerticalAlign, iconVerticalAlign = _k === void 0 ? 'center' : _k, intent = _a.intent, className = _a.className, flat = _a.flat, _l = _a.unMountContentOnCollapse, unMountContentOnCollapse = _l === void 0 ? true : _l, onCollapseChange = _a.onCollapseChange, _m = _a.padded, padded = _m === void 0 ? true : _m, _o = _a.wrapperPadding, wrapperPadding = _o === void 0 ? 'both' : _o, contentStyle = _a.contentStyle, contentEffect = _a.contentEffect, _p = _a.labelEffect, labelEffect = _p === void 0 ? {} : _p, _q = _a.descriptionEffect, descriptionEffect = _q === void 0 ? {} : _q, descriptionIntent = _a.descriptionIntent, labelSize = _a.labelSize, contentSize = _a.contentSize, minimal = _a.minimal, badge = _a.badge, iconColor = _a.iconColor, _r = _a.iconProps, iconProps = _r === void 0 ? {} : _r, fluid = _a.fluid, _s = _a.responsiveActions, responsiveActions = _s === void 0 ? true : _s, _t = _a.responsiveTitle, responsiveTitle = _t === void 0 ? true : _t, _u = _a.compactTitle, compactTitle = _u === void 0 ? false : _u, _v = _a.fitLabel, fitLabel = _v === void 0 ? true : _v, _w = _a.labelMaxLines, labelMaxLines = _w === void 0 ? 2 : _w, _x = _a.descriptionPosition, descriptionPosition = _x === void 0 ? 'inline' : _x, _y = _a.descriptionMaxLines, descriptionMaxLines = _y === void 0 ? 2 : _y, labelMinTextSize = _a.labelMinTextSize, _z = _a.size, panelSize = _z === void 0 ? 'normal' : _z, getContentRef = _a.getContentRef, _0 = _a.labelProps, labelProps = _0 === void 0 ? {} : _0, disabled = _a.disabled, breadcrumbs = _a.breadcrumbs, _1 = _a.showActionsWhenCollapsed, showActionsWhenCollapsed = _1 === void 0 ? true : _1, showLabelTooltip = _a.showLabelTooltip, customLabelTooltip = _a.customLabelTooltip, resizable = _a.resizable, onLabelEdit = _a.onLabelEdit, responsiveActionsWrapperProps = _a.responsiveActionsWrapperProps, loading = _a.loading, loadingIconType = _a.loadingIconType, skeleton = _a.skeleton, errorBoundaryOptions = _a.errorBoundaryOptions, floatingActionsProp = _a.floatingActions, _2 = _a.collapseTooltip, collapseTooltip = _2 === void 0 ? 'Collapse' : _2, _3 = _a.expandTooltip, expandTooltip = _3 === void 0 ? 'Expand' : _3, _4 = _a.closeTooltip, closeTooltip = _4 === void 0 ? 'Close' : _4, accentPosition = _a.accentPosition, accentSize = _a.accentSize, media = _a.media, _5 = _a.mediaAlt, mediaAlt = _5 === void 0 ? '' : _5, _6 = _a.mediaPosition, mediaPosition = _6 === void 0 ? 'top' : _6, mediaAspectRatio = _a.mediaAspectRatio, mediaProps = _a.mediaProps, rest = __rest(_a, ["children", "label", "description", "collapseButtonProps", "collapsible", "onClose", "closeButtonProps", "rounded", "actions", "bottomActions", "isCollapsed", "customTheme", "inheritCustomTheme", "icon", "iconImage", "iconWithLabel", "iconVerticalAlign", "intent", "className", "flat", "unMountContentOnCollapse", "onCollapseChange", "padded", "wrapperPadding", "contentStyle", "contentEffect", "labelEffect", "descriptionEffect", "descriptionIntent", "labelSize", "contentSize", "minimal", "badge", "iconColor", "iconProps", "fluid", "responsiveActions", "responsiveTitle", "compactTitle", "fitLabel", "labelMaxLines", "descriptionPosition", "descriptionMaxLines", "labelMinTextSize", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions", "collapseTooltip", "expandTooltip", "closeTooltip", "accentPosition", "accentSize", "media", "mediaAlt", "mediaPosition", "mediaAspectRatio", "mediaProps"]);
     // Resolved ONCE, here — the accent styles interpolate px and reserve padding,
     // so they must only ever see a number. Shared with ReqoreCallout.
     var accentSizePx = (0, react_2.useMemo)(function () { return (0, utils_1.resolveAccentSize)(accentSize); }, [accentSize]);
@@ -471,6 +601,11 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         };
     }, []);
     var isMobile = (0, useReqoreContext_1.useReqoreProperty)('isMobile');
+    /* Floating actions are a hover's. Where the device cannot hover (a phone, a tablet), nothing
+       would ever float them, so its hover actions stay in the panel's own bar, shown (see the
+       hover gate on StyledPanel). */
+    var isHoverCapable = (0, useReqoreContext_1.useReqoreProperty)('isHoverCapable');
+    var floatingActions = !!floatingActionsProp && isHoverCapable !== false;
     var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
     var _8 = (0, react_use_1.useMeasure)(), measureRef = _8[0], width = _8[1].width;
     var _9 = (0, react_2.useState)(false), _isHovered = _9[0], setIsHovered = _9[1];
@@ -574,23 +709,67 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         floatingActionsRef.current.style.top = "".concat(panelRect.top - floatingRect.height + (flat ? 0 : 1), "px");
         floatingActionsRef.current.style.left = "".concat(panelRect.right - floatingRect.width, "px");
     }, [flat]);
+    var showsFloatingActions = _isHovered && !!floatingActions && (0, lodash_1.size)(floatingActionsList) > 0;
+    // placed as they are shown, and again whenever the actions change
+    (0, react_2.useEffect)(function () {
+        if (showsFloatingActions)
+            updateFloatingActionsPosition();
+    }, [showsFloatingActions, floatingActionsList, updateFloatingActionsPosition]);
+    /* ...and again whenever what they are placed by moves: the actions are fixed to the screen, placed
+     * by the panel's corner and their own size, so nothing follows on its own. A page that scrolls, a
+     * screen or window that resizes, a panel that grows or shrinks, and actions whose content changes
+     * width (a label, an icon or a font that loads) each moved the panel's corner or the actions' size
+     * without placing them again: they were left where the panel had been - mid-screen once the window
+     * widened - or reached past the panel's edge once they widened. One placement per frame, however
+     * many of these come in; none once they are hidden or the panel is gone. */
     (0, react_2.useEffect)(function () {
-        if (!_isHovered || !floatingActions || !(0, lodash_1.size)(floatingActionsList))
+        if (!showsFloatingActions)
             return undefined;
-        updateFloatingActionsPosition();
-        var onScroll = function () { return updateFloatingActionsPosition(); };
-        window.addEventListener('scroll', onScroll, true);
-        return function () { return window.removeEventListener('scroll', onScroll, true); };
-    }, [_isHovered, floatingActions, floatingActionsList, updateFloatingActionsPosition]);
+        var frame = 0;
+        var schedule = function () {
+            if (!frame) {
+                frame = requestAnimationFrame(function () {
+                    frame = 0;
+                    updateFloatingActionsPosition();
+                });
+            }
+        };
+        window.addEventListener('scroll', schedule, true);
+        window.addEventListener('resize', schedule, { passive: true });
+        var observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : undefined;
+        if (observer) {
+            if (panelRef.current)
+                observer.observe(panelRef.current);
+            if (floatingActionsRef.current)
+                observer.observe(floatingActionsRef.current);
+        }
+        return function () {
+            window.removeEventListener('scroll', schedule, true);
+            window.removeEventListener('resize', schedule);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            if (frame)
+                cancelAnimationFrame(frame);
+        };
+    }, [showsFloatingActions, updateFloatingActionsPosition]);
+    /* The floating actions are a hover's: a finger's tap - and the `mouseenter` a browser emulates after it -
+       shows none (see `createHoverGate`). Where a finger is the primary pointer (`isHoverCapable` false) the
+       actions are in the panel's own bar instead (`floatingActions` is off, above), and on a touch laptop its
+       tap left them floating until the next. */
+    var hoverGate = (0, hoveringPointer_1.useHoverGate)();
+    var handlePointerEnter = (0, react_2.useCallback)(function (e) {
+        var _a;
+        hoverGate.notePointer(e);
+        (_a = rest.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+    }, [hoverGate, rest.onPointerEnter]);
     var handleMouseEnter = (0, react_2.useCallback)(function (e) {
         var _a;
-        if (floatingActions) {
+        if (floatingActions && hoverGate.isHover()) {
             if (hoverTimerRef.current)
                 clearTimeout(hoverTimerRef.current);
             hoverTimerRef.current = setTimeout(function () { return setIsHovered(true); }, 150);
         }
         (_a = rest.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }, [floatingActions, rest.onMouseEnter]);
+    }, [floatingActions, rest.onMouseEnter, hoverGate]);
     var cancelHover = (0, react_2.useCallback)(function () {
         if (hoverTimerRef.current) {
             clearTimeout(hoverTimerRef.current);
@@ -598,6 +777,59 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         }
         setIsHovered(false);
     }, []);
+    /* The way from the panel to its floating actions.
+     *
+     * The actions float above the panel's top-right corner, so a pointer heading for
+     * them from inside the panel leaves the panel through its top edge - usually to the
+     * LEFT of the actions, on a diagonal - and passes over what lies above the panel
+     * before it reaches them. Ending the hover the moment the pointer left the panel
+     * hid the actions on that way, and the click meant for them landed on what they had
+     * been covering (in reqraft's expression editor: the Visual / Text switch, so
+     * "Remove" switched the view instead).
+     *
+     * So while the pointer is in the strip between the panel's top edge and the top of
+     * the actions, across the panel's width, the hover stays; it ends when the pointer
+     * leaves that strip for anything that is neither the panel nor the actions. Decided
+     * by where the pointer IS, on each move - no timer to guess the time a person needs. */
+    var corridorUntrackRef = (0, react_2.useRef)(null);
+    var stopCorridor = (0, react_2.useCallback)(function () {
+        var _a;
+        (_a = corridorUntrackRef.current) === null || _a === void 0 ? void 0 : _a.call(corridorUntrackRef);
+        corridorUntrackRef.current = null;
+    }, []);
+    var inCorridor = (0, react_2.useCallback)(function (x, y) {
+        if (!panelRef.current || !floatingActionsRef.current)
+            return false;
+        if (floatingActionsRef.current.style.display === 'none')
+            return false;
+        var panelRect = panelRef.current.getBoundingClientRect();
+        var actionsRect = floatingActionsRef.current.getBoundingClientRect();
+        return (x >= Math.min(panelRect.left, actionsRect.left) &&
+            x <= Math.max(panelRect.right, actionsRect.right) &&
+            y >= actionsRect.top &&
+            y <= panelRect.top + 1);
+    }, []);
+    var followCorridor = (0, react_2.useCallback)(function () {
+        stopCorridor();
+        var onMove = function (event) {
+            var _a, _b;
+            var target = event.target instanceof Node ? event.target : null;
+            // reached the actions or came back into the panel: their own handlers take over
+            if (target &&
+                (((_a = floatingActionsRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = panelRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)))) {
+                stopCorridor();
+                return;
+            }
+            if (!inCorridor(event.clientX, event.clientY)) {
+                stopCorridor();
+                cancelHover();
+            }
+        };
+        document.addEventListener('mousemove', onMove, true);
+        corridorUntrackRef.current = function () { return document.removeEventListener('mousemove', onMove, true); };
+    }, [cancelHover, inCorridor, stopCorridor]);
+    // a corridor followed when the panel goes is followed no more
+    (0, react_2.useEffect)(function () { return stopCorridor; }, [stopCorridor]);
     var handleMouseLeave = (0, react_2.useCallback)(function (e) {
         var _a;
         if (floatingActions) {
@@ -607,10 +839,15 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                 floatingActionsRef.current.contains(relatedTarget)) {
                 return;
             }
-            cancelHover();
+            if (_isHovered && inCorridor(e.clientX, e.clientY)) {
+                followCorridor();
+            }
+            else {
+                cancelHover();
+            }
         }
         (_a = rest.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }, [floatingActions, rest.onMouseLeave, cancelHover]);
+    }, [floatingActions, rest.onMouseLeave, cancelHover, _isHovered, inCorridor, followCorridor]);
     var handleFloatingActionsMouseLeave = (0, react_2.useCallback)(function (e) {
         var relatedTarget = e.relatedTarget;
         if (panelRef.current &&
@@ -618,8 +855,13 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
             panelRef.current.contains(relatedTarget)) {
             return;
         }
+        // back towards the panel through the strip between them
+        if (inCorridor(e.clientX, e.clientY)) {
+            followCorridor();
+            return;
+        }
         cancelHover();
-    }, [cancelHover]);
+    }, [cancelHover, inCorridor, followCorridor]);
     /* The panel renders as re-resizable's `Resizable` when it is resizable — unless the caller
        gave its own element in `as`, which always wins. (`rest.as || cond ? Resizable : 'div'`
        binds as `(rest.as || cond) ? …`, so a panel given `as` used to render a `Resizable`.) */
@@ -933,7 +1175,8 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     /** Only while the title is actually below its natural size, and never over a caller who
      *  pinned the description's own size. */
     var descriptionFontPx = fitLabel && !(descriptionEffect === null || descriptionEffect === void 0 ? void 0 : descriptionEffect.textSize) && labelFitPx < labelNaturalPx
-        ? Math.max(useFitTextSize_1.FIT_TEXT_FLOOR_PX, Math.round(((_c = sizes_1.TEXT_FROM_SIZE[panelSize]) !== null && _c !== void 0 ? _c : sizes_1.TEXT_FROM_SIZE.normal) * (labelFitPx / labelNaturalPx)))
+        ? Math.max(useFitTextSize_1.FIT_TEXT_FLOOR_PX, Math.round(((_c = (0, typeScale_1.getTextSize)(theme, panelSize)) !== null && _c !== void 0 ? _c : (0, typeScale_1.getTextSize)(theme, 'normal')) *
+            (labelFitPx / labelNaturalPx)))
         : 0;
     /**
      * How much room the title has, computed rather than measured off its own box.
@@ -969,6 +1212,7 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
      * the right answer either way.
      */
     (0, react_2.useLayoutEffect)(function () {
+        var _a;
         var node = labelFitRef.current;
         var parent = node === null || node === void 0 ? void 0 : node.parentElement;
         if (!fitLabel || !node || !parent) {
@@ -982,9 +1226,26 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
             return child === node ? total : total + child.getBoundingClientRect().width;
         }, 0);
         var gaps = gap * Math.max(0, parent.children.length - 1);
-        var next = Math.max(0, Math.round(parent.clientWidth - padding - siblings - gaps));
+        /* What the title could still gain, which the box measured above does not show: the box is
+           only as wide as the title at its present size, so a title shrunk on a narrow bar measured
+           that small box when the bar widened again, and stayed shrunk however wide the bar became
+           (qorus#646). The room is the title box's own beyond what it holds (it grows; what it holds
+           does not), and on a narrow bar the actions group's beyond its least (it gives way to the
+           title, down to what its controls cannot do without). Neither moves when the title's font
+           does: the sum is the title's whole claim on the bar. */
+        var header = node.closest('.reqore-panel-title-header');
+        var headerRoom = header
+            ? header.clientWidth -
+                Array.from(header.children).reduce(function (total, child) { return total + child.getBoundingClientRect().width; }, 0)
+            : 0;
+        var narrowActions = isNarrow
+            ? (_a = node
+                .closest('.reqore-panel-title')) === null || _a === void 0 ? void 0 : _a.querySelector(":scope > .".concat(NON_RESPONSIVE_ACTIONS_CLASS))
+            : undefined;
+        var actionsRoom = narrowActions ? getWidthAboveMinimum(narrowActions) : 0;
+        var next = Math.max(0, Math.round(parent.clientWidth - padding - siblings - gaps + Math.max(0, headerRoom) + actionsRoom));
         setLabelAvailable(function (current) { return (current === next ? current : next); });
-    }, [fitLabel, label, width, badge, actions, panelSize, description, clampLines]);
+    }, [fitLabel, label, width, badge, actions, panelSize, description, clampLines, isNarrow]);
     var iconTooltip = (0, react_2.useMemo)(function () { return ({
         content: label,
     }); }, [label]);
@@ -1001,7 +1262,7 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ReqoreErrorBoundary, __assign({}, errorBoundaryOptions, { children: (0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, (0, lodash_1.omit)(rest, ['onResize']), _resizable, { as: rest.as || (isResizableElement ? re_resizable_1.Resizable : 'div'), isCollapsed: _isCollapsed, rounded: rounded, flat: flat, intent: intent, accentPosition: accentPosition, "$accentSize": accentSizePx, className: "".concat(className || '', " reqore-panel").concat(_isHovered && (0, lodash_1.size)(floatingActionsList) > 0 ? ' reqore-panel-floating-active' : ''), interactive: interactive, theme: theme, effect: transformedContentEffect, opacity: opacity, fluid: fluid, disabled: disabled, Component: exports.StyledPanel, ref: function (node) {
                 handleRef(node);
                 panelRef.current = node;
-            }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!_isCollapsed && mediaPosition === 'top' ? mediaNode : null, rest.stickyHeader ? ((0, jsx_runtime_1.jsx)("div", { ref: stickySentinelRef, "aria-hidden": 'true', style: { height: 0 } })) : null, _isHovered &&
+            }, onPointerEnter: handlePointerEnter, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!_isCollapsed && mediaPosition === 'top' ? mediaNode : null, rest.stickyHeader ? ((0, jsx_runtime_1.jsx)("div", { ref: stickySentinelRef, "aria-hidden": 'true', style: { height: 0 } })) : null, _isHovered &&
                     (0, lodash_1.size)(floatingActionsList) > 0 &&
                     (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledFloatingActions, { className: 'reqore-panel-floating-actions', theme: theme, size: panelSize, intent: intent, flat: flat, ref: floatingActionsRef, onMouseLeave: handleFloatingActionsMouseLeave, children: (0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, gapSize: panelSize, children: floatingActionsList.map(function (action, index) { return renderActions(action, index, true); }) }) }), document.body), hasTitleBar && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTopBar, { flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1), noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, "$descriptionBelow": descriptionBelow, "$descriptionMaxLines": descriptionIsClamped ? descriptionClamp : 0, "$descriptionFontPx": descriptionFontPx, "data-narrow": isNarrow ? 'true' : 'false', ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, rounded: rounded, radiusSize: rest.radiusSize, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset, stickyHeaderInset: stickyInset, isStuck: isHeaderStuck, "$mediaAbove": hasMedia && mediaPosition === 'top' && !_isCollapsed, children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { className: 'reqore-panel-title-header', children: [breadcrumbs ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((function () {
                                     var hasPanelIcon = !!icon || !!iconImage || loading;
@@ -1109,7 +1370,23 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                                 // but only while there is a title header to take it FROM. With no label,
                                 // badge, icon or breadcrumbs the bar is the group's alone, and holding a
                                 // Collection's search input to half of an empty bar guards nothing.
-                                maxWidth: hasTitleHeader ? '50%' : undefined }, responsiveActionsWrapperProps === null || responsiveActionsWrapperProps === void 0 ? void 0 : responsiveActionsWrapperProps.style), children: nonFloatingActions.map(renderResponsiveActions()) }))), (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions, { show: showNonResponsiveGroup(), isSmall: false, showControlButtons: true, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, collapseTooltip: collapseTooltip, expandTooltip: expandTooltip, closeTooltip: closeTooltip, fluid: !hasTitleHeader, children: nonFloatingActions.map(renderNonResponsiveActions()) }), descriptionBelow ? (
+                                maxWidth: hasTitleHeader ? '50%' : undefined }, responsiveActionsWrapperProps === null || responsiveActionsWrapperProps === void 0 ? void 0 : responsiveActionsWrapperProps.style), children: nonFloatingActions.map(renderResponsiveActions()) }))), (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions, { show: showNonResponsiveGroup(), isSmall: false, showControlButtons: true, size: panelSize, hasResponsiveActions: hasResponsiveActions(nonFloatingActions), customTheme: theme, isCollapsed: _isCollapsed, onCollapseClick: collapsible ? handleCollapseClick : undefined, onCloseClick: onClose, closeButtonProps: closeButtonProps, collapseButtonProps: collapseButtonProps, collapseTooltip: collapseTooltip, expandTooltip: expandTooltip, closeTooltip: closeTooltip, fluid: !hasTitleHeader, className: NON_RESPONSIVE_ACTIONS_CLASS, 
+                            // Beside a title in a NARROW bar the title comes first (qorus#646). The group is
+                            // `0 0 auto`, so a narrow bar - a table in a card on a phone - squeezed the title
+                            // to nothing and still pushed its last button past the panel's edge. Narrow, the
+                            // title takes its whole width first and the group what is left, at least what its
+                            // controls cannot do without (a search field narrows, a button never does) and at
+                            // most its own width. A basis of 0 is what gives the title the first claim: the
+                            // group is sized from the leftover, so the title shrinks only once the controls
+                            // are at their smallest - and its words break only when one is wider than the
+                            // space left beside them. Shrinking the two against each other instead, by any
+                            // factor, took a fraction of a pixel off the title, and that broke "Services" into
+                            // "Servic / es". Room the title does not need goes to the group first (a grow no
+                            // title's comes near), so a search field widens before the title's box does. A
+                            // wide bar keeps the group at its own width: there the title's claim was its
+                            // one-line width, a description beside it included, and a long description
+                            // squeezed a table's search to its least instead of wrapping.
+                            style: hasTitleHeader && isNarrow ? NARROW_ACTIONS_BESIDE_TITLE : undefined, children: nonFloatingActions.map(renderNonResponsiveActions()) }), descriptionBelow ? (
                         // `flex-basis: 100%` is what puts it on its own line — the bar is a wrapping
                         // flex row, so a full-width item cannot share one with anything before it.
                         // `min-width: 0` so a long sentence wraps inside the bar instead of widening it.