@giddaa-housing/ui 3.9.0 → 3.10.0

package/dist/media-gallery-hero.d.ts

@@ -17,6 +17,12 @@ type MediaGalleryItem = {
 type MediaGalleryImagesProps = Omit<React.ComponentProps<"div">, "children"> & VariantProps<typeof mediaGalleryImagesVariants> & {
   images: MediaGalleryItem[];
   currentMedia?: number;
+  /**
+   * @deprecated No longer read. The mobile carousel counter counts its own
+   * slides, since the carousel carries every image. Pass a larger library
+   * figure to `MediaGalleryIndicator` instead, where it labels the link into
+   * the full gallery.
+   */
   totalMediaCount?: number;
   showMobileIndicator?: boolean;
   onMediaClick?: (index: number) => void;
@@ -50,7 +56,7 @@ declare function MediaGalleryTile({ className, image, index, isDesktopTile, onMe
   onMediaClick?: (index: number) => void;
   renderMedia?: (image: MediaGalleryItem, index: number) => React.ReactNode;
 }): React.JSX.Element;
-declare function MediaGalleryImages({ className, currentMedia, imageCount, images, onMediaClick, renderMedia, showMobileIndicator, totalMediaCount, ...props }: MediaGalleryImagesProps): React.JSX.Element;
+declare function MediaGalleryImages({ className, currentMedia, imageCount, images, onMediaClick, renderMedia, showMobileIndicator, totalMediaCount: _totalMediaCount, ...props }: MediaGalleryImagesProps): React.JSX.Element;
 declare function MediaGalleryVideo({ alt, autoPlay, className, controls, label, loop, muted, onPlayClick, playsInline, poster, renderMedia, src, ...props }: MediaGalleryVideoProps): React.JSX.Element;
 declare function MediaGalleryReview({ bordered, className, size, ...props }: MediaGalleryReviewProps): React.JSX.Element;
 declare function MediaGalleryIndicator({ "aria-label": ariaLabel, className, label, onClick, size, totalMediaCount, ...props }: MediaGalleryIndicatorProps): React.JSX.Element;

package/dist/media-gallery-hero.js

@@ -39,8 +39,13 @@ function getTileClassName(index, imageCount) {
 	if (imageCount === 4 && index === 2) return "md:col-start-3 md:row-start-1";
 	return "md:col-start-3 md:row-start-2";
 }
-function getMediaKey(image) {
-	return image.id ?? image.src ?? image.alt ?? "placeholder";
+/**
+* `id` is the only field guaranteed unique, so everything else falls back to a
+* positional key. A listing that reuses one photo twice, or has entries still
+* waiting on a `src`, would otherwise hand React duplicate keys.
+*/
+function getMediaKey(image, index) {
+	return image.id ?? `${image.src ?? image.alt ?? "media"}-${index}`;
 }
 function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick, renderMedia }) {
 	const content = renderMedia?.(image, index) ?? (image.src ? /* @__PURE__ */ jsx(Image, {
@@ -68,6 +73,13 @@ function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick
 		children: content
 	});
 }
+/**
+* Counts slides, not library size. The carousel carries every image it is
+* given — unlike the desktop grid, which shows at most `imageCount` — so the
+* denominator here is the number of slides and nothing else. A larger
+* "View All N Photos" figure belongs on `MediaGalleryIndicator`, where it
+* labels a link into the full gallery rather than a position in this one.
+*/
 function MobileGalleryCounter({ total }) {
 	const { selectedIndex } = useCarousel();
 	return /* @__PURE__ */ jsx(GalleryIndicator, {
@@ -77,7 +89,12 @@ function MobileGalleryCounter({ total }) {
 		totalPhotos: total
 	});
 }
-function MobileMediaCarousel({ currentMedia, images, mediaTotal, onMediaClick, renderMedia, showMobileIndicator }) {
+/**
+* The mobile view of the hero. Unlike the desktop bento grid, which arranges a
+* fixed 1–4 tiles, this carries every image it is given — `imageCount` caps the
+* grid's layout, never this.
+*/
+function MobileMediaCarousel({ currentMedia, images, onMediaClick, renderMedia, showMobileIndicator }) {
 	const carouselImages = images.length > 0 ? images : [{}];
 	return /* @__PURE__ */ jsxs(Carousel, {
 		className: "absolute inset-0 z-0 block size-full rounded-none md:hidden",
@@ -95,20 +112,18 @@ function MobileMediaCarousel({ currentMedia, images, mediaTotal, onMediaClick, r
 				onMediaClick,
 				renderMedia
 			})
-		}, getMediaKey(image))) }), showMobileIndicator ? /* @__PURE__ */ jsx("div", {
+		}, getMediaKey(image, index))) }), showMobileIndicator ? /* @__PURE__ */ jsx("div", {
 			className: "absolute right-4 bottom-4 z-10",
-			children: /* @__PURE__ */ jsx(MobileGalleryCounter, { total: mediaTotal })
+			children: /* @__PURE__ */ jsx(MobileGalleryCounter, { total: carouselImages.length })
 		}) : null]
 	});
 }
