@qoretechnologies/reqore 0.78.6-pr.715.gdfefa70 → 0.78.7-pr.717.gae33bdc

package/dist/components/Panel/index.js

@@ -58,11 +58,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReqorePanel = exports.ReqorePanelSkeleton = exports.StyledFloatingActions = exports.StyledPanelMedia = exports.StyledPanelContent = exports.StyledPanelBottomActions = exports.StyledPanelTopBar = exports.StyledPanelTitle = exports.StyledPanel = exports.StyledPanelTitleHeaderLabelAndBadge = exports.StyledPanelTitleHeaderLabelAndDescription = exports.StyledPanelTitleHeaderContent = exports.StyledPanelTitleHeader = void 0;
+exports.ReqorePanel = exports.ReqorePanelSkeleton = exports.StyledFloatingActions = exports.StyledPanelMedia = exports.StyledPanelContent = exports.StyledPanelBottomActions = exports.StyledPanelTopBar = exports.StyledPanelTitle = exports.StyledPanel = exports.REQORE_PANEL_STYLE_PROPS = exports.StyledPanelTitleHeaderLabelAndBadge = exports.StyledPanelTitleHeaderLabelAndDescription = exports.StyledPanelTitleHeaderContent = exports.StyledPanelTitleHeader = void 0;
 var react_1 = require("react");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
@@ -73,12 +82,15 @@ var react_2 = require("react");
 var react_dom_1 = require("react-dom");
 var react_use_1 = require("react-use");
 var responsive_1 = require("./responsive");
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = require("styled-components");
 var colors_1 = require("../../constants/colors");
 var sizes_1 = require("../../constants/sizes");
 var colors_2 = require("../../helpers/colors");
-var styled_1 = require("../../helpers/styled");
+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");
@@ -97,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];
 };
@@ -145,12 +158,44 @@ var getScrollportInset = function (el) {
  * opening a line box around the inline-flex heading — a block wrapper adds the row's leading on
  * top of the heading's own box, which made a `tiny` panel 3px taller than it used to be.
  */
-var StyledPanelTitleLabelBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"], ["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"])), function (_a) {
+var StyledPanelTitleLabelBox = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"], ["\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n  flex: 0 1 auto;\n\n  ", "\n"])), function (_a) {
     var $clampLines = _a.$clampLines;
     return $clampLines > 1 && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and `-webkit-line-clamp` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "], ["\n      .reqore-heading {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: ", ";\n        overflow: hidden;\n        white-space: normal;\n        /* A single word longer than the box would push past it rather than break, and the\n           clamp would have nothing to ellipsize. */\n        overflow-wrap: anywhere;\n        max-width: 100%;\n\n        /* The heading wraps its text in a span of its own, and \\`-webkit-line-clamp\\` counts the\n           box's CHILDREN rather than the lines inside them \u2014 so one block-level child reads as\n           a single line and nothing is ever clamped, however far the text overruns. Putting the\n           text back into the heading's own line boxes is what the clamp actually measures. */\n        .reqore-span {\n          display: inline;\n        }\n      }\n    "])), $clampLines);
 });
-exports.StyledPanelTitleHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"], ["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"])));
-exports.StyledPanelTitleHeaderContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"], ["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  ", "\n  flex: 0 1 auto;\n  overflow: hidden;\n  min-width: ", "px;\n"])), function (_a) {
+/**
+ * How much more than the title a group of actions that do not collapse takes of the room left over: so much
+ * that the title's box widens only once the group is at its own width (a flex item takes its grow factor's
+ * share of the free space, and the title's is 1).
+ */
+var ACTIONS_GROW_BEFORE_TITLE = 1000;
+/**
+ * The flex of the group of actions that do not collapse, beside a title in a NARROW bar
+ * (qorus#646): sized from what the title leaves, between what its controls cannot do without and
+ * its own width. See where it is used. A wide bar leaves the group at its own width (`0 0 auto`),
+ * as it always was.
+ */
+var NARROW_ACTIONS_BESIDE_TITLE = {
+    flex: "".concat(ACTIONS_GROW_BEFORE_TITLE, " 1 0%"),
+    maxWidth: 'max-content',
+};
+/** The class of the bar's group of actions that do not collapse, which the title's fit measures. */
+var NON_RESPONSIVE_ACTIONS_CLASS = 'reqore-panel-non-responsive-actions';
+/**
+ * How much wider `element` is than the least it can be: its width less its min-content width, read
+ * with its flex and width set aside for the measurement and put back before anything is drawn.
+ */
+var getWidthAboveMinimum = function (element) {
+    var width = element.getBoundingClientRect().width;
+    var _a = element.style, flex = _a.flex, styleWidth = _a.width;
+    element.style.flex = '0 0 auto';
+    element.style.width = 'min-content';
+    var minimum = element.getBoundingClientRect().width;
+    element.style.flex = flex;
+    element.style.width = styleWidth;
+    return Math.max(0, width - minimum);
+};
+exports.StyledPanelTitleHeader = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"], ["\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* A CONTENT basis, and both extremes were tried before settling here. Basis 0 hands the action\n     group beside this one its full content width, so nothing ever overflows and the fold into the\n     menu never fires \u2014 actions labelled \"hidden when small\" stay visible on a small panel. A 100%\n     width does the opposite: this header claims the entire row, so the group is always crushed to\n     its floor and always folds however much room there is, which hid Tree's save button behind an\n     overflow menu on a panel with space to spare. On a content basis the two shrink against each\n     other in proportion to what they each need, which is the only version where folding means\n     \"there is no room\" rather than \"there is a header\". */\n  flex: 1 1 auto;\n  overflow: hidden;\n"])));
+exports.StyledPanelTitleHeaderContent = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  // When the icon lives in the outer container (iconVerticalAlign mode),\n  // we use a 2-column \u00D7 N-row CSS Grid where the LABEL ROW and DESCRIPTION\n  // ROW are direct grid items \u2014 not wrapped inside a span-2 stack. That\n  // makes each row's auto-sized height equal to the actual text row's\n  // line-box height, so 'align-self: center' on the icon (in column 1)\n  // visually centres the icon against the text row it shares a grid row\n  // with \u2014 no font-metric guesswork.\n  display: ", ";\n  /* 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) {
@@ -167,8 +212,8 @@ exports.StyledPanelTitleHeaderContent = styled_components_1.default.div(template
     }
     return width;
 });
