@qoretechnologies/reqore 0.74.11 → 0.74.12-pr.663.g65f34a4

package/dist/components/Panel/index.js

@@ -80,6 +80,7 @@ var styled_1 = require("../../helpers/styled");
 var utils_1 = require("../../helpers/utils");
 var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
 var useReqoreContext_1 = require("../../hooks/useReqoreContext");
+var useFitTextSize_1 = require("../../hooks/useFitTextSize");
 var useTheme_1 = require("../../hooks/useTheme");
 var styles_1 = require("../../styles");
 var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
@@ -134,16 +135,29 @@ var getScrollportInset = function (el) {
         border: parseFloat(style.borderTopWidth) || 0,
     };
 };
-exports.StyledPanelTitleHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex: 1 1 auto;\n  width: 100%;\n  overflow: hidden;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex: 1 1 auto;\n  width: 100%;\n  overflow: hidden;\n"])));
-exports.StyledPanelTitleHeaderContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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) {
+/**
+ * The box the title lives in — and, when the title may wrap, the thing that clamps it.
+ *
+ * It exists first as a measuring box: as a `min-width: 0` flex child it reports the width the
+ * row actually left for the title, where the heading itself would report what its text wants.
+ * `overflow: hidden` is what makes it shrinkable at all, and `display: flex` keeps it from
+ * 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 $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) {
     var $hasOuterIcon = _a.$hasOuterIcon;
     return ($hasOuterIcon ? 'grid' : 'flex');
 }, function (_a) {
     var $hasOuterIcon = _a.$hasOuterIcon, size = _a.size, _b = _a.$iconVerticalAlign, $iconVerticalAlign = _b === void 0 ? 'center' : _b, $hasDescription = _a.$hasDescription;
     return $hasOuterIcon
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "], ["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "])), $hasDescription ? 'auto auto' : 'auto', sizes_1.PADDING_FROM_SIZE[size || 'normal'], $iconVerticalAlign === 'top'
-            ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  grid-row: 1;\n                "], ["\n                  grid-row: 1;\n                "]))) : $iconVerticalAlign === 'bottom' && $hasDescription
-            ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                  grid-row: 2;\n                "], ["\n                  grid-row: 2;\n                "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  grid-row: 1 / ", ";\n                "], ["\n                  grid-row: 1 / ", ";\n                "])), $hasDescription ? 3 : 2)) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          justify-content: flex-start;\n          align-items: center;\n        "], ["\n          justify-content: flex-start;\n          align-items: center;\n        "])));
+        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "], ["\n          // 'auto' lets the column grow to the icon's actual rendered size \u2014\n          // important when consumers pass a custom 'iconProps.size' that does\n          // not match the default size derived from 'panelSize'/'labelSize'.\n          // 'iconSize' is still passed via 'min-width' below to ensure a\n          // sensible minimum reservation when the row is otherwise empty.\n          grid-template-columns: auto minmax(0, 1fr);\n          grid-template-rows: ", ";\n          column-gap: ", "px;\n          row-gap: 3px;\n          align-items: start;\n\n          & > .reqore-panel-title-icon {\n            ", "\n            grid-column: 1;\n            align-self: center;\n            justify-self: start;\n            // Suppress 'vertical-align: super' that ReqoreIcon applies to its\n            // SVG for inline-text contexts. In our grid layout the wrapper is\n            // already vertically centred against the text row's line-box;\n            // 'display: block' takes the SVG out of inline flow entirely so\n            // baseline/super offsets cannot push it off-centre. The wrapper's\n            // own 'align-items: center' then centres the SVG within itself.\n            & svg {\n              display: block;\n              vertical-align: middle;\n            }\n          }\n\n          & > .reqore-panel-title-label-row {\n            grid-column: 2;\n            grid-row: 1;\n            min-width: 0;\n          }\n\n          & > .reqore-panel-title-description {\n            grid-column: 2;\n            grid-row: 2;\n            min-width: 0;\n          }\n        "])), $hasDescription ? 'auto auto' : 'auto', sizes_1.PADDING_FROM_SIZE[size || 'normal'], $iconVerticalAlign === 'top'
+            ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  grid-row: 1;\n                "], ["\n                  grid-row: 1;\n                "]))) : $iconVerticalAlign === 'bottom' && $hasDescription
+            ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  grid-row: 2;\n                "], ["\n                  grid-row: 2;\n                "]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  grid-row: 1 / ", ";\n                "], ["\n                  grid-row: 1 / ", ";\n                "])), $hasDescription ? 3 : 2)) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          justify-content: flex-start;\n          align-items: center;\n        "], ["\n          justify-content: flex-start;\n          align-items: center;\n        "])));
 }, function (_a) {
     var iconSize = _a.iconSize, hasIcon = _a.hasIcon;
     var width = 0;
@@ -152,8 +166,8 @@ exports.StyledPanelTitleHeaderContent = styled_components_1.default.div(template
     }
     return width;
 });
-exports.StyledPanelTitleHeaderLabelAndDescription = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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_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"])));
 /**
  * Does the panel wrapper draw its 1px border?
  *
@@ -184,7 +198,7 @@ exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).wi
     // Everything else follows styled-components' own rule, so re-resizable still receives its
     // `enable` / size / handle config — those are component props, not HTML attributes.
     shouldForwardProp: (0, styled_1.omitStyleProps)('fill', 'accentPosition'),
-})(templateObject_18 || (templateObject_18 = __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) {
+})(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.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
 }, function (_a) {
@@ -219,10 +233,10 @@ exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).wi
         ? Math.max(0, (0, sizes_1.resolveRadius)('normal', radiusSize) -
             (hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) ? 1 : 0))
         : 0;
-    return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "])), accentPosition === 'left' ? 'left' : 'top', $accentSize, accentPosition === 'left'
-        ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n              top: 0;\n              bottom: 0;\n              left: 0;\n              width: ", "px;\n            "], ["\n              top: 0;\n              bottom: 0;\n              left: 0;\n              width: ", "px;\n            "])), $accentSize) : (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n              top: 0;\n              right: 0;\n              left: 0;\n              height: ", "px;\n            "], ["\n              top: 0;\n              right: 0;\n              left: 0;\n              height: ", "px;\n            "])), $accentSize), stripRadius
+    return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "], ["\n      position: relative;\n      /* Reserve the strip's thickness so the title bar and content never sit\n         under it \u2014 the same reservation ReqoreCallout makes. */\n      padding-", ": ", "px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        ", "\n        ", "\n        background-color: ", ";\n      }\n    "])), accentPosition === 'left' ? 'left' : 'top', $accentSize, accentPosition === 'left'
+        ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n              top: 0;\n              bottom: 0;\n              left: 0;\n              width: ", "px;\n            "], ["\n              top: 0;\n              bottom: 0;\n              left: 0;\n              width: ", "px;\n            "])), $accentSize) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n              top: 0;\n              right: 0;\n              left: 0;\n              height: ", "px;\n            "], ["\n              top: 0;\n              right: 0;\n              left: 0;\n              height: ", "px;\n            "])), $accentSize), stripRadius
         ? accentPosition === 'left'
