@primer/react 38.32.1-rc.ea8470aaa → 38.33.0-rc.01176969a

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # @primer/react
 
-## 38.32.1
+## 38.33.0
+
+### Minor Changes
+
+- [#8160](https://github.com/primer/react/pull/8160) [`f8e7cf2`](https://github.com/primer/react/commit/f8e7cf2e1bd3eb02d4106b4932b487bb8ff108e6) Thanks [@TylerJDev](https://github.com/TylerJDev)! - PageLayout: Export the resize primitives `usePaneWidth` and `DragHandle` (with `defaultPaneWidth` and related types) so pane-resize behavior can be reused outside of `PageLayout`.
 
 ### Patch Changes
 
 - [#8064](https://github.com/primer/react/pull/8064) [`eb447fe`](https://github.com/primer/react/commit/eb447fef0f1565934dc38d09df21d8063957aa9d) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Update the ActionBar overflow menu anchor label to `More items`
 
+- [#8166](https://github.com/primer/react/pull/8166) [`4045abe`](https://github.com/primer/react/commit/4045abea621d0940edcd1120fc70e6ed5f797205) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Add `contain: layout` to high-churn overflow containers (`ActionBar`, `UnderlineNav`, `UnderlinePanels`, and `LabelGroup`) so their frequent reflows no longer invalidate ancestor layout.
+
+- [#8176](https://github.com/primer/react/pull/8176) [`f061bc4`](https://github.com/primer/react/commit/f061bc41483211bef1ec8b1dfe07937f20a9ddd6) Thanks [@francinelucca](https://github.com/francinelucca)! - FeatureFlags: Guard against missing context in `useFeatureFlag` so it returns `false` instead of throwing when used outside a provider
+
+- [#8188](https://github.com/primer/react/pull/8188) [`2a67c19`](https://github.com/primer/react/commit/2a67c191a0038df64d2225c0bc11c020c2def03c) Thanks [@iansan5653](https://github.com/iansan5653)! - Fix `UnderlineNav` items all being considered overflowing on Safari with text size overrides
+
 - [#8116](https://github.com/primer/react/pull/8116) [`cade4af`](https://github.com/primer/react/commit/cade4af9a70f3fd2622031af585dc07dccd79e11) Thanks [@mattcosta7](https://github.com/mattcosta7)! - `useAnchoredPosition`: improve performance by caching the scrollable-ancestor walk per anchor, reducing repositioning work for overlays, menus, and tooltips.
 
 - [#8164](https://github.com/primer/react/pull/8164) [`f86e5a6`](https://github.com/primer/react/commit/f86e5a6420e857e7476c3954d419f4e228bdcf1a) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix `UnderlineNav` tab list not filling the full width of the underline nav in Safari

package/dist/ActionBar/ActionBar-3767d551.css

@@ -0,0 +1,2 @@
+.prc-ActionBar-List-9uz46{align-items:flex-start;animation:prc-ActionBar-detect-overflow-mAuJu linear;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative;animation-timeline:scroll(self block);contain:layout}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{contain:layout;flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-OverflowContainer-AkYZs .prc-ActionBar-OverflowSpacer-tbHkV{height:var(--actionbar-height)}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
+/*# sourceMappingURL=ActionBar-3767d551.css.map */

package/dist/ActionBar/ActionBar-3767d551.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAAsC,CAKtC,cAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAgBF,CAbA,uCAQE,cAAe,CANf,cAAe,CAEf,wBAAyB,CACzB,eAQF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-3767d551.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* Isolate the frequent overflow-driven reflows (JS visibility toggling + item wrapping) so they\n  can't invalidate ancestor layout. Safe because the list already clips (overflow: hidden) and the\n  More menu is portaled, so it isn't affected by the new containing block/stacking context. */\n  contain: layout;\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  /* Contain the wrap/measure reflows to this subtree. */\n  contain: layout;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}

package/dist/ActionBar/ActionBar.module.css.js

@@ -1,4 +1,4 @@
-import "./ActionBar-e63def3c.css";
+import "./ActionBar-3767d551.css";
 //#region src/ActionBar/ActionBar.module.css.js
 var ActionBar_module_css_default = {
 	"List": "prc-ActionBar-List-9uz46",

package/dist/FeatureFlags/useFeatureFlag.js

@@ -10,7 +10,8 @@ function useFeatureFlag(flag) {
 	const context = useContext(FeatureFlagContext);
 	let t0;
 	if ($[0] !== context || $[1] !== flag) {
-		t0 = context.enabled(flag);
+		var _context$enabled;
+		t0 = (_context$enabled = context === null || context === void 0 ? void 0 : context.enabled(flag)) !== null && _context$enabled !== void 0 ? _context$enabled : false;
 		$[0] = context;
 		$[1] = flag;
 		$[2] = t0;

package/dist/LabelGroup/LabelGroup-db41f443.css

@@ -0,0 +1,2 @@
+.prc-LabelGroup-Container-E-ePP{contain:layout;display:flex;flex-wrap:nowrap;gap:var(--base-size-4,.25rem);line-height:1;max-width:100%;overflow:hidden}.prc-LabelGroup-Container-E-ePP:where([data-overflow=inline]){flex-wrap:wrap}.prc-LabelGroup-Container-E-ePP:where([data-list]){list-style-type:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.prc-LabelGroup-ItemWrapper-GkO4t{align-items:center;display:flex;min-height:28px}.prc-LabelGroup-ItemWrapper--hidden-mdrB0{order:9999;pointer-events:none;visibility:hidden}.prc-LabelGroup-OverlayContainer-duQvd{align-items:flex-start;display:flex}.prc-LabelGroup-OverlayInner-nDXRC{display:flex;flex-wrap:wrap;gap:var(--base-size-4,.25rem)}.prc-LabelGroup-CloseButton-IyLno{flex-shrink:0}
+/*# sourceMappingURL=LabelGroup-db41f443.css.map */

package/dist/LabelGroup/LabelGroup-db41f443.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LabelGroup/LabelGroup.module.css.js"],"names":[],"mappings":"AAAA,gCAYE,cAAe,CAXf,YAAa,CACb,gBAAiB,CACjB,6BAAuB,CAEvB,aAAc,CACd,cAAe,CACf,eAiBF,CAVE,8DACE,cACF,CAEA,mDAIE,oBAAqB,CADrB,kBAAmB,CADnB,oBAAqB,CADrB,sBAIF,CAGF,kCAEE,kBAAmB,CADnB,YAAa,CAOb,eACF,CAEA,0CACE,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,uCACE,sBAAuB,CACvB,YACF,CAEA,mCACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,kCACE,aACF","file":"LabelGroup-db41f443.css","sourcesContent":[".Container {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--base-size-4);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  max-width: 100%;\n  overflow: hidden;\n\n  /* Isolate the IntersectionObserver-driven show/hide of overflowing labels so it can't invalidate\n  ancestor layout. Safe because the row already clips (overflow: hidden) and the expanded overlay is\n  rendered separately, so it isn't affected by the new containing block/stacking context. */\n  contain: layout;\n\n  &:where([data-overflow='inline']) {\n    flex-wrap: wrap;\n  }\n\n  &:where([data-list]) {\n    padding-inline-start: 0;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    list-style-type: none;\n  }\n}\n\n.ItemWrapper {\n  display: flex;\n  align-items: center;\n  /* This min-height matches the height of the expand/collapse button.\n     Without it, the labels/tokens will do a slight layout shift when expanded.\n     This is because the height of the first row will match the token sizes,\n     but the height of the second row will be the height of the collapse button.\n  */\n  min-height: 28px;\n}\n\n.ItemWrapper--hidden {\n  order: 9999;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.OverlayContainer {\n  align-items: flex-start;\n  display: flex;\n}\n\n.OverlayInner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-4);\n}\n\n.CloseButton {\n  flex-shrink: 0;\n}\n"]}

package/dist/LabelGroup/LabelGroup.module.css.js

@@ -1,4 +1,4 @@
-import "./LabelGroup-7d19205a.css";
+import "./LabelGroup-db41f443.css";
 //#region src/LabelGroup/LabelGroup.module.css.js
 var LabelGroup_module_css_default = {
 	"Container": "prc-LabelGroup-Container-E-ePP",

package/dist/PageLayout/DragHandle.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+
+//#region src/PageLayout/DragHandle.d.ts
+type DragHandleProps = {
+  /** Ref for imperative ARIA updates during drag */handleRef: React.RefObject<HTMLDivElement>; /** Called once when drag starts with initial cursor X position */
+  onDragStart: (clientX: number) => void; /** Called on each drag tick with cursor position (pointer) or delta (keyboard) */
+  onDrag: (value: number, isKeyboard: boolean) => void; /** Called when drag operation completes */
+  onDragEnd: () => void; /** Reset width on double-click */
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  /**
+   * Accessible name for the slider. Defaults to `'Draggable pane splitter'`.
+   * Provide a context-specific or localized label for standalone usage.
+   * Ignored when `aria-labelledby` is provided.
+   */
+  'aria-label'?: string; /** Id of an element that labels the slider. Takes precedence over `aria-label`. */
+  'aria-labelledby'?: string; /** ARIA slider min value */
+  'aria-valuemin'?: number; /** ARIA slider max value */
+  'aria-valuemax'?: number; /** ARIA slider current value */
+  'aria-valuenow'?: number;
+  /**
+   * Ref to the element that receives drag-time styling/containment optimizations
+   * (e.g. the resizable pane). When omitted, those side effects are skipped.
+   */
+  dragTargetRef?: React.RefObject<HTMLElement | null>;
+  /**
+   * Ref to a content wrapper element that receives drag-time containment.
+   * Only needed for layouts (like PageLayout) that optimize sibling content during drag.
+   */
+  contentWrapperRef?: React.RefObject<HTMLElement | null>;
+  /**
+   * Formats the `aria-valuetext` announced for the current width.
+   * @default valueNow => `Pane width ${valueNow} pixels`
+   */
+  formatValueText?: (valueNow: number) => string; /** Value for the `data-component` attribute. */
+  'data-component'?: string;
+};
+/**
+ * DragHandle - handles all pointer and keyboard interactions for resizing.
+ * ARIA values are set in JSX for SSR accessibility, then updated via DOM
+ * manipulation during drag for performance. The consumer owns writing the width
+ * (via the `onDrag` callback); this component only reports interactions.
+ */
+declare const DragHandle: React.NamedExoticComponent<DragHandleProps>;
+//#endregion
+export { DragHandle, DragHandleProps };

package/dist/PageLayout/DragHandle.js

@@ -0,0 +1,224 @@
+import PageLayout_module_css_default from "./PageLayout.module.css.js";
+import { defaultFormatValueText } from "./usePaneWidth.js";
+import { removeDraggingStyles, setDraggingStyles } from "./paneUtils.js";
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import React, { memo } from "react";
+//#region src/PageLayout/DragHandle.tsx
+const isArrowKey = (key) => key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown";
+const isShrinkKey = (key) => key === "ArrowLeft" || key === "ArrowDown";
+/**
+* DragHandle - handles all pointer and keyboard interactions for resizing.
+* ARIA values are set in JSX for SSR accessibility, then updated via DOM
+* manipulation during drag for performance. The consumer owns writing the width
+* (via the `onDrag` callback); this component only reports interactions.
+*/
+const DragHandle = /*#__PURE__*/ memo(function DragHandle(t0) {
+	const $ = c(41);
+	const { handleRef, onDragStart, onDrag, onDragEnd, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuenow": ariaValueNow, dragTargetRef, contentWrapperRef, formatValueText: t1, "data-component": t2 } = t0;
+	const formatValueText = t1 === void 0 ? defaultFormatValueText : t1;
+	const dataComponent = t2 === void 0 ? "PageLayout.DragHandle" : t2;
+	const stableOnDragStart = React.useRef(onDragStart);
+	const stableOnDrag = React.useRef(onDrag);
+	const stableOnDragEnd = React.useRef(onDragEnd);
+	let t3;
+	if ($[0] !== onDrag || $[1] !== onDragEnd || $[2] !== onDragStart) {
+		t3 = () => {
+			stableOnDragStart.current = onDragStart;
+			stableOnDrag.current = onDrag;
+			stableOnDragEnd.current = onDragEnd;
+		};
+		$[0] = onDrag;
+		$[1] = onDragEnd;
+		$[2] = onDragStart;
+		$[3] = t3;
+	} else t3 = $[3];
+	React.useEffect(t3);
+	const isDraggingRef = React.useRef(false);
+	let t4;
+	if ($[4] !== contentWrapperRef || $[5] !== dragTargetRef || $[6] !== handleRef) {
+		t4 = () => {
+			var _dragTargetRef$curren, _contentWrapperRef$cu;
+			if (isDraggingRef.current) return;
+			setDraggingStyles({
+				handle: handleRef.current,
+				pane: (_dragTargetRef$curren = dragTargetRef === null || dragTargetRef === void 0 ? void 0 : dragTargetRef.current) !== null && _dragTargetRef$curren !== void 0 ? _dragTargetRef$curren : null,
+				contentWrapper: (_contentWrapperRef$cu = contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current) !== null && _contentWrapperRef$cu !== void 0 ? _contentWrapperRef$cu : null
+			});
+			isDraggingRef.current = true;
+		};
+		$[4] = contentWrapperRef;
+		$[5] = dragTargetRef;
+		$[6] = handleRef;
+		$[7] = t4;
+	} else t4 = $[7];
+	const startDragging = t4;
+	let t5;
+	if ($[8] !== contentWrapperRef || $[9] !== dragTargetRef || $[10] !== handleRef) {
+		t5 = () => {
+			var _dragTargetRef$curren2, _contentWrapperRef$cu2;
+			if (!isDraggingRef.current) return;
+			removeDraggingStyles({
+				handle: handleRef.current,
+				pane: (_dragTargetRef$curren2 = dragTargetRef === null || dragTargetRef === void 0 ? void 0 : dragTargetRef.current) !== null && _dragTargetRef$curren2 !== void 0 ? _dragTargetRef$curren2 : null,
+				contentWrapper: (_contentWrapperRef$cu2 = contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current) !== null && _contentWrapperRef$cu2 !== void 0 ? _contentWrapperRef$cu2 : null
+			});
+			isDraggingRef.current = false;
+		};
+		$[8] = contentWrapperRef;
+		$[9] = dragTargetRef;
+		$[10] = handleRef;
+		$[11] = t5;
+	} else t5 = $[11];
+	const endDragging = t5;
+	let t6;
+	if ($[12] !== startDragging) {
+		t6 = (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const target = event.currentTarget;
+			try {
+				target.setPointerCapture(event.pointerId);
+			} catch {}
+			stableOnDragStart.current(event.clientX);
+			startDragging();
+		};
+		$[12] = startDragging;
+		$[13] = t6;
+	} else t6 = $[13];
+	const handlePointerDown = t6;
+	const rafIdRef = React.useRef(null);
+	const pendingClientXRef = React.useRef(null);
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (event_0) => {
+			if (!isDraggingRef.current) return;
+			event_0.preventDefault();
+			pendingClientXRef.current = event_0.clientX;
+			if (rafIdRef.current === null) rafIdRef.current = requestAnimationFrame(() => {
+				rafIdRef.current = null;
+				if (pendingClientXRef.current !== null) {
+					stableOnDrag.current(pendingClientXRef.current, false);
+					pendingClientXRef.current = null;
+				}
+			});
+		};
+		$[14] = t7;
+	} else t7 = $[14];
+	const handlePointerMove = t7;
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (event_1) => {
+			if (!isDraggingRef.current) return;
+			event_1.preventDefault();
+		};
+		$[15] = t8;
+	} else t8 = $[15];
+	const handlePointerUp = t8;
+	let t9;
+	if ($[16] !== endDragging) {
+		t9 = () => {
+			if (!isDraggingRef.current) return;
+			if (rafIdRef.current !== null) {
+				cancelAnimationFrame(rafIdRef.current);
+				rafIdRef.current = null;
+				pendingClientXRef.current = null;
+			}
+			endDragging();
+			stableOnDragEnd.current();
+		};
+		$[16] = endDragging;
+		$[17] = t9;
+	} else t9 = $[17];
+	const handleLostPointerCapture = t9;
+	let t10;
+	if ($[18] !== startDragging) {
+		t10 = (event_2) => {
+			if (!isArrowKey(event_2.key)) return;
+			event_2.preventDefault();
+			const delta = isShrinkKey(event_2.key) ? -3 : 3;
+			if (!isDraggingRef.current) startDragging();
+			stableOnDrag.current(delta, true);
+		};
+		$[18] = startDragging;
+		$[19] = t10;
+	} else t10 = $[19];
+	const handleKeyDown = t10;
+	let t11;
+	if ($[20] !== endDragging) {
+		t11 = (event_3) => {
+			if (!isArrowKey(event_3.key)) return;
+			event_3.preventDefault();
+			endDragging();
+			stableOnDragEnd.current();
+		};
+		$[20] = endDragging;
+		$[21] = t11;
+	} else t11 = $[21];
+	const handleKeyUp = t11;
+	let t12;
+	let t13;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = () => () => {
+			if (rafIdRef.current !== null) {
+				cancelAnimationFrame(rafIdRef.current);
+				rafIdRef.current = null;
+			}
+		};
+		t13 = [];
+		$[22] = t12;
+		$[23] = t13;
+	} else {
+		t12 = $[22];
+		t13 = $[23];
+	}
+	React.useEffect(t12, t13);
+	const t14 = ariaLabelledBy ? void 0 : ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Draggable pane splitter";
+	let t15;
+	if ($[24] !== ariaValueNow || $[25] !== formatValueText) {
+		t15 = ariaValueNow !== void 0 ? formatValueText(ariaValueNow) : void 0;
+		$[24] = ariaValueNow;
+		$[25] = formatValueText;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== ariaLabelledBy || $[28] !== ariaValueMax || $[29] !== ariaValueMin || $[30] !== ariaValueNow || $[31] !== dataComponent || $[32] !== handleKeyDown || $[33] !== handleKeyUp || $[34] !== handleLostPointerCapture || $[35] !== handlePointerDown || $[36] !== handleRef || $[37] !== onDoubleClick || $[38] !== t14 || $[39] !== t15) {
+		t16 = /*#__PURE__*/ jsx("div", {
+			ref: handleRef,
+			className: PageLayout_module_css_default.DraggableHandle,
+			"data-component": dataComponent,
+			role: "slider",
+			"aria-label": t14,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-valuemin": ariaValueMin,
+			"aria-valuemax": ariaValueMax,
+			"aria-valuenow": ariaValueNow,
+			"aria-valuetext": t15,
+			tabIndex: 0,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerUp,
+			onLostPointerCapture: handleLostPointerCapture,
+			onKeyDown: handleKeyDown,
+			onKeyUp: handleKeyUp,
+			onDoubleClick
+		});
+		$[27] = ariaLabelledBy;
+		$[28] = ariaValueMax;
+		$[29] = ariaValueMin;
+		$[30] = ariaValueNow;
+		$[31] = dataComponent;
+		$[32] = handleKeyDown;
+		$[33] = handleKeyUp;
+		$[34] = handleLostPointerCapture;
+		$[35] = handlePointerDown;
+		$[36] = handleRef;
+		$[37] = onDoubleClick;
+		$[38] = t14;
+		$[39] = t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	return t16;
+});
+//#endregion
+export { DragHandle };

package/dist/PageLayout/PageLayout.js

@@ -7,14 +7,12 @@ import { useOverflow } from "../hooks/useOverflow.js";
 import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
 import PageLayout_module_css_default from "./PageLayout.module.css.js";
 import { isCustomWidthOptions, isPaneWidth, updateAriaValues, usePaneWidth } from "./usePaneWidth.js";
-import { removeDraggingStyles, setDraggingStyles } from "./paneUtils.js";
+import { DragHandle } from "./DragHandle.js";
 import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { memo, useRef } from "react";
 //#region src/PageLayout/PageLayout.tsx
-const isArrowKey = (key) => key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown";
-const isShrinkKey = (key) => key === "ArrowLeft" || key === "ArrowDown";
 const PageLayoutContext = /*#__PURE__*/ React.createContext({
 	padding: "normal",
 	rowGap: "normal",
@@ -267,9 +265,9 @@ const VerticalDivider = /*#__PURE__*/ memo((t0) => {
 });
 VerticalDivider.displayName = "VerticalDivider";
 const SidebarDivider = /*#__PURE__*/ memo(function SidebarDivider(t0) {
-	const $ = c(22);
+	const $ = c(23);
 	const { position, divider, resizable, minPaneWidth, maxPaneWidth, currentWidth, currentWidthRef, handleRef, sidebarRef, dragStartClientXRef, dragStartWidthRef, dragMaxWidthRef, getMaxPaneWidth, getDefaultWidth, saveWidth } = t0;
-	const { columnGap } = React.useContext(PageLayoutContext);
+	const { columnGap, sidebarContentWrapperRef } = React.useContext(PageLayoutContext);
 	const t1 = resizable ? "line" : divider;
 	const t2 = `var(--spacing-${columnGap})`;
 	let t3;
@@ -280,9 +278,11 @@ const SidebarDivider = /*#__PURE__*/ memo(function SidebarDivider(t0) {
 	} else t3 = $[1];
 	const t4 = t3;
 	let t5;
-	if ($[2] !== currentWidth || $[3] !== currentWidthRef || $[4] !== dragMaxWidthRef || $[5] !== dragStartClientXRef || $[6] !== dragStartWidthRef || $[7] !== getDefaultWidth || $[8] !== getMaxPaneWidth || $[9] !== handleRef || $[10] !== maxPaneWidth || $[11] !== minPaneWidth || $[12] !== position || $[13] !== resizable || $[14] !== saveWidth || $[15] !== sidebarRef) {
+	if ($[2] !== currentWidth || $[3] !== currentWidthRef || $[4] !== dragMaxWidthRef || $[5] !== dragStartClientXRef || $[6] !== dragStartWidthRef || $[7] !== getDefaultWidth || $[8] !== getMaxPaneWidth || $[9] !== handleRef || $[10] !== maxPaneWidth || $[11] !== minPaneWidth || $[12] !== position || $[13] !== resizable || $[14] !== saveWidth || $[15] !== sidebarContentWrapperRef || $[16] !== sidebarRef) {
 		t5 = resizable ? /*#__PURE__*/ jsx(DragHandle, {
 			handleRef,
+			dragTargetRef: sidebarRef,
+			contentWrapperRef: sidebarContentWrapperRef,
 			"aria-valuemin": minPaneWidth,
 			"aria-valuemax": maxPaneWidth,
 			"aria-valuenow": currentWidth,
@@ -347,11 +347,12 @@ const SidebarDivider = /*#__PURE__*/ memo(function SidebarDivider(t0) {
 		$[12] = position;
 		$[13] = resizable;
 		$[14] = saveWidth;
-		$[15] = sidebarRef;
-		$[16] = t5;
-	} else t5 = $[16];
+		$[15] = sidebarContentWrapperRef;
+		$[16] = sidebarRef;
+		$[17] = t5;
+	} else t5 = $[17];
 	let t6;
-	if ($[17] !== position || $[18] !== t1 || $[19] !== t4 || $[20] !== t5) {
+	if ($[18] !== position || $[19] !== t1 || $[20] !== t4 || $[21] !== t5) {
 		t6 = /*#__PURE__*/ jsx(VerticalDivider, {
 			variant: t1,
 			position,
@@ -359,212 +360,14 @@ const SidebarDivider = /*#__PURE__*/ memo(function SidebarDivider(t0) {
 			style: t4,
 			children: t5
 		});
-		$[17] = position;
-		$[18] = t1;
-		$[19] = t4;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
+		$[18] = position;
+		$[19] = t1;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
 	return t6;
 });
-/**
-* DragHandle - handles all pointer and keyboard interactions for resizing
-* ARIA values are set in JSX for SSR accessibility,
-* then updated via DOM manipulation during drag for performance
-*/
-const DragHandle = /*#__PURE__*/ memo(function DragHandle(t0) {
-	const $ = c(35);
-	const { handleRef, onDragStart, onDrag, onDragEnd, onDoubleClick, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuenow": ariaValueNow } = t0;
-	const stableOnDragStart = React.useRef(onDragStart);
-	const stableOnDrag = React.useRef(onDrag);
-	const stableOnDragEnd = React.useRef(onDragEnd);
-	let t1;
-	if ($[0] !== onDrag || $[1] !== onDragEnd || $[2] !== onDragStart) {
-		t1 = () => {
-			stableOnDragStart.current = onDragStart;
-			stableOnDrag.current = onDrag;
-			stableOnDragEnd.current = onDragEnd;
-		};
-		$[0] = onDrag;
-		$[1] = onDragEnd;
-		$[2] = onDragStart;
-		$[3] = t1;
-	} else t1 = $[3];
-	React.useEffect(t1);
-	const { paneRef, contentWrapperRef } = React.useContext(PageLayoutContext);
-	const isDraggingRef = React.useRef(false);
-	let t2;
-	if ($[4] !== contentWrapperRef || $[5] !== handleRef || $[6] !== paneRef) {
-		t2 = () => {
-			if (isDraggingRef.current) return;
-			setDraggingStyles({
-				handle: handleRef.current,
-				pane: paneRef.current,
-				contentWrapper: contentWrapperRef.current
-			});
-			isDraggingRef.current = true;
-		};
-		$[4] = contentWrapperRef;
-		$[5] = handleRef;
-		$[6] = paneRef;
-		$[7] = t2;
-	} else t2 = $[7];
-	const startDragging = t2;
-	let t3;
-	if ($[8] !== contentWrapperRef || $[9] !== handleRef || $[10] !== paneRef) {
-		t3 = () => {
-			if (!isDraggingRef.current) return;
-			removeDraggingStyles({
-				handle: handleRef.current,
-				pane: paneRef.current,
-				contentWrapper: contentWrapperRef.current
-			});
-			isDraggingRef.current = false;
-		};
-		$[8] = contentWrapperRef;
-		$[9] = handleRef;
-		$[10] = paneRef;
-		$[11] = t3;
-	} else t3 = $[11];
-	const endDragging = t3;
-	let t4;
-	if ($[12] !== startDragging) {
-		t4 = (event) => {
-			if (event.button !== 0) return;
-			event.preventDefault();
-			const target = event.currentTarget;
-			try {
-				target.setPointerCapture(event.pointerId);
-			} catch {}
-			stableOnDragStart.current(event.clientX);
-			startDragging();
-		};
-		$[12] = startDragging;
-		$[13] = t4;
-	} else t4 = $[13];
-	const handlePointerDown = t4;
-	const rafIdRef = React.useRef(null);
-	const pendingClientXRef = React.useRef(null);
-	let t5;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = (event_0) => {
-			if (!isDraggingRef.current) return;
-			event_0.preventDefault();
-			pendingClientXRef.current = event_0.clientX;
-			if (rafIdRef.current === null) rafIdRef.current = requestAnimationFrame(() => {
-				rafIdRef.current = null;
-				if (pendingClientXRef.current !== null) {
-					stableOnDrag.current(pendingClientXRef.current, false);
-					pendingClientXRef.current = null;
-				}
-			});
-		};
-		$[14] = t5;
-	} else t5 = $[14];
-	const handlePointerMove = t5;
-	let t6;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = (event_1) => {
-			if (!isDraggingRef.current) return;
-			event_1.preventDefault();
-		};
-		$[15] = t6;
-	} else t6 = $[15];
-	const handlePointerUp = t6;
-	let t7;
-	if ($[16] !== endDragging) {
-		t7 = () => {
-			if (!isDraggingRef.current) return;
-			if (rafIdRef.current !== null) {
-				cancelAnimationFrame(rafIdRef.current);
-				rafIdRef.current = null;
-				pendingClientXRef.current = null;
-			}
-			endDragging();
-			stableOnDragEnd.current();
-		};
-		$[16] = endDragging;
-		$[17] = t7;
-	} else t7 = $[17];
-	const handleLostPointerCapture = t7;
-	let t8;
-	if ($[18] !== startDragging) {
-		t8 = (event_2) => {
-			if (!isArrowKey(event_2.key)) return;
-			event_2.preventDefault();
-			const delta = isShrinkKey(event_2.key) ? -3 : 3;
-			if (!isDraggingRef.current) startDragging();
-			stableOnDrag.current(delta, true);
-		};
-		$[18] = startDragging;
-		$[19] = t8;
-	} else t8 = $[19];
-	const handleKeyDown = t8;
-	let t9;
-	if ($[20] !== endDragging) {
-		t9 = (event_3) => {
-			if (!isArrowKey(event_3.key)) return;
-			event_3.preventDefault();
-			endDragging();
-			stableOnDragEnd.current();
-		};
-		$[20] = endDragging;
-		$[21] = t9;
-	} else t9 = $[21];
-	const handleKeyUp = t9;
-	let t10;
-	let t11;
-	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = () => () => {
-			if (rafIdRef.current !== null) {
-				cancelAnimationFrame(rafIdRef.current);
-				rafIdRef.current = null;
-			}
-		};
-		t11 = [];
-		$[22] = t10;
-		$[23] = t11;
-	} else {
-		t10 = $[22];
-		t11 = $[23];
-	}
-	React.useEffect(t10, t11);
-	const t12 = ariaValueNow !== void 0 ? `Pane width ${ariaValueNow} pixels` : void 0;
-	let t13;
-	if ($[24] !== ariaValueMax || $[25] !== ariaValueMin || $[26] !== ariaValueNow || $[27] !== handleKeyDown || $[28] !== handleKeyUp || $[29] !== handleLostPointerCapture || $[30] !== handlePointerDown || $[31] !== handleRef || $[32] !== onDoubleClick || $[33] !== t12) {
-		t13 = /*#__PURE__*/ jsx("div", {
-			ref: handleRef,
-			className: PageLayout_module_css_default.DraggableHandle,
-			"data-component": "PageLayout.DragHandle",
-			role: "slider",
-			"aria-label": "Draggable pane splitter",
-			"aria-valuemin": ariaValueMin,
-			"aria-valuemax": ariaValueMax,
-			"aria-valuenow": ariaValueNow,
-			"aria-valuetext": t12,
-			tabIndex: 0,
-			onPointerDown: handlePointerDown,
-			onPointerMove: handlePointerMove,
-			onPointerUp: handlePointerUp,
-			onLostPointerCapture: handleLostPointerCapture,
-			onKeyDown: handleKeyDown,
-			onKeyUp: handleKeyUp,
-			onDoubleClick
-		});
-		$[24] = ariaValueMax;
-		$[25] = ariaValueMin;
-		$[26] = ariaValueNow;
-		$[27] = handleKeyDown;
-		$[28] = handleKeyUp;
-		$[29] = handleLostPointerCapture;
-		$[30] = handlePointerDown;
-		$[31] = handleRef;
-		$[32] = onDoubleClick;
-		$[33] = t12;
-		$[34] = t13;
-	} else t13 = $[34];
-	return t13;
-});
 const Header = (t0) => {
 	const $ = c(29);
 	const { "aria-label": label, "aria-labelledby": labelledBy, padding: t1, divider: t2, dividerWhenNarrow: t3, hidden: t4, children, style, className, "data-component": t5 } = t0;
@@ -745,7 +548,7 @@ const overflowProps = {
 	role: "region"
 };
 const Pane = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
-	const $ = c(97);
+	const $ = c(98);
 	const { "aria-label": label, "aria-labelledby": labelledBy, position: t1, positionWhenNarrow: t2, width: t3, minWidth: t4, currentWidth: controlledWidth, onResizeEnd, padding: t5, resizable: t6, widthStorageKey: t7, divider: t8, dividerWhenNarrow: t9, sticky: t10, offsetHeader: t11, hidden: t12, children, id, className, style, "data-component": t13 } = t0;
 	const responsivePosition = t1 === void 0 ? "end" : t1;
 	const positionWhenNarrow = t2 === void 0 ? "inherit" : t2;
@@ -998,9 +801,11 @@ const Pane = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 	} else t48 = $[70];
 	const t49 = t48;
 	let t50;
-	if ($[71] !== currentWidth || $[72] !== currentWidthRef || $[73] !== getDefaultWidth || $[74] !== getMaxPaneWidth || $[75] !== maxPaneWidth || $[76] !== minPaneWidth || $[77] !== paneRef || $[78] !== position || $[79] !== resizable || $[80] !== saveWidth) {
+	if ($[71] !== contentWrapperRef || $[72] !== currentWidth || $[73] !== currentWidthRef || $[74] !== getDefaultWidth || $[75] !== getMaxPaneWidth || $[76] !== maxPaneWidth || $[77] !== minPaneWidth || $[78] !== paneRef || $[79] !== position || $[80] !== resizable || $[81] !== saveWidth) {
 		t50 = resizable ? /*#__PURE__*/ jsx(DragHandle, {
 			handleRef,
+			dragTargetRef: paneRef,
+			contentWrapperRef,
 			"aria-valuemin": minPaneWidth,
 			"aria-valuemax": maxPaneWidth,
 			"aria-valuenow": currentWidth,
@@ -1052,20 +857,21 @@ const Pane = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 				saveWidth(resetWidth);
 			}
 		}) : null;
-		$[71] = currentWidth;
-		$[72] = currentWidthRef;
-		$[73] = getDefaultWidth;
-		$[74] = getMaxPaneWidth;
-		$[75] = maxPaneWidth;
-		$[76] = minPaneWidth;
-		$[77] = paneRef;
-		$[78] = position;
-		$[79] = resizable;
-		$[80] = saveWidth;
-		$[81] = t50;
-	} else t50 = $[81];
+		$[71] = contentWrapperRef;
+		$[72] = currentWidth;
+		$[73] = currentWidthRef;
+		$[74] = getDefaultWidth;
+		$[75] = getMaxPaneWidth;
+		$[76] = maxPaneWidth;
+		$[77] = minPaneWidth;
+		$[78] = paneRef;
+		$[79] = position;
+		$[80] = resizable;
+		$[81] = saveWidth;
+		$[82] = t50;
+	} else t50 = $[82];
 	let t51;
-	if ($[82] !== positionProp || $[83] !== resizable || $[84] !== t46 || $[85] !== t49 || $[86] !== t50) {
+	if ($[83] !== positionProp || $[84] !== resizable || $[85] !== t46 || $[86] !== t49 || $[87] !== t50) {
 		t51 = /*#__PURE__*/ jsx(VerticalDivider, {
 			variant: t46,
 			draggable: resizable,
@@ -1074,15 +880,15 @@ const Pane = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 			style: t49,
 			children: t50
 		});
-		$[82] = positionProp;
-		$[83] = resizable;
-		$[84] = t46;
-		$[85] = t49;
-		$[86] = t50;
-		$[87] = t51;
-	} else t51 = $[87];
+		$[83] = positionProp;
+		$[84] = resizable;
+		$[85] = t46;
+		$[86] = t49;
+		$[87] = t50;
+		$[88] = t51;
+	} else t51 = $[88];
 	let t52;
-	if ($[88] !== t19 || $[89] !== t24 || $[90] !== t25 || $[91] !== t26 || $[92] !== t27 || $[93] !== t32 || $[94] !== t45 || $[95] !== t51) {
+	if ($[89] !== t19 || $[90] !== t24 || $[91] !== t25 || $[92] !== t26 || $[93] !== t27 || $[94] !== t32 || $[95] !== t45 || $[96] !== t51) {
 		t52 = /*#__PURE__*/ jsxs("div", {
 			className: t19,
 			style: t24,
@@ -1095,16 +901,16 @@ const Pane = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 				t51
 			]
 		});
-		$[88] = t19;
-		$[89] = t24;
-		$[90] = t25;
-		$[91] = t26;
-		$[92] = t27;
-		$[93] = t32;
-		$[94] = t45;
-		$[95] = t51;
-		$[96] = t52;
-	} else t52 = $[96];
+		$[89] = t19;
+		$[90] = t24;
+		$[91] = t25;
+		$[92] = t26;
+		$[93] = t27;
+		$[94] = t32;
+		$[95] = t45;
+		$[96] = t51;
+		$[97] = t52;
+	} else t52 = $[97];
 	return t52;
 });
 Pane.displayName = "PageLayout.Pane";

package/dist/PageLayout/index.d.ts

@@ -1,2 +1,4 @@
+import { CustomWidthOptions, PaneWidth, PaneWidthValue, UsePaneWidthOptions, UsePaneWidthResult, defaultPaneWidth, usePaneWidth } from "./usePaneWidth.js";
 import { PageLayout, PageLayoutContentProps, PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneBaseProps, PageLayoutPaneProps, PageLayoutProps, PageLayoutSidebarBaseProps, PageLayoutSidebarProps } from "./PageLayout.js";
-export { PageLayout, PageLayoutContentProps, PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneBaseProps, PageLayoutPaneProps, PageLayoutProps, PageLayoutSidebarBaseProps, PageLayoutSidebarProps };
+import { DragHandle, DragHandleProps } from "./DragHandle.js";
+export { type CustomWidthOptions, DragHandle, type DragHandleProps, PageLayout, PageLayoutContentProps, PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneBaseProps, PageLayoutPaneProps, PageLayoutProps, PageLayoutSidebarBaseProps, PageLayoutSidebarProps, type PaneWidth, type PaneWidthValue, type UsePaneWidthOptions, type UsePaneWidthResult, defaultPaneWidth, usePaneWidth };

package/dist/PageLayout/usePaneWidth.d.ts

@@ -14,5 +14,67 @@ type PaneWidth = 'small' | 'medium' | 'large';
  * - `CustomWidthOptions`: Explicit min/default/max constraints
  */
 type PaneWidthValue = PaneWidth | CustomWidthOptions;
+type UsePaneWidthOptions = {
+  width: PaneWidthValue;
+  minWidth: number;
+  resizable: boolean; /** localStorage key for persisting width. When undefined, localStorage is not used. */
+  widthStorageKey?: string;
+  paneRef: React.RefObject<HTMLDivElement | null>;
+  handleRef: React.RefObject<HTMLDivElement | null>;
+  /**
+   * Optional ref to the content wrapper element. Only used by PageLayout for its
+   * viewport/content math during resize. Standalone consumers can omit this.
+   */
+  contentWrapperRef?: React.RefObject<HTMLDivElement | null>;
+  /**
+   * When true, custom max width values are capped to the viewport-based max.
+   * This prevents overflow in non-wrapping flex layouts (e.g., Sidebar).
+   * @default false
+   */
+  constrainToViewport?: boolean; /** Callback fired when a resize operation ends (drag release or keyboard key up) */
+  onResizeEnd?: (width: number) => void; /** Current/controlled width value in pixels (used instead of internal state; default from `width` is still used for reset) */
+  currentWidth?: number;
+  /**
+   * Formats the `aria-valuetext` written during mount and viewport resize.
+   * Should match the formatter passed to `DragHandle` so screen-reader output
+   * stays consistent across drag, mount, and resize updates.
+   * @default valueNow => `Pane width ${valueNow} pixels`
+   */
+  formatValueText?: (valueNow: number) => string;
+};
+type UsePaneWidthResult = {
+  /** Current width for React state (used in ARIA attributes) */currentWidth: number; /** Mutable ref tracking width during drag operations */
+  currentWidthRef: React.MutableRefObject<number>; /** Minimum allowed pane width */
+  minPaneWidth: number; /** Maximum allowed pane width (updates on viewport resize) */
+  maxPaneWidth: number; /** Calculate current max width constraint */
+  getMaxPaneWidth: () => number; /** Persist width to localStorage and sync React state */
+  saveWidth: (value: number) => void; /** Reset to default width */
+  getDefaultWidth: () => number;
+};
+/** Default widths for preset size options */
+declare const defaultPaneWidth: Record<PaneWidth, number>;
+/**
+ * Manages pane width state with storage persistence and viewport constraints.
+ * Handles initialization from storage, clamping on viewport resize, and provides
+ * functions to save and reset width.
+ *
+ * Storage behavior:
+ * - When `resizable` is `true` and `onResizeEnd` is not provided: Uses localStorage
+ * - When `onResizeEnd` is provided: Calls the callback instead of localStorage
+ * - When `resizable` is `false` or `undefined`: Not resizable, no persistence
+ */
+declare function usePaneWidth({
+  width,
+  minWidth,
+  resizable,
+  widthStorageKey,
+  paneRef,
+  handleRef,
+  contentWrapperRef,
+  constrainToViewport,
+  onResizeEnd,
+  currentWidth: controlledWidth,
+  formatValueText
+}: UsePaneWidthOptions): UsePaneWidthResult;
 //#endregion
-export { CustomWidthOptions, PaneWidth, PaneWidthValue };
+export { CustomWidthOptions, PaneWidth, PaneWidthValue, UsePaneWidthOptions, UsePaneWidthResult, defaultPaneWidth, usePaneWidth };

package/dist/PageLayout/usePaneWidth.js

@@ -47,13 +47,19 @@ function getMaxWidthDiffFromViewport() {
 	if (!canUseDOM) return DEFAULT_MAX_WIDTH_DIFF;
 	return window.innerWidth >= DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT ? WIDE_MAX_WIDTH_DIFF : DEFAULT_MAX_WIDTH_DIFF;
 }
-const updateAriaValues = (handle, values) => {
+/**
+* Default formatter for the drag handle's `aria-valuetext`.
+* Kept in sync between the rendered attribute and drag-time DOM writes.
+*/
+const defaultFormatValueText = (valueNow) => `Pane width ${valueNow} pixels`;
+const updateAriaValues = (handle, values, formatValueText) => {
 	if (!handle) return;
+	const format = formatValueText !== null && formatValueText !== void 0 ? formatValueText : defaultFormatValueText;
 	if (values.min !== void 0) handle.setAttribute("aria-valuemin", String(values.min));
 	if (values.max !== void 0) handle.setAttribute("aria-valuemax", String(values.max));
 	if (values.current !== void 0) {
 		handle.setAttribute("aria-valuenow", String(values.current));
-		handle.setAttribute("aria-valuetext", `Pane width ${values.current} pixels`);
+		handle.setAttribute("aria-valuetext", format(values.current));
 	}
 };
 const localStoragePersister = {
@@ -84,8 +90,8 @@ const localStoragePersister = {
 * - When `resizable` is `false` or `undefined`: Not resizable, no persistence
 */
 function usePaneWidth(t0) {
-	const $ = c(42);
-	const { width, minWidth, resizable, widthStorageKey, paneRef, handleRef, contentWrapperRef, constrainToViewport: t1, onResizeEnd, currentWidth: controlledWidth } = t0;
+	const $ = c(44);
+	const { width, minWidth, resizable, widthStorageKey, paneRef, handleRef, contentWrapperRef, constrainToViewport: t1, onResizeEnd, currentWidth: controlledWidth, formatValueText } = t0;
 	const constrainToViewport = t1 === void 0 ? false : t1;
 	const isCustomWidth = isCustomWidthOptions(width);
 	const minPaneWidth = isCustomWidth ? parseInt(width.min, 10) : minWidth;
@@ -218,10 +224,20 @@ function usePaneWidth(t0) {
 		$[25] = t11;
 	} else t11 = $[25];
 	useIsomorphicLayoutEffect(t11);
+	const formatValueTextRef = React.useRef(formatValueText);
 	let t12;
-	let t13;
-	if ($[26] !== constrainToViewport || $[27] !== contentWrapperRef || $[28] !== customMaxWidth || $[29] !== handleRef || $[30] !== minPaneWidth || $[31] !== paneRef || $[32] !== resizable) {
+	if ($[26] !== formatValueText) {
 		t12 = () => {
+			formatValueTextRef.current = formatValueText;
+		};
+		$[26] = formatValueText;
+		$[27] = t12;
+	} else t12 = $[27];
+	useIsomorphicLayoutEffect(t12);
+	let t13;
+	let t14;
+	if ($[28] !== constrainToViewport || $[29] !== contentWrapperRef || $[30] !== customMaxWidth || $[31] !== handleRef || $[32] !== minPaneWidth || $[33] !== paneRef || $[34] !== resizable) {
+		t13 = () => {
 			var _paneRef$current3;
 			if (!resizable) return;
 			let lastViewportWidth = window.innerWidth;
@@ -242,7 +258,7 @@ function usePaneWidth(t0) {
 				updateAriaValues(handleRef.current, {
 					max: actualMax,
 					current: currentWidthRef.current
-				});
+				}, formatValueTextRef.current);
 				if (actualMax !== maxPaneWidthRef.current || wasClamped) {
 					maxPaneWidthRef.current = actualMax;
 					startTransition(() => {
@@ -259,7 +275,7 @@ function usePaneWidth(t0) {
 				min: minPaneWidth,
 				max: initialMax,
 				current: currentWidthRef.current
-			});
+			}, formatValueTextRef.current);
 			startTransition(() => {
 				setMaxPaneWidth(initialMax);
 			});
@@ -274,14 +290,14 @@ function usePaneWidth(t0) {
 				if (isResizing) return;
 				isResizing = true;
 				(_paneRef$current4 = paneRef.current) === null || _paneRef$current4 === void 0 || _paneRef$current4.setAttribute("data-dragging", "true");
-				(_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 || _contentWrapperRef$cu.setAttribute("data-dragging", "true");
+				contentWrapperRef === null || contentWrapperRef === void 0 || (_contentWrapperRef$cu = contentWrapperRef.current) == null || _contentWrapperRef$cu.setAttribute("data-dragging", "true");
 			};
 			const endResizeOptimizations = () => {
 				var _paneRef$current5, _contentWrapperRef$cu2;
 				if (!isResizing) return;
 				isResizing = false;
 				(_paneRef$current5 = paneRef.current) === null || _paneRef$current5 === void 0 || _paneRef$current5.removeAttribute("data-dragging");
-				(_contentWrapperRef$cu2 = contentWrapperRef.current) === null || _contentWrapperRef$cu2 === void 0 || _contentWrapperRef$cu2.removeAttribute("data-dragging");
+				contentWrapperRef === null || contentWrapperRef === void 0 || (_contentWrapperRef$cu2 = contentWrapperRef.current) == null || _contentWrapperRef$cu2.removeAttribute("data-dragging");
 			};
 			const handleResize = () => {
 				startResizeOptimizations();
@@ -312,7 +328,7 @@ function usePaneWidth(t0) {
 				window.removeEventListener("resize", handleResize);
 			};
 		};
-		t13 = [
+		t14 = [
 			resizable,
 			customMaxWidth,
 			constrainToViewport,
@@ -321,23 +337,23 @@ function usePaneWidth(t0) {
 			handleRef,
 			contentWrapperRef
 		];
-		$[26] = constrainToViewport;
-		$[27] = contentWrapperRef;
-		$[28] = customMaxWidth;
-		$[29] = handleRef;
-		$[30] = minPaneWidth;
-		$[31] = paneRef;
-		$[32] = resizable;
-		$[33] = t12;
-		$[34] = t13;
+		$[28] = constrainToViewport;
+		$[29] = contentWrapperRef;
+		$[30] = customMaxWidth;
+		$[31] = handleRef;
+		$[32] = minPaneWidth;
+		$[33] = paneRef;
+		$[34] = resizable;
+		$[35] = t13;
+		$[36] = t14;
 	} else {
-		t12 = $[33];
-		t13 = $[34];
+		t13 = $[35];
+		t14 = $[36];
 	}
-	useIsomorphicLayoutEffect(t12, t13);
-	let t14;
-	if ($[35] !== currentWidth || $[36] !== getDefaultWidth || $[37] !== getMaxPaneWidth || $[38] !== maxPaneWidth || $[39] !== minPaneWidth || $[40] !== saveWidth) {
-		t14 = {
+	useIsomorphicLayoutEffect(t13, t14);
+	let t15;
+	if ($[37] !== currentWidth || $[38] !== getDefaultWidth || $[39] !== getMaxPaneWidth || $[40] !== maxPaneWidth || $[41] !== minPaneWidth || $[42] !== saveWidth) {
+		t15 = {
 			currentWidth,
 			currentWidthRef,
 			minPaneWidth,
@@ -346,15 +362,15 @@ function usePaneWidth(t0) {
 			saveWidth,
 			getDefaultWidth
 		};
-		$[35] = currentWidth;
-		$[36] = getDefaultWidth;
-		$[37] = getMaxPaneWidth;
-		$[38] = maxPaneWidth;
-		$[39] = minPaneWidth;
-		$[40] = saveWidth;
-		$[41] = t14;
-	} else t14 = $[41];
-	return t14;
+		$[37] = currentWidth;
+		$[38] = getDefaultWidth;
+		$[39] = getMaxPaneWidth;
+		$[40] = maxPaneWidth;
+		$[41] = minPaneWidth;
+		$[42] = saveWidth;
+		$[43] = t15;
+	} else t15 = $[43];
+	return t15;
 }
 //#endregion
-export { DEFAULT_MAX_WIDTH_DIFF, DEFAULT_SIDEBAR_MAX_WIDTH_DIFF, defaultPaneWidth, getDefaultPaneWidth, getMaxWidthDiffFromViewport, isCustomWidthOptions, isPaneWidth, updateAriaValues, usePaneWidth };
+export { DEFAULT_MAX_WIDTH_DIFF, DEFAULT_SIDEBAR_MAX_WIDTH_DIFF, defaultFormatValueText, defaultPaneWidth, getDefaultPaneWidth, getMaxWidthDiffFromViewport, isCustomWidthOptions, isPaneWidth, updateAriaValues, usePaneWidth };

package/dist/index.d.ts

@@ -16,7 +16,9 @@ import { LinkButton, LinkButtonProps } from "./Button/LinkButton.js";
 import { ButtonComponent } from "./Button/Button.js";
 import { ButtonBase } from "./Button/ButtonBase.js";
 import { ResponsiveValue, useResponsiveValue } from "./hooks/useResponsiveValue.js";
+import { CustomWidthOptions, PaneWidth, PaneWidthValue, UsePaneWidthOptions, UsePaneWidthResult, defaultPaneWidth, usePaneWidth } from "./PageLayout/usePaneWidth.js";
 import { PageLayout, PageLayoutContentProps, PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneProps, PageLayoutProps } from "./PageLayout/PageLayout.js";
+import { DragHandle, DragHandleProps } from "./PageLayout/DragHandle.js";
 import { SplitPageLayout, SplitPageLayoutContentProps, SplitPageLayoutFooterProps, SplitPageLayoutHeaderProps, SplitPageLayoutPaneProps, SplitPageLayoutProps } from "./SplitPageLayout/SplitPageLayout.js";
 import useDetails from "./hooks/useDetails.js";
 import useSafeTimeout from "./hooks/useSafeTimeout.js";
@@ -117,4 +119,4 @@ import { ActionsProps, ChildrenPropTypes, PageHeader, PageHeaderProps, TitleArea
 import { SkeletonBox, SkeletonBoxProps } from "./Skeleton/SkeletonBox.js";
 import { ActionMenu, ActionMenuAnchorProps, ActionMenuButtonProps, ActionMenuProps } from "./ActionMenu/ActionMenu.js";
 import Overlay, { OverlayProps } from "./Overlay/Overlay.js";
-export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlButtonProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
+export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlButtonProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };

package/dist/index.js

@@ -28,6 +28,8 @@ import { IconButton } from "./Button/IconButton.js";
 import { LinkButton } from "./Button/LinkButton.js";
 import { ButtonComponent } from "./Button/Button.js";
 import { useResponsiveValue } from "./hooks/useResponsiveValue.js";
+import { defaultPaneWidth, usePaneWidth } from "./PageLayout/usePaneWidth.js";
+import { DragHandle } from "./PageLayout/DragHandle.js";
 import { PageLayout } from "./PageLayout/PageLayout.js";
 import { SplitPageLayout } from "./SplitPageLayout/SplitPageLayout.js";
 import useDetails from "./hooks/useDetails.js";
@@ -92,4 +94,4 @@ import { TreeView } from "./TreeView/TreeView.js";
 import { UnderlineNav } from "./UnderlineNav/index.js";
 import { ActionBar } from "./ActionBar/index.js";
 import { PageHeader } from "./PageHeader/PageHeader.js";
-export { ActionBar, ActionList, ActionMenu, AnchoredOverlay, Autocomplete_default as Autocomplete, Avatar, AvatarStack, Banner, BaseStyles, BranchName_default as BranchName, Breadcrumb, Breadcrumbs_default as Breadcrumbs, ButtonComponent as Button, ButtonBase, ButtonGroup, Checkbox, CheckboxGroup_default as CheckboxGroup, CircleBadge_default as CircleBadge, ConfirmationDialog, CounterLabel, Details, Dialog, Flash, FocusKeys, FormControl_default as FormControl, Header_default as Header, Heading, IconButton, IssueLabelToken, Label_default as Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Pagination_default as Pagination, Popover_default as Popover, Portal_default as Portal, PortalContext, ProgressBar, Radio, RadioGroup_default as RadioGroup, RelativeTime, SegmentedControl, Select_default as Select, SelectPanel, SideNav_default as SideNav, SkeletonBox, Spinner, SplitPageLayout, Stack, StateLabel, SubNav_default as SubNav, Text_default as Text, TextInput_default as TextInput, TextInputWithTokens, Textarea, ThemeProvider, Timeline_default as Timeline, ToggleSwitch, Token, Tooltip, TreeView, Truncate, UnderlineNav, VisuallyHidden, asSlot, createComponent, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
+export { ActionBar, ActionList, ActionMenu, AnchoredOverlay, Autocomplete_default as Autocomplete, Avatar, AvatarStack, Banner, BaseStyles, BranchName_default as BranchName, Breadcrumb, Breadcrumbs_default as Breadcrumbs, ButtonComponent as Button, ButtonBase, ButtonGroup, Checkbox, CheckboxGroup_default as CheckboxGroup, CircleBadge_default as CircleBadge, ConfirmationDialog, CounterLabel, Details, Dialog, DragHandle, Flash, FocusKeys, FormControl_default as FormControl, Header_default as Header, Heading, IconButton, IssueLabelToken, Label_default as Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Pagination_default as Pagination, Popover_default as Popover, Portal_default as Portal, PortalContext, ProgressBar, Radio, RadioGroup_default as RadioGroup, RelativeTime, SegmentedControl, Select_default as Select, SelectPanel, SideNav_default as SideNav, SkeletonBox, Spinner, SplitPageLayout, Stack, StateLabel, SubNav_default as SubNav, Text_default as Text, TextInput_default as TextInput, TextInputWithTokens, Textarea, ThemeProvider, Timeline_default as Timeline, ToggleSwitch, Token, Tooltip, TreeView, Truncate, UnderlineNav, VisuallyHidden, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };

package/dist/internal/components/OverflowObserverProvider.js

@@ -50,7 +50,7 @@ function OverflowObserverProvider(t0) {
 				}
 			}, {
 				root,
-				threshold: [0, 1]
+				threshold: [0, .95]
 			});
 			observerRootRef.current = root;
 			return observerRef.current;
@@ -143,12 +143,12 @@ function OverflowObserverProvider(t0) {
 	return t9;
 }
 /**
-* Treat any target that is not fully visible within the observer root as overflowing. Wrapped items should be fully
-* clipped (`isIntersecting: false`, `intersectionRatio: 0`), but partial ratios also count as overflowing to guard
-* against sub-pixel boundary cases.
+* Treat any target that is not fully visible within the observer root as overflowing. Unwrapped items should be fully
+* visible, but in some scenarios the layout isn't perfectly accurate (ie, in Safari with extra-large text size) so we
+* allow for up to 5% to be clipped before hiding the item.
 */
 function getIsOverflowing(entry) {
-	return !entry.isIntersecting || entry.intersectionRatio < 1;
+	return !entry.isIntersecting || entry.intersectionRatio < .95;
 }
 function supportsIntersectionObserver() {
 	return typeof IntersectionObserver !== "undefined";

package/dist/internal/components/UnderlineTabbedInterface-798ef3cb.css

@@ -0,0 +1,2 @@
+.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border-block:0!important;box-sizing:border-box;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{contain:layout;display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:var(--base-size-32,2rem);line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
+/*# sourceMappingURL=UnderlineTabbedInterface-798ef3cb.css.map */

package/dist/internal/components/UnderlineTabbedInterface-798ef3cb.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,wBAA0B,CAD1B,qBAAsB,CAHtB,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAaE,cAAe,CAXf,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBASF,CAEA,4EATE,kBAAmB,CANnB,iBA8CF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,+BAA2B,CAV3B,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-798ef3cb.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    /* Pin the vertical box model so external border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n    box-sizing: border-box;\n    border-block: 0 !important;\n    padding-block: var(--base-size-8) 0 !important;\n\n    .UnderlineItemList {\n      flex-grow: 1;\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n\n  /* Isolate the ResizeObserver-driven item swapping (UnderlineNav overflow menu / UnderlinePanels)\n  so it can't invalidate ancestor layout. Safe because UnderlineNav's overflow menu is rendered via ActionMenu.Overlay\n  (portal by default), and layout containment does not clip. */\n  contain: layout;\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: var(--base-size-32);\n\n  /* button resets */\n  appearance: none;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  align-items: center;\n\n  @media (hover: hover) {\n    &:hover {\n      text-decoration: none;\n      background-color: var(--bgColor-neutral-muted);\n      transition: background-color 0.12s ease-out;\n    }\n  }\n}\n\n.UnderlineItem:focus {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n  /* where focus-visible is supported, remove the focus box-shadow */\n  &:not(:focus-visible) {\n    box-shadow: none;\n  }\n}\n\n.UnderlineItem:focus-visible {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n  display: block;\n  height: 0;\n  font-weight: var(--base-text-weight-semibold);\n  white-space: nowrap;\n  visibility: hidden;\n  content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n  display: inline-flex;\n  color: var(--fgColor-muted);\n  align-items: center;\n  margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n  margin-inline-start: var(--base-size-8);\n  display: flex;\n  align-items: center;\n}\n\n.UnderlineItem::after {\n  position: absolute;\n  inset: auto 0 0;\n  margin-bottom: calc(-1 * var(--base-size-8));\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n  @media (forced-colors: active) {\n    /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n    background-color: LinkText;\n  }\n}\n\n.LoadingCounter {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1rem;\n  /* 16px */\n  background-color: var(--bgColor-neutral-muted);\n  border-color: var(--borderColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 20px;\n  animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0.2;\n  }\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface.module.css.js

@@ -1,4 +1,4 @@
-import "./UnderlineTabbedInterface-93bd865a.css";
+import "./UnderlineTabbedInterface-798ef3cb.css";
 //#region src/internal/components/UnderlineTabbedInterface.module.css.js
 var UnderlineTabbedInterface_module_css_default = {
 	"UnderlineWrapper": "prc-components-UnderlineWrapper-eT-Yj",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.1-rc.ea8470aaa",
+  "version": "38.33.0-rc.01176969a",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/ActionBar/ActionBar-e63def3c.css

@@ -1,2 +0,0 @@
-.prc-ActionBar-List-9uz46{align-items:flex-start;animation:prc-ActionBar-detect-overflow-mAuJu linear;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative;animation-timeline:scroll(self block)}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-OverflowContainer-AkYZs .prc-ActionBar-OverflowSpacer-tbHkV{height:var(--actionbar-height)}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
-/*# sourceMappingURL=ActionBar-e63def3c.css.map */

package/dist/ActionBar/ActionBar-e63def3c.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAaF,CAVA,uCAEE,cAAe,CAEf,wBAAyB,CACzB,eAKF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-e63def3c.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}

package/dist/LabelGroup/LabelGroup-7d19205a.css

@@ -1,2 +0,0 @@
-.prc-LabelGroup-Container-E-ePP{display:flex;flex-wrap:nowrap;gap:var(--base-size-4,.25rem);line-height:1;max-width:100%;overflow:hidden}.prc-LabelGroup-Container-E-ePP:where([data-overflow=inline]){flex-wrap:wrap}.prc-LabelGroup-Container-E-ePP:where([data-list]){list-style-type:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.prc-LabelGroup-ItemWrapper-GkO4t{align-items:center;display:flex;min-height:28px}.prc-LabelGroup-ItemWrapper--hidden-mdrB0{order:9999;pointer-events:none;visibility:hidden}.prc-LabelGroup-OverlayContainer-duQvd{align-items:flex-start;display:flex}.prc-LabelGroup-OverlayInner-nDXRC{display:flex;flex-wrap:wrap;gap:var(--base-size-4,.25rem)}.prc-LabelGroup-CloseButton-IyLno{flex-shrink:0}
-/*# sourceMappingURL=LabelGroup-7d19205a.css.map */

package/dist/LabelGroup/LabelGroup-7d19205a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/LabelGroup/LabelGroup.module.css.js"],"names":[],"mappings":"AAAA,gCACE,YAAa,CACb,gBAAiB,CACjB,6BAAuB,CAEvB,aAAc,CACd,cAAe,CACf,eAYF,CAVE,8DACE,cACF,CAEA,mDAIE,oBAAqB,CADrB,kBAAmB,CADnB,oBAAqB,CADrB,sBAIF,CAGF,kCAEE,kBAAmB,CADnB,YAAa,CAOb,eACF,CAEA,0CACE,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,uCACE,sBAAuB,CACvB,YACF,CAEA,mCACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,kCACE,aACF","file":"LabelGroup-7d19205a.css","sourcesContent":[".Container {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--base-size-4);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  max-width: 100%;\n  overflow: hidden;\n\n  &:where([data-overflow='inline']) {\n    flex-wrap: wrap;\n  }\n\n  &:where([data-list]) {\n    padding-inline-start: 0;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    list-style-type: none;\n  }\n}\n\n.ItemWrapper {\n  display: flex;\n  align-items: center;\n  /* This min-height matches the height of the expand/collapse button.\n     Without it, the labels/tokens will do a slight layout shift when expanded.\n     This is because the height of the first row will match the token sizes,\n     but the height of the second row will be the height of the collapse button.\n  */\n  min-height: 28px;\n}\n\n.ItemWrapper--hidden {\n  order: 9999;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.OverlayContainer {\n  align-items: flex-start;\n  display: flex;\n}\n\n.OverlayInner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-4);\n}\n\n.CloseButton {\n  flex-shrink: 0;\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css

@@ -1,2 +0,0 @@
-.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border-block:0!important;box-sizing:border-box;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:32px;line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
-/*# sourceMappingURL=UnderlineTabbedInterface-93bd865a.css.map */

package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,wBAA0B,CAD1B,qBAAsB,CAHtB,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAEE,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAyCF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,WAAY,CAVZ,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-93bd865a.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    /* Pin the vertical box model so external border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n    box-sizing: border-box;\n    border-block: 0 !important;\n    padding-block: var(--base-size-8) 0 !important;\n\n    .UnderlineItemList {\n      flex-grow: 1;\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: 32px;\n\n  /* button resets */\n  appearance: none;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  align-items: center;\n\n  @media (hover: hover) {\n    &:hover {\n      text-decoration: none;\n      background-color: var(--bgColor-neutral-muted);\n      transition: background-color 0.12s ease-out;\n    }\n  }\n}\n\n.UnderlineItem:focus {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n  /* where focus-visible is supported, remove the focus box-shadow */\n  &:not(:focus-visible) {\n    box-shadow: none;\n  }\n}\n\n.UnderlineItem:focus-visible {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n  display: block;\n  height: 0;\n  font-weight: var(--base-text-weight-semibold);\n  white-space: nowrap;\n  visibility: hidden;\n  content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n  display: inline-flex;\n  color: var(--fgColor-muted);\n  align-items: center;\n  margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n  margin-inline-start: var(--base-size-8);\n  display: flex;\n  align-items: center;\n}\n\n.UnderlineItem::after {\n  position: absolute;\n  inset: auto 0 0;\n  margin-bottom: calc(-1 * var(--base-size-8));\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n  @media (forced-colors: active) {\n    /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n    background-color: LinkText;\n  }\n}\n\n.LoadingCounter {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1rem;\n  /* 16px */\n  background-color: var(--bgColor-neutral-muted);\n  border-color: var(--borderColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 20px;\n  animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0.2;\n  }\n}\n"]}