-exports.StyledPanelTitleHeaderLabelAndDescription = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"])));
-exports.StyledPanelTitleHeaderLabelAndBadge = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"])));
+exports.StyledPanelTitleHeaderLabelAndDescription = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1 auto;\n"])));
+exports.StyledPanelTitleHeaderLabelAndBadge = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n"])));
 /**
  * Does the panel wrapper draw its 1px border?
  *
@@ -191,55 +236,125 @@ var getPanelBorderBaseColor = function (theme, _a) {
     var intent = _a.intent, accentPosition = _a.accentPosition;
     return (intent && !accentPosition ? theme.intents[intent] : (0, colors_2.getMainBackgroundColor)(theme));
 };
-/** The title bar: a band a step lighter than the page — or, with `theme.panel` named, the
- *  panel's own surface, set apart from the body by the hairline under it alone. */
-var getPanelHeaderColor = function (theme, hovered) {
-    var themed = (0, colors_2.getThemePanelSurface)(theme);
-    if (themed === null || themed === void 0 ? void 0 : themed.main) {
-        return hovered ? (0, colors_2.changeLightness)(themed.main, 0.02) : themed.main;
-    }
-    return (0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), hovered ? 0.05 : 0.03);
-};
-/** The resting border: the intent's colour when the intent tints the edge, else the hairline
- *  (`theme.panel.border` when the theme names one). */
-var getPanelBorderColor = function (theme, _a) {
-    var intent = _a.intent, accentPosition = _a.accentPosition;
-    return intent && !accentPosition
-        ? (0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.08)
-        : (0, colors_2.getPanelHairlineColor)(theme);
+/**
+ * Every panel prop that only styles or configures the panel. None of them reaches the rendered
+ * element — the `div`, re-resizable's `Resizable` (which spreads every prop it does not know onto
+ * its wrapper div), or a component given as `as`. The compiler checks the record against
+ * `IStyledPanel`, so a new prop that is not added here fails the build instead of leaking.
+ *
+ * re-resizable's own props (`size`, `enable`, `minWidth`, handles, ...) are not in it: they are
+ * the `Resizable`'s to receive. `opacity` is the surface's background opacity, an SVG attribute
+ * a `div` would keep.
+ */
+exports.REQORE_PANEL_STYLE_PROPS = (0, styled_1.listReqoreStyleProps)({
+    accentPosition: true,
+    actions: true,
+    badge: true,
+    blur: true,
+    bottomActions: true,
+    breadcrumbs: true,
+    closeButtonProps: true,
+    closePopover: true,
+    closeTooltip: true,
+    collapseButtonProps: true,
+    collapseTooltip: true,
+    collapsible: true,
+    compactTitle: true,
+    contentEffect: true,
+    contentSize: true,
+    contentStyle: true,
+    customLabelTooltip: true,
+    customTheme: true,
+    description: true,
+    descriptionEffect: true,
+    descriptionIntent: true,
+    descriptionMaxLines: true,
+    descriptionPosition: true,
+    disabled: true,
+    errorBoundaryOptions: true,
+    expandTooltip: true,
+    fill: true,
+    fitLabel: true,
+    flat: true,
+    floatingActions: true,
+    fluid: true,
+    getContentRef: true,
+    icon: true,
+    iconColor: true,
+    iconImage: true,
+    iconProps: true,
+    iconVerticalAlign: true,
+    iconWithLabel: true,
+    inheritCustomTheme: true,
+    intent: true,
+    isCollapsed: true,
+    isStuck: true,
+    label: true,
+    labelEffect: true,
+    labelMaxLines: true,
+    labelMinTextSize: true,
+    labelProps: true,
+    labelSize: true,
+    loading: true,
+    loadingIconType: true,
+    media: true,
+    mediaAlt: true,
+    mediaAspectRatio: true,
+    mediaPosition: true,
+    mediaProps: true,
+    minimal: true,
+    noHorizontalPadding: true,
+    onClose: true,
+    onCollapseChange: true,
+    onLabelEdit: true,
+    opacity: true,
+    padded: true,
+    radiusSize: true,
+    raised: true,
+    resizable: true,
+    responsiveActions: true,
+    responsiveActionsWrapperProps: true,
+    responsiveTitle: true,
+    rounded: true,
+    showActionsWhenCollapsed: true,
+    showLabelTooltip: true,
+    skeleton: true,
+    stickyHeader: true,
+    stickyHeaderInset: true,
+    stickyHeaderOffset: true,
+    theme: true,
+    tooltip: true,
+    transparent: true,
+    unMountContentOnCollapse: true,
+    wrapperPadding: true,
+});
+/** 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);
 };
-/** The border while the panel is hovered — a step brighter than at rest. */
-var getPanelHoverBorderColor = function (theme, _a) {
-    var intent = _a.intent, accentPosition = _a.accentPosition;
-    var themed = !(intent && !accentPosition) ? (0, colors_2.getThemePanelSurface)(theme) : undefined;
-    return (themed === null || themed === void 0 ? void 0 : themed.border)
-        ? (0, colors_2.changeLightness)(themed.border, 0.12)
-        : (0, colors_2.changeLightness)(getPanelBorderBaseColor(theme, { intent: intent, accentPosition: accentPosition }), 0.25);
+/** 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_components_1.default)(Effect_1.StyledEffect).withConfig({
-    // `fill` controls panel layout and must not become a boolean DOM attribute. Neither must
-    // `accentPosition`: when the panel renders as a `Resizable` (a COMPONENT target) the rule
-    // below forwards everything, and re-resizable spreads the leftovers onto its wrapper div.
-    // Filtering here still leaves the styled-component's own interpolations reading the prop.
-    // Everything else follows styled-components' own rule, so re-resizable still receives its
-    // `enable` / size / handle config — those are component props, not HTML attributes.
-    // `opacity` is the surface's background opacity, an SVG attribute a `div` would keep; the
-    // remaining flags only style the surface, and re-resizable would write them onto its div.
-    shouldForwardProp: (0, styled_1.omitStyleProps)('accentPosition', 'fill', 'flat', 'fluid', 'interactive', 'isCollapsed', 'opacity', 'rounded'),
+exports.StyledPanel = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
+    // Its own props, `interactive` (set by the panel for its hover styles) and the layout flags a
+    // containing ControlGroup hands it — except `size`, which a panel never forwards but a
+    // `Resizable` reads as its own.
+    shouldForwardProp: styled_1.omitStyleProps.apply(void 0, __spreadArray(__spreadArray(__spreadArray([], exports.REQORE_PANEL_STYLE_PROPS, false), styled_1.REQORE_CONTROL_GROUP_CHILD_PROPS.filter(function (prop) { return prop !== 'size'; }), false), ['interactive'], false)),
 })(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a `show: 'hover'` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", "px;\n  border: ", ";\n  color: ", ";\n  ", "\n  overflow: ", ";\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  backdrop-filter: ", ";\n  width: ", ";\n  max-width: 100%;\n  flex: ", ";\n\n  /* Hover-hiding applies ONLY where the pointer can hover. A touch device never\n     fires :hover, so without this gate a \\`show: 'hover'\\` action is display:none\n     forever \u2014 not merely invisible but absent from the layout, with nothing on\n     screen hinting it exists. Where hover is unavailable the action stays\n     visible; losing the tidiness beats losing the action. */\n  @media (hover: hover) and (pointer: fine) {\n    &:not(:hover) {\n      .reqore-panel-action-hidden {\n        display: none;\n      }\n    }\n  }\n\n  &.reqore-panel-floating-active {\n    border-top-right-radius: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-    return (0, polished_1.rgba)((0, colors_2.getPanelBackgroundColor)(theme), opacity);
+    return getPanelFill(theme, opacity);
 }, function (_a) {
     var rounded = _a.rounded, radiusSize = _a.radiusSize;
     return rounded ? (0, sizes_1.resolveRadius)('normal', radiusSize) : 0;
 }, function (_a) {
     var theme = _a.theme, flat = _a.flat, intent = _a.intent, accentPosition = _a.accentPosition;
     return hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition })
-        ? "1px solid ".concat(getPanelBorderColor(theme, { intent: intent, accentPosition: accentPosition }))
+        ? "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) {
@@ -283,9 +398,9 @@ exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).wi
     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.getPanelBackgroundColor)(theme), opacity)), opacity), hasPanelBorder({ flat: flat, intent: intent, accentPosition: accentPosition })
