@giddaa-housing/ui 3.6.0 → 3.7.0

package/css/theme.css

@@ -283,20 +283,23 @@
 	}
 }
 
-/* Drives `Sonar`. Spread rather than `transform: scale()` on purpose: spread
-   grows the ring by the same number of pixels on every side and traces the
-   element's own border-radius, so one keyframe fits a 8px dot and a wide
-   button alike. Scaling would expand a wide element far more horizontally
-   than vertically — which is why sonar-glow above needs its per-axis
-   --sonar-glow-scale-x/y knobs. */
+/* Drives `Sonar`. Transform and opacity only, because they are the two
+   properties a browser can animate on the compositor: this grew the ring's
+   box-shadow spread instead until it turned out to repaint the ring and resize
+   its layer on every frame, which iOS Safari visibly stutters and flashes
+   through. The ring is now painted once at its full spread — still tracing the
+   element's own border-radius, still growing by the same number of pixels on
+   every side — and scaled back to the child's edge to start from. Per-axis,
+   like sonar-glow above, so a wide element's ring doesn't travel further
+   sideways than vertically; `sonar.tsx` measures the child and sets the two. */
 @keyframes sonar-wave {
 	from {
-		box-shadow: 0 0 0 0 currentColor;
+		transform: scale(var(--sonar-scale-x, 0.5), var(--sonar-scale-y, 0.5));
 		opacity: 0.55;
 	}
 
 	to {
-		box-shadow: 0 0 0 var(--sonar-spread, 0.625rem) currentColor;
+		transform: scale(1, 1);
 		opacity: 0;
 	}
 }

package/dist/calendar.js

@@ -2,7 +2,7 @@
 import { ChevronLeft, ChevronRight } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
-import { _ as ComboboxValue, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, m as ComboboxList, o as ComboboxContent, s as ComboboxEmpty, t as Combobox } from "./combobox-CACVdp1R.js";
+import { _ as ComboboxValue, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, m as ComboboxList, o as ComboboxContent, s as ComboboxEmpty, t as Combobox } from "./combobox-D70DFHoM.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";

package/dist/{combobox-CACVdp1R.js → combobox-D70DFHoM.js}

@@ -121,6 +121,16 @@ const comboboxContentBodyVariants = cva("flex min-h-0 flex-1 flex-col overflow-h
 	} },
 	defaultVariants: { size: "md" }
 });
+const comboboxEdgeSizes = {
+	sm: "px-4",
+	md: "px-5.5",
+	lg: "px-6"
+};
+const comboboxLabelSizes = {
+	sm: "px-3",
+	md: "px-4",
+	lg: "px-4"
+};
 const comboboxItemVariants = cva("group/combobox-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none select-none data-highlighted:bg-surface data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: { size: {
 		sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs",
@@ -239,18 +249,20 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 	}) });
 }
 function ComboboxHeader({ className, type = "button", ...props }) {
+	const resolvedSize = useComponentSize();
 	return /* @__PURE__ */ jsx("button", {
 		type,
 		"data-slot": "combobox-header",
-		className: cn("relative z-20 flex min-h-9 w-full shrink-0 cursor-pointer items-center gap-2 rounded-none rounded-t-[inherit] border-line-subtle border-b bg-canvas px-3 py-2 text-left text-gdt-sm font-bold text-fg-brand outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-brand-subtle disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		className: cn("relative z-20 flex min-h-9 w-full shrink-0 cursor-pointer items-center gap-2 rounded-none rounded-t-[inherit] border-line-subtle border-b bg-canvas py-2 text-left text-gdt-sm font-bold text-fg-brand outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-brand-subtle disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", comboboxEdgeSizes[resolvedSize], className),
 		...props
 	});
 }
 function ComboboxFooter({ className, type = "button", ...props }) {
+	const resolvedSize = useComponentSize();
 	return /* @__PURE__ */ jsx("button", {
 		type,
 		"data-slot": "combobox-footer",
-		className: cn("relative z-20 flex min-h-9 w-full shrink-0 cursor-pointer items-center gap-2 rounded-none rounded-b-[inherit] border-line-subtle border-t bg-canvas px-3 py-2 text-left text-gdt-sm font-semibold text-fg-secondary outline-none transition-colors hover:bg-surface focus-visible:bg-surface focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-raised disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		className: cn("relative z-20 flex min-h-9 w-full shrink-0 cursor-pointer items-center gap-2 rounded-none rounded-b-[inherit] border-line-subtle border-t bg-canvas py-2 text-left text-gdt-sm font-semibold text-fg-secondary outline-none transition-colors hover:bg-surface focus-visible:bg-surface focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-raised disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", comboboxEdgeSizes[resolvedSize], className),
 		...props
 	});
 }
@@ -286,9 +298,10 @@ function ComboboxGroup({ className, ...props }) {
 	});
 }
 function ComboboxLabel({ className, ...props }) {
+	const resolvedSize = useComponentSize();
 	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
 		"data-slot": "combobox-label",
-		className: cn("px-3 py-1 text-gdt-xs text-fg-secondary", className),
+		className: cn("py-1 text-gdt-xs text-fg-secondary", comboboxLabelSizes[resolvedSize], className),
 		...props
 	});
 }