-            ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              "], ["\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              "])), stripRadius, stripRadius) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __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              "])), stripRadius, stripRadius)
+            ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              "], ["\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              "])), stripRadius, stripRadius) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __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              "])), stripRadius, stripRadius)
         : undefined, intent
         ? theme.intents[intent]
         : (0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.22));
@@ -241,25 +255,34 @@ exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).wi
 }, function (_a) {
     var interactive = _a.interactive, theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition;
     return interactive
-        ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "], ["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "])), exports.StyledPanelTitle, exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, opacity === 0 && flat
+        ? (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "], ["\n          cursor: pointer;\n\n          &:hover {\n            ", " ", " .reqore-panel-title-icon {\n              transform: scale(", ");\n            }\n\n            background-color: ", ";\n\n            border-color: ", ";\n\n            ", "\n          }\n        "])), exports.StyledPanelTitle, exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, opacity === 0 && flat
             ? undefined
             : (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity)), opacity), hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition })
             ? (0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.25)
-            : undefined, opacity !== 0 && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n              ", ":after {\n                background: linear-gradient(\n                  to top,\n                  ", "\n                    0%,\n                  transparent 100%\n                );\n              }\n            "], ["\n              ", ":after {\n                background: linear-gradient(\n                  to top,\n                  ", "\n                    0%,\n                  transparent 100%\n                );\n              }\n            "])), item_1.StyledCollectionItemContent, (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity)), opacity))) : undefined;
+            : undefined, opacity !== 0 && (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n              ", ":after {\n                background: linear-gradient(\n                  to top,\n                  ", "\n                    0%,\n                  transparent 100%\n                );\n              }\n            "], ["\n              ", ":after {\n                background: linear-gradient(\n                  to top,\n                  ", "\n                    0%,\n                  transparent 100%\n                );\n              }\n            "])), item_1.StyledCollectionItemContent, (0, polished_1.rgba)((0, polished_1.darken)(0.025, (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity)), opacity))) : undefined;
 }, function (_a) {
     var raised = _a.raised, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition;
     return raised && !hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition }) && styles_1.RaisedElement;
 }, function (_a) {
     var fill = _a.fill, isCollapsed = _a.isCollapsed;
     return !isCollapsed && fill
-        ? (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          height: 100%;\n          flex: 1;\n        "], ["\n          height: 100%;\n          flex: 1;\n        "]))) : undefined;
+        ? (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n          height: 100%;\n          flex: 1;\n        "], ["\n          height: 100%;\n          flex: 1;\n        "]))) : undefined;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && styles_1.DisabledElement;
 });
-exports.StyledPanelTitle = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: ", ";\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  flex-flow: ", ";\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 responsive = _a.responsive, isMobile = _a.isMobile;
-    return (responsive ? (isMobile ? 'column' : 'row') : 'row');
+exports.StyledPanelTitle = styled_components_1.default.div(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);
+}, 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    "])));
+}, function (_a) {
+    var $descriptionMaxLines = _a.$descriptionMaxLines;
+    return !!$descriptionMaxLines && (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      .reqore-panel-title-description {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n    "], ["\n      .reqore-panel-title-description {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n    "])), $descriptionMaxLines);
 }, function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
@@ -273,12 +296,12 @@ exports.StyledPanelTitle = styled_components_1.default.div(templateObject_20 ||
         : null;
 }, sizes_1.GAP_FROM_SIZE.normal, exports.StyledPanelTitleHeaderContent, styles_1.INACTIVE_ICON_SCALE, function (_a) {
     var collapsible = _a.collapsible;
-    return collapsible && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "], ["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "])), exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, function (_a) {
+    return collapsible && (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "], ["\n      cursor: pointer;\n      &:hover {\n        ", " .reqore-panel-title-icon {\n          transform: scale(", ");\n        }\n\n        background-color: ", ";\n      }\n    "])), exports.StyledPanelTitleHeaderContent, styles_1.ACTIVE_ICON_SCALE, function (_a) {
         var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
         return (0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.05), opacity);
     });
 });