-            ? getPanelHoverBorderColor(theme, { intent: intent, accentPosition: accentPosition })
-            : 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.getPanelBackgroundColor)(theme), opacity)), opacity))) : undefined;
+            : (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, 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;
@@ -297,7 +412,7 @@ exports.StyledPanel = (0, styled_components_1.default)(Effect_1.StyledEffect).wi
     var disabled = _a.disabled;
     return disabled && styles_1.DisabledElement;
 });
-exports.StyledPanelTitle = styled_components_1.default.div.withConfig({
+exports.StyledPanelTitle = styled_1.default.div.withConfig({
     shouldForwardProp: (0, styled_1.omitStyleProps)('opacity'),
 })(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"], ["\n  display: flex;\n  /* Always a row. The title bar used to flip to a column when narrow; it now ellipsizes its\n     label and lets the responsive action group collapse instead, which is what the \"hidden when\n     small\" actions are for and what the stack was quietly defeating (a column made the group\n     fluid, and a full-width group had room not to collapse). */\n  flex-flow: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n  justify-content: space-between;\n\n  padding: ", ";\n\n  align-items: center;\n  border-bottom: ", ";\n  transition: background-color 0.2s ease-out;\n  overflow: hidden;\n  flex: 0 0 auto;\n  gap: ", "px;\n\n  ", " .reqore-panel-title-icon {\n    transform: scale(", ");\n  }\n\n  ", "\n"])), function (_a) {
     var $descriptionBelow = _a.$descriptionBelow;
@@ -313,23 +428,26 @@ exports.StyledPanelTitle = styled_components_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)(getPanelHeaderColor(theme), 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.getPanelHairlineColor)(theme), 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)(getPanelHeaderColor(theme, true), opacity);
+        return (0, colors_2.fadeColor)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.05), opacity);
     });
 });
