@dbcdk/react-components 0.0.190 → 0.0.192

package/dist/client.cjs

@@ -22,6 +22,7 @@ var useColorScheme = require('./hooks/useColorScheme');
 var useGetActiveTheme = require('./hooks/useGetActiveTheme');
 var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
+var useTreeViewSettings = require('./hooks/useTreeViewSettings');
 var Chip = require('./components/chip/Chip');
 var Panel = require('./components/panel/Panel');
 var Card = require('./components/card/Card');
@@ -48,6 +49,7 @@ var TreeView = require('./components/tree-view/TreeView');
 var nestedFiltering = require('./utils/arrays/nested-filtering');
 var MultiSelect = require('./components/forms/multi-select/MultiSelect');
 var useViewportFill = require('./hooks/useViewportFill');
+var useStickyLayout = require('./hooks/useStickyLayout');
 var formatDate = require('./utils/date/formatDate');
 var FilterField = require('./components/filter-field/FilterField');
 var Select = require('./components/forms/select/Select');
@@ -230,6 +232,12 @@ Object.keys(usePersistentState).forEach(function (k) {
 		get: function () { return usePersistentState[k]; }
 	});
 });
+Object.keys(useTreeViewSettings).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTreeViewSettings[k]; }
+	});
+});
 Object.keys(Chip).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -386,6 +394,12 @@ Object.keys(useViewportFill).forEach(function (k) {
 		get: function () { return useViewportFill[k]; }
 	});
 });
+Object.keys(useStickyLayout).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useStickyLayout[k]; }
+	});
+});
 Object.keys(formatDate).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -19,6 +19,7 @@ export * from './hooks/useColorScheme';
 export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
+export * from './hooks/useTreeViewSettings';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';
@@ -45,6 +46,7 @@ export * from './components/tree-view/TreeView';
 export * from './utils/arrays/nested-filtering';
 export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
+export * from './hooks/useStickyLayout';
 export * from './utils/date/formatDate';
 export * from './components/filter-field/FilterField';
 export * from './components/forms/select/Select';

package/dist/client.js

@@ -20,6 +20,7 @@ export * from './hooks/useColorScheme';
 export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
+export * from './hooks/useTreeViewSettings';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';
@@ -46,6 +47,7 @@ export * from './components/tree-view/TreeView';
 export * from './utils/arrays/nested-filtering';
 export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
+export * from './hooks/useStickyLayout';
 export * from './utils/date/formatDate';
 export * from './components/filter-field/FilterField';
 export * from './components/forms/select/Select';

package/dist/components/button-select/ButtonSelect.cjs