-exports.StyledPanelTopBar = (0, styled_components_1.default)(exports.StyledPanelTitle)(templateObject_22 || (templateObject_22 = __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_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) {
     var padded = _a.padded, size = _a.size, isCollapsed = _a.isCollapsed, minimal = _a.minimal;
     return !padded || isCollapsed || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -323,9 +346,9 @@ exports.StyledPanelTopBar = (0, styled_components_1.default)(exports.StyledPanel
 }, function (_a) {
     var stickyHeader = _a.stickyHeader, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return stickyHeader &&
-        opacity === 0 && (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __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    "])));
+        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_23 || (templateObject_23 = __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_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) {
     var padded = _a.padded, size = _a.size, minimal = _a.minimal;
     return !padded || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -345,7 +368,7 @@ exports.StyledPanelBottomActions = (0, styled_components_1.default)(exports.Styl
         ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
         : null;
 });
-exports.StyledPanelContent = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __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_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) {
     var isCollapsed = _a.isCollapsed;
     return (isCollapsed ? 'none !important' : undefined);
 }, function (_a) {
@@ -359,7 +382,7 @@ exports.StyledPanelContent = styled_components_1.default.div(templateObject_24 |
     var size = _a.size;
     return sizes_1.TEXT_FROM_SIZE[size];
 });
-exports.StyledFloatingActions = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __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_components_1.default.div(templateObject_30 || (templateObject_30 = __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) {
@@ -387,11 +410,12 @@ exports.ReqorePanelSkeleton = (0, react_2.memo)(function (_a) {
                 (children ? (children) : ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { vertical: true, children: (0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { lines: 5, width: '100%', size: 'tiny' }) })))] }));
 });
 exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
-    var children = _a.children, label = _a.label, description = _a.description, _b = _a.collapseButtonProps, collapseButtonProps = _b === void 0 ? {} : _b, collapsible = _a.collapsible, onClose = _a.onClose, _c = _a.closeButtonProps, closeButtonProps = _c === void 0 ? {} : _c, _d = _a.rounded, rounded = _d === void 0 ? true : _d, _e = _a.actions, actions = _e === void 0 ? [] : _e, _f = _a.bottomActions, bottomActions = _f === void 0 ? [] : _f, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, _g = _a.iconWithLabel, iconWithLabel = _g === void 0 ? false : _g, _h = _a.iconVerticalAlign, iconVerticalAlign = _h === void 0 ? 'center' : _h, intent = _a.intent, className = _a.className, flat = _a.flat, _j = _a.unMountContentOnCollapse, unMountContentOnCollapse = _j === void 0 ? true : _j, onCollapseChange = _a.onCollapseChange, _k = _a.padded, padded = _k === void 0 ? true : _k, _l = _a.wrapperPadding, wrapperPadding = _l === void 0 ? 'both' : _l, contentStyle = _a.contentStyle, contentEffect = _a.contentEffect, _m = _a.labelEffect, labelEffect = _m === void 0 ? {} : _m, _o = _a.descriptionEffect, descriptionEffect = _o === void 0 ? {} : _o, descriptionIntent = _a.descriptionIntent, labelSize = _a.labelSize, contentSize = _a.contentSize, minimal = _a.minimal, badge = _a.badge, iconColor = _a.iconColor, _p = _a.iconProps, iconProps = _p === void 0 ? {} : _p, fluid = _a.fluid, _q = _a.responsiveActions, responsiveActions = _q === void 0 ? true : _q, _r = _a.responsiveTitle, responsiveTitle = _r === void 0 ? true : _r, _s = _a.size, panelSize = _s === void 0 ? 'normal' : _s, getContentRef = _a.getContentRef, _t = _a.labelProps, labelProps = _t === void 0 ? {} : _t, disabled = _a.disabled, breadcrumbs = _a.breadcrumbs, _u = _a.showActionsWhenCollapsed, showActionsWhenCollapsed = _u === void 0 ? true : _u, 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, _v = _a.collapseTooltip, collapseTooltip = _v === void 0 ? 'Collapse' : _v, _w = _a.expandTooltip, expandTooltip = _w === void 0 ? 'Expand' : _w, _x = _a.closeTooltip, closeTooltip = _x === void 0 ? 'Close' : _x, accentPosition = _a.accentPosition, accentSize = _a.accentSize, 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", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions", "collapseTooltip", "expandTooltip", "closeTooltip", "accentPosition", "accentSize"]);
+    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, 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"]);
     // 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]);
-    var _y = (0, react_2.useState)(isCollapsed || false), _isCollapsed = _y[0], setIsCollapsed = _y[1];
+    var _5 = (0, react_2.useState)(isCollapsed || false), _isCollapsed = _5[0], setIsCollapsed = _5[1];
     var primaryContentGradient = (0, Effect_1.getPrimaryGradient)(contentEffect === null || contentEffect === void 0 ? void 0 : contentEffect.gradient);
     var primaryContentColors = primaryContentGradient && typeof primaryContentGradient.colors === 'object'
         ? primaryContentGradient.colors
@@ -409,8 +433,8 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     }, []);
     var isMobile = (0, useReqoreContext_1.useReqoreProperty)('isMobile');
     var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
-    var _z = (0, react_use_1.useMeasure)(), measureRef = _z[0], width = _z[1].width;
-    var _0 = (0, react_2.useState)(false), _isHovered = _0[0], setIsHovered = _0[1];
+    var _6 = (0, react_use_1.useMeasure)(), measureRef = _6[0], width = _6[1].width;
+    var _7 = (0, react_2.useState)(false), _isHovered = _7[0], setIsHovered = _7[1];
     var floatingActionsRef = (0, react_2.useRef)(null);
     var panelRef = (0, react_2.useRef)(null);
     var hoverTimerRef = (0, react_2.useRef)(null);
@@ -428,8 +452,8 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     // triggers it. Only wired when `stickyHeader` is on, so ordinary panels pay
     // nothing.
     var stickySentinelRef = (0, react_2.useRef)(null);