-exports.StyledPanelTopBar = (0, styled_components_1.default)(exports.StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* `top: 0` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. `stickyHeaderInset` is\n     that padding, measured from the real scroll ancestor at runtime;\n     `stickyHeaderOffset` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"], ["\n  padding-bottom: ", ";\n  padding-top: ", ";\n  position: ", ";\n  /* \\`top: 0\\` must mean \"flush with the visible top edge of whatever scrolls\",\n     which is what every call site assumes. Sticky resolves against the scroll\n     container's CONTENT box, so on a padded scrollport \u2014 which every default\n     panel/drawer/modal body is, since StyledPanelContent puts padding and\n     overflow on one element \u2014 an uncompensated 0 parks the header below the\n     padding and lets content scroll through the gap. \\`stickyHeaderInset\\` is\n     that padding, measured from the real scroll ancestor at runtime;\n     \\`stickyHeaderOffset\\` stays a deliberate caller offset on top of a now\n     correct zero. */\n  top: ", ";\n  z-index: ", ";\n  // A sticky header forces the panel wrapper to overflow visible (so the\n  // header can stick), which stops the wrapper from clipping the header's top\n  // corners \u2014 so without this the panel reads as square-topped even at rest.\n  // AT REST, round the header's own top corners to the panel's inner radius so\n  // the panel keeps its radius (inset 1px past a visible border to match the\n  // wrapper's inner curve; flat border-less panels need no inset). ONCE STUCK\n  // (pinned to the scroll container, detected at runtime via isStuck), drop the\n  // radius to 0 so the pinned header reads as a full-width bar and only loses\n  // its corners while it is actually moving with the scroll.\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  background: ", ";\n  // When the header is sticky AND the panel is minimal / transparent (opacity === 0), the\n  // header has no surface of its own \u2014 scrolling content slides straight under it and the\n  // label / actions become illegible. Apply a backdrop blur so the underlying content stays\n  // visible but is softened enough for the header text to read clearly. Idle (no overflow,\n  // nothing behind) the blur is a no-op so the static appearance is unchanged.\n  ", "\n"])), function (_a) {
+exports.StyledPanelTopBar = (0, styled_1.default)(exports.StyledPanelTitle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  /* 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")
@@ -370,13 +488,13 @@ exports.StyledPanelTopBar = (0, styled_components_1.default)(exports.StyledPanel
         : undefined;
 }, function (_a) {
     var theme = _a.theme, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
-    return (0, polished_1.rgba)(getPanelHeaderColor(theme), opacity);
+    return getPanelBarFill(theme, opacity);
 }, function (_a) {
     var stickyHeader = _a.stickyHeader, _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
     return stickyHeader &&
         opacity === 0 && (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "], ["\n      backdrop-filter: blur(30px);\n      -webkit-backdrop-filter: blur(30px);\n    "])));
 });
-exports.StyledPanelBottomActions = (0, styled_components_1.default)(exports.StyledPanelTitle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"], ["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"])), function (_a) {
+exports.StyledPanelBottomActions = (0, styled_1.default)(exports.StyledPanelTitle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"], ["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: 0;\n  border-top: ", ";\n"])), function (_a) {
     var padded = _a.padded, size = _a.size, minimal = _a.minimal;
     return !padded || !minimal
         ? "".concat(getPaddingSize(padded, size), "px")
@@ -393,10 +511,10 @@ exports.StyledPanelBottomActions = (0, styled_components_1.default)(exports.Styl
 }, 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.getPanelHairlineColor)(theme), opacity))
+        ? "1px solid ".concat((0, colors_2.fadeColor)((0, colors_2.changeLightness)((0, colors_2.getMainBackgroundColor)(theme), 0.08), opacity))
         : null;
 });
-exports.StyledPanelContent = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"], ["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"])), function (_a) {
+exports.StyledPanelContent = styled_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"], ["\n  display: ", ";\n  padding: ", ";\n  flex: 1;\n  /* A flex child's min-height defaults to its content size, so without this the\n     scrollable content can't shrink: a panel/drawer body taller than the panel\n     pushes the (flex: 0 0 auto) bottom-actions footer past the panel's clipped\n     edge and strands it, instead of scrolling. */\n  min-height: 0;\n  overflow: auto;\n  overflow-wrap: anywhere;\n  font-size: ", "px;\n"])), function (_a) {
     var isCollapsed = _a.isCollapsed;
     return (isCollapsed ? 'none !important' : undefined);
 }, function (_a) {
@@ -413,7 +531,7 @@ exports.StyledPanelContent = styled_components_1.default.div(templateObject_29 |
 /** The media frame. Its outer corners take the panel's inner curve, so the media is clipped to
  *  the panel's shape even where the panel cannot clip it (a sticky header makes the panel
  *  overflow visible). */
-exports.StyledPanelMedia = styled_components_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"])), function (_a) {
+exports.StyledPanelMedia = styled_1.default.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n  position: relative;\n  overflow: hidden;\n  ", "\n\n  > img,\n  > video,\n  > picture,\n  > picture > img,\n  > svg,\n  > canvas,\n  > iframe {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    border: 0;\n  }\n\n  > img,\n  > video,\n  > picture > img {\n    height: auto;\n  }\n\n  ", "\n"])), function (_a) {
     var $position = _a.$position, $radius = _a.$radius;
     return $position === 'top'
         ? (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n          border-top-left-radius: ", "px;\n          border-top-right-radius: ", "px;\n        "], ["\n          border-top-left-radius: ", "px;\n          border-top-right-radius: ", "px;\n        "])), $radius, $radius) : (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n          border-bottom-left-radius: ", "px;\n          border-bottom-right-radius: ", "px;\n        "], ["\n          border-bottom-left-radius: ", "px;\n          border-bottom-right-radius: ", "px;\n        "])), $radius, $radius);