@@ -10,7 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function ButtonSelect(props) {
-  const { options, size = "md", disabled } = props;
+  const { options, size = "md", disabled, modified = false } = props;
   const selectedValues = Array.isArray(props.value) ? props.value : [props.value];
   function handleSelect(optionValue) {
     if (props.multiple) {
@@ -20,7 +20,7 @@ function ButtonSelect(props) {
     }
     props.onChange(optionValue);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", children: options.map((option) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", "data-modified": modified ? "true" : void 0, children: options.map((option) => {
     const isSelected = selectedValues.includes(option.value);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Button.Button,

package/dist/components/button-select/ButtonSelect.d.ts

@@ -10,6 +10,7 @@ interface ButtonSelectBaseProps<T extends string = string> {
     options: ButtonSelectOption<T>[];
     size?: ButtonSize;
     disabled?: boolean;
+    modified?: boolean;
 }
 export interface ButtonSelectSingleProps<T extends string = string> extends ButtonSelectBaseProps<T> {
     value: T;

package/dist/components/button-select/ButtonSelect.js

@@ -4,7 +4,7 @@ import { Button } from '../../components/button/Button';
 import styles from './ButtonSelect.module.css';
 
 function ButtonSelect(props) {
-  const { options, size = "md", disabled } = props;
+  const { options, size = "md", disabled, modified = false } = props;
   const selectedValues = Array.isArray(props.value) ? props.value : [props.value];
   function handleSelect(optionValue) {
     if (props.multiple) {
@@ -14,7 +14,7 @@ function ButtonSelect(props) {
     }
     props.onChange(optionValue);
   }
-  return /* @__PURE__ */ jsx("div", { className: styles.group, role: "group", children: options.map((option) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.group, role: "group", "data-modified": modified ? "true" : void 0, children: options.map((option) => {
     const isSelected = selectedValues.includes(option.value);
     return /* @__PURE__ */ jsx(
       Button,

package/dist/components/button-select/ButtonSelect.module.css

@@ -3,6 +3,20 @@
   flex-wrap: nowrap;
 }
 
+.group[data-modified='true'] {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
+  border-radius: var(--border-radius-default);
+  padding: 0;
+}
+
+.group[data-modified='true'] .btn {
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
+}
+
 /* Collapse the doubled border between adjacent buttons */
 .group .btn:not(:first-child) {
   margin-left: -1px;

package/dist/components/chip/Chip.module.css

@@ -43,14 +43,14 @@
 /* Types */
 
 .outlined {
-  --chip-bg: var(--color-bg-surface);
+  --chip-bg: transparent;
   --chip-border: var(--chip-outlined-border, var(--color-border-subtle));
   --chip-fg: var(--chip-outlined-fg, var(--color-fg-muted));
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
 .outlined:hover {
-  background-color: var(--color-bg-surface);
+  background-color: transparent;
   border-color: var(--chip-outlined-border-hover, var(--color-border-default));
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   color: var(--chip-outlined-fg-hover, var(--color-fg-default));
@@ -124,6 +124,16 @@
   box-shadow: none;
 }
 
+.outlined.neutral {
+  --chip-bg: transparent;
+  --chip-border: var(--chip-outlined-border, var(--color-border-subtle));
+}
+
+.outlined.neutral:hover,
+.outlined.neutral:focus-visible {
+  --chip-bg: transparent;
+}
+
 .neutral .close {
   color: var(--color-fg-subtle);
 }
@@ -208,6 +218,19 @@
   box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
+.outlined.selected,
+.outlined.selected:hover,
+.outlined.selected:focus-visible {
+  background: color-mix(in srgb, var(--color-bg-selected) 65%, var(--color-bg-surface));
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-brand);
+}
+
+.outlined.selected:hover {
+  background: color-mix(in srgb, var(--color-bg-selected-hover) 65%, var(--color-bg-surface));
+}
+
 .selected:hover {
   background-color: var(--color-bg-selected);
   border-color: var(--color-border-selected);

package/dist/components/forms/checkbox/Checkbox.cjs

@@ -49,7 +49,11 @@ function Checkbox({
   const content = /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: [styles__default.default.container, size === "sm" ? styles__default.default.containerSm : ""].filter(Boolean).join(" "),
+      className: [
+        styles__default.default.container,
+        size === "sm" ? styles__default.default.containerSm : "",
+        modified ? styles__default.default.modified : ""
+      ].filter(Boolean).join(" "),
       "data-cy": dataCy,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -65,6 +69,7 @@ function Checkbox({
             onClick: toggle,
             className: [
               styles__default.default.checkbox,
+              disabled ? "disabled" : "",
               isChecked ? styles__default.default.checked : "",
               styles__default.default[variant],
               styles__default.default[size]

package/dist/components/forms/checkbox/Checkbox.js

@@ -43,7 +43,11 @@ function Checkbox({
   const content = /* @__PURE__ */ jsxs(
     "span",
     {
-      className: [styles.container, size === "sm" ? styles.containerSm : ""].filter(Boolean).join(" "),
+      className: [
+        styles.container,
+        size === "sm" ? styles.containerSm : "",
+        modified ? styles.modified : ""
+      ].filter(Boolean).join(" "),
       "data-cy": dataCy,
       children: [
         /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
@@ -59,6 +63,7 @@ function Checkbox({
             onClick: toggle,
             className: [
               styles.checkbox,
+              disabled ? "disabled" : "",
               isChecked ? styles.checked : "",
               styles[variant],
               styles[size]

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -7,6 +7,13 @@
   color: var(--color-fg-default);
 }
 
+.container.modified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 75%, transparent);
+  border-radius: var(--border-radius-default);
+  padding: 0;
+  display: inline-flex;
+}
+
 .containerSm {
   gap: var(--spacing-xs);
 }
@@ -28,6 +35,12 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
+.checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: grayscale(0.2);
+}
+
 .checkbox.sm {
   width: var(--component-size-xs);
   height: var(--component-size-xs);
@@ -54,11 +67,24 @@
   border-color: var(--color-fg-default);
 }
 
+.checkbox:disabled:hover {
+  border-color: var(--color-border-default);
+}
+
 .checked {
   background-color: var(--color-brand);
   border-color: var(--color-brand);
 }
 
+.checkbox:disabled.checked {
+  background-color: var(--color-bg-subtle);
+  border-color: var(--color-border-muted);
+}
+
+.checkbox:disabled.checked .icon {
+  color: var(--color-fg-muted);
+}
+
 .icon {
   width: var(--icon-size-md);
   height: var(--icon-size-md);

package/dist/components/forms/input/Input.module.css

@@ -41,7 +41,12 @@
   flex: 1 1 auto;
   min-inline-size: 0;
   inline-size: 100%;
+  /* Size classes also apply to the field; keep the input inside its border. */
+  max-block-size: 100%;
   box-sizing: border-box;
+  /* Matches `.field`'s radius so the autofill box-shadow below (which paints
+     within this element's own box) doesn't show sharp corners under it. */
+  border-radius: inherit;
   text-overflow: ellipsis;
   color: var(--color-fg-default);
   background: transparent;
@@ -59,6 +64,94 @@
   color: var(--color-fg-subtle) !important;
 }
 
+/* Match the design system's selection color instead of the browser default. */
+.input::selection {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+.input::-moz-selection {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+/* Neutralize the browser's native autofill tint (Chrome's light-blue fill,
+   applied via this pseudo-class) so a filled field keeps the field's normal
+   background instead of the browser's own color - this also fires for
+   Chrome's "previous values typed in this field" history dropdown, which
+   uses the same autofill styling even though it's not real autofill data.
+   The huge transition delay is the standard trick to stop Chrome animating
+   its own background/text color in on top of this.
+
+   The field overlay below keeps the focus ring above this opaque fill. */
+.input:-webkit-autofill,
+.input:-webkit-autofill:hover {
+  -webkit-text-fill-color: var(--color-fg-default);
+  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
+  box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
+  transition:
+    background-color 600000s 0s,
+    color 600000s 0s;
+}
+
+.subtle .input:-webkit-autofill,
+.subtle .input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
+  box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
+}
+
+.embedded .input:-webkit-autofill,
+.embedded .input:-webkit-autofill:hover,
+.embedded .input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  box-shadow: 0 0 0 1000px transparent inset;
+}
+
+.header .input:-webkit-autofill,
+.header .input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  box-shadow: 0 0 0 1000px transparent inset;
+}
+
+.header .input:-webkit-autofill {
+  -webkit-text-fill-color: var(--color-navbar-fg);
+}
+
+/* Paint over the autofill fill using the whole field's geometry, including
+   adornments. A ring on the input itself creates an extra inner rectangle.
+   Keep this overlay non-interactive so clear buttons remain clickable. */
+.field:has(.input:-webkit-autofill)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--border-width-thin)
+    var(--input-autofill-ring, var(--color-field-focus));
+  opacity: 0;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.field:has(.input:-webkit-autofill):focus-within:not([aria-disabled='true'])::after {
+  opacity: 1;
+}
+
+.header {
+  --input-autofill-ring: var(--color-navbar-fg);
+}
+
+.modified {
+  --input-autofill-ring: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 55%,
+    var(--color-border-default)
+  );
+}
+
+.embedded:has(.input:-webkit-autofill)::after {
+  content: none;
+}
+
 .input:disabled {
   background-color: transparent;
   color: var(--color-disabled-fg);

package/dist/components/forms/input-container/InputContainer.module.css

@@ -50,10 +50,3 @@
 .messageRow {
   min-height: 1lh;
 }
-
-/* Optional: keep this only for controls whose own label lives inside children,
-   such as checkbox/radio wrappers. It will not affect Input's top label. */
-.inputContainer[data-modified] label:not(.label) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
-  border-radius: var(--border-radius-default);
-}

package/dist/components/grid/Grid.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var styles = require('./Grid.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -38,11 +39,12 @@ function Grid({
     }
   );
 }
-function GridItem({ children, base = 12, md, lg, className, style }) {
+const GridItem = react.forwardRef(function GridItem2({ children, base = 12, md, lg, className, style }, ref) {
   const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       className: [styles__default.default.item, className].filter(Boolean).join(" "),
       style: {
         "--span-base": toTrackSpan(base),
@@ -53,7 +55,7 @@ function GridItem({ children, base = 12, md, lg, className, style }) {
       children
     }
   );
-}
+});
 
 exports.Grid = Grid;
 exports.GridItem = GridItem;

package/dist/components/grid/Grid.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface GridMaxWidth {
     base?: string;
@@ -26,4 +26,4 @@ export interface GridItemProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function GridItem({ children, base, md, lg, className, style }: GridItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/grid/Grid.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styles from './Grid.module.css';
 
 const GAP_TOKEN = {
@@ -32,11 +33,12 @@ function Grid({
     }
   );
 }
-function GridItem({ children, base = 12, md, lg, className, style }) {
+const GridItem = forwardRef(function GridItem2({ children, base = 12, md, lg, className, style }, ref) {
   const toTrackSpan = (span) => span * 2;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
       className: [styles.item, className].filter(Boolean).join(" "),
       style: {
         "--span-base": toTrackSpan(base),
@@ -47,6 +49,6 @@ function GridItem({ children, base = 12, md, lg, className, style }) {
       children
     }
   );
-}
+});
 
 export { Grid, GridItem };

package/dist/components/json-viewer/JsonViewer.cjs

@@ -12,6 +12,7 @@ var styles = require('./JsonViewer.module.css');
 var useClipboardStatus = require('./useClipboardStatus');
 var utils = require('./utils');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -151,7 +152,7 @@ function JsonViewer({
                         "aria-haspopup": "menu",
                         "aria-expanded": isOpen ? true : false,
                         onClick: toggle,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                       }
                     ),
                     children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [

package/dist/components/json-viewer/JsonViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useState, useId, useEffect, useMemo } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -10,6 +10,7 @@ import styles from './JsonViewer.module.css';
 import { useClipboardStatus } from './useClipboardStatus';
 import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const COPY_ALL_ID = "__json-viewer-copy-all__";
 function JsonViewer({
@@ -145,7 +146,7 @@ function JsonViewer({
                         "aria-haspopup": "menu",
                         "aria-expanded": isOpen ? true : false,
                         onClick: toggle,
-                        children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                       }
                     ),
                     children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [

package/dist/components/line-viewer/LineViewer.cjs

@@ -10,6 +10,7 @@ var usePersistentState = require('../../hooks/usePersistentState');
 var styles = require('./LineViewer.module.css');
 var tokenizeLineFormat = require('./tokenizeLineFormat');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -87,7 +88,7 @@ function LineViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [

package/dist/components/line-viewer/LineViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useMemo, useRef } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -8,6 +8,7 @@ import { usePersistentState } from '../../hooks/usePersistentState';
 import styles from './LineViewer.module.css';
 import { tokenizeLineFormat } from './tokenizeLineFormat';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const TOKEN_CLASS = {
   tag: styles.tag,
@@ -81,7 +82,7 @@ function LineViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -96,7 +96,9 @@
 
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  /* Header/content spacing is defined by their own padding, so avoid adding another
+     gap that creates double spacing between the panel title and the content area. */
+  gap: 0;
 }
 
 .header {

package/dist/components/page-layout/PageLayout.module.css

@@ -17,8 +17,9 @@
     var(--spacing-2xs) * 2 + var(--font-size-md) * var(--line-height-normal)
   );
 
-  /* Structural bottom breathing room for all page content. */
-  --page-layout-content-padding-bottom: var(--spacing-2xl);
+  /* Structural bottom breathing room for all page content, so it doesn't sit
+     flush against the viewport edge. */
+  --page-layout-content-padding-bottom: var(--spacing-xl);
 }
 
 /* Viewport handling:
@@ -211,7 +212,15 @@
 /* Content area (not a scroll container anymore) */
 .content {
   min-width: 0;
-  min-height: 0;
+  /* Deliberately no min-height:0 here (unlike `.mainScroll` above, which does
+     need it): this lets `.content` size to its own natural content height —
+     including its own padding-block-end — instead of being flex-shrunk
+     shorter than that content. `.mainScroll` (overflow:auto) already has its
+     own min-height:0, which is what lets it stay bounded to the available
+     space and scroll; if `.content` could *also* shrink below its content,
+     that shrunk-but-visible-overflow content would spill straight past
+     wherever its own bottom padding was supposed to land, so it would never
+     actually render (this happened in practice before this comment existed). */
   flex: 1 1 auto; /* take remaining space inside mainScroll */
   display: flex; /* lets contentInner stretch */
   flex-direction: column;

package/dist/components/popover/Popover.cjs

@@ -145,7 +145,7 @@ const Popover = React.forwardRef(function Popover2({
   React.useImperativeHandle(
     ref,
     () => ({
-      close: () => closePopover("api"),
+      close: (opts) => closePopover((opts == null ? void 0 : opts.returnFocus) === false ? "dismiss" : "api"),
       open: openPopover,
       isOpen: () => isOpen
     }),
@@ -265,6 +265,7 @@ const Popover = React.forwardRef(function Popover2({
     if (isOpen) return;
     if (!returnFocus) return;
     if (lastCloseReasonRef.current === "outside") return;
+    if (lastCloseReasonRef.current === "dismiss") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
   const chevronClassName = variant === "header" ? styles__default.default.chevronHeader : void 0;

package/dist/components/popover/Popover.d.ts

@@ -22,7 +22,14 @@ export interface PopoverProps {
     variant?: 'default' | 'header';
 }
 export interface PopoverHandle {
-    close: () => void;
+    /**
+     * Pass `{ returnFocus: false }` to close without focus returning to the
+     * trigger afterward - e.g. when the caller is about to navigate away or
+     * move focus itself, so the trigger shouldn't reclaim it back.
+     */
+    close: (opts?: {
+        returnFocus?: boolean;
+    }) => void;
     open: () => void;
     isOpen: () => boolean;
 }

package/dist/components/popover/Popover.js

@@ -121,7 +121,7 @@ const Popover = forwardRef(function Popover2({
   useImperativeHandle(
     ref,
     () => ({
-      close: () => closePopover("api"),
+      close: (opts) => closePopover((opts == null ? void 0 : opts.returnFocus) === false ? "dismiss" : "api"),
       open: openPopover,
       isOpen: () => isOpen
     }),
@@ -241,6 +241,7 @@ const Popover = forwardRef(function Popover2({
     if (isOpen) return;
     if (!returnFocus) return;
     if (lastCloseReasonRef.current === "outside") return;
+    if (lastCloseReasonRef.current === "dismiss") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
   const chevronClassName = variant === "header" ? styles.chevronHeader : void 0;