-    var _1 = (0, react_2.useState)(false), isHeaderStuck = _1[0], setIsHeaderStuck = _1[1];
-    var _2 = (0, react_2.useState)(0), stickyInset = _2[0], setStickyInset = _2[1];
+    var _8 = (0, react_2.useState)(false), isHeaderStuck = _8[0], setIsHeaderStuck = _8[1];
+    var _9 = (0, react_2.useState)(0), stickyInset = _9[0], setStickyInset = _9[1];
     (0, react_2.useEffect)(function () {
         var _a;
         if (!rest.stickyHeader) {
@@ -578,7 +602,49 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     }, [label, collapsible, onClose, nonFloatingActions, badge, icon]);
     // Return true if the card has a title bar, otherwise return false.
     var hasTitleHeader = (0, react_2.useMemo)(function () { return !!label || !!badge || !!icon || !!breadcrumbs; }, [label, icon, badge, breadcrumbs]);
-    var isSmall = (0, react_2.useMemo)(function () { return responsiveTitle && width < 480 && process.env.NODE_ENV !== 'test'; }, [width, responsiveTitle]);
+    /**
+     * `width` comes from `useMeasure`, which reports 0 until the element is actually measured —
+     * and in jsdom it stays 0 forever. `0 < 480` is true, so an unmeasured panel used to claim it
+     * was narrow; the guard against that was `NODE_ENV !== 'test'`, added in 4eb8ac1 ("Test
+     * fixes") back when the suite was jsdom-only.
+     *
+     * That proxy stopped holding when snapshots moved to a real browser under vitest: same
+     * NODE_ENV, real widths, and the narrow layout switched off in the one place it needed to be
+     * on. No snapshot has ever shown a stacked title bar, which is why the stack going three rows
+     * deep on a drawer went unnoticed for so long (#664).
+     *
+     * Asking whether the width was MEASURED says what the guard always meant. jsdom keeps its 0
+     * and stays wide, so the unit suite is unaffected; a browser measures and behaves.
+     */
+    var isSmall = (0, react_2.useMemo)(function () { return responsiveTitle && width > 0 && width < 480; }, [width, responsiveTitle]);
+    /**
+     * Narrow, from either trigger: the panel measuring under 480px, or the provider's
+     * viewport-level `isMobile`.
+     *
+     * A narrow title bar STAYS ON ONE ROW. The label ellipsizes (it already carries `noWrap`) and
+     * the responsive action group collapses into its overflow, which is what the "hidden when
+     * small" actions exist for. It used to stack instead — title on one row, actions on another,
+     * close/collapse on a third — and that cost more room than the title ever took: measured on a
+     * drawer at 375px, a 93px header for a title using 204px of the width, with a 359px action
+     * group holding a 106px button and 261px of nothing beside it.
+     *
+     * Stacking also broke the collapse it was supposed to help. Going to a column made the action
+     * group `fluid`, the group got a full-width row, and with that much space its own measurement
+     * decided fewer actions needed collapsing — so an action labelled "hidden when small" rendered
+     * in full on a small panel.
+     */
+    var isNarrow = isSmall || isMobile;
+    /**
+     * The tightest fallback, still opt-in: drop the title TEXT and leave the icon in its place.
+     * For a bar too narrow even to ellipsize into — a `[icon] [actions] [×]` header. Nothing
+     * changes without an icon to fall back to, and the label survives as that icon's tooltip.
+     */
+    /**
+     * The title gives up its space entirely and the icon stands in. Opt-in only: the automatic
+     * end of the cascade is the ellipsis, and dropping the title is a decision the caller makes,
+     * not something a width should take on their behalf. Needs an icon to fall back to.
+     */
+    var hideTitleForIcon = isNarrow && compactTitle;
     // If collapsible is true, toggle the isCollapsed state
     // If the isCollapsed state is true, the component is expanded
     // If the isCollapsed state is false, the component is collapsed
@@ -607,10 +673,23 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         return function (action, index) {
             return renderActions(action, index, true, align);
         };
-    }, [actions, showActionsWhenCollapsed, _isCollapsed]);
-    var hasNonResponsiveActions = (0, react_2.useCallback)(function (data) {
-        return (!responsiveActions && (0, lodash_1.size)(data)) ||
-            data.some(function (action) { return action.responsive === false && action.show !== false; });
+    }, 
+    // `isNarrow` belongs here even though this callback does not name it: it wraps
+    // `renderActions`, which does. Without it the wrapper keeps whichever `renderActions`
+    // existed on the first render — when `useMeasure` still reported 0 and the bar did not
+    // yet know it was narrow — so a width-dependent decision inside it could never take
+    // effect. That is what silently defeated dropping the action labels: the flag flipped and
+    // the closure did not. (`renderActions` itself cannot go here: it is declared below.)
+    [isNarrow, actions, showActionsWhenCollapsed, _isCollapsed]);
+    var hasNonResponsiveActions = (0, react_2.useCallback)(
+    // `show: false` has to be honoured on BOTH paths. The `responsiveActions: false` arm used
+    // to ask only whether the array had entries, so a panel whose every action is hidden still
+    // reported having some and rendered an empty control group. It went unnoticed while the
+    // prop defaulted to `true` and that arm was mostly dead.
+    function (data) {
+        return data.some(function (action) {
+            return (!responsiveActions || action.responsive === false) && action.show !== false;
+        });
     }, [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]);
     var hasResponsiveActions = (0, react_2.useCallback)(function (data) {
         return responsiveActions &&
@@ -621,7 +700,14 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         return function (action, index) {
             return renderActions(action, index, false, align);
         };
-    }, [actions, bottomActions, responsiveActions, showActionsWhenCollapsed, _isCollapsed]);
+    }, [
+        isNarrow,
+        actions,
+        bottomActions,
+        responsiveActions,
+        showActionsWhenCollapsed,
+        _isCollapsed,
+    ]);
     var renderActions = (0, react_2.useCallback)(function (action, index, includeResponsive, align) {
         if (align === void 0) { align = 'flex-end'; }
         if (action.show === false ||
@@ -651,14 +737,23 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                     }
                     : undefined })));
         }