@@ -421,12 +539,12 @@ exports.StyledPanelMedia = styled_components_1.default.div(templateObject_33 ||
     var $aspectRatio = _a.$aspectRatio;
     return $aspectRatio !== undefined && (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      aspect-ratio: ", ";\n\n      > img,\n      > video,\n      > picture,\n      > picture > img,\n      > svg,\n      > canvas,\n      > iframe {\n        height: 100%;\n        object-fit: cover;\n      }\n    "], ["\n      aspect-ratio: ", ";\n\n      > img,\n      > video,\n      > picture,\n      > picture > img,\n      > svg,\n      > canvas,\n      > iframe {\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), $aspectRatio);
 });
-exports.StyledFloatingActions = styled_components_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"], ["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"])), function (_a) {
+exports.StyledFloatingActions = styled_1.default.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"], ["\n  position: fixed;\n  z-index: 999999;\n  display: flex;\n  padding: ", "px;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: none;\n  border-radius: ", "px\n    ", "px 0 0;\n  gap: ", "px;\n  pointer-events: auto;\n"])), function (_a) {
     var size = _a.size;
     return sizes_1.PADDING_FROM_SIZE[size];
 }, function (_a) {
     var theme = _a.theme;
-    return (0, polished_1.rgba)((0, colors_2.getPanelBackgroundColor)(theme), 1);
+    return (0, polished_1.rgba)((0, colors_2.changeDarkness)((0, colors_2.getMainBackgroundColor)(theme), 0.03), 1);
 }, function (_a) {
     var theme = _a.theme, flat = _a.flat, intent = _a.intent;
     return flat && !intent
@@ -448,13 +566,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, floatingActions = _a.floatingActions, _2 = _a.collapseTooltip, collapseTooltip = _2 === void 0 ? 'Collapse' : _2, _3 = _a.expandTooltip, expandTooltip = _3 === void 0 ? 'Expand' : _3, _4 = _a.closeTooltip, closeTooltip = _4 === void 0 ? 'Close' : _4, accentPosition = _a.accentPosition, accentSize = _a.accentSize, media = _a.media, _5 = _a.mediaAlt, mediaAlt = _5 === void 0 ? '' : _5, _6 = _a.mediaPosition, mediaPosition = _6 === void 0 ? 'top' : _6, mediaAspectRatio = _a.mediaAspectRatio, mediaProps = _a.mediaProps, rest = __rest(_a, ["children", "label", "description", "collapseButtonProps", "collapsible", "onClose", "closeButtonProps", "rounded", "actions", "bottomActions", "isCollapsed", "customTheme", "inheritCustomTheme", "icon", "iconImage", "iconWithLabel", "iconVerticalAlign", "intent", "className", "flat", "unMountContentOnCollapse", "onCollapseChange", "padded", "wrapperPadding", "contentStyle", "contentEffect", "labelEffect", "descriptionEffect", "descriptionIntent", "labelSize", "contentSize", "minimal", "badge", "iconColor", "iconProps", "fluid", "responsiveActions", "responsiveTitle", "compactTitle", "fitLabel", "labelMaxLines", "descriptionPosition", "descriptionMaxLines", "labelMinTextSize", "size", "getContentRef", "labelProps", "disabled", "breadcrumbs", "showActionsWhenCollapsed", "showLabelTooltip", "customLabelTooltip", "resizable", "onLabelEdit", "responsiveActionsWrapperProps", "loading", "loadingIconType", "skeleton", "errorBoundaryOptions", "floatingActions", "collapseTooltip", "expandTooltip", "closeTooltip", "accentPosition", "accentSize", "media", "mediaAlt", "mediaPosition", "mediaAspectRatio", "mediaProps"]);
+    var _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
@@ -471,9 +591,14 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         };
     }, []);
     var isMobile = (0, useReqoreContext_1.useReqoreProperty)('isMobile');