-function MediaGalleryImages({ className, currentMedia = 1, imageCount = 4, images, onMediaClick, renderMedia, showMobileIndicator = true, totalMediaCount, ...props }) {
+function MediaGalleryImages({ className, currentMedia = 1, imageCount = 4, images, onMediaClick, renderMedia, showMobileIndicator = true, totalMediaCount: _totalMediaCount, ...props }) {
 	const resolvedImageCount = imageCount ?? 4;
-	const mediaTotal = totalMediaCount ?? Math.max(images.length, 1);
 	const visibleImages = getVisibleImages(images, resolvedImageCount);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMediaCarousel, {
 		currentMedia,
 		images,
-		mediaTotal,
 		onMediaClick,
 		renderMedia,
 		showMobileIndicator
@@ -124,7 +139,7 @@ function MediaGalleryImages({ className, currentMedia = 1, imageCount = 4, image
 			isDesktopTile: true,
 			onMediaClick,
 			renderMedia
-		}, getMediaKey(image)))
+		}, getMediaKey(image, index)))
 	})] });
 }
 function MediaGalleryVideo({ alt = "", autoPlay, className, controls, label = "Play Video", loop, muted, onPlayClick, playsInline = true, poster, renderMedia, src, ...props }) {

package/dist/media-player.js

@@ -36,6 +36,31 @@ function setRef(ref, value) {
 	}
 	if (ref) ref.current = value;
 }