-        return ((0, react_1.createElement)(Button_1.default, __assign({ fixed: true }, rest, { id: id, key: index, className: className, customTheme: rest.customTheme || theme, intent: intent, onClick: rest.onClick
+        // FIRST thing to go when the bar is short of room: the action's LABEL, not the
+        // panel's title. An action is a verb the icon already carries, and the label moves
+        // to the tooltip rather than being lost; the title is the only thing naming what
+        // this panel IS. Needs an icon to fall back to — an unlabelled, iconless button is
+        // a blank box — and a caller can pin the label with `responsive: false`.
+        // `label` on an action is typed `string | number`; a tooltip is not, so the numeric
+        // case is stringified rather than cast away.
+        var actionLabelTooltip = typeof label === 'number' ? String(label) : label;
+        var dropActionLabel = isNarrow && !!rest.icon && !!label;
+        return ((0, react_1.createElement)(Button_1.default, __assign({ fixed: true }, rest, { id: id, key: index, className: className, customTheme: rest.customTheme || theme, intent: intent, tooltip: dropActionLabel ? rest.tooltip || actionLabelTooltip : rest.tooltip, onClick: rest.onClick
                 ? function (e) {
                     var _a;
                     e.stopPropagation();
                     (_a = rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest);
                 }
-                : undefined }), label));
-    }, [actions, theme, showActionsWhenCollapsed, _isCollapsed]);
+                : undefined }), dropActionLabel ? undefined : label));
+    }, [actions, theme, showActionsWhenCollapsed, _isCollapsed, isNarrow]);
     var interactive = !!(rest.onClick ||
         rest.onMouseOver ||
         rest.onMouseEnter ||
@@ -679,9 +774,10 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     var showNonResponsiveGroup = (0, react_2.useCallback)(function () {
         var show = false;
         // SHOULD THIS GROUP SHOW CONTROL BUTTONS?
-        // This group should only show control buttons
-        // if the panel is not small
-        if (!isSmall && (onClose || collapsible)) {
+        // Always, now that a narrow bar stays on one row: there is no separate control row for them
+        // to move to. This used to read `!isSmall`, which withheld them here because a small panel
+        // rendered its own row below — and that row is what the one-row treatment removed.
+        if (onClose || collapsible) {
             show = true;
         }
         // OTHERWISE, ARE THERE ANY NON RESPONSIVE ACTIONS TO BE SHOWN?
@@ -691,7 +787,139 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
             show = true;
         }
         return show;
-    }, [isSmall, collapsible, nonFloatingActions, hasNonResponsiveActions]);
+    }, [collapsible, onClose, nonFloatingActions, hasNonResponsiveActions]);
+    /**
+     * The title's natural size in px, from the heading level it renders at — the same
+     * `labelSize || HEADER_SIZE_TO_NUMBER[panelSize]` the icon is sized from.
+     */
+    var labelNaturalPx = (_b = sizes_1.HEADER_LEVEL_TO_PX[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]]) !== null && _b !== void 0 ? _b : sizes_1.HEADER_LEVEL_TO_PX[3];
+    /**
+     * SECOND thing to give: the title's size. Once the actions are down to icons and the
+     * row is still short, the title shrinks toward a floor rather than dropping characters
+     * — the end of a name is often the part that distinguishes it. Only at the floor does
+     * the existing `noWrap` ellipsis take over.
+     *
+     * Off when the caller pins `labelEffect.textSize`: they have said what size they want.
+     */
+    /**
+     * The width the layout left for the title, observed on the box that claims the leftover
+     * space. Kept as state rather than read during render so the fit is calculated from a width
+     * that has actually been laid out.
+     */
+    /** Whole lines, at least one — a fractional or zero `labelMaxLines` is a caller slip, not
+     *  a request for half a line of text. */
+    var clampLines = Math.max(1, Math.floor(labelMaxLines) || 1);
+    /** `compactTitle` drops the description with the title it belongs to, so a bar that has
+     *  given up its title never grows a row to carry one. */
+    var descriptionBelow = descriptionPosition === 'below' && !!description && !(hideTitleForIcon && !!icon);
+    var descriptionClamp = Math.max(0, Math.floor(descriptionMaxLines || 0));
+    /**
+     * A clamped description opens on click so the whole of it can be read — on a phone there is
+     * no hover to reveal it with, and two lines of a long sentence are an invitation to tap.
+     *
+     * Interactive only while it is actually cut, or already open: a description that fits is
+     * left alone, so a click on it still reaches the bar and collapses a collapsible panel the
+     * way it always has. When it IS cut, that same click must not reach the bar — opening the
+     * text and folding the panel away in one gesture is the worst of both.
+     */
+    var _10 = (0, react_2.useState)(false), isDescriptionExpanded = _10[0], setIsDescriptionExpanded = _10[1];
+    var _11 = (0, react_2.useState)(false), isDescriptionTruncated = _11[0], setIsDescriptionTruncated = _11[1];
+    var descriptionRef = (0, react_2.useRef)(null);
+    var descriptionIsClamped = descriptionClamp > 0 && !isDescriptionExpanded;
+    (0, react_2.useLayoutEffect)(function () {
+        var el = descriptionRef.current;
+        // `scrollHeight` is what the text wants, `clientHeight` what the clamp left it. Re-read
+        // whenever the bar's width moves, because that is what changes how many lines it takes.
+        setIsDescriptionTruncated(descriptionIsClamped && !!el && el.scrollHeight > el.clientHeight + 1);
+    }, [description, descriptionIsClamped, width]);
+    var descriptionIsInteractive = isDescriptionTruncated || isDescriptionExpanded;
+    var handleDescriptionClick = (0, react_2.useCallback)(function (event) {
+        if (!descriptionIsInteractive) {
+            return;
+        }
+        event.stopPropagation();
+        setIsDescriptionExpanded(function (expanded) { return !expanded; });
+    }, [descriptionIsInteractive]);
+    /** Shared by both places the description can render — inline with the title, or on its
+     *  own row below — so the two cannot drift apart. */
+    var descriptionProps = __assign({ ref: descriptionRef, className: 'reqore-panel-title-description', size: panelSize, effect: __assign({ opacity: 0.7 }, descriptionEffect), intent: descriptionIntent, onClick: handleDescriptionClick }, (descriptionIsInteractive
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            'aria-expanded': isDescriptionExpanded,
+            onKeyDown: function (event) {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    handleDescriptionClick(event);
+                }
+            },
+            style: { cursor: 'pointer' },
+        }
+        : {}));
+    var _12 = (0, react_2.useState)(undefined), labelAvailable = _12[0], setLabelAvailable = _12[1];
+    var _13 = (0, useFitTextSize_1.useFitTextSize)({
+        text: typeof label === 'string' ? label : '',
+        available: labelAvailable,
+        max: labelNaturalPx,
+        min: labelMinTextSize,
+        lines: clampLines,
+        enabled: fitLabel !== false && typeof label === 'string' && !(labelEffect === null || labelEffect === void 0 ? void 0 : labelEffect.textSize),
+    }), labelFitRef = _13[0], labelFitPx = _13[1];
+    /** 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)))
+        : 0;
+    /**
+     * How much room the title has, computed rather than measured off its own box.
+     *
+     * The box the title sits in is sized by its content, so measuring THAT is circular — the
+     * font shrinks, the box shrinks, and the size ratchets to the floor. Measuring the space it
+     * COULD have is not: take the bar, subtract everything competing with the title, and what
+     * is left does not move when the title's font does.
+     *
+     * Everything competing with it is text-independent: the action groups and control buttons
+     * (the bar's other children), and the icon and badge that share the title's row. The action
+     * group is `fluid` by default and would otherwise swallow the leftover, which is why this
+     * cannot be solved by giving the title column `flex-grow` — it competes with a group that
+     * is designed to take the rest, and loses.
+     *
+     * Re-run on `width`, which is the bar's own measured width: when the bar resizes, so does
+     * everything in it.
+     */
+    /**
+     * The title's available width is its CONTAINING BLOCK minus whatever shares it — measured,
+     * not reconstructed.
+     *
+     * This used to subtract the action group, the gaps and the icon from the bar's width. That
+     * arithmetic held only for the one layout it was written against: give the panel a
+     * `description` and the icon moves into an outer grid, so the sum over-reported by 30-80px
+     * and the fit under-shrank. The symptom was the worst of both worlds — a title both smaller
+     * AND ellipsized, which is the one outcome the feature exists to avoid.
+     *
+     * Measuring the parent is safe precisely where it looks circular. While the text overflows
+     * — the only regime in which anything shrinks — the parent is pinned by the row, not by the
+     * text: at a 300px bar it measures 128px at 19px, at 16px, and wrapped to two lines. When
+     * the text does fit, the parent has slack and the fit returns the natural size, which is
+     * the right answer either way.
+     */
+    (0, react_2.useLayoutEffect)(function () {
+        var node = labelFitRef.current;
+        var parent = node === null || node === void 0 ? void 0 : node.parentElement;
+        if (!fitLabel || !node || !parent) {
+            return;
+        }
+        var style = getComputedStyle(parent);
+        var padding = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
+        var gap = parseFloat(style.columnGap) || parseFloat(style.gap) || 0;
+        // A badge sits beside the title in the same box and takes real width.
+        var siblings = Array.from(parent.children).reduce(function (total, child) {
+            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));
+        setLabelAvailable(function (current) { return (current === next ? current : next); });
+    }, [fitLabel, label, width, badge, actions, panelSize, description, clampLines]);
     var iconTooltip = (0, react_2.useMemo)(function () { return ({
         content: label,
     }); }, [label]);