package/dist/combobox.js

@@ -1,3 +1,3 @@
 "use client";
-import { _ as ComboboxValue, a as ComboboxCollection, b as useComboboxVirtualizer, c as ComboboxFooter, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxGroup, m as ComboboxList, n as ComboboxChip, o as ComboboxContent, p as ComboboxLabel, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxHeader, v as ComboboxVirtualizedList, y as useComboboxAnchor } from "./combobox-CACVdp1R.js";
+import { _ as ComboboxValue, a as ComboboxCollection, b as useComboboxVirtualizer, c as ComboboxFooter, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxGroup, m as ComboboxList, n as ComboboxChip, o as ComboboxContent, p as ComboboxLabel, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxHeader, v as ComboboxVirtualizedList, y as useComboboxAnchor } from "./combobox-D70DFHoM.js";
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useComboboxAnchor, useComboboxVirtualizer };

package/dist/dialog.d.ts

@@ -4,7 +4,7 @@ import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/dialog.d.ts
 declare function Dialog({ ...props }: Dialog$1.Root.Props): React.JSX.Element;
 declare function DialogTrigger({ ...props }: Dialog$1.Trigger.Props): React.JSX.Element;
-declare function DialogPortal({ ...props }: Dialog$1.Portal.Props): React.JSX.Element;
+declare function DialogPortal({ className, ...props }: Dialog$1.Portal.Props): React.JSX.Element;
 declare function DialogClose({ ...props }: Dialog$1.Close.Props): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React.JSX.Element;
 declare const dialogContentVariants: (props?: ({
@@ -16,10 +16,12 @@ declare const dialogIconVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type DialogContentProps = Dialog$1.Popup.Props & VariantProps<typeof dialogContentVariants> & {
   showCloseButton?: boolean;
+  /** Controls the visual response when this surface participates in a nested dialog stack. */
+  nestingEffect?: "stack" | "none";
   /** @internal Positions specialized popup shells without changing the surface. */
   popupClassName?: string;
 };
-declare function DialogContent({ className, children, size, showCloseButton, popupClassName, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogContent({ className, children, size, showCloseButton, nestingEffect, popupClassName, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogIcon({ className, size, tone, ...props }: React.ComponentProps<"div"> & VariantProps<typeof dialogIconVariants>): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {

package/dist/dialog.js

@@ -3,16 +3,15 @@ import { X } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { Button } from "./button.js";
-import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/dialog.tsx
 function Dialog({ ...props }) {
-	return /* @__PURE__ */ jsx(DialogNestingProvider, { children: /* @__PURE__ */ jsx(Dialog$1.Root, {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
 		"data-slot": "dialog",
 		...props
-	}) });
+	});
 }
 function DialogTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
@@ -20,9 +19,10 @@ function DialogTrigger({ ...props }) {
 		...props
 	});
 }
-function DialogPortal({ ...props }) {
+function DialogPortal({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
 		"data-slot": "dialog-portal",
+		className: (state) => cn("group/dialog-portal", typeof className === "function" ? className(state) : className),
 		...props
 	});
 }
@@ -33,16 +33,14 @@ function DialogClose({ ...props }) {
 	});
 }
 function DialogOverlay({ className, ...props }) {
-	const nested = useDialogNestingDepth() > 1;
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		forceRender: true,
 		"data-slot": "dialog-overlay",
-		"data-nested": nested || void 0,
-		className: cn("fixed inset-0 z-50 transition-opacity duration-150 ease-gdt-out data-closed:opacity-0 data-open:opacity-100", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
+		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 ease-gdt-out data-closed:opacity-0 data-open:opacity-100 supports-backdrop-filter:backdrop-blur-xl group-has-[>.is-nested-dialog]/dialog-portal:bg-black/25 supports-backdrop-filter:group-has-[>.is-nested-dialog]/dialog-portal:backdrop-blur-none", className),
 		...props
 	});
 }
-const dialogContentVariants = cva("group/dialog-content pointer-events-none fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-visible outline-none [--dialog-padding:1.25rem] origin-center transition-[opacity,scale] duration-[var(--duration-motion-popup)] ease-gdt-out data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 data-[nested-dialog-open]:scale-[0.96]", {
+const dialogContentVariants = cva("group/dialog-content pointer-events-none fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-visible outline-none [--dialog-padding:1.25rem] origin-center transition-[opacity,scale] duration-[var(--duration-motion-popup)] ease-gdt-out data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100", {
 	variants: { size: {
 		sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
 		md: "sm:w-105 sm:[--dialog-padding:1.5rem]",
@@ -69,14 +67,15 @@ const dialogIconVariants = cva("flex shrink-0 items-center justify-center [&_svg
 		tone: "brand"
 	}
 });
-function DialogContent({ className, children, size, showCloseButton = true, popupClassName, ...props }) {
+function DialogContent({ className, children, size, showCloseButton = true, nestingEffect = "stack", popupClassName, ...props }) {
 	const resolvedSize = useComponentSize(size);
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize,
 		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 			"data-slot": "dialog-content",
 			"data-size": resolvedSize,
-			className: cn(dialogContentVariants({ size: resolvedSize }), popupClassName),
+			"data-nesting-effect": nestingEffect,
+			className: (state) => cn(dialogContentVariants({ size: resolvedSize }), nestingEffect === "stack" && state.nested && "is-nested-dialog", nestingEffect === "stack" && "data-[nested-dialog-open]:scale-[0.96]", popupClassName),
 			...props,
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-slot": "dialog-surface",
@@ -86,7 +85,7 @@ function DialogContent({ className, children, size, showCloseButton = true, popu
 				"data-slot": "dialog-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "tertiary",
-					className: "pointer-events-auto absolute -top-10 right-0 z-10 group-data-[nested-dialog-open]/dialog-content:hidden",
+					className: cn("pointer-events-auto absolute -top-10 right-0 z-10", nestingEffect === "stack" && "group-data-[nested-dialog-open]/dialog-content:hidden"),
 					size: "icon-sm",
 					children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",

package/dist/infotip.js

@@ -11,7 +11,6 @@ function Infotip({ ...props }) {
 }
 function InfotipTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
-		nativeButton: false,
 		"data-slot": "infotip-trigger",
 		openOnHover: true,
 		delay: 100,

package/dist/input-group.js

@@ -80,12 +80,12 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 		...props
 	});
 }
-const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none rounded-full", {
+const inputGroupButtonVariants = cva("flex items-center gap-2 shadow-none rounded-full", {
 	variants: { size: {
-		xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "",
-		"icon-xs": "size-6 p-0 has-[>svg]:p-0",
-		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+		xs: "h-6 gap-1 px-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+		sm: "text-gdt-sm",
+		"icon-xs": "size-6 min-w-0 gap-0 p-0 text-gdt-xs has-[>svg]:p-0 [&_svg:not([class*='size-'])]:size-3.5",
+		"icon-sm": "size-8 min-w-0 gap-0 p-0 text-gdt-sm has-[>svg]:p-0 [&_svg:not([class*='size-'])]:size-4"
 	} },
 	defaultVariants: { size: "xs" }
 });

package/dist/match.d.ts

@@ -7,12 +7,21 @@ declare const matchVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type MatchVariant = NonNullable<VariantProps<typeof matchVariants>["variant"]>;
-type MatchProps = Omit<React.ComponentProps<"button">, "children" | "value"> & Omit<VariantProps<typeof matchVariants>, "size"> & {
+type MatchProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & Omit<VariantProps<typeof matchVariants>, "size"> & {
   value: number;
   size?: ComponentSizeValue;
   label?: string;
   showChevron?: boolean;
+  /**
+   * Forces the read-only presentation on (`true`) or off (`false`). Left
+   * unset, a `Match` is read-only unless it is given an `onClick` — a score
+   * with nothing behind it should not read as a control.
+   */
+  readOnly?: boolean;
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+  ref?: React.Ref<HTMLElement>;
 };
-declare function Match({ className, value, variant, size, label, showChevron, type, "aria-label": ariaLabel, ...props }: MatchProps): React.JSX.Element;
+declare function Match({ className, value, variant, size, label, showChevron, readOnly, type, disabled, onClick, ref, "aria-label": ariaLabel, ...props }: MatchProps): React.JSX.Element;
 //#endregion
 export { Match, type MatchProps, type MatchVariant, matchVariants };

package/dist/match.js

@@ -3,7 +3,7 @@ import { ChevronDown } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { resolveResponsiveComponentSize, useComponentSizeValue } from "./size-context.js";
 import { CircularProgress } from "./progress.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/match.tsx
 const matchVariants = cva("inline-flex w-fit shrink-0 items-center rounded-full border border-line-subtle bg-surface text-fg-primary shadow-none transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-60", {
@@ -83,54 +83,71 @@ function normalizeMatchValue(value) {
 	if (!Number.isFinite(value)) return 0;
 	return Math.min(100, Math.max(0, Math.round(value)));
 }
-function Match({ className, value, variant = "bar", size, label = "Match", showChevron = true, type = "button", "aria-label": ariaLabel, ...props }) {
+function Match({ className, value, variant = "bar", size, label = "Match", showChevron, readOnly, type = "button", disabled, onClick, ref, "aria-label": ariaLabel, ...props }) {
 	const sizeValue = useComponentSizeValue(size);
 	const resolvedSizes = resolveResponsiveComponentSize(sizeValue);
 	const responsive = typeof sizeValue !== "string";
 	const resolvedVariant = variant ?? "bar";
 	const progress = normalizeMatchValue(value);
 	const text = `${progress}% ${label}`;
+	const interactive = readOnly === void 0 ? onClick !== void 0 : !readOnly;
+	const chevron = showChevron ?? interactive;
 	const rootSizeClasses = cn(matchVariants({
 		variant: resolvedVariant,
 		size: resolvedSizes.base
 	}), responsive && matchBreakpointClasses(resolvedVariant, "md", resolvedSizes.md), responsive && matchBreakpointClasses(resolvedVariant, "lg", resolvedSizes.lg));
-	return /* @__PURE__ */ jsxs("button", {
-		type,
+	const rootProps = {
 		"aria-label": ariaLabel ?? text,
 		"data-slot": "match",
 		"data-variant": resolvedVariant,
 		"data-size": resolvedSizes.base,
 		"data-size-md": responsive ? resolvedSizes.md : void 0,
 		"data-size-lg": responsive ? resolvedSizes.lg : void 0,
-		className: cn(rootSizeClasses, className),
+		className: cn(rootSizeClasses, className)
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		resolvedVariant === "donut" ? /* @__PURE__ */ jsx(MatchDonut, {
+			progress,
+			sizes: resolvedSizes,
+			responsive
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "match-label",
+			className: "shrink-0 font-bold",
+			children: text
+		}),
+		resolvedVariant === "bar" ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "match-bar-track",
+			className: cn("relative shrink-0 overflow-hidden rounded-full bg-surface-raised", matchBarSizes[resolvedSizes.base], responsive && responsiveClass("md", matchBarSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchBarSizes[resolvedSizes.lg])),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "match-bar-fill",
+				className: "absolute inset-y-0 left-0 rounded-full bg-action-primary",
+				style: { width: `${progress}%` }
+			})
+		}) : null,
+		chevron ? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": "true",
+			"data-slot": "match-chevron",
+			className: cn("shrink-0 text-fg-secondary", matchChevronSizes[resolvedSizes.base], responsive && responsiveClass("md", matchChevronSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchChevronSizes[resolvedSizes.lg]))
+		}) : null
+	] });
+	if (!interactive) return /* @__PURE__ */ jsx("span", {
+		...rootProps,
+		"data-readonly": "true",
+		role: "img",
+		ref,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...rootProps,
+		type,
+		disabled,
+		onClick,
+		ref,
 		...props,
-		children: [
-			resolvedVariant === "donut" ? /* @__PURE__ */ jsx(MatchDonut, {
-				progress,
-				sizes: resolvedSizes,
-				responsive
-			}) : null,
-			/* @__PURE__ */ jsx("span", {
-				"data-slot": "match-label",
-				className: "shrink-0 font-bold",
-				children: text
-			}),
-			resolvedVariant === "bar" ? /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-slot": "match-bar-track",
-				className: cn("relative shrink-0 overflow-hidden rounded-full bg-surface-raised", matchBarSizes[resolvedSizes.base], responsive && responsiveClass("md", matchBarSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchBarSizes[resolvedSizes.lg])),
-				children: /* @__PURE__ */ jsx("span", {
-					"data-slot": "match-bar-fill",
-					className: "absolute inset-y-0 left-0 rounded-full bg-action-primary",
-					style: { width: `${progress}%` }
-				})
-			}) : null,
-			showChevron ? /* @__PURE__ */ jsx(ChevronDown, {
-				"aria-hidden": "true",
-				"data-slot": "match-chevron",
-				className: cn("shrink-0 text-fg-secondary", matchChevronSizes[resolvedSizes.base], responsive && responsiveClass("md", matchChevronSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchChevronSizes[resolvedSizes.lg]))
-			}) : null
-		]
+		children: content
 	});
 }
 const responsiveSizeClasses = {

package/dist/media-player.js

@@ -171,7 +171,7 @@ function MediaPlayerRoot({ audio, children, className, onBlurCapture, onFocusCap
 			"data-slot": "media-player",
 			role: "region",
 			tabIndex: 0,
-			className: cn("group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none", "data-[controls=hidden]:cursor-none", "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]", "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none", className),
+			className: cn("group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none [transform:translateZ(0)]", "data-[controls=hidden]:cursor-none", "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]", "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none", className),
 			...props,
 			onBlurCapture: (event) => {
 				onBlurCapture?.(event);
@@ -264,7 +264,7 @@ function MediaPlayerVideo({ className, ref, ...props }) {
 			setRef(ref, node);
 		}, [ref]),
 		"data-slot": "media-player-video",
-		className: cn("block aspect-video size-full rounded-[inherit] object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
+		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,
 		...props
 	});
@@ -891,7 +891,7 @@ function MediaPlayerError({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "media-player-error",
 		role: "alert",
-		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-[inherit] bg-canvas/85 px-6 text-center text-fg-primary backdrop-blur-sm", className),
+		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 bg-canvas px-6 text-center text-fg-primary", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(TriangleAlert, {

package/dist/mobile-sidebar.js

@@ -27,8 +27,8 @@ function MobileSidebarContent({ className, showCloseButton = false, ...props })
 		side: "right",
 		size: "sm",
 		showCloseButton,
-		popupClassName: "h-dvh w-[min(100vw,24.375rem)]",
-		className: cn("h-dvh w-[min(100vw,24.375rem)] rounded-none border-y-0 border-r-0 bg-canvas [--sheet-padding-x:1.25rem] [--sheet-padding-top:0.8125rem]", className),
+		popupClassName: "h-dvh w-full max-w-[24.375rem]",
+		className: cn("h-dvh w-full rounded-none border-y-0 border-r-0 bg-canvas [--sheet-padding-x:1.25rem] [--sheet-padding-top:0.8125rem]", className),
 		...props
 	});
 }
@@ -81,7 +81,7 @@ function MobileSidebarNav({ className, ...props }) {
 function MobileSidebarList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "mobile-sidebar-list",
-		className: cn("flex flex-col", className),
+		className: cn("-mx-4 flex flex-col gap-1", className),
 		...props
 	});
 }
@@ -97,7 +97,7 @@ function MobileSidebarLink({ active = false, icon, className, children, render,
 		defaultTagName: "a",
 		props: mergeProps({
 			"aria-current": active ? "page" : void 0,
-			className: cn("group/mobile-sidebar-link grid min-h-11 w-full grid-cols-1 items-center rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+			className: cn("group/mobile-sidebar-link grid min-h-11 w-full grid-cols-1 items-center rounded-xl px-4 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand hover:bg-surface-brand-subtle", className),
 			children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", {
 				className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
 				children: [icon ? /* @__PURE__ */ jsx("span", {
@@ -127,7 +127,7 @@ function MobileSidebarGroupTrigger({ active = false, icon, className, children,
 	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
 		"data-slot": "mobile-sidebar-group-trigger",
 		"data-active": active || void 0,
-		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl px-4 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand hover:bg-surface-brand-subtle", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
@@ -154,7 +154,7 @@ function MobileSidebarGroupPanel({ className, ...props }) {
 function MobileSidebarSubList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "mobile-sidebar-sub-list",
-		className: cn("ml-8 flex flex-col pb-1", className),
+		className: cn("ml-8 flex flex-col gap-0.5 pb-2 pt-1", className),
 		...props
 	});
 }
@@ -168,7 +168,7 @@ function MobileSidebarSubheading({ className, ...props }) {
 function MobileSidebarSubLink({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("block rounded-lg px-2 py-1.5 text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", className) }, props),
+		props: mergeProps({ className: cn("block rounded-lg px-4 py-1.5 text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", className) }, props),
 		render,
 		state: { slot: "mobile-sidebar-sub-link" }
 	});

package/dist/phone-input.d.ts

@@ -3,19 +3,36 @@ import * as React from "react";
 import { CountryCode } from "libphonenumber-js";
 //#region src/phone-input.d.ts
 interface PhoneInputProps {
+  /** Controlled E.164 value, e.g. `"+2348012345678"`. */
   value?: string;
   onChange?: (value: string | undefined) => void;
+  /** Country the field starts on, before anything is typed. */
   defaultCountry?: CountryCode;
   size?: ComponentSizeValue;
   disabled?: boolean;
   readOnly?: boolean;
   placeholder?: string;
+  /**
+   * Content pinned to the trailing edge of the field — a validity tick, a
+   * "Verify" button, an extension. It sits outside the number, so it never
+   * shifts as the number is formatted.
+   */
+  rightAddon?: React.ReactNode;
   className?: string;
   id?: string;
   name?: string;
   ref?: React.Ref<HTMLInputElement>;
   "aria-invalid"?: boolean;
 }
-declare function PhoneInput({ value, onChange, defaultCountry, size, disabled, readOnly, placeholder, className, id, name, ref, "aria-invalid": ariaInvalid }: PhoneInputProps): React.JSX.Element;
+/**
+ * A phone field that takes a number written either way round.
+ *
+ * `0801 234 5678` and `+234 801 234 5678` are the same number, and both are
+ * accepted here: typing or pasting a leading `+` switches the field to
+ * international entry and moves the country selector to match, while a plain
+ * national number is read against the selected country, trunk prefix and all.
+ * `onChange` receives E.164 in both cases.
+ */
+declare function PhoneInput({ value, onChange, defaultCountry, size, disabled, readOnly, placeholder, rightAddon, className, id, name, ref, "aria-invalid": ariaInvalid }: PhoneInputProps): React.JSX.Element;
 //#endregion
 export { type CountryCode, PhoneInput, type PhoneInputProps };