@qoretechnologies/reqore 0.78.10 → 0.78.11-pr.723.g4423093

package/dist/components/Panel/index.js

@@ -86,9 +86,11 @@ var styled_components_1 = require("styled-components");
 var colors_1 = require("../../constants/colors");
 var sizes_1 = require("../../constants/sizes");
 var colors_2 = require("../../helpers/colors");
+var SurfaceContext_1 = require("../../context/SurfaceContext");
 var styled_1 = __importStar(require("../../helpers/styled"));
 var utils_1 = require("../../helpers/utils");
 var hoveringPointer_1 = require("../../helpers/hoveringPointer");
+var iconProps_1 = require("../../helpers/iconProps");
 var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
 var useReqoreContext_1 = require("../../hooks/useReqoreContext");
 var useFitTextSize_1 = require("../../hooks/useFitTextSize");
@@ -107,6 +109,7 @@ var Span_1 = require("../Span");
 var TooltipComponent_1 = require("../TooltipComponent");
 var LabelEditor_1 = require("./LabelEditor");
 var NonResponsiveActions_1 = require("./NonResponsiveActions");
+var surface_1 = require("../../helpers/surface");
 var getPaddingSize = function (padded, size) {
     return typeof padded === 'string' ? sizes_1.SPECIAL_PADDING_FROM_SIZE[padded] : sizes_1.PADDING_FROM_SIZE[size];
 };
@@ -192,7 +195,7 @@ var getWidthAboveMinimum = function (element) {
     return Math.max(0, width - minimum);
 };
 exports.StyledPanelTitleHeader = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"], ["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"])));
-exports.StyledPanelTitleHeaderContent = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"], ["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"])), function (_a) {
+exports.StyledPanelTitleHeaderContent = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  /* Rendered as a link (labelProps.as), the title keeps the panel's text color: the browser's link blue is\n     1.1:1 on the dark theme. */\n  color: inherit;\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  /* Rendered as a link (labelProps.as), the title keeps the panel's text color: the browser's link blue is\n     1.1:1 on the dark theme. */\n  color: inherit;\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) {
@@ -325,6 +328,14 @@ exports.REQORE_PANEL_STYLE_PROPS = (0, styled_1.listReqoreStyleProps)({
     unMountContentOnCollapse: true,
     wrapperPadding: true,
 });
+/** A panel's fill at `opacity`: what its styled rule paints and what it hands what it holds as its surface. */
+var getPanelFill = function (theme, opacity) {
+    return (0, colors_2.fadeColor)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
+};
+/** A panel's title and top bar fill at `opacity`, painted and handed down alike. */
+var getPanelBarFill = function (theme, opacity) {
+    return (0, colors_2.fadeColor)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
+};
 exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
     // Its own props, `interactive` (set by the panel for its hover styles) and the layout flags a
     // containing ControlGroup hands it — except `size`, which a panel never forwards but a
@@ -332,7 +343,7 @@ exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
     shouldForwardProp: styled_1.omitStyleProps.apply(void 0, __spreadArray(__spreadArray(__spreadArray([], exports.REQORE_PANEL_STYLE_PROPS, false), styled_1.REQORE_CONTROL_GROUP_CHILD_PROPS.filter(function (prop) { return prop !== 'size'; }), false), ['interactive'], false)),
 })(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a `show: 'hover'` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a \\`show: 'hover'\\` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-    return (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), opacity);
+    return getPanelFill(theme, opacity);
 }, function (_a) {
     var rounded = _a.rounded, radiusSize = _a.radiusSize;
     return rounded ? (0, sizes_1.resolveRadius)('normal', radiusSize) : 0;
@@ -342,8 +353,8 @@ exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
         ? "1px solid ".concat((0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.08))
         : undefined;
 }, function (_a) {
-    var theme = _a.theme;
-    return (0, colors_2.getReadableColor)(theme, undefined, undefined, true);
+    var theme = _a.theme, $color = _a.$color;
+    return $color !== null && $color !== void 0 ? $color : (0, colors_2.getReadableColor)(theme, undefined, undefined, true);
 }, function (_a) {
     var accentPosition = _a.accentPosition, _b = _a.$accentSize, $accentSize = _b === void 0 ? sizes_1.ACCENT_SIZE_TO_PX.normal : _b, theme = _a.theme, intent = _a.intent, flat = _a.flat, rounded = _a.rounded, radiusSize = _a.radiusSize, stickyHeader = _a.stickyHeader;
     if (!accentPosition) {
@@ -387,9 +398,9 @@ exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
     return interactive
         ? (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.fadeColor)((0, polished_1.darken)(0.025, (0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03)), 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_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;
+            : 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, colors_2.fadeColor)((0, polished_1.darken)(0.025, (0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03)), 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;
@@ -417,23 +428,26 @@ exports.StyledPanelTitle = styled_1.default.div.withConfig({
     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);
+    return getPanelBarFill(theme, opacity);
 }, function (_a) {
     var noHorizontalPadding = _a.noHorizontalPadding, size = _a.size, padded = _a.padded, opacity = _a.opacity, flat = _a.flat, intent = _a.intent;
     return "".concat(opacity === 0 && flat && !intent ? 0 : getPaddingSize(padded, size), "px ").concat(noHorizontalPadding ? 0 : "".concat(getPaddingSize(padded, size), "px"));
 }, function (_a) {
     var theme = _a.theme, isCollapsed = _a.isCollapsed, flat = _a.flat, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return !isCollapsed && !flat && opacity
-        ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
+        ? "1px solid ".concat((0, colors_2.fadeColor)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
         : 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_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);
+        return (0, colors_2.fadeColor)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.05), opacity);
     });
 });