@@ -710,8 +938,13 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                 panelRef.current = node;
             }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [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, isMobile: isMobile || isSmall, ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, rounded: rounded, radiusSize: rest.radiusSize, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset, stickyHeaderInset: stickyInset, isStuck: isHeaderStuck, children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { 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 () {
+                    (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, 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;
+                                    // The icon takes the label's place, so there has to BE an icon. Without one
+                                    // the label is the only thing identifying the panel and it stays put — a
+                                    // header with neither is not a compact header, it is an empty one. The label
+                                    // is not lost either way: it is already this icon's tooltip.
+                                    var hideTitleText = hideTitleForIcon && hasPanelIcon;
                                     // Layout decision:
                                     // - iconWithLabel=true → render the icon INSIDE the
                                     //   label-and-badge row (no outer icon column). The
@@ -727,7 +960,7 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                                     //   the icon in row 1 (label), row 2 (description), or
                                     //   spans both rows (center). The description always
                                     //   indents past the icon column.
-                                    var inlineWithLabel = hasPanelIcon && (iconWithLabel || !description);
+                                    var inlineWithLabel = hasPanelIcon && (iconWithLabel || !description || hideTitleText);
                                     var useOuterGrid = hasPanelIcon && !inlineWithLabel;
                                     // Outer grid → grid column-gap handles icon→label
                                     // spacing, so the icon itself takes no margin.
@@ -737,11 +970,28 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                                     var panelIcon = hasPanelIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ size: "".concat(sizes_1.ICON_FROM_HEADER_SIZE[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]], "px"), image: loading ? undefined : iconImage, margin: iconMargin, color: iconColor, tooltip: iconTooltip, effect: {
                                             opacity: colors_1.CONTROL_ICON_OPACITY,
                                         } }, iconProps, { animation: loading ? 'spin' : iconProps === null || iconProps === void 0 ? void 0 : iconProps.animation, icon: loading ? "Loader".concat(loadingIconType || '', "Line") : icon || (iconProps === null || iconProps === void 0 ? void 0 : iconProps.icon), className: "reqore-panel-title-icon ".concat((iconProps === null || iconProps === void 0 ? void 0 : iconProps.className) || '').trim() }))) : null;
