@giddaa-housing/ui 3.2.0 → 3.3.0

package/dist/accordion.js

@@ -1,3 +1,4 @@
+"use client";
 import { ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";

package/dist/alert.js

@@ -3,7 +3,7 @@ import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx
-const alertVariants = cva("grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-start gap-y-1 rounded-xl border-2 px-4 py-3.5 text-gdt-sm transition-[background-color,border-color,color,box-shadow] has-[>svg]:grid-cols-[1.25rem_minmax(0,1fr)_auto] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-current", {
+const alertVariants = cva("group/alert grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-start gap-y-1 rounded-xl border-2 px-4 py-3.5 text-gdt-sm transition-[background-color,border-color,color,box-shadow] has-[>svg]:grid-cols-[1.25rem_minmax(0,1fr)_auto] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-current", {
 	variants: { variant: {
 		success: "border-status-success bg-surface-brand-subtle text-status-success",
 		info: "border-status-info bg-surface text-status-info",
@@ -33,14 +33,14 @@ function AlertTitle({ className, ...props }) {
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-description",
-		className: cn("col-start-2 row-start-2 text-fg-secondary [&_p]:leading-relaxed", className),
+		className: cn("col-start-2 row-start-1 text-fg-secondary group-has-[[data-slot=alert-title]]/alert:row-start-2 [&_p]:leading-relaxed", className),
 		...props
 	});
 }
 function AlertActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-actions",
-		className: cn("col-start-2 row-start-3 mt-2 flex shrink-0 items-center gap-2 justify-self-start sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-[-0.125rem] sm:justify-self-end", className),
+		className: cn("col-start-2 row-start-2 mt-2 flex shrink-0 items-center gap-2 justify-self-start max-sm:group-has-[[data-slot=alert-title]]/alert:row-start-3 sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-[-0.125rem] sm:justify-self-end", className),
 		...props
 	});
 }

package/dist/button.js

@@ -22,8 +22,8 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 			danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
 			whatsapp: "bg-whatsapp-green text-black [&_svg]:text-white hover:brightness-95 active:brightness-90 data-focused:brightness-95 data-pressed:brightness-90",
 			"glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand shadow-2 backdrop-blur-sm active:scale-[0.97] motion-reduce:active:scale-100",
-			"link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-			"link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
+			"link-brand": "border-transparent bg-transparent text-fg-brand hover:underline active:underline active:opacity-70",
+			"link-neutral": "border-transparent bg-transparent text-fg-secondary hover:underline active:underline active:opacity-70"
 		},
 		size: {
 			sm: "h-8 min-w-8 gap-2 px-3.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-4",
@@ -37,6 +37,10 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 			"icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
 		}
 	},