-    var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
-    var _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];
+    /* Floating actions are a hover's. Where the device cannot hover (a phone, a tablet), nothing
+       would ever float them, so its hover actions stay in the panel's own bar, shown (see the
+       hover gate on StyledPanel). */
+    var isHoverCapable = (0, useReqoreContext_1.useReqoreProperty)('isHoverCapable');
+    var floatingActions = !!floatingActionsProp && isHoverCapable !== false;
+    var setRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).setRef;
+    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);
@@ -491,8 +616,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) {
@@ -574,23 +699,67 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         floatingActionsRef.current.style.top = "".concat(panelRect.top - floatingRect.height + (flat ? 0 : 1), "px");
         floatingActionsRef.current.style.left = "".concat(panelRect.right - floatingRect.width, "px");
     }, [flat]);
+    var showsFloatingActions = _isHovered && !!floatingActions && (0, lodash_1.size)(floatingActionsList) > 0;
+    // placed as they are shown, and again whenever the actions change
     (0, react_2.useEffect)(function () {
-        if (!_isHovered || !floatingActions || !(0, lodash_1.size)(floatingActionsList))
+        if (showsFloatingActions)
+            updateFloatingActionsPosition();
+    }, [showsFloatingActions, floatingActionsList, updateFloatingActionsPosition]);
+    /* ...and again whenever what they are placed by moves: the actions are fixed to the screen, placed
+     * by the panel's corner and their own size, so nothing follows on its own. A page that scrolls, a
+     * screen or window that resizes, a panel that grows or shrinks, and actions whose content changes
+     * width (a label, an icon or a font that loads) each moved the panel's corner or the actions' size
+     * without placing them again: they were left where the panel had been - mid-screen once the window
+     * widened - or reached past the panel's edge once they widened. One placement per frame, however
+     * many of these come in; none once they are hidden or the panel is gone. */
+    (0, react_2.useEffect)(function () {
+        if (!showsFloatingActions)
             return undefined;
-        updateFloatingActionsPosition();
-        var onScroll = function () { return updateFloatingActionsPosition(); };
-        window.addEventListener('scroll', onScroll, true);
-        return function () { return window.removeEventListener('scroll', onScroll, true); };
-    }, [_isHovered, floatingActions, floatingActionsList, updateFloatingActionsPosition]);
+        var frame = 0;
+        var schedule = function () {
+            if (!frame) {
+                frame = requestAnimationFrame(function () {
+                    frame = 0;
+                    updateFloatingActionsPosition();
+                });
+            }
+        };
+        window.addEventListener('scroll', schedule, true);
+        window.addEventListener('resize', schedule, { passive: true });
+        var observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : undefined;
+        if (observer) {
+            if (panelRef.current)
+                observer.observe(panelRef.current);
+            if (floatingActionsRef.current)
+                observer.observe(floatingActionsRef.current);
+        }
+        return function () {
+            window.removeEventListener('scroll', schedule, true);
+            window.removeEventListener('resize', schedule);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            if (frame)
+                cancelAnimationFrame(frame);
+        };
+    }, [showsFloatingActions, updateFloatingActionsPosition]);
+    /* The floating actions are a hover's: a finger's tap - and the `mouseenter` a browser emulates after it -
+       shows none (see `createHoverGate`). Where a finger is the primary pointer (`isHoverCapable` false) the
+       actions are in the panel's own bar instead (`floatingActions` is off, above), and on a touch laptop its
+       tap left them floating until the next. */
+    var hoverGate = (0, hoveringPointer_1.useHoverGate)();
+    var handlePointerEnter = (0, react_2.useCallback)(function (e) {
+        var _a;
+        hoverGate.notePointer(e);
+        (_a = rest.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+    }, [hoverGate, rest.onPointerEnter]);
     var handleMouseEnter = (0, react_2.useCallback)(function (e) {
         var _a;
-        if (floatingActions) {
+        if (floatingActions && hoverGate.isHover()) {
             if (hoverTimerRef.current)
                 clearTimeout(hoverTimerRef.current);
             hoverTimerRef.current = setTimeout(function () { return setIsHovered(true); }, 150);
         }
         (_a = rest.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }, [floatingActions, rest.onMouseEnter]);
+    }, [floatingActions, rest.onMouseEnter, hoverGate]);
     var cancelHover = (0, react_2.useCallback)(function () {
         if (hoverTimerRef.current) {
             clearTimeout(hoverTimerRef.current);
@@ -598,6 +767,59 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         }
         setIsHovered(false);
     }, []);
+    /* The way from the panel to its floating actions.
+     *
+     * The actions float above the panel's top-right corner, so a pointer heading for
+     * them from inside the panel leaves the panel through its top edge - usually to the
+     * LEFT of the actions, on a diagonal - and passes over what lies above the panel
+     * before it reaches them. Ending the hover the moment the pointer left the panel
+     * hid the actions on that way, and the click meant for them landed on what they had
+     * been covering (in reqraft's expression editor: the Visual / Text switch, so
+     * "Remove" switched the view instead).
+     *
+     * So while the pointer is in the strip between the panel's top edge and the top of
+     * the actions, across the panel's width, the hover stays; it ends when the pointer
+     * leaves that strip for anything that is neither the panel nor the actions. Decided
+     * by where the pointer IS, on each move - no timer to guess the time a person needs. */
+    var corridorUntrackRef = (0, react_2.useRef)(null);
+    var stopCorridor = (0, react_2.useCallback)(function () {
+        var _a;
+        (_a = corridorUntrackRef.current) === null || _a === void 0 ? void 0 : _a.call(corridorUntrackRef);
+        corridorUntrackRef.current = null;
+    }, []);
+    var inCorridor = (0, react_2.useCallback)(function (x, y) {
+        if (!panelRef.current || !floatingActionsRef.current)
+            return false;
+        if (floatingActionsRef.current.style.display === 'none')
+            return false;
+        var panelRect = panelRef.current.getBoundingClientRect();
+        var actionsRect = floatingActionsRef.current.getBoundingClientRect();
+        return (x >= Math.min(panelRect.left, actionsRect.left) &&
+            x <= Math.max(panelRect.right, actionsRect.right) &&
+            y >= actionsRect.top &&
+            y <= panelRect.top + 1);
+    }, []);
+    var followCorridor = (0, react_2.useCallback)(function () {
+        stopCorridor();
+        var onMove = function (event) {
+            var _a, _b;
+            var target = event.target instanceof Node ? event.target : null;
+            // reached the actions or came back into the panel: their own handlers take over
+            if (target &&
+                (((_a = floatingActionsRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = panelRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)))) {
+                stopCorridor();
+                return;
+            }
+            if (!inCorridor(event.clientX, event.clientY)) {
+                stopCorridor();
+                cancelHover();
+            }
+        };
+        document.addEventListener('mousemove', onMove, true);
+        corridorUntrackRef.current = function () { return document.removeEventListener('mousemove', onMove, true); };
+    }, [cancelHover, inCorridor, stopCorridor]);
+    // a corridor followed when the panel goes is followed no more
+    (0, react_2.useEffect)(function () { return stopCorridor; }, [stopCorridor]);
     var handleMouseLeave = (0, react_2.useCallback)(function (e) {
         var _a;
         if (floatingActions) {
@@ -607,10 +829,15 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
                 floatingActionsRef.current.contains(relatedTarget)) {
                 return;
             }
-            cancelHover();
+            if (_isHovered && inCorridor(e.clientX, e.clientY)) {
+                followCorridor();
+            }
+            else {
+                cancelHover();
+            }
         }
         (_a = rest.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }, [floatingActions, rest.onMouseLeave, cancelHover]);
+    }, [floatingActions, rest.onMouseLeave, cancelHover, _isHovered, inCorridor, followCorridor]);
     var handleFloatingActionsMouseLeave = (0, react_2.useCallback)(function (e) {
         var relatedTarget = e.relatedTarget;
         if (panelRef.current &&
@@ -618,8 +845,13 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
             panelRef.current.contains(relatedTarget)) {
             return;
         }
+        // back towards the panel through the strip between them
+        if (inCorridor(e.clientX, e.clientY)) {
+            followCorridor();
+            return;
+        }
         cancelHover();
-    }, [cancelHover]);
+    }, [cancelHover, inCorridor, followCorridor]);
     /* The panel renders as re-resizable's `Resizable` when it is resizable — unless the caller
        gave its own element in `as`, which always wins. (`rest.as || cond ? Resizable : 'div'`
        binds as `(rest.as || cond) ? …`, so a panel given `as` used to render a `Resizable`.) */
@@ -826,6 +1058,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
@@ -857,7 +1119,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
@@ -887,8 +1149,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 () {
@@ -905,9 +1167,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,
@@ -921,19 +1197,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.
@@ -969,6 +1245,7 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
      * the right answer either way.
      */
     (0, react_2.useLayoutEffect)(function () {
+        var _a;
         var node = labelFitRef.current;
         var parent = node === null || node === void 0 ? void 0 : node.parentElement;
         if (!fitLabel || !node || !parent) {
@@ -982,9 +1259,26 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
             return child === node ? total : total + child.getBoundingClientRect().width;
         }, 0);
         var gaps = gap * Math.max(0, parent.children.length - 1);
-        var next = Math.max(0, Math.round(parent.clientWidth - padding - siblings - gaps));
+        /* What the title could still gain, which the box measured above does not show: the box is
+           only as wide as the title at its present size, so a title shrunk on a narrow bar measured
+           that small box when the bar widened again, and stayed shrunk however wide the bar became
+           (qorus#646). The room is the title box's own beyond what it holds (it grows; what it holds
+           does not), and on a narrow bar the actions group's beyond its least (it gives way to the
+           title, down to what its controls cannot do without). Neither moves when the title's font
+           does: the sum is the title's whole claim on the bar. */
+        var header = node.closest('.reqore-panel-title-header');
+        var headerRoom = header
+            ? header.clientWidth -
+                Array.from(header.children).reduce(function (total, child) { return total + child.getBoundingClientRect().width; }, 0)
+            : 0;
+        var narrowActions = isNarrow
+            ? (_a = node
+                .closest('.reqore-panel-title')) === null || _a === void 0 ? void 0 : _a.querySelector(":scope > .".concat(NON_RESPONSIVE_ACTIONS_CLASS))
+            : undefined;
+        var actionsRoom = narrowActions ? getWidthAboveMinimum(narrowActions) : 0;
+        var next = Math.max(0, Math.round(parent.clientWidth - padding - siblings - gaps + Math.max(0, headerRoom) + actionsRoom));
         setLabelAvailable(function (current) { return (current === next ? current : next); });
-    }, [fitLabel, label, width, badge, actions, panelSize, description, clampLines]);
+    }, [fitLabel, label, width, badge, actions, panelSize, description, clampLines, isNarrow]);
     var iconTooltip = (0, react_2.useMemo)(function () { return ({
         content: label,
     }); }, [label]);
@@ -993,127 +1287,144 @@ exports.ReqorePanel = (0, react_2.forwardRef)(function (_a, ref) {
         if (ref === null || ref === void 0 ? void 0 : ref.resizable) {
             _ref = ref.resizable;
         }
-        targetRef.current = _ref;
-    }, []);
+        setRef(_ref);
+    }, [setRef]);
     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;
-            }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!_isCollapsed && mediaPosition === 'top' ? mediaNode : null, rest.stickyHeader ? ((0, jsx_runtime_1.jsx)("div", { ref: stickySentinelRef, "aria-hidden": 'true', style: { height: 0 } })) : null, _isHovered &&
+            }, onPointerEnter: handlePointerEnter, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!_isCollapsed && mediaPosition === 'top' ? mediaNode : null, rest.stickyHeader ? ((0, jsx_runtime_1.jsx)("div", { ref: stickySentinelRef, "aria-hidden": 'true', style: { height: 0 } })) : null, _isHovered &&
                     (0, lodash_1.size)(floatingActionsList) > 0 &&
-                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.StyledFloatingActions, { className: 'reqore-panel-floating-actions', theme: theme, size: panelSize, intent: intent, flat: flat, ref: floatingActionsRef, onMouseLeave: handleFloatingActionsMouseLeave, children: (0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, gapSize: panelSize, children: floatingActionsList.map(function (action, index) { return renderActions(action, index, true); }) }) }), document.body), hasTitleBar && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTopBar, { flat: flat, isCollapsed: _isCollapsed, collapsible: collapsible, className: 'reqore-panel-title', onClick: handleCollapseClick, theme: theme, minimal: minimal || opacity === 0, size: contentSize || panelSize, opacity: minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1), noHorizontalPadding: noHorizontalPadding, responsive: responsiveTitle, "$descriptionBelow": descriptionBelow, "$descriptionMaxLines": descriptionIsClamped ? descriptionClamp : 0, "$descriptionFontPx": descriptionFontPx, "data-narrow": isNarrow ? 'true' : 'false', ref: measureRef, padded: padded, wrapperPadding: wrapperPadding, intent: intent, rounded: rounded, radiusSize: rest.radiusSize, stickyHeader: rest.stickyHeader, stickyHeaderOffset: rest.stickyHeaderOffset, stickyHeaderInset: stickyInset, isStuck: isHeaderStuck, "$mediaAbove": hasMedia && mediaPosition === 'top' && !_isCollapsed, children: [hasTitleHeader && ((0, jsx_runtime_1.jsxs)(exports.StyledPanelTitleHeader, { className: 'reqore-panel-title-header', children: [breadcrumbs ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, __assign({}, breadcrumbs, { padded: false, margin: 'none', flat: true, responsive: true }))) : icon || iconImage || label || badge ? ((function () {
-                                    var hasPanelIcon = !!icon || !!iconImage || loading;
-                                    // 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, children: nonFloatingActions.map(renderNonResponsiveActions()) }), descriptionBelow ? (
-                        // `flex-basis: 100%` is what puts it on its own line — the bar is a wrapping
-                        // flex row, so a full-width item cannot share one with anything before it.
-                        // `min-width: 0` so a long sentence wraps inside the bar instead of widening it.
-                        (0, jsx_runtime_1.jsx)("div", { className: 'reqore-panel-title-description-row', style: { flex: '0 0 100%', minWidth: 0 }, children: (0, jsx_runtime_1.jsx)(Span_1.ReqoreSpan, __assign({}, descriptionProps, { children: description })) })) : null] })), !_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? ((0, jsx_runtime_1.jsx)(exports.StyledPanelContent, { as: 'div', className: 'reqore-panel-content', hasLabel: !!hasTitleBar, hasBottomActions: hasBottomActions, isCollapsed: _isCollapsed, style: contentStyle, padded: padded, minimal: minimal || opacity === 0, size: contentSize || panelSize, ref: getContentRef, noHorizontalPadding: noHorizontalPadding, children: children })) : null, hasBottomActions && !_isCollapsed ? ((0, jsx_runtime_1.jsxs)(exports.StyledPanelBottomActions, { flat: flat, className: 'reqore-panel-bottom-actions', theme: theme, padded: padded, intent: intent, minimal: minimal || opacity === 0, opacity: minimal ? 0 : (opacity !== null && opacity !== void 0 ? opacity : 1), size: contentSize || panelSize, noHorizontalPadding: noHorizontalPadding, children: [hasNonResponsiveActions(leftBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderNonResponsiveActions('flex-start')) })) : null, hasResponsiveActions(leftBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, responsive: responsiveActions, customTheme: theme, size: panelSize, style: { marginRight: 'auto' }, children: leftBottomActions.map(renderResponsiveActions('flex-start')) })), hasResponsiveActions(rightBottomActions) && ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { fluid: responsiveActions, horizontalAlign: 'flex-end', responsive: responsiveActions, customTheme: theme, style: { marginLeft: 'auto' }, size: panelSize, children: rightBottomActions.map(renderResponsiveActions()) })), hasNonResponsiveActions(rightBottomActions) ? ((0, jsx_runtime_1.jsx)(ControlGroup_1.default, { horizontalAlign: 'flex-end', size: panelSize, style: { marginLeft: 'auto' }, children: rightBottomActions.map(renderNonResponsiveActions()) })) : null] })) : null, !_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, 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