-                                    var labelRow = ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndBadge, { className: 'reqore-panel-title-label-row', children: [inlineWithLabel && panelIcon, typeof label === 'string' ? ((0, jsx_runtime_1.jsx)(LabelEditor_1.LabelEditor, { size: labelSize || panelSize, customTheme: theme, effect: __assign({ noWrap: true }, labelEffect), style: {
-                                                    display: 'inline-flex',
-                                                    alignItems: 'center',
-                                                    minWidth: 0,
-                                                }, label: label, onSubmit: onLabelEdit, tooltip: showLabelTooltip ? customLabelTooltip || label : undefined })) : (label), badge || badge === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null] }));
+                                    var labelRow = ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndBadge, { className: 'reqore-panel-title-label-row', children: [inlineWithLabel && panelIcon, hideTitleText ? null : typeof label === 'string' ? (
+                                            // The measured box is this wrapper, not the heading: as a
+                                            // `min-width: 0` flex child it reports the width the row actually
+                                            // left for the title, where the heading would report what the text
+                                            // wants. `overflow: hidden` is what makes it shrinkable at all.
+                                            // `display: flex` keeps the wrapper from 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 was before this wrapper existed.
+                                            (0, jsx_runtime_1.jsx)(StyledPanelTitleLabelBox, { ref: labelFitRef, className: 'reqore-panel-title-label-box', "$clampLines": clampLines, children: (0, jsx_runtime_1.jsx)(LabelEditor_1.LabelEditor, { size: labelSize || panelSize, customTheme: theme, effect: __assign({ 
+                                                        // `noWrap` pins the heading to one line; a clamped title is
+                                                        // allowed to wrap, and the clamp brings its own ellipsis.
+                                                        noWrap: clampLines === 1 }, labelEffect), style: __assign(__assign(__assign({}, (clampLines > 1
+                                                        ? {}
+                                                        : { display: 'inline-flex', alignItems: 'center' })), { minWidth: 0, 
+                                                        // Capped to the measured wrapper so the heading's own
+                                                        // `text-overflow: ellipsis` (from `noWrap`) has a box to overflow.
+                                                        // An `inline-flex` heading otherwise sizes to its text, and the
+                                                        // wrapper clips it mid-word with no ellipsis at all.
+                                                        maxWidth: '100%' }), (fitLabel !== false && !(labelEffect === null || labelEffect === void 0 ? void 0 : labelEffect.textSize)
+                                                        ? { fontSize: "".concat(labelFitPx, "px") }
+                                                        : {})), label: label, onSubmit: onLabelEdit, tooltip: showLabelTooltip ? customLabelTooltip || label : undefined }) })) : (label), badge || badge === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null] }));
                                     // Description size is driven by the panel size only —
                                     // explicitly NOT by `labelSize`. `NUMBER_TO_SIZE` maps
                                     // 1..6 → micro..huge, which means bumping `labelSize`
@@ -750,9 +1000,55 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                                     // pairing: a bigger label should not make supporting
                                     // text smaller. Consumers that want to size the
                                     // description explicitly pass `descriptionEffect.textSize`.