+	compoundVariants: [{
+		variant: ["link-brand", "link-neutral"],
+		class: "h-auto min-h-0 w-auto min-w-0 shrink justify-start rounded-none px-0 py-0 text-left whitespace-normal underline-offset-4 active:not-aria-[haspopup]:translate-y-0"
+	}],
 	defaultVariants: {
 		variant: "primary",
 		size: "md"

package/dist/footer.d.ts

@@ -1,5 +1,6 @@
 import { n as InputSize } from "./input-CfoEJ8A6.js";
 import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/footer.d.ts
 type FooterRootProps = React.ComponentProps<"footer"> & {
@@ -20,10 +21,14 @@ declare function FooterSection({ className, ...props }: React.ComponentProps<"di
 declare function FooterSectionTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
 declare function FooterLinkList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function FooterLinkItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-type FooterLinkProps = useRender.ComponentProps<"a"> & {
+declare const footerLinkVariants: (props?: ({
+  variant?: "brand" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FooterLinkVariant = NonNullable<VariantProps<typeof footerLinkVariants>["variant"]>;
+type FooterLinkProps = useRender.ComponentProps<"a"> & VariantProps<typeof footerLinkVariants> & {
   showArrow?: boolean;
 };
-declare function FooterLink({ className, children, render, showArrow, ...props }: FooterLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function FooterLink({ className, children, render, showArrow, variant, ...props }: FooterLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function FooterContactGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterContact({ className, ...props }: React.ComponentProps<"address">): React.JSX.Element;
 declare function FooterContactTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
@@ -39,4 +44,4 @@ declare function FooterNewsletterControl({ className, children, size, ...props }
 declare function FooterBottom({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterLegalLinks({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 //#endregion
-export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, type FooterLinkProps, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, type FooterRootProps, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle };
+export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, type FooterLinkProps, type FooterLinkVariant, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, type FooterRootProps, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle, footerLinkVariants };

package/dist/footer.js

@@ -6,6 +6,7 @@ import { Input } from "./input.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
 //#region src/footer.tsx
 function FooterRoot({ className, containerClassName, children, ...props }) {
 	return /* @__PURE__ */ jsx("footer", {
@@ -117,18 +118,28 @@ function FooterLinkItem({ className, ...props }) {
 		...props
 	});
 }
-function FooterLink({ className, children, render, showArrow = false, ...props }) {
+const footerLinkVariants = cva("inline-flex items-center gap-gdt-sm underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", {
+	variants: { variant: {
+		default: "text-fg-secondary hover:text-fg-brand",
+		brand: "text-fg-brand"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function FooterLink({ className, children, render, showArrow = false, variant = "default", ...props }) {
 	return useRender({
 		defaultTagName: "a",
 		props: mergeProps({
-			className: cn("inline-flex items-center gap-gdt-sm text-fg-secondary underline-offset-4 transition-colors hover:text-fg-brand hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", className),
+			className: cn(footerLinkVariants({ variant }), className),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children }), showArrow && /* @__PURE__ */ jsx(ChevronRight, {
 				"aria-hidden": "true",
 				className: "size-3.5"
 			})] })
 		}, props),
 		render,
-		state: { slot: "footer-link" }
+		state: {
+			slot: "footer-link",
+			variant
+		}
 	});
 }
 function FooterContactGrid({ className, ...props }) {
@@ -229,4 +240,4 @@ function FooterLegalLinks({ className, ...props }) {
 	});
 }
 //#endregion
-export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle };
+export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle, footerLinkVariants };

package/dist/media-gallery-hero.js

@@ -8,8 +8,8 @@ import { ReviewBlock } from "./review-block.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/media-gallery-hero.tsx
-const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-[32px] bg-surface-raised md:h-[380px] md:rounded-[40px] lg:h-[480px]");
-const mediaGalleryImagesVariants = cva("absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 bg-surface-raised md:grid", {
+const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-[32px] md:h-[380px] md:rounded-[40px] lg:h-[480px]");
+const mediaGalleryImagesVariants = cva("absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 md:grid", {
 	variants: { imageCount: {
 		1: "",
 		2: "gap-2 grid-cols-[minmax(0,3fr)_minmax(0,2fr)]",
@@ -77,7 +77,7 @@ function MobileGalleryCounter({ total }) {
 function MobileMediaCarousel({ currentMedia, images, mediaTotal, onMediaClick, renderMedia, showMobileIndicator }) {
 	const carouselImages = images.length > 0 ? images : [{}];
 	return /* @__PURE__ */ jsxs(Carousel, {
-		className: "absolute inset-0 z-0 block size-full rounded-[32px] bg-surface-raised md:hidden",
+		className: "absolute inset-0 z-0 block size-full rounded-[32px] md:hidden",
 		imageSize: "full",
 		opts: {
 			align: "start",

package/dist/property-listing-card.js

@@ -62,7 +62,7 @@ function PropertyListingCardMediaTop({ className, ...props }) {
 function PropertyListingCardOptionsBar({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/80 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus", className) }, props),
+		props: mergeProps({ className: cn("absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/70 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus", "supports-backdrop-filter:bg-black/40 supports-backdrop-filter:backdrop-blur-[15px] supports-backdrop-filter:hover:bg-black/55", className) }, props),
 		render,
 		state: { slot: "property-listing-card-options-bar" }
 	});

package/dist/scroll-spy.d.ts

@@ -0,0 +1,61 @@
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { TabsListVariant } from "./tabs.js";
+import * as React from "react";
+//#region src/scroll-spy.d.ts
+type ScrollSpyProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  orientation?: "horizontal" | "vertical";
+  /** Controlled active section. */
+  value?: string;
+  /** Active section before the first scroll measurement lands. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /**
+   * Distance in px between the top of the scrollport and the line a section
+   * has to cross to become active. Set it to the height of a sticky header —
+   * it also becomes each section's `scroll-margin-top`, so scrolling lands
+   * the heading below the header rather than under it.
+   */
+  scrollOffset?: number;
+};
+/**
+ * `Tabs` for a page that shows everything at once: every section stays mounted
+ * 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
+ * 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`;
+ * `scrollSpyTriggerClassName` is exported so an overflow button can match the
+ * real triggers.
+ */
+declare function ScrollSpy({ className, orientation, value, defaultValue, onValueChange, scrollOffset, children, ...props }: ScrollSpyProps): React.JSX.Element;
+type ScrollSpyListProps = React.ComponentProps<"nav"> & {
+  variant?: TabsListVariant;
+  size?: ComponentSize;
+  /**
+   * Keep the active trigger visible as the reader scrolls. Opt in when the
+   * list itself scrolls — without it, a strip narrower than its triggers looks
+   * frozen once the active one passes out of view. No-op when nothing
+   * overflows, and it never scrolls anything but the list.
+   */
+  scrollActiveIntoView?: boolean;
+};
+declare function ScrollSpyList({ className, variant, size, children, scrollActiveIntoView, "aria-label": ariaLabel, ...props }: ScrollSpyListProps): React.JSX.Element;
+/**
+ * Trigger styling, exported so an overflow "More" button outside the list can
+ * render the same look — the `Tabs` trigger classes verbatim, so the two
+ * components stay pixel-identical.
+ */
+declare const scrollSpyTriggerClassName: string;
+type ScrollSpyTriggerProps = Omit<React.ComponentProps<"button">, "value"> & {
+  value: string;
+};
+declare function ScrollSpyTrigger({ className, value, type, onClick, ...props }: ScrollSpyTriggerProps): 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 };

package/dist/scroll-spy.js

@@ -0,0 +1,295 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
+import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName } from "./tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/scroll-spy.tsx
+const ScrollSpyContext = React.createContext(null);
+/**
+* The element this spy's sections actually scroll inside — a scrollable
+* ancestor, or `document.scrollingElement` for the page. Everything is
+* measured against it, so each instance answers only to its own scrollport:
+* a spy in an open Sheet and a spy on the page behind it never see each
+* other's scrolling.
+*
+* Returns `null` when nothing scrolls. A `position: fixed` ancestor with no
+* scrollable element inside it — a short Dialog, say — is pinned to the
+* viewport, so it neither moves with the page nor scrolls on its own. Falling
+* back to the page there would read the page's scroll position and pin the
+* last section active for a reader who never scrolled anything.
+*
+* Walked from a section rather than the root: the root often sits *outside*
+* the scrolling region, as it does when a Sheet puts the list in its header
+* and the sections in its scrolling body.
+*/
+function getScrollport(element) {
+	let node = element;
+	while (node && node !== document.documentElement) {
+		const { overflowY, position } = getComputedStyle(node);
+		if (overflowY === "auto" || overflowY === "scroll") return node;
+		if (position === "fixed") return null;
+		node = node.parentElement;
+	}
+	return document.scrollingElement;
+}
+function useScrollSpyContext(part) {
+	const context = React.useContext(ScrollSpyContext);
+	if (!context) throw new Error(`\`${part}\` must be rendered inside \`ScrollSpy\`.`);
+	return context;
+}
+/**
+* `Tabs` for a page that shows everything at once: every section stays mounted
+* 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
+* 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`;
+* `scrollSpyTriggerClassName` is exported so an overflow button can match the
+* real triggers.
+*/
+function ScrollSpy({ className, orientation = "horizontal", value, defaultValue, onValueChange, scrollOffset = 0, children, ...props }) {
+	const baseId = React.useId();
+	const reducedMotion = useReducedMotion();
+	const [activeValue, setActiveValue] = useUncontrolled({
+		value,
+		defaultValue,
+		onChange: (next) => {
+			if (next !== void 0) onValueChange?.(next);
+		}
+	});
+	const sectionsRef = React.useRef(/* @__PURE__ */ new Map());
+	const [sectionsVersion, setSectionsVersion] = React.useState(0);
+	const activeRef = React.useRef(activeValue);
+	const commitRef = React.useRef(setActiveValue);
+	React.useEffect(() => {
+		activeRef.current = activeValue;
+		commitRef.current = setActiveValue;
+	});
+	const registerSection = React.useCallback((sectionValue, element) => {
+		if (element) sectionsRef.current.set(sectionValue, element);
+		else sectionsRef.current.delete(sectionValue);
+		setSectionsVersion((version) => version + 1);
+	}, []);
+	React.useEffect(() => {
+		let frame = 0;
+		const [firstSection] = sectionsRef.current.values();
+		const scrollport = getScrollport(firstSection ?? null);
+		const isPage = scrollport === document.scrollingElement;
+		const measure = () => {
+			frame = 0;
+			const sections = [...sectionsRef.current.entries()].map(([sectionValue, element]) => ({
+				value: sectionValue,
+				top: element.getBoundingClientRect().top
+			})).sort((a, b) => a.top - b.top);
+			const first = sections[0];
+			const last = sections.at(-1);
+			if (!(first && last)) return;
+			const originTop = scrollport && !isPage ? scrollport.getBoundingClientRect().top : 0;
+			const atBottom = scrollport ? scrollport.scrollTop + scrollport.clientHeight >= scrollport.scrollHeight - 2 : false;
+			let next = first.value;
+			if (atBottom) next = last.value;
+			else for (const section of sections) if (section.top - originTop <= scrollOffset + 2) next = section.value;
+			if (next !== activeRef.current) {
+				activeRef.current = next;
+				commitRef.current(next);
+			}
+		};
+		const schedule = () => {
+			if (!frame) frame = requestAnimationFrame(measure);
+		};
+		measure();
+		const scrollTarget = isPage ? window : scrollport;
+		scrollTarget?.addEventListener("scroll", schedule, { passive: true });
+		window.addEventListener("resize", schedule, { passive: true });
+		return () => {
+			if (frame) cancelAnimationFrame(frame);
+			scrollTarget?.removeEventListener("scroll", schedule);
+			window.removeEventListener("resize", schedule);
+		};
+	}, [scrollOffset, sectionsVersion]);
+	const scrollToSection = React.useCallback((sectionValue) => {
+		const element = sectionsRef.current.get(sectionValue);
+		if (!element) return;
+		activeRef.current = sectionValue;
+		commitRef.current(sectionValue);
+		element.scrollIntoView({
+			behavior: reducedMotion ? "auto" : "smooth",
+			block: "start"
+		});
+		element.focus({ preventScroll: true });
+	}, [reducedMotion]);
+	const context = React.useMemo(() => ({
+		activeValue,
+		scrollOffset,
+		registerSection,
+		scrollToSection,
+		getTriggerId: (sectionValue) => `${baseId}-trigger-${sectionValue}`,
+		getSectionId: (sectionValue) => `${baseId}-section-${sectionValue}`
+	}), [
+		activeValue,
+		baseId,
+		registerSection,
+		scrollOffset,
+		scrollToSection
+	]);
+	return /* @__PURE__ */ jsx(ScrollSpyContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "scroll-spy",
+			className: cn("group/tabs flex gap-3 data-[orientation=horizontal]:flex-col", className),
+			"data-orientation": orientation,
+			...props,
+			children
+		})
+	});
+}
+/**
+* Keeps `element` inside `list`'s own scrollport, on whichever axis actually
+* overflows. Deliberately not `scrollIntoView`: that walks every scrollable
+* ancestor, and the page is the very thing driving the active section here —
+* nudging it back would fight the reader mid-scroll. This touches only the
+* list's `scrollLeft`/`scrollTop`.
+*
+* "Nearest" semantics with a margin: an already-visible trigger doesn't move,
+* and one scrolled to leaves a sliver of its neighbour showing rather than
+* sitting flush against the edge.
+*/
+const FOLLOW_MARGIN = 24;
+function followActiveTrigger(list, element, behavior) {
+	const axes = [{
+		overflows: list.scrollWidth > list.clientWidth,
+		start: element.offsetLeft,
+		size: element.offsetWidth,
+		view: list.scrollLeft,
+		viewSize: list.clientWidth,
+		key: "left"
+	}, {
+		overflows: list.scrollHeight > list.clientHeight,
+		start: element.offsetTop,
+		size: element.offsetHeight,
+		view: list.scrollTop,
+		viewSize: list.clientHeight,
+		key: "top"
+	}];
+	const options = { behavior };
+	for (const axis of axes) {
+		if (!axis.overflows) continue;
+		const end = axis.start + axis.size;
+		const viewEnd = axis.view + axis.viewSize;
+		if (axis.start < axis.view) options[axis.key] = Math.max(0, axis.start - FOLLOW_MARGIN);
+		else if (end > viewEnd) options[axis.key] = end - axis.viewSize + FOLLOW_MARGIN;
+	}
+	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 }) {
+	const { activeValue } = useScrollSpyContext("ScrollSpyList");
+	const reducedMotion = useReducedMotion();
+	const hasFollowedRef = React.useRef(false);
+	const resolvedVariant = resolveTabsListVariant(variant);
+	const resolvedSize = useComponentSize(size);
+	const listRef = React.useRef(null);
+	const [indicator, setIndicator] = React.useState(null);
+	React.useEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		const measure = () => {
+			const active = list.querySelector("[data-slot=\"scroll-spy-trigger\"][data-active]");
+			const next = active ? {
+				left: active.offsetLeft,
+				top: active.offsetTop,
+				width: active.offsetWidth,
+				height: active.offsetHeight
+			} : null;
+			setIndicator((current) => current?.left === next?.left && current?.top === next?.top && current?.width === next?.width && current?.height === next?.height ? current : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(list);
+		for (const trigger of list.querySelectorAll("[data-slot=\"scroll-spy-trigger\"]")) observer.observe(trigger);
+		return () => observer.disconnect();
+	}, [activeValue]);
+	React.useEffect(() => {
+		const list = listRef.current;
+		if (!(scrollActiveIntoView && list)) return;
+		const active = list.querySelector("[data-slot=\"scroll-spy-trigger\"][data-active]");
+		if (!active) return;
+		const behavior = reducedMotion || !hasFollowedRef.current ? "auto" : "smooth";
+		hasFollowedRef.current = true;
+		followActiveTrigger(list, active, behavior);
+	}, [
+		activeValue,
+		reducedMotion,
+		scrollActiveIntoView
+	]);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref: listRef,
+		"data-slot": "scroll-spy-list",
+		"data-variant": resolvedVariant,
+		"data-size": resolvedSize,
+		"aria-label": ariaLabel,
+		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+		style: indicator ? {
+			"--active-tab-left": `${indicator.left}px`,
+			"--active-tab-top": `${indicator.top}px`,
+			"--active-tab-width": `${indicator.width}px`,
+			"--active-tab-height": `${indicator.height}px`
+		} : void 0,
+		...props,
+		children: [children, indicator ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: tabsIndicatorClassName
+		}) : null]
+	});
+}
+/**
+* Trigger styling, exported so an overflow "More" button outside the list can
+* render the same look — the `Tabs` trigger classes verbatim, so the two
+* components stay pixel-identical.
+*/
+const scrollSpyTriggerClassName = tabsTriggerClassName;
+function ScrollSpyTrigger({ className, value, type = "button", onClick, ...props }) {
+	const { activeValue, getSectionId, getTriggerId, scrollToSection } = useScrollSpyContext("ScrollSpyTrigger");
+	const isActive = activeValue === value;
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "scroll-spy-trigger",
+		id: getTriggerId(value),
+		type,
+		"aria-controls": getSectionId(value),
+		"aria-current": isActive ? "location" : void 0,
+		"data-active": isActive ? "" : void 0,
+		className: cn(scrollSpyTriggerClassName, "cursor-pointer", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) scrollToSection(value);
+		},
+		...props
+	});
+}
+function ScrollSpyContent({ className, value, style, tabIndex = -1, ...props }) {
+	const { activeValue, getSectionId, getTriggerId, registerSection, scrollOffset } = useScrollSpyContext("ScrollSpyContent");
+	return /* @__PURE__ */ jsx("section", {
+		ref: React.useCallback((element) => {
+			registerSection(value, element);
+		}, [registerSection, value]),
+		"data-slot": "scroll-spy-content",
+		"data-active": activeValue === value ? "" : void 0,
+		id: getSectionId(value),
+		"aria-labelledby": getTriggerId(value),
+		tabIndex,
+		className: cn("flex-1 text-sm outline-none", className),
+		style: {
+			scrollMarginTop: scrollOffset,
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName };