@galaxy-io/dls 2.10.5 → 2.11.1

package/dist/layout/ResizablePanels.d.ts

@@ -11,7 +11,7 @@ export interface ResizablePanelsProps extends AriaAttributes {
     /** Persists each uncontrolled panel's size in `localStorage` under this key, by panel `id`. Off when omitted. */
     storageKey?: string;
     /**
-     * A hairline on the edge where two panels meet: a sized panel's edge facing its handle, so the handle's strip lies just inside the fluid panel.
+     * A hairline on the edge where two panels meet (a sized panel's edge facing its handle). Without it the panels meet with no line; the handle overlays the edge either way and takes no space.
      * @default false
      */
     hasDividers?: boolean;

package/dist/layout/ResizablePanels.js

@@ -1,5 +1,4 @@
 import { Orientation } from "../theme/enums.js";
-import { SPACE } from "../theme/tokens/scales.js";
 import { useElementClientSize } from "../hooks/useElementClientSize.js";
 import ResizeHandle from "./ResizeHandle.js";
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
@@ -21,16 +20,16 @@ import { useMergeRefs } from "@floating-ui/react";
 * children are skipped, so a panel can be shown conditionally. A panel with neither `value` nor
 * `defaultValue` is the fluid one; with none, the last panel is.
 *
-* The panels have no frame of their own. `hasDividers` draws a hairline on the edge where two
-* panels meet: on a sized panel's edge that faces its handle (so the line sits on the sidebar's
-* edge and the handle's strip lies just inside the fluid panel), and on the later panel's start
-* edge where two panels meet without a handle.
+* The panels have no frame of their own and meet directly: each handle sits in a zero-size slot
+* between two panels and overlays the edge of the panel it does not resize, so it takes no space
+* and its transparent strip shows that panel's own surface. `hasDividers` draws a hairline on the
+* edge where two panels meet: on a sized panel's edge that faces its handle (so the line sits on
+* the sidebar's edge and the handle's strip lies over the fluid panel beside it), and on the later
+* panel's start edge where two panels meet without a handle.
 */
 var ResizablePanelsContext = createContext(null);
 /** The storage key while `storageKey` is unset; it lives in a per-instance memory adapter. */
 var RESIZABLE_PANELS_NO_STORAGE_KEY = "gx-resizable-panels:off";
-/** A handle's thickness: the `space[8]` token, in pixels (ResizeHandle's strip). */
-var HANDLE_THICKNESS_PX = Number.parseFloat(SPACE[8]);
 /** A row of panels needs vertical bars; a stack needs horizontal ones (logic, not CSS). */
 var RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_ORIENTATION_MAP = {
 	[Orientation.HORIZONTAL]: Orientation.VERTICAL,
@@ -54,33 +53,64 @@ var Root = /*#__PURE__*/ styled("div")({
 	class: "gx-ResizablePanels-rov2pu6",
 	propsAsIs: false
 });
-/** Every panel scrolls its own content; no padding or surface (content brings its own). */
+/**
+* Every panel scrolls its own content; no padding or surface (content brings its own). Its own
+* stacking context keeps content with a high `z-index` from painting over a handle.
+*/
 var Panel = /*#__PURE__*/ styled("div")({
 	name: "Panel",
 	class: "gx-ResizablePanels-Panel-piht8m9",
 	propsAsIs: false
 });
+/** Holds a handle between two panels: zero size on the layout axis, above both panels. */
+var HandleSlot = /*#__PURE__*/ styled("div")({
+	name: "HandleSlot",
+	class: "gx-ResizablePanels-HandleSlot-h1hgxsmq",
+	propsAsIs: false
+});
+var HANDLE_SLOT_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-ow20qci",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-ot38enr"
+};
+/**
+* Takes the handle out of flow and stretches it across the slot. The doubled class outranks
+* ResizeHandle's own `position: relative` whatever order the two modules' rules land in.
+*/
+var RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1ev9pzd",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o16ojr42"
+};
+/** The handle resizes the panel before it: its strip extends over the panel after the slot. */
+var RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_AFTER_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1k6jei3",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o1ikvfoe"
+};
+/** The handle resizes the panel after it (`isReversed`): its strip extends over the panel before. */
+var RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_BEFORE_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-oa3x64k",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o1kf7v08"
+};
 var RESIZABLE_PANELS_ORIENTATION_TO_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1hgxsmq",
-	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-ow20qci"
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o12hjusf",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-oqqcrhc"
 };
 /** `min` applies on the layout axis. */
 var RESIZABLE_PANEL_ORIENTATION_TO_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-ot38enr",
-	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o1ev9pzd"
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o153dibu",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o18ydacr"
 };
 /** A sized panel may shrink below its size (toward `min`) when the container is too small. */
-var SIZED_CSS = "gx-ResizablePanels-SIZED_CSS-s16ojr42";
+var SIZED_CSS = "gx-ResizablePanels-SIZED_CSS-si9hjxv";
 /** The fluid panel takes the remaining space. */
-var FLUID_CSS = "gx-ResizablePanels-FLUID_CSS-f1k6jei3";
+var FLUID_CSS = "gx-ResizablePanels-FLUID_CSS-fgrrn8v";
 /** `hasDividers`: the hairline on a panel's start or end edge along the layout axis. */
 var RESIZABLE_PANEL_ORIENTATION_TO_START_DIVIDER_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1ikvfoe",
-	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-oa3x64k"
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-okss9ie",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-oy9jznf"
 };
 var RESIZABLE_PANEL_ORIENTATION_TO_END_DIVIDER_CSS_MAP = {
-	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1kf7v08",
-	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o12hjusf"
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o14ir6tp",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o1kugxp4"
 };
 /** Rounds and keeps `value` within `[min, max]`. */
 function clamp(value, min, max) {
@@ -133,11 +163,10 @@ var ResizablePanels = forwardRef(function ResizablePanels({ children, orientatio
 		if (before !== void 0 && !before.isFluid && index - 1 < firstFluidIndex) return index - 1;
 		if (!panel.isFluid) return index;
 	});
-	const handleCount = handleTargets.filter((target) => target !== void 0).length;
 	/** A handle's `max`: the panel's own, capped so every fluid panel keeps its `min`. */
 	const dynamicMaxOf = (target) => {
 		if (available === void 0) return target.max;
-		let room = available - handleCount * HANDLE_THICKNESS_PX;
+		let room = available;
 		for (const panel of panels) {
 			if (panel === target) continue;
 			room -= panel.isFluid ? panel.min : sizeOf(panel);
@@ -175,15 +204,20 @@ var ResizablePanels = forwardRef(function ResizablePanels({ children, orientatio
 		const target = targetIndex === void 0 ? void 0 : panels[targetIndex];
 		if (target !== void 0) {
 			const max = dynamicMaxOf(target);
-			content.push(/* @__PURE__ */ jsx(ResizeHandle, {
-				orientation: RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_ORIENTATION_MAP[orientation],
-				isReversed: targetIndex === index,
-				value: Math.min(sizeOf(target), max),
-				onChange: (next) => setSize(target, next),
-				min: target.min,
-				max,
-				ariaLabel: `Resize ${target.props.ariaLabel ?? target.props.id}`,
-				"aria-controls": target.props.id
+			const isReversed = targetIndex === index;
+			content.push(/* @__PURE__ */ jsx(HandleSlot, {
+				className: HANDLE_SLOT_ORIENTATION_TO_CSS_MAP[orientation],
+				children: /* @__PURE__ */ jsx(ResizeHandle, {
+					orientation: RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_ORIENTATION_MAP[orientation],
+					isReversed,
+					value: Math.min(sizeOf(target), max),
+					onChange: (next) => setSize(target, next),
+					min: target.min,
+					max,
+					ariaLabel: `Resize ${target.props.ariaLabel ?? target.props.id}`,
+					"aria-controls": target.props.id,
+					className: cx(RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_CSS_MAP[orientation], isReversed ? RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_BEFORE_CSS_MAP[orientation] : RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_AFTER_CSS_MAP[orientation])
+				})
 			}, `handle:${panel.props.id}`));
 		}
 		content.push(panel.element);

package/dist/layout/ScrollArea.js

@@ -49,10 +49,19 @@ var SCROLL_AREA_ORIENTATION_TO_SCROLLBAR_CSS_MAP = {
 	[Orientation.VERTICAL]: "gx-ScrollArea-Orientation_VERTICAL-o174c7co",
 	[Orientation.HORIZONTAL]: "gx-ScrollArea-Orientation_HORIZONTAL-okpbxfy"
 };
-/** The 4px thumb, a quiet neutral on every surface; `::before` gives it a 24px pointer target. */
+/** The 4px thumb, a quiet neutral on every surface. */
 var THUMB_CSS = "gx-ScrollArea-THUMB_CSS-tzpebzb";
+/**
+* The thumb's 24px pointer target (`::before`), anchored to the track's outer edge (the root's
+* edge) and growing inward over the content, so it never leaves the root and never adds overflow to
+* a scrolling parent. Along the track it matches the thumb.
+*/
+var SCROLL_AREA_ORIENTATION_TO_THUMB_CSS_MAP = {
+	[Orientation.VERTICAL]: "gx-ScrollArea-Orientation_VERTICAL-o1otan2y",
+	[Orientation.HORIZONTAL]: "gx-ScrollArea-Orientation_HORIZONTAL-o1rdgqrq"
+};
 /** Where the two scrollbars meet. */
-var CORNER_CSS = "gx-ScrollArea-CORNER_CSS-c1otan2y";
+var CORNER_CSS = "gx-ScrollArea-CORNER_CSS-c1pufd3e";
 /** Reads the viewport's scroll geometry into edge flags. */
 function measureEdges(viewport, canScrollHorizontally) {
 	const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = viewport;
@@ -122,12 +131,12 @@ var ScrollArea = forwardRef(function ScrollArea({ children, canScrollHorizontall
 			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
 				orientation: "vertical",
 				className: SCROLL_AREA_ORIENTATION_TO_SCROLLBAR_CSS_MAP[Orientation.VERTICAL],
-				children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: THUMB_CSS })
+				children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: cx(THUMB_CSS, SCROLL_AREA_ORIENTATION_TO_THUMB_CSS_MAP[Orientation.VERTICAL]) })
 			}),
 			canScrollHorizontally && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
 				orientation: "horizontal",
 				className: SCROLL_AREA_ORIENTATION_TO_SCROLLBAR_CSS_MAP[Orientation.HORIZONTAL],
-				children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: THUMB_CSS })
+				children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: cx(THUMB_CSS, SCROLL_AREA_ORIENTATION_TO_THUMB_CSS_MAP[Orientation.HORIZONTAL]) })
 			}),
 			canScrollHorizontally && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { className: CORNER_CSS })
 		]