-                                    var descriptionRow = description ? ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, { className: 'reqore-panel-title-description', size: panelSize, effect: __assign({ opacity: 0.7 }, descriptionEffect), intent: descriptionIntent, children: description })) : null;
-                                    return ((0, jsx_runtime_1.jsx)(exports.StyledPanelTitleHeaderContent, __assign({ size: panelSize }, labelProps, { hasLabel: !!label, hasIcon: useOuterGrid, iconSize: sizes_1.ICON_FROM_HEADER_SIZE[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]], "$hasOuterIcon": useOuterGrid, "$iconVerticalAlign": iconVerticalAlign, "$hasDescription": !!description, children: useOuterGrid ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [panelIcon, labelRow, descriptionRow] })) : ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndDescription, { children: [labelRow, descriptionRow] })) })));
-                                })()) : null, breadcrumbs && (badge || badge === 0) ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null, (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions, { show: isSmall && (!!onClose || collapsible), isSmall: isSmall, 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: false, style: { marginLeft: 'auto' } })] })), hasResponsiveActions(nonFloatingActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, __assign({ responsive: responsiveActions, fluid: responsiveActions || isSmall, horizontalAlign: 'flex-end', customTheme: theme, size: panelSize }, responsiveActionsWrapperProps, { children: nonFloatingActions.map(renderResponsiveActions()) }))), (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions, { show: showNonResponsiveGroup(), isSmall: isSmall, showControlButtons: !isSmall, 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 || isSmall, children: nonFloatingActions.map(renderNonResponsiveActions()) })] })), !_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? ((0, jsx_runtime_1.jsx)(exports.StyledPanelContent, { as: 'div', className: 'reqore-panel-content', hasLabel: !!hasTitleBar, hasBottomActions: hasBottomActions, isCollapsed: _isCollapsed, style: contentStyle, padded: padded, minimal: minimal || opacity === 0, size: contentSize || panelSize, ref: getContentRef, noHorizontalPadding: noHorizontalPadding, children: children })) : null, hasBottomActions && !_isCollapsed ? ((0, jsx_runtime_1.jsxs)(exports.StyledPanelBottomActions, { flat: flat, className: 'reqore-panel-bottom-actions', theme: theme, padded: padded, intent: intent, minimal: minimal || opacity === 0, opacity: minimal ? 0 : opacity !== null && opacity !== void 0 ? opacity : 1, size: contentSize || panelSize, noHorizontalPadding: noHorizontalPadding, children: [hasNonResponsiveActions(leftBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderNonResponsiveActions('flex-start')) })) : null, hasResponsiveActions(leftBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, responsive: responsiveActions, customTheme: theme, size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderResponsiveActions('flex-start')) })), hasResponsiveActions(rightBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, horizontalAlign: 'flex-end', responsive: responsiveActions, customTheme: theme, style: { marginLeft: 'auto' }, size: panelSize, children: rightBottomActions.map(renderResponsiveActions()) })), hasNonResponsiveActions(rightBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { horizontalAlign: 'flex-end', size: panelSize, style: { marginLeft: 'auto' }, children: rightBottomActions.map(renderNonResponsiveActions()) })) : null] })) : null] })) })));
+                                    var descriptionRow = description && !hideTitleText && !descriptionBelow ? ((0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({}, descriptionProps, { children: description }))) : null;
+                                    return ((0, jsx_runtime_1.jsx)(exports.StyledPanelTitleHeaderContent, __assign({ size: panelSize }, labelProps, { hasLabel: !!label && !hideTitleText, hasIcon: useOuterGrid, iconSize: sizes_1.ICON_FROM_HEADER_SIZE[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]], "$hasOuterIcon": useOuterGrid, "$iconVerticalAlign": iconVerticalAlign, "$hasDescription": !!description && !hideTitleText, children: useOuterGrid ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [panelIcon, labelRow, descriptionRow] })) : ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeaderLabelAndDescription, { children: [labelRow, descriptionRow] })) })));
+                                })()) : null, breadcrumbs && (badge || badge === 0) ? ((0, jsx_runtime_1.jsx)(Button_1.ButtonBadge, { size: (0, utils_1.getOneHigherSize)(panelSize), content: badge, wrapGroup: isSmall, margin: label ? 'left' : 'none' })) : null, (0, jsx_runtime_1.jsx)(NonResponsiveActions_1.ReqorePanelNonResponsiveActions
+                                // The narrow bar keeps its controls in the trailing group, so this row —
+                                // which existed only for the stacked layout — never shows.
+                                , { 
+                                    // The narrow bar keeps its controls in the trailing group, so this row —
+                                    // which existed only for the stacked layout — never shows.
+                                    show: false, 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: false, style: { marginLeft: 'auto' } })] })), hasResponsiveActions(nonFloatingActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, __assign({ responsive: responsiveActions, 
+                            // Not fluid by default. `fluid` emits `width: 100%`, so the group's flex basis
+                            // becomes the whole bar and the title — the only shrinkable thing on the other
+                            // side — collapses to nothing: measured at 0px of title on a 400px panel, and
+                            // 142px of a 518px bar where the buttons needed 90.
+                            //
+                            // A caller whose actions include something with no useful width of its own —
+                            // Collection puts a search input in here — opts back in through
+                            // `responsiveActionsWrapperProps`, because `fluid` is also what ControlGroup
+                            // propagates to its children, and that input has nothing to fill without it.
+                            fluid: false, horizontalAlign: 'flex-end', customTheme: theme, size: panelSize }, responsiveActionsWrapperProps, { 
+                            // The cap is the whole fix. Half the bar guarantees the title the other half,
+                            // and the moment the buttons need more than their share the group overflows —
+                            // which is what `responsive` collapse watches (`scrollWidth > clientWidth`), so
+                            // the fold into the `…` menu still fires. Floored at 40px because shrinking to
+                            // nothing clips the buttons rather than folding them, and ControlGroup ignores
+                            // its own overflow below that width, which would strand them clipped.
+                            style: __assign({ 
+                                // Pushed to the trailing edge. A `fluid` group used to span the bar and its
+                                // own `horizontalAlign` put the buttons on the right; a content-sized one is
+                                // only as wide as its buttons, so with no title header beside it — Tree has
+                                // no label — it would sit at the LEFT of an otherwise empty bar. `auto`
+                                // margin restores the edge without giving the group any width back.
+                                marginLeft: 'auto', 
+                                // Content basis that may still shrink. `fluid={false}` alone compiles to
+                                // `flex: 0 0 auto`, which pins the group at its content width so it can never
+                                // overflow — and `responsive` collapse watches `scrollWidth > clientWidth`,
+                                // so the fold into the `…` menu would simply stop happening.
+                                flex: '0 1 auto', 
+                                // Floored, because shrinking to nothing clips the buttons instead of folding
+                                // them, and ControlGroup ignores its own overflow below 40px.
+                                minWidth: 40, 
+                                // Capped, so a group that IS opted back into growing cannot take the row —
+                                // 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 ? (
+                        // `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.
+                        (0, jsx_runtime_1.jsx)("div", { className: 'reqore-panel-title-description-row', style: { flex: '0 0 100%', minWidth: 0 }, children: (0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({}, descriptionProps, { children: description })) })) : null] })), !_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? ((0, jsx_runtime_1.jsx)(exports.StyledPanelContent, { as: 'div', className: 'reqore-panel-content', hasLabel: !!hasTitleBar, hasBottomActions: hasBottomActions, isCollapsed: _isCollapsed, style: contentStyle, padded: padded, minimal: minimal || opacity === 0, size: contentSize || panelSize, ref: getContentRef, noHorizontalPadding: noHorizontalPadding, children: children })) : null, hasBottomActions && !_isCollapsed ? ((0, jsx_runtime_1.jsxs)(exports.StyledPanelBottomActions, { flat: flat, className: 'reqore-panel-bottom-actions', theme: theme, padded: padded, intent: intent, minimal: minimal || opacity === 0, opacity: minimal ? 0 : opacity !== null && opacity !== void 0 ? opacity : 1, size: contentSize || panelSize, noHorizontalPadding: noHorizontalPadding, children: [hasNonResponsiveActions(leftBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderNonResponsiveActions('flex-start')) })) : null, hasResponsiveActions(leftBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, responsive: responsiveActions, customTheme: theme, size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderResponsiveActions('flex-start')) })), hasResponsiveActions(rightBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, horizontalAlign: 'flex-end', responsive: responsiveActions, customTheme: theme, style: { marginLeft: 'auto' }, size: panelSize, children: rightBottomActions.map(renderResponsiveActions()) })), hasNonResponsiveActions(rightBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { horizontalAlign: 'flex-end', size: panelSize, style: { marginLeft: 'auto' }, children: rightBottomActions.map(renderNonResponsiveActions()) })) : null] })) : null] })) })));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30;
 //# sourceMappingURL=index.js.map