+/**
+* Stops playback when the player leaves the page.
+*
+* Removing a media element from the document does not reliably end playback:
+* the spec only forcibly pauses it once nothing references the element, and a
+* Picture-in-Picture window outlives its element entirely — so a route change
+* can leave audio running with no UI to stop it. `media-chrome` only unsets the
+* element from its store on unmount, so the pause has to happen here.
+*
+* The node is captured on attach rather than read back from the ref: React
+* detaches refs before passive effect cleanups run, so by unmount time the
+* component's own ref is already null.
+*/
+function useStopOnUnmount() {
+	const nodeRef = React.useRef(null);
+	React.useEffect(() => {
+		return () => {
+			const node = nodeRef.current;
+			if (!node || node.isConnected) return;
+			node.pause();
+			if (document.pictureInPictureElement === node) document.exitPictureInPicture().catch(() => {});
+		};
+	}, []);
+	return nodeRef;
+}
 function formatRate(value) {
 	if (!value || value === 1) return "1x";
 	return `${Number.parseFloat(value.toFixed(2))}x`;
@@ -238,6 +263,7 @@ function MediaPlayerRoot({ audio, children, className, onBlurCapture, onFocusCap
 			},
 			onPointerLeave: (event) => {
 				onPointerLeave?.(event);
+				if (event.pointerType === "touch") return;
 				setHoveringControls(false);
 				if (!alwaysVisibleRef.current) {
 					window.clearTimeout(hideTimerRef.current);
@@ -247,6 +273,7 @@ function MediaPlayerRoot({ audio, children, className, onBlurCapture, onFocusCap
 			onPointerMove: (event) => {
 				onPointerMove?.(event);
 				wake();
+				if (event.pointerType === "touch") return;
 				const rect = event.currentTarget.querySelector("[data-slot='media-player-controls']")?.getBoundingClientRect();
 				setHoveringControls(!!rect && event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom);
 			},
@@ -258,11 +285,13 @@ function MediaPlayerVideo({ className, ref, ...props }) {
 	const mediaRef = useMediaRef();
 	const mediaRefRef = React.useRef(mediaRef);
 	mediaRefRef.current = mediaRef;
+	const playingNodeRef = useStopOnUnmount();
 	return /* @__PURE__ */ jsx("video", {
 		ref: React.useCallback((node) => {
+			if (node) playingNodeRef.current = node;
 			mediaRefRef.current(node);
 			setRef(ref, node);
-		}, [ref]),
+		}, [playingNodeRef, ref]),
 		"data-slot": "media-player-video",
 		className: cn("block aspect-video size-full object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
 		playsInline: true,
@@ -273,11 +302,13 @@ function MediaPlayerAudio({ className, ref, ...props }) {
 	const mediaRef = useMediaRef();
 	const mediaRefRef = React.useRef(mediaRef);
 	mediaRefRef.current = mediaRef;
+	const playingNodeRef = useStopOnUnmount();
 	return /* @__PURE__ */ jsx("audio", {
 		ref: React.useCallback((node) => {
+			if (node) playingNodeRef.current = node;
 			mediaRefRef.current(node);
 			setRef(ref, node);
-		}, [ref]),
+		}, [playingNodeRef, ref]),
 		"data-slot": "media-player-audio",
 		className: cn("sr-only", className),
 		...props

package/dist/{picker-qxWi9wZ1.d.ts → picker-QtFHPRqg.d.ts}

@@ -1,6 +1,6 @@
 import "./input-size-context-BMhves-J.js";
 import { r as PopoverContent } from "./popover-BMTZp3AQ.js";
-import "./icons-C9JXR5Xv.js";
+import "./icons-e71GaFK-.js";
 import * as React from "react";
 //#region src/lib/picker.d.ts
 /**

package/dist/rating.d.ts

@@ -1,5 +1,5 @@
 import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
-import { j as IconProps } from "./icons-C9JXR5Xv.js";
+import { M as IconProps } from "./icons-e71GaFK-.js";
 import * as React from "react";
 //#region src/rating.d.ts
 /** How finely a rating can be *set*. Display always honours the exact value. */

package/dist/scroll-spy.d.ts

@@ -1,5 +1,5 @@
 import { t as ComponentSize } from "./size-context-BVhHduLi.js";
-import { TabsListVariant } from "./tabs.js";
+import { TabsCountProps, TabsListVariant } from "./tabs.js";
 import * as React from "react";
 //#region src/scroll-spy.d.ts
 /**
@@ -43,8 +43,9 @@ type ScrollSpyProps = Omit<React.ComponentProps<"div">, "onChange"> & {
  * and visible, the triggers scroll to their section, and the active trigger
  * tracks whichever section the reader is currently on.
  *
- * The parts mirror the `Tabs` API — `ScrollSpy` / `ScrollSpyList` /
- * `ScrollSpyTrigger` / `ScrollSpyContent`, matched by `value` — and the list
+ * The parts mirror the `Tabs` API one for one — `ScrollSpy` /
+ * `ScrollSpyListContainer` / `ScrollSpyList` / `ScrollSpyTrigger` /
+ * `ScrollSpyCount` / `ScrollSpyContent`, matched by `value` — and the list
  * takes the same `variant` and `size` as `TabsList`, so the two read as one
  * family. Overflow ("More" dropdowns, per-breakpoint trigger counts) is the
  * consuming app's job, exactly as it is with `Tabs`;
@@ -52,6 +53,21 @@ type ScrollSpyProps = Omit<React.ComponentProps<"div">, "onChange"> & {
  * real triggers.
  */
 declare function ScrollSpy({ className, orientation, value, defaultValue, onValueChange, scrollOffset, children, ...props }: ScrollSpyProps): React.JSX.Element;
+/**
+ * Container styling — `TabsListContainer`'s, matched to this component's own
+ * list slot so the rule tracks `ScrollSpyList`'s variant.
+ */
+declare const scrollSpyListContainerClassName: string;
+/**
+ * Optional wrapper around `ScrollSpyList`, matching `TabsListContainer`. Use it
+ * when the bar needs padding the triggers shouldn't inherit, or when something
+ * other than a trigger has to sit in it.
+ *
+ * It takes over the `nav` landmark — the list inside drops its own role — so
+ * the region stays a single landmark however many controls join it. Label the
+ * container rather than the list.
+ */
+declare function ScrollSpyListContainer({ className, children, "aria-label": ariaLabel, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 type ScrollSpyListProps = React.ComponentProps<"nav"> & {
   variant?: TabsListVariant;
   size?: ComponentSize;
@@ -74,9 +90,16 @@ type ScrollSpyTriggerProps = Omit<React.ComponentProps<"button">, "value"> & {
   value: string;
 };
 declare function ScrollSpyTrigger({ className, value, type, onClick, ...props }: ScrollSpyTriggerProps): React.JSX.Element;
+/**
+ * Count badge — `TabsCount` under this family's slot name, so a spy trigger and
+ * a tab trigger carry the identical chip and track the same variant and size.
+ * Place it inside a `ScrollSpyTrigger`, after the label.
+ */
+type ScrollSpyCountProps = TabsCountProps;
+declare function ScrollSpyCount({ "data-slot": dataSlot, ...props }: TabsCountProps): React.JSX.Element;
 type ScrollSpyContentProps = Omit<React.ComponentProps<"section">, "value"> & {
   value: string;
 };
 declare function ScrollSpyContent({ className, value, style, tabIndex, ...props }: ScrollSpyContentProps): React.JSX.Element;
 //#endregion
-export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyList, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };
+export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyCount, type ScrollSpyCountProps, ScrollSpyList, ScrollSpyListContainer, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyListContainerClassName, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };

package/dist/scroll-spy.js

@@ -3,7 +3,7 @@ import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { useReducedMotion } from "./utils/use-reduced-motion.js";
 import { useUncontrolled } from "./utils/use-uncontrolled.js";
-import { resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName } from "./tabs.js";
+import { TabsCount, TabsListContainerContext, resolveTabsListVariant, tabsIndicatorClassName, tabsListContainerBaseClassName, tabsListVariants, tabsTriggerClassName, useInTabsListContainer } from "./tabs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/scroll-spy.tsx
@@ -68,8 +68,9 @@ function useScrollSpy() {
 * and visible, the triggers scroll to their section, and the active trigger
 * tracks whichever section the reader is currently on.
 *
-* The parts mirror the `Tabs` API — `ScrollSpy` / `ScrollSpyList` /
-* `ScrollSpyTrigger` / `ScrollSpyContent`, matched by `value` — and the list
+* The parts mirror the `Tabs` API one for one — `ScrollSpy` /
+* `ScrollSpyListContainer` / `ScrollSpyList` / `ScrollSpyTrigger` /
+* `ScrollSpyCount` / `ScrollSpyContent`, matched by `value` — and the list
 * takes the same `variant` and `size` as `TabsList`, so the two read as one
 * family. Overflow ("More" dropdowns, per-breakpoint trigger counts) is the
 * consuming app's job, exactly as it is with `Tabs`;
@@ -210,12 +211,39 @@ function followActiveTrigger(list, element, behavior) {
 	}
 	if (options.left !== void 0 || options.top !== void 0) list.scrollTo(options);
 }
-function ScrollSpyList({ className, variant = "underline", size, children, scrollActiveIntoView = false, "aria-label": ariaLabel = "Section navigation", ...props }) {
+/**
+* Container styling — `TabsListContainer`'s, matched to this component's own
+* list slot so the rule tracks `ScrollSpyList`'s variant.
+*/
+const scrollSpyListContainerClassName = cn(tabsListContainerBaseClassName, "group-data-[orientation=horizontal]/tabs:has-[[data-slot=scroll-spy-list][data-variant=underline]]:border-b group-data-[orientation=horizontal]/tabs:has-[[data-slot=scroll-spy-list][data-variant=underline]]:border-line-subtle", "group-data-[orientation=vertical]/tabs:has-[[data-slot=scroll-spy-list][data-variant=underline]]:border-r group-data-[orientation=vertical]/tabs:has-[[data-slot=scroll-spy-list][data-variant=underline]]:border-line-subtle");
+/**
+* Optional wrapper around `ScrollSpyList`, matching `TabsListContainer`. Use it
+* when the bar needs padding the triggers shouldn't inherit, or when something
+* other than a trigger has to sit in it.
+*
+* It takes over the `nav` landmark — the list inside drops its own role — so
+* the region stays a single landmark however many controls join it. Label the
+* container rather than the list.
+*/
+function ScrollSpyListContainer({ className, children, "aria-label": ariaLabel = "Section navigation", ...props }) {
+	return /* @__PURE__ */ jsx(TabsListContainerContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("nav", {
+			"data-slot": "scroll-spy-list-container",
+			"aria-label": ariaLabel,
+			className: cn(scrollSpyListContainerClassName, className),
+			...props,
+			children
+		})
+	});
+}
+function ScrollSpyList({ className, variant = "underline", size, children, scrollActiveIntoView = false, "aria-label": ariaLabel, ...props }) {
 	const { activeValue } = useScrollSpyContext("ScrollSpyList");
 	const reducedMotion = useReducedMotion();
 	const hasFollowedRef = React.useRef(false);
 	const resolvedVariant = resolveTabsListVariant(variant);
 	const resolvedSize = useComponentSize(size);
+	const inContainer = useInTabsListContainer();
 	const listRef = React.useRef(null);
 	const [indicator, setIndicator] = React.useState(null);
 	React.useEffect(() => {
@@ -256,8 +284,12 @@ function ScrollSpyList({ className, variant = "underline", size, children, scrol
 		"data-slot": "scroll-spy-list",
 		"data-variant": resolvedVariant,
 		"data-size": resolvedSize,
-		"aria-label": ariaLabel,
-		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+		role: inContainer ? "none" : void 0,
+		"aria-label": inContainer ? ariaLabel : ariaLabel ?? "Section navigation",
+		className: cn(tabsListVariants({
+			variant: resolvedVariant,
+			standalone: !inContainer
+		}), className),
 		style: indicator ? {
 			"--active-tab-left": `${indicator.left}px`,
 			"--active-tab-top": `${indicator.top}px`,
@@ -295,6 +327,12 @@ function ScrollSpyTrigger({ className, value, type = "button", onClick, ...props
 		...props
 	});
 }
+function ScrollSpyCount({ "data-slot": dataSlot = "scroll-spy-count", ...props }) {
+	return /* @__PURE__ */ jsx(TabsCount, {
+		"data-slot": dataSlot,
+		...props
+	});
+}
 function ScrollSpyContent({ className, value, style, tabIndex = -1, ...props }) {
 	const { activeValue, getSectionId, getTriggerId, registerSection, scrollOffset } = useScrollSpyContext("ScrollSpyContent");
 	return /* @__PURE__ */ jsx("section", {
@@ -315,4 +353,4 @@ function ScrollSpyContent({ className, value, style, tabIndex = -1, ...props })
 	});
 }
 //#endregion
-export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };
+export { ScrollSpy, ScrollSpyContent, ScrollSpyCount, ScrollSpyList, ScrollSpyListContainer, ScrollSpyTrigger, scrollSpyListContainerClassName, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };

package/dist/section-jumper.d.ts

@@ -23,9 +23,15 @@ type SectionJumperProps = Omit<React.ComponentProps<"div">, "children"> & {
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   mobileBreakpoint?: number;
+  /**
+   * Most dots the resting rail draws before it windows around the active
+   * section. Defaults to 12 on desktop and 7 on mobile, where the dots share
+   * a row with the section label. The menu always lists every section.
+   */
+  maxDots?: number;
   /** Sticky-header offset used by standalone target-id mode. */
   scrollOffset?: number;
 };
-declare function SectionJumper({ className, items: itemsProp, label, open, defaultOpen, onOpenChange, mobileBreakpoint, scrollOffset: scrollOffsetProp, ...props }: SectionJumperProps): React.JSX.Element | null;
+declare function SectionJumper({ className, items: itemsProp, label, open, defaultOpen, onOpenChange, mobileBreakpoint, maxDots, scrollOffset: scrollOffsetProp, ...props }: SectionJumperProps): React.JSX.Element | null;
 //#endregion
 export { SectionJumper, type SectionJumperItem, type SectionJumperProps, SectionJumperProvider, type SectionJumperProviderProps };

package/dist/section-jumper.js

@@ -153,17 +153,78 @@ function useStandaloneSectionJumper(items, scrollOffset, enabled) {
 		scrollToSection
 	]);
 }
-function SectionJumperDot({ active, variant }) {
+/**
+* Most sections a rail can show before it stops being a glanceable indicator
+* and starts being a list — at which point it is windowed. Mobile gets the
+* smaller budget: its dots run across the screen rather than down it, sharing
+* the row with the section label.
+*/
+const DEFAULT_MAX_DOTS = {
+	desktop: 12,
+	mobile: 7
+};
+/**
+* The slice of sections the rail draws. Everything fits until there are more
+* than `max`; past that the window slides to keep the active section centred,
+* pinning at either end so the first and last sections stay reachable.
+*/
+function getDotWindow(count, activeIndex, max) {
+	if (count <= max) return {
+		start: 0,
+		end: count
+	};
+	const start = Math.max(0, Math.min(activeIndex - Math.floor(max / 2), count - max));
+	return {
+		start,
+		end: start + max
+	};
+}
+function SectionJumperDot({ active, edge, variant }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cn("block shrink-0 bg-line transition-[width,height,background-color] duration-(--duration-motion-surface) ease-gdt-out motion-reduce:transition-none", !active && "size-2 rounded-full", active && variant === "desktop" && "h-6 w-2 rounded-sm bg-surface-brand", active && variant === "menu" && "size-2 rounded-full bg-surface-brand", active && variant === "mobile" && "h-2 w-6 rounded-sm bg-surface-brand")
+		className: cn("block shrink-0 bg-line transition-[width,height,background-color] duration-(--duration-motion-surface) ease-gdt-out motion-reduce:transition-none", !active && (edge ? "size-1 rounded-full" : "size-2 rounded-full"), active && variant === "desktop" && "h-6 w-2 rounded-sm bg-surface-brand", active && variant === "menu" && "size-2 rounded-full bg-surface-brand", active && variant === "mobile" && "h-2 w-6 rounded-sm bg-surface-brand")
 	});
 }
+/**
+* The windowed rail, shared by both triggers — the dots are the only part of
+* the two that differ by more than layout.
+*/
+function SectionJumperDots({ items, activeValue, max, variant }) {
+	const activeIndex = items.findIndex((item) => item.value === activeValue);
+	const { start, end } = getDotWindow(items.length, activeIndex < 0 ? 0 : activeIndex, max);
+	return items.slice(start, end).map((item, index) => /* @__PURE__ */ jsx(SectionJumperDot, {
+		active: item.value === activeValue,
+		edge: index === 0 && start > 0 || index === end - start - 1 && end < items.length,
+		variant
+	}, item.value));
+}
 function SectionJumperMenu({ items, onSelect, controller }) {
 	const { activeValue, getSectionId, getTriggerId } = controller;
+	const listRef = React.useRef(null);
+	React.useEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		let positioned = false;
+		const position = () => {
+			if (positioned || list.scrollHeight <= list.clientHeight) return;
+			const active = list.querySelector("[data-active]");
+			if (!active) return;
+			positioned = true;
+			const top = active.offsetTop;
+			const bottom = top + active.offsetHeight;
+			if (top < list.scrollTop) list.scrollTop = Math.max(0, top - 8);
+			else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 8;
+		};
+		position();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(position);
+		observer.observe(list);
+		return () => observer.disconnect();
+	}, []);
 	return /* @__PURE__ */ jsx("nav", {
+		ref: listRef,
 		"aria-label": "Page sections",
-		className: "flex flex-col gap-0.5",
+		className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto overscroll-contain pt-2",
 		children: items.map((item) => {
 			const active = item.value === activeValue;
 			return /* @__PURE__ */ jsxs("button", {
@@ -185,7 +246,7 @@ function SectionJumperMenu({ items, onSelect, controller }) {
 		})
 	});
 }
-function SectionJumper({ className, items: itemsProp, label = "On this page", open, defaultOpen = false, onOpenChange, mobileBreakpoint = 1024, scrollOffset: scrollOffsetProp, ...props }) {
+function SectionJumper({ className, items: itemsProp, label = "On this page", open, defaultOpen = false, onOpenChange, mobileBreakpoint = 1024, maxDots, scrollOffset: scrollOffsetProp, ...props }) {
 	const provider = React.useContext(SectionJumperProviderContext);
 	const items = itemsProp ?? provider?.items ?? [];
 	const scrollOffset = scrollOffsetProp ?? provider?.scrollOffset ?? 0;
@@ -211,32 +272,35 @@ function SectionJumper({ className, items: itemsProp, label = "On this page", op
 		type: "button",
 		"aria-label": `${label}${activeItem ? `, current section: ${String(activeItem.label)}` : ""}`,
 		className: "flex w-fit cursor-pointer flex-col items-center gap-3.5 rounded-2xl border border-transparent p-2 outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]",
-		children: items.map((item) => {
-			return /* @__PURE__ */ jsx(SectionJumperDot, {
-				active: item.value === activeValue,
-				variant: "desktop"
-			}, item.value);
+		children: /* @__PURE__ */ jsx(SectionJumperDots, {
+			items,
+			activeValue,
+			max: maxDots ?? DEFAULT_MAX_DOTS.desktop,
+			variant: "desktop"
 		})
 	});
 	const mobileTrigger = /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: "flex cursor-pointer items-center gap-3 rounded-full border border-line-subtle bg-surface-overlay px-4 py-1 text-gdt-xs font-medium text-fg-brand shadow-2 outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]",
+		"aria-label": `${label}${activeItem ? `, current section: ${String(activeItem.label)}` : ""}`,
+		className: "flex max-w-[min(22rem,calc(100vw-2rem))] cursor-pointer items-center gap-3 rounded-full border border-line-subtle bg-surface-overlay px-4 py-1 text-gdt-xs font-medium text-fg-brand shadow-2 outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]",
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: "flex items-center gap-1",
-				children: items.map((item) => /* @__PURE__ */ jsx(SectionJumperDot, {
-					active: item.value === activeValue,
+				className: "flex shrink-0 items-center gap-1",
+				children: /* @__PURE__ */ jsx(SectionJumperDots, {
+					items,
+					activeValue,
+					max: maxDots ?? DEFAULT_MAX_DOTS.mobile,
 					variant: "mobile"
-				}, item.value))
+				})
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "max-w-32 truncate",
+				className: "min-w-0 flex-1 truncate text-left",
 				children: activeItem?.label ?? label
 			}),
 			/* @__PURE__ */ jsx(ChevronDown, {
 				"aria-hidden": true,
-				className: cn("size-3 transition-transform", resolvedOpen && "rotate-180")
+				className: cn("size-3 shrink-0 transition-transform", resolvedOpen && "rotate-180")
 			})
 		]
 	});
@@ -256,17 +320,14 @@ function SectionJumper({ className, items: itemsProp, label = "On this page", op
 				side: isMobile ? "top" : "left",
 				sideOffset: 8,
 				showArrow: false,
-				className: cn("border border-line-subtle shadow-2 px-4 pb-4 pt-3", isMobile ? "w-90 rounded-2xl" : "w-60 rounded-2xl"),
+				className: cn("max-h-(--available-height) rounded-2xl border border-line-subtle px-4 pb-4 pt-3 shadow-2", isMobile ? "w-90" : "w-max min-w-60 max-w-[min(20rem,calc(100vw-2rem))]"),
 				children: [/* @__PURE__ */ jsx("p", {
-					className: cn("border-b border-line-subtle pb-2 font-semibold text-fg-primary", isMobile ? "text-gdt-md" : "text-gdt-sm"),
+					className: cn("shrink-0 border-b border-line-subtle pb-2 font-semibold text-fg-primary", isMobile ? "text-gdt-md" : "text-gdt-sm"),
 					children: label
-				}), /* @__PURE__ */ jsx("div", {
-					className: "pt-2",
-					children: /* @__PURE__ */ jsx(SectionJumperMenu, {
-						items,
-						onSelect: select,
-						controller
-					})
+				}), /* @__PURE__ */ jsx(SectionJumperMenu, {
+					items,
+					onSelect: select,
+					controller
 				})]
 			})]
 		})

package/dist/select.js

@@ -29,7 +29,7 @@ const selectTriggerVariants = cva("group/select-trigger flex w-fit min-w-0 items
 	} },
 	defaultVariants: { size: "md" }
 });
-const selectContentVariants = cva("relative isolate z-50 flex max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) flex-col overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[align-trigger=true]:transition-none not-data-[align-trigger=true]:data-starting-style:opacity-0 not-data-[align-trigger=true]:data-starting-style:scale-95 not-data-[align-trigger=true]:data-ending-style:opacity-0 not-data-[align-trigger=true]:data-ending-style:scale-95 not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-2 not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-starting-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-ending-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:not-data-[align-trigger=true]:data-starting-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-ending-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-0", {
+const selectContentVariants = cva("relative isolate z-50 flex max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) flex-col overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[align-trigger=true]:transition-none not-data-[align-trigger=true]:data-starting-style:opacity-0 not-data-[align-trigger=true]:data-starting-style:scale-95 not-data-[align-trigger=true]:data-ending-style:opacity-0 not-data-[align-trigger=true]:data-ending-style:scale-95 not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-2 not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-starting-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-ending-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:not-data-[align-trigger=true]:data-starting-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-ending-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-0", {
 	variants: { size: {
 		sm: "rounded-lg",
 		md: "rounded-xl",