-exports.StyledPanelTopBar = (0, styled_1.default)(exports.StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* `top: 0` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. `stickyHeaderInset` is\n     that padding, measured from the real scroll ancestor at runtime;\n     `stickyHeaderOffset` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"], ["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* \\`top: 0\\` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. \\`stickyHeaderInset\\` is\n     that padding, measured from the real scroll ancestor at runtime;\n     \\`stickyHeaderOffset\\` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"])), function (_a) {
+exports.StyledPanelTopBar = (0, styled_1.default)(exports.StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  /* What the bar holds that sets no color of its own (its icon) is written in the bar's text, read on the bar's\n     fill. The panel's own text is read on its content, which it paints a step darker than the bar: on a mid grey\n     the two are different colors. */\n  color: ", ";\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  /* What the bar holds that sets no color of its own (its icon) is written in the bar's text, read on the bar's\n     fill. The panel's own text is read on its content, which it paints a step darker than the bar: on a mid grey\n     the two are different colors. */\n  color: ", ";\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 $color = _a.$color;
+    return $color;
+}, function (_a) {
     var padded = _a.padded, size = _a.size, isCollapsed = _a.isCollapsed, minimal = _a.minimal;
     return !padded || isCollapsed || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -474,7 +488,7 @@ exports.StyledPanelTopBar = (0, styled_1.default)(exports.StyledPanelTitle)(temp
         : undefined;
 }, 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);
+    return getPanelBarFill(theme, opacity);
 }, function (_a) {
     var stickyHeader = _a.stickyHeader, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return stickyHeader &&
@@ -497,7 +511,7 @@ exports.StyledPanelBottomActions = (0, styled_1.default)(exports.StyledPanelTitl
 }, function (_a) {
     var theme = _a.theme, flat = _a.flat, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return !flat
-        ? "1px solid ".concat((0, polished_1.rgba)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
+        ? "1px solid ".concat((0, colors_2.fadeColor)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
         : null;
 });
 exports.StyledPanelContent = styled_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n  /* Under a sticky header the body scrolls beneath it, and whatever in the body was positioned with a\n     z-index as high as the header's (2) was drawn over it: a table's pinned columns are sticky at 2, and\n     come later in the document. A stacking context of its own puts everything in the body in one layer\n     under the header, whatever z-index it is given. It is not a containing block, so nothing in the body\n     is placed differently; popovers and menus are drawn outside the panel and stay above it. */\n  isolation: ", ";\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  /* Under a sticky header the body scrolls beneath it, and whatever in the body was positioned with a\n     z-index as high as the header's (2) was drawn over it: a table's pinned columns are sticky at 2, and\n     come later in the document. A stacking context of its own puts everything in the body in one layer\n     under the header, whatever z-index it is given. It is not a containing block, so nothing in the body\n     is placed differently; popovers and menus are drawn outside the panel and stay above it. */\n  isolation: ", ";\n"])), function (_a) {
@@ -555,13 +569,15 @@ exports.ReqorePanelSkeleton = (0, react_2.memo)(function (_a) {
     return ((0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { vertical: true, fluid: true, gapSize: 'big', style: style, children: [(0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { spaceBetween: true, fluid: true, children: [(0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { fixed: true, gapSize: 'big', children: [(0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { circle: true, size: size }), (0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { width: '200px', size: size })] }), (0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { fixed: true, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { size: size }), (0, jsx_runtime_1.jsx)(Skeleton_1.ReqoreSkeleton, { size: size })] })] }), !isCollapsed &&
                 (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' }) })))] }));
 });
+/** A description given no effect: one object, so what is made from it holds from render to render. */
+var NO_DESCRIPTION_EFFECT = {};
 exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
-    var _b, _c;
-    var children = _a.children, label = _a.label, description = _a.description, _d = _a.collapseButtonProps, collapseButtonProps = _d === void 0 ? {} : _d, collapsible = _a.collapsible, onClose = _a.onClose, _e = _a.closeButtonProps, closeButtonProps = _e === void 0 ? {} : _e, _f = _a.rounded, rounded = _f === void 0 ? true : _f, _g = _a.actions, actions = _g === void 0 ? [] : _g, _h = _a.bottomActions, bottomActions = _h === void 0 ? [] : _h, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, _j = _a.iconWithLabel, iconWithLabel = _j === void 0 ? false : _j, _k = _a.iconVerticalAlign, iconVerticalAlign = _k === void 0 ? 'center' : _k, intent = _a.intent, className = _a.className, flat = _a.flat, _l = _a.unMountContentOnCollapse, unMountContentOnCollapse = _l === void 0 ? true : _l, onCollapseChange = _a.onCollapseChange, _m = _a.padded, padded = _m === void 0 ? true : _m, _o = _a.wrapperPadding, wrapperPadding = _o === void 0 ? 'both' : _o, contentStyle = _a.contentStyle, contentEffect = _a.contentEffect, _p = _a.labelEffect, labelEffect = _p === void 0 ? {} : _p, _q = _a.descriptionEffect, descriptionEffect = _q === void 0 ? {} : _q, descriptionIntent = _a.descriptionIntent, labelSize = _a.labelSize, contentSize = _a.contentSize, minimal = _a.minimal, badge = _a.badge, iconColor = _a.iconColor, _r = _a.iconProps, iconProps = _r === void 0 ? {} : _r, fluid = _a.fluid, _s = _a.responsiveActions, responsiveActions = _s === void 0 ? true : _s, _t = _a.responsiveTitle, responsiveTitle = _t === void 0 ? true : _t, _u = _a.compactTitle, compactTitle = _u === void 0 ? false : _u, _v = _a.fitLabel, fitLabel = _v === void 0 ? true : _v, _w = _a.labelMaxLines, labelMaxLines = _w === void 0 ? 2 : _w, _x = _a.descriptionPosition, descriptionPosition = _x === void 0 ? 'inline' : _x, _y = _a.descriptionMaxLines, descriptionMaxLines = _y === void 0 ? 2 : _y, labelMinTextSize = _a.labelMinTextSize, _z = _a.size, panelSize = _z === void 0 ? 'normal' : _z, getContentRef = _a.getContentRef, _0 = _a.labelProps, labelProps = _0 === void 0 ? {} : _0, disabled = _a.disabled, breadcrumbs = _a.breadcrumbs, _1 = _a.showActionsWhenCollapsed, showActionsWhenCollapsed = _1 === void 0 ? true : _1, showLabelTooltip = _a.showLabelTooltip, customLabelTooltip = _a.customLabelTooltip, resizable = _a.resizable, onLabelEdit = _a.onLabelEdit, responsiveActionsWrapperProps = _a.responsiveActionsWrapperProps, loading = _a.loading, loadingIconType = _a.loadingIconType, skeleton = _a.skeleton, errorBoundaryOptions = _a.errorBoundaryOptions, floatingActionsProp = _a.floatingActions, _2 = _a.collapseTooltip, collapseTooltip = _2 === void 0 ? 'Collapse' : _2, _3 = _a.expandTooltip, expandTooltip = _3 === void 0 ? 'Expand' : _3, _4 = _a.closeTooltip, closeTooltip = _4 === void 0 ? 'Close' : _4, accentPosition = _a.accentPosition, accentSize = _a.accentSize, media = _a.media, _5 = _a.mediaAlt, mediaAlt = _5 === void 0 ? '' : _5, _6 = _a.mediaPosition, mediaPosition = _6 === void 0 ? 'top' : _6, mediaAspectRatio = _a.mediaAspectRatio, mediaProps = _a.mediaProps, rest = __rest(_a, ["children", "label", "description", "collapseButtonProps", "collapsible", "onClose", "closeButtonProps", "rounded", "actions", "bottomActions", "isCollapsed", "customTheme", "inheritCustomTheme", "icon", "iconImage", "iconWithLabel", "iconVerticalAlign", "intent", "className", "flat", "unMountContentOnCollapse", "onCollapseChange", "padded", "wrapperPadding", "contentStyle", "contentEffect", "labelEffect", "descriptionEffect", "descriptionIntent", "labelSize", "contentSize", "minimal", "badge", "iconColor", "iconProps", "fluid", "responsiveActions", "responsiveTitle", "compactTitle", "fitLabel", "labelMaxLines", "descriptionPosition", "descriptionMaxLines", "labelMinTextSize", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions", "collapseTooltip", "expandTooltip", "closeTooltip", "accentPosition", "accentSize", "media", "mediaAlt", "mediaPosition", "mediaAspectRatio", "mediaProps"]);
+    var _b, _c, _d;
+    var children = _a.children, label = _a.label, description = _a.description, _e = _a.collapseButtonProps, collapseButtonProps = _e === void 0 ? {} : _e, collapsible = _a.collapsible, onClose = _a.onClose, _f = _a.closeButtonProps, closeButtonProps = _f === void 0 ? {} : _f, _g = _a.rounded, rounded = _g === void 0 ? true : _g, _h = _a.actions, actions = _h === void 0 ? [] : _h, _j = _a.bottomActions, bottomActions = _j === void 0 ? [] : _j, isCollapsed = _a.isCollapsed, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, icon = _a.icon, iconImage = _a.iconImage, _k = _a.iconWithLabel, iconWithLabel = _k === void 0 ? false : _k, _l = _a.iconVerticalAlign, iconVerticalAlign = _l === void 0 ? 'center' : _l, intent = _a.intent, className = _a.className, flat = _a.flat, _m = _a.unMountContentOnCollapse, unMountContentOnCollapse = _m === void 0 ? true : _m, onCollapseChange = _a.onCollapseChange, _o = _a.padded, padded = _o === void 0 ? true : _o, _p = _a.wrapperPadding, wrapperPadding = _p === void 0 ? 'both' : _p, contentStyle = _a.contentStyle, contentEffect = _a.contentEffect, _q = _a.labelEffect, labelEffect = _q === void 0 ? {} : _q, _r = _a.descriptionEffect, descriptionEffect = _r === void 0 ? NO_DESCRIPTION_EFFECT : _r, descriptionIntent = _a.descriptionIntent, labelSize = _a.labelSize, contentSize = _a.contentSize, minimal = _a.minimal, badge = _a.badge, iconColor = _a.iconColor, _s = _a.iconProps, iconProps = _s === void 0 ? {} : _s, fluid = _a.fluid, _t = _a.responsiveActions, responsiveActions = _t === void 0 ? true : _t, _u = _a.responsiveTitle, responsiveTitle = _u === void 0 ? true : _u, _v = _a.compactTitle, compactTitle = _v === void 0 ? false : _v, _w = _a.fitLabel, fitLabel = _w === void 0 ? true : _w, _x = _a.labelMaxLines, labelMaxLines = _x === void 0 ? 2 : _x, _y = _a.descriptionPosition, descriptionPosition = _y === void 0 ? 'inline' : _y, _z = _a.descriptionMaxLines, descriptionMaxLines = _z === void 0 ? 2 : _z, labelMinTextSize = _a.labelMinTextSize, _0 = _a.size, panelSize = _0 === void 0 ? 'normal' : _0, getContentRef = _a.getContentRef, _1 = _a.labelProps, labelProps = _1 === void 0 ? {} : _1, disabled = _a.disabled, breadcrumbs = _a.breadcrumbs, _2 = _a.showActionsWhenCollapsed, showActionsWhenCollapsed = _2 === void 0 ? true : _2, showLabelTooltip = _a.showLabelTooltip, customLabelTooltip = _a.customLabelTooltip, resizable = _a.resizable, onLabelEdit = _a.onLabelEdit, responsiveActionsWrapperProps = _a.responsiveActionsWrapperProps, loading = _a.loading, loadingIconType = _a.loadingIconType, skeleton = _a.skeleton, errorBoundaryOptions = _a.errorBoundaryOptions, floatingActionsProp = _a.floatingActions, _3 = _a.collapseTooltip, collapseTooltip = _3 === void 0 ? 'Collapse' : _3, _4 = _a.expandTooltip, expandTooltip = _4 === void 0 ? 'Expand' : _4, _5 = _a.closeTooltip, closeTooltip = _5 === void 0 ? 'Close' : _5, accentPosition = _a.accentPosition, accentSize = _a.accentSize, media = _a.media, _6 = _a.mediaAlt, mediaAlt = _6 === void 0 ? '' : _6, _7 = _a.mediaPosition, mediaPosition = _7 === void 0 ? 'top' : _7, mediaAspectRatio = _a.mediaAspectRatio, mediaProps = _a.mediaProps, rest = __rest(_a, ["children", "label", "description", "collapseButtonProps", "collapsible", "onClose", "closeButtonProps", "rounded", "actions", "bottomActions", "isCollapsed", "customTheme", "inheritCustomTheme", "icon", "iconImage", "iconWithLabel", "iconVerticalAlign", "intent", "className", "flat", "unMountContentOnCollapse", "onCollapseChange", "padded", "wrapperPadding", "contentStyle", "contentEffect", "labelEffect", "descriptionEffect", "descriptionIntent", "labelSize", "contentSize", "minimal", "badge", "iconColor", "iconProps", "fluid", "responsiveActions", "responsiveTitle", "compactTitle", "fitLabel", "labelMaxLines", "descriptionPosition", "descriptionMaxLines", "labelMinTextSize", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions", "collapseTooltip", "expandTooltip", "closeTooltip", "accentPosition", "accentSize", "media", "mediaAlt", "mediaPosition", "mediaAspectRatio", "mediaProps"]);
     // Resolved ONCE, here — the accent styles interpolate px and reserve padding,
     // so they must only ever see a number. Shared with ReqoreCallout.
     var accentSizePx = (0, react_2.useMemo)(function () { return (0, utils_1.resolveAccentSize)(accentSize); }, [accentSize]);
-    var _7 = (0, react_2.useState)(isCollapsed || false), _isCollapsed = _7[0], setIsCollapsed = _7[1];
+    var _8 = (0, react_2.useState)(isCollapsed || false), _isCollapsed = _8[0], setIsCollapsed = _8[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
@@ -584,8 +600,8 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     var isHoverCapable = (0, useReqoreContext_1.useReqoreProperty)('isHoverCapable');
     var floatingActions = !!floatingActionsProp && isHoverCapable !== false;
     var setRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).setRef;
-    var _8 = (0, react_use_1.useMeasure)(), measureRef = _8[0], width = _8[1].width;
-    var _9 = (0, react_2.useState)(false), _isHovered = _9[0], setIsHovered = _9[1];
+    var _9 = (0, react_use_1.useMeasure)(), measureRef = _9[0], width = _9[1].width;
+    var _10 = (0, react_2.useState)(false), _isHovered = _10[0], setIsHovered = _10[1];
     var floatingActionsRef = (0, react_2.useRef)(null);
     var panelRef = (0, react_2.useRef)(null);
     var hoverTimerRef = (0, react_2.useRef)(null);
@@ -603,8 +619,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 _10 = (0, react_2.useState)(false), isHeaderStuck = _10[0], setIsHeaderStuck = _10[1];
-    var _11 = (0, react_2.useState)(0), stickyInset = _11[0], setStickyInset = _11[1];
+    var _11 = (0, react_2.useState)(false), isHeaderStuck = _11[0], setIsHeaderStuck = _11[1];
+    var _12 = (0, react_2.useState)(0), stickyInset = _12[0], setStickyInset = _12[1];
     (0, react_2.useEffect)(function () {
         var _a;
         if (!rest.stickyHeader) {
@@ -1045,6 +1061,36 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     }, [intent, theme, contentEffect, interactive]);
     var opacity = rest.transparent ? 0 : rest.opacity;
     var noHorizontalPadding = opacity === 0 && flat && !intent && !rest.raised;
+    /* What the panel holds is drawn on the panel - its content on the panel's background, its
+       title bar and bottom actions on the bar's - and is told so, to pick its text and icons
+       against that rather than the page. */
+    var aroundSurface = (0, SurfaceContext_1.useReqoreSurface)();
+    // a panel drawn at no opacity is on what is around it: what a component there says, or its customTheme's main
+    var surface = (0, react_2.useMemo)(function () { return (0, surface_1.getUnpaintedSurface)(theme, customTheme, aroundSurface, opacity === 0); }, [theme, customTheme, aroundSurface, opacity]);
+    var contentSurface = (0, react_2.useMemo)(function () {
+        return (0, colors_2.getDrawnColor)(getPanelFill(theme, opacity !== null && opacity !== void 0 ? opacity : 1), (0, colors_2.getThemeSurface)(theme, surface));
+    }, [theme, opacity, surface]);
+    /* each color of the content's gradient, when its effect draws one: for as long as its colors hold, not the
+       effect object - one given inline is new on every render, and so was every surface the panel hands down */
+    var contentGradientKey = JSON.stringify((_b = transformedContentEffect === null || transformedContentEffect === void 0 ? void 0 : transformedContentEffect.gradient) !== null && _b !== void 0 ? _b : null);
+    var contentSurfaces = (0, react_2.useMemo)(function () {
+        return (0, Effect_1.getEffectBackgrounds)(theme, transformedContentEffect, contentSurface, (0, colors_2.getThemeSurface)(theme, surface));
+    }, [theme, contentGradientKey, contentSurface, surface]);
+    var barSurface = (0, react_2.useMemo)(function () {
+        return contentSurfaces.map(function (under) {
+            return (0, colors_2.getDrawnColor)(getPanelBarFill(theme, minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1)), under);
+        });
+    }, [theme, minimal, opacity, contentSurfaces]);
+    // The bar's description and icon fade only as far as they stay readable there.
+    var barText = (0, react_2.useMemo)(function () { return (0, colors_2.getReadableTextOn)(theme, barSurface); }, [theme, barSurface]);
+    /* The panel's own text (what it holds that sets no color of its own) is read on what its content is drawn on, as
+       what it holds is - not on the theme's main, which it does not paint: it paints it a step darker, and at less
+       than full opacity barely at all. On a mid grey the step alone decides which text reads. */
+    var panelText = (0, react_2.useMemo)(function () { return (0, colors_2.getReadableTextOn)(theme, contentSurfaces); }, [theme, contentSurfaces]);
+    // the title icon's own color: in its props (which win, as they are spread over the rest), else the panel's
+    var _13 = (0, iconProps_1.splitIconColor)(iconProps), titleIconPropsColor = _13[0], titleIconRest = _13[1];
+    var titleIconOwn = titleIconPropsColor || iconColor;
+    var titleIconLook = (0, react_2.useMemo)(function () { return (0, colors_2.getReadableIconLook)(theme, barSurface, barText, colors_1.CONTROL_ICON_OPACITY, titleIconOwn); }, [theme, barSurface, barText, titleIconOwn]);
     // The media frame's outer corners follow the panel's INNER curve: its radius, less the 1px
     // border when it draws one — the same inset the sticky header and the accent strip take.
     var mediaRadius = rounded
@@ -1076,7 +1122,7 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
      * 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];
+    var labelNaturalPx = (_c = sizes_1.HEADER_LEVEL_TO_PX[labelSize || sizes_1.HEADER_SIZE_TO_NUMBER[panelSize]]) !== null && _c !== void 0 ? _c : 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
@@ -1106,8 +1152,8 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
      * 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 _12 = (0, react_2.useState)(false), isDescriptionExpanded = _12[0], setIsDescriptionExpanded = _12[1];
-    var _13 = (0, react_2.useState)(false), isDescriptionTruncated = _13[0], setIsDescriptionTruncated = _13[1];
+    var _14 = (0, react_2.useState)(false), isDescriptionExpanded = _14[0], setIsDescriptionExpanded = _14[1];
+    var _15 = (0, react_2.useState)(false), isDescriptionTruncated = _15[0], setIsDescriptionTruncated = _15[1];
     var descriptionRef = (0, react_2.useRef)(null);
     var descriptionIsClamped = descriptionClamp > 0 && !isDescriptionExpanded;
     (0, react_2.useLayoutEffect)(function () {
@@ -1124,9 +1170,23 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         event.stopPropagation();
         setIsDescriptionExpanded(function (expanded) { return !expanded; });
     }, [descriptionIsInteractive]);
+    /* Dimmer than the title, as far as it stays readable on the bar: the color it is drawn in - its effect's
+       (where the theme can resolve it), its intent's, else the bar's text - at 0.7, or as much more as it needs.
+       An opacity the caller gives is the caller's, as given. Worked out only for a description there is. */
+    var descriptionLook = (0, react_2.useMemo)(function () {
+        if (!description || descriptionEffect.opacity !== undefined) {
+            return descriptionEffect;
+        }
+        var drawn = descriptionEffect.color
+            ? (0, surface_1.getDrawnEffectTextColor)(theme, descriptionEffect.color, barSurface)
+            : descriptionIntent
+                ? (0, colors_2.getReadableIntentColor)(theme, descriptionIntent, undefined, barSurface)
+                : undefined;
+        return __assign(__assign({}, descriptionEffect), { opacity: (0, colors_2.getReadableAlpha)(drawn !== null && drawn !== void 0 ? drawn : barText, barSurface, 0.7) });
+    }, [description, descriptionEffect, descriptionIntent, theme, barSurface, barText]);
     /** 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
+    var descriptionProps = __assign({ ref: descriptionRef, className: 'reqore-panel-title-description', size: panelSize, effect: descriptionLook, intent: descriptionIntent, onClick: handleDescriptionClick }, (descriptionIsInteractive
         ? {
             role: 'button',
             tabIndex: 0,
@@ -1140,19 +1200,19 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
             style: { cursor: 'pointer' },
         }
         : {}));
-    var _14 = (0, react_2.useState)(undefined), labelAvailable = _14[0], setLabelAvailable = _14[1];
-    var _15 = (0, useFitTextSize_1.useFitTextSize)({
+    var _16 = (0, react_2.useState)(undefined), labelAvailable = _16[0], setLabelAvailable = _16[1];
+    var _17 = (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 = _15[0], labelFitPx = _15[1];
+    }), labelFitRef = _17[0], labelFitPx = _17[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)))
+        ? Math.max(useFitTextSize_1.FIT_TEXT_FLOOR_PX, Math.round(((_d = sizes_1.TEXT_FROM_SIZE[panelSize]) !== null && _d !== void 0 ? _d : sizes_1.TEXT_FROM_SIZE.normal) * (labelFitPx / labelNaturalPx)))
         : 0;
     /**
      * How much room the title has, computed rather than measured off its own box.
@@ -1235,138 +1295,139 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(exports.ReqorePanelSkeleton, { size: panelSize, isCollapsed: _isCollapsed });
     }
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ReqoreErrorBoundary, __assign({}, errorBoundaryOptions, { children: (0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, (0, lodash_1.omit)(rest, ['onResize']), _resizable, { as: rest.as || (isResizableElement ? re_resizable_1.Resizable : 'div'), isCollapsed: _isCollapsed, rounded: rounded, flat: flat, intent: intent, accentPosition: accentPosition, "$accentSize": accentSizePx, className: "".concat(className || '', " reqore-panel").concat(_isHovered && (0, lodash_1.size)(floatingActionsList) > 0 ? ' reqore-panel-floating-active' : ''), interactive: interactive, theme: theme, effect: transformedContentEffect, opacity: opacity, fluid: fluid, disabled: disabled, Component: exports.StyledPanel, ref: function (node) {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ReqoreErrorBoundary, __assign({}, errorBoundaryOptions, { children: (0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, (0, lodash_1.omit)(rest, ['onResize']), _resizable, { as: rest.as || (isResizableElement ? re_resizable_1.Resizable : 'div'), isCollapsed: _isCollapsed, rounded: rounded, flat: flat, intent: intent, accentPosition: accentPosition, "$accentSize": accentSizePx, className: "".concat(className || '', " reqore-panel").concat(_isHovered && (0, lodash_1.size)(floatingActionsList) > 0 ? ' reqore-panel-floating-active' : ''), interactive: interactive, theme: theme, effect: transformedContentEffect, opacity: opacity, fluid: fluid, disabled: disabled, "aria-disabled": disabled ? true : rest['aria-disabled'], "$color": panelText, Component: exports.StyledPanel, ref: function (node) {
                 handleRef(node);
                 panelRef.current = node;
             }, onPointerEnter: handlePointerEnter, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!_isCollapsed && mediaPosition === 'top' ? mediaNode : null, rest.stickyHeader ? ((0, jsx_runtime_1.jsx)("div", { ref: stickySentinelRef, "aria-hidden": 'true', style: { height: 0 } })) : null, _isHovered &&
                     (0, lodash_1.size)(floatingActionsList) > 0 &&
-                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledFloatingActions, { className: 'reqore-panel-floating-actions', theme: theme, size: panelSize, intent: intent, flat: flat, ref: floatingActionsRef, onMouseLeave: handleFloatingActionsMouseLeave, children: (0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, gapSize: panelSize, children: floatingActionsList.map(function (action, index) { return renderActions(action, index, true); }) }) }), document.body), hasTitleBar && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTopBar, { flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1), noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, "$descriptionBelow": descriptionBelow, "$descriptionMaxLines": descriptionIsClamped ? descriptionClamp : 0, "$descriptionFontPx": descriptionFontPx, "data-narrow": isNarrow ? 'true' : 'false', ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, rounded: rounded, radiusSize: rest.radiusSize, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset, stickyHeaderInset: stickyInset, isStuck: isHeaderStuck, "$mediaAbove": hasMedia && mediaPosition === 'top' && !_isCollapsed, children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { className: 'reqore-panel-title-header', children: [breadcrumbs ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((function () {
-                                    var hasPanelIcon = !!icon || !!iconImage || loading;
-                                    // 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
-                                    //   description sits flush-left under the icon+label.
-                                    // - When there is NO description, fall back to the
-                                    //   inline layout regardless of iconVerticalAlign — the
-                                    //   outer grid only earns its keep when there is a
-                                    //   description row to anchor against, and the inline
-                                    //   layout aligns icon-to-text glyphs more naturally
-                                    //   via the heading's own line-height.
-                                    // - Otherwise → outer two-column grid where the icon
-                                    //   sits in a reserved column. iconVerticalAlign places
-                                    //   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 || hideTitleText);
-                                    var useOuterGrid = hasPanelIcon && !inlineWithLabel;
-                                    // Outer grid → grid column-gap handles icon→label
-                                    // spacing, so the icon itself takes no margin.
-                                    // Inline → keep 'margin=right' so ReqoreIcon adds its
-                                    // standard side-spacer between icon and label.
-                                    var iconMargin = useOuterGrid ? undefined : 'right';
-                                    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, 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`
-                                    // from 4 to 2 to grow the heading would inversely
-                                    // shrink the description to `tiny`. That's the wrong
-                                    // pairing: a bigger label should not make supporting
-                                    // text smaller. Consumers that want to size the
-                                    // description explicitly pass `descriptionEffect.textSize`.
-                                    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.
-                                , { 
+                    (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.jsx)(SurfaceContext_1.ReqoreSurfaceProvider, { color: barSurface, children: (0, jsx_runtime_1.jsxs)(exports.StyledPanelTopBar, { "$color": barText, flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1), noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, "$descriptionBelow": descriptionBelow, "$descriptionMaxLines": descriptionIsClamped ? descriptionClamp : 0, "$descriptionFontPx": descriptionFontPx, "data-narrow": isNarrow ? 'true' : 'false', ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, rounded: rounded, radiusSize: rest.radiusSize, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset, stickyHeaderInset: stickyInset, isStuck: isHeaderStuck, "$mediaAbove": hasMedia && mediaPosition === 'top' && !_isCollapsed, children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { className: 'reqore-panel-title-header', children: [breadcrumbs ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((function () {
+                                        var _a;
+                                        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
+                                        //   description sits flush-left under the icon+label.
+                                        // - When there is NO description, fall back to the
+                                        //   inline layout regardless of iconVerticalAlign — the
+                                        //   outer grid only earns its keep when there is a
+                                        //   description row to anchor against, and the inline
+                                        //   layout aligns icon-to-text glyphs more naturally
+                                        //   via the heading's own line-height.
+                                        // - Otherwise → outer two-column grid where the icon
+                                        //   sits in a reserved column. iconVerticalAlign places
+                                        //   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 || hideTitleText);
+                                        var useOuterGrid = hasPanelIcon && !inlineWithLabel;
+                                        // Outer grid → grid column-gap handles icon→label
+                                        // spacing, so the icon itself takes no margin.
+                                        // Inline → keep 'margin=right' so ReqoreIcon adds its
+                                        // standard side-spacer between icon and label.
+                                        var iconMargin = useOuterGrid ? undefined : 'right';
+                                        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: (_a = titleIconLook.color) !== null && _a !== void 0 ? _a : titleIconOwn, tooltip: iconTooltip, effect: {
+                                                opacity: titleIconLook.opacity,
+                                            } }, titleIconRest, { 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, 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`
+                                        // from 4 to 2 to grow the heading would inversely
+                                        // shrink the description to `tiny`. That's the wrong
+                                        // pairing: a bigger label should not make supporting
+                                        // text smaller. Consumers that want to size the
+                                        // description explicitly pass `descriptionEffect.textSize`.
+                                        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.
-                                    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, className: NON_RESPONSIVE_ACTIONS_CLASS, 
-                            // Beside a title in a NARROW bar the title comes first (qorus#646). The group is
-                            // `0 0 auto`, so a narrow bar - a table in a card on a phone - squeezed the title
-                            // to nothing and still pushed its last button past the panel's edge. Narrow, the
-                            // title takes its whole width first and the group what is left, at least what its
-                            // controls cannot do without (a search field narrows, a button never does) and at
-                            // most its own width. A basis of 0 is what gives the title the first claim: the
-                            // group is sized from the leftover, so the title shrinks only once the controls
-                            // are at their smallest - and its words break only when one is wider than the
-                            // space left beside them. Shrinking the two against each other instead, by any
-                            // factor, took a fraction of a pixel off the title, and that broke "Services" into
-                            // "Servic / es". Room the title does not need goes to the group first (a grow no
-                            // title's comes near), so a search field widens before the title's box does. A
-                            // wide bar keeps the group at its own width: there the title's claim was its
-                            // one-line width, a description beside it included, and a long description
-                            // squeezed a table's search to its least instead of wrapping.
-                            style: hasTitleHeader && isNarrow ? NARROW_ACTIONS_BESIDE_TITLE : undefined, children: nonFloatingActions.map(renderNonResponsiveActions()) }), descriptionBelow ? (
-                        // `flex-basis: 100%` is what puts it on its own line — the bar is a wrapping
-                        // flex row, so a full-width item cannot share one with anything before it.
-                        // `min-width: 0` so a long sentence wraps inside the bar instead of widening it.
-                        (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, stickyHeader: rest.stickyHeader, 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, !_isCollapsed && mediaPosition === 'bottom' ? mediaNode : null] })) })));
+                                    , { 
+                                        // 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, className: NON_RESPONSIVE_ACTIONS_CLASS, 
+                                // Beside a title in a NARROW bar the title comes first (qorus#646). The group is
+                                // `0 0 auto`, so a narrow bar - a table in a card on a phone - squeezed the title
+                                // to nothing and still pushed its last button past the panel's edge. Narrow, the
+                                // title takes its whole width first and the group what is left, at least what its
+                                // controls cannot do without (a search field narrows, a button never does) and at
+                                // most its own width. A basis of 0 is what gives the title the first claim: the
+                                // group is sized from the leftover, so the title shrinks only once the controls
+                                // are at their smallest - and its words break only when one is wider than the
+                                // space left beside them. Shrinking the two against each other instead, by any
+                                // factor, took a fraction of a pixel off the title, and that broke "Services" into
+                                // "Servic / es". Room the title does not need goes to the group first (a grow no
+                                // title's comes near), so a search field widens before the title's box does. A
+                                // wide bar keeps the group at its own width: there the title's claim was its
+                                // one-line width, a description beside it included, and a long description
+                                // squeezed a table's search to its least instead of wrapping.
+                                style: hasTitleHeader && isNarrow ? NARROW_ACTIONS_BESIDE_TITLE : undefined, children: nonFloatingActions.map(renderNonResponsiveActions()) }), descriptionBelow ? (
+                            // `flex-basis: 100%` is what puts it on its own line — the bar is a wrapping
+                            // flex row, so a full-width item cannot share one with anything before it.
+                            // `min-width: 0` so a long sentence wraps inside the bar instead of widening it.
+                            (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, stickyHeader: rest.stickyHeader, children: (0, jsx_runtime_1.jsx)(SurfaceContext_1.ReqoreSurfaceProvider, { color: contentSurfaces, children: children }) })) : null, hasBottomActions && !_isCollapsed ? ((0, jsx_runtime_1.jsx)(SurfaceContext_1.ReqoreSurfaceProvider, { color: barSurface, children: (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, !_isCollapsed && mediaPosition === 'bottom' ? mediaNode : 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, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34;
 //# sourceMappingURL=index.js.map