@giddaa-housing/ui 3.6.0 → 3.8.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/button.js

@@ -76,15 +76,17 @@ function useResolvedButtonSize(size) {
 	const inherited = useComponentSizeValue();
 	return responsiveValueClasses(size ?? inherited, responsiveButtonSizeClasses);
 }
+const responsiveLinkReset = "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 md:h-auto md:min-h-0 md:w-auto md:min-w-0 md:px-0 md:py-0 lg:h-auto lg:min-h-0 lg:w-auto lg:min-w-0 lg:px-0 lg:py-0";
 function Button({ className, variant = "primary", size, isLoading = false, children, disabled = false, ...props }) {
 	const resolvedSize = useResolvedButtonSize(size);
 	const _disabled = disabled || isLoading;
+	const isLinkVariant = variant === "link-brand" || variant === "link-neutral";
 	return /* @__PURE__ */ jsxs(Button$1, {
 		"data-slot": "button",
 		className: cn(buttonVariants({
 			variant,
 			size: null
-		}), resolvedSize.className, className),
+		}), resolvedSize.className, isLinkVariant && responsiveLinkReset, className),
 		disabled: _disabled,
 		...props,
 		children: [
@@ -103,7 +105,7 @@ function ButtonLink({ className, render, variant = "primary", size, disabled = f
 			className: cn(buttonVariants({
 				variant,
 				size: null
-			}), resolvedSize.className, isLinkVariant && "md:h-auto md:min-h-0 md:w-auto md:min-w-0 md:px-0 md:py-0 lg:h-auto lg:min-h-0 lg:w-auto lg:min-w-0 lg:px-0 lg:py-0", className),
+			}), resolvedSize.className, isLinkVariant && responsiveLinkReset, className),
 			children
 		}, {
 			...props,

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-D7QdQzN8.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-D7QdQzN8.js}

@@ -1,6 +1,6 @@
 import { Check, ChevronDown, X } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider, responsiveValueClasses, useComponentSize, useComponentSizeValue } from "./size-context.js";
 import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -90,6 +90,57 @@ const comboboxInputVariants = cva("w-auto data-[grown=true]:rounded-2xl has-data
 	} },
 	defaultVariants: { size: "md" }
 });
+const responsiveComboboxTriggerSizes = {
+	base: {
+		sm: "h-8 min-h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+		md: "h-10 min-h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+		lg: "h-12 min-h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+	},
+	md: {
+		sm: "md:h-8 md:min-h-8 md:gap-2 md:px-3 md:text-gdt-xs md:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "md:h-10 md:min-h-10 md:gap-2 md:px-3.5 md:text-gdt-sm md:[&_svg:not([class*='size-'])]:size-4",
+		lg: "md:h-12 md:min-h-12 md:gap-2.5 md:px-4 md:pr-5 md:text-gdt-md md:[&_svg:not([class*='size-'])]:size-4.5"
+	},
+	lg: {
+		sm: "lg:h-8 lg:min-h-8 lg:gap-2 lg:px-3 lg:text-gdt-xs lg:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "lg:h-10 lg:min-h-10 lg:gap-2 lg:px-3.5 lg:text-gdt-sm lg:[&_svg:not([class*='size-'])]:size-4",
+		lg: "lg:h-12 lg:min-h-12 lg:gap-2.5 lg:px-4 lg:pr-5 lg:text-gdt-md lg:[&_svg:not([class*='size-'])]:size-4.5"
+	}
+};
+const responsiveComboboxInputSizes = {
+	base: {
+		sm: "min-h-8",
+		md: "min-h-10",
+		lg: "min-h-12"
+	},
+	md: {
+		sm: "md:min-h-8",
+		md: "md:min-h-10",
+		lg: "md:min-h-12"
+	},
+	lg: {
+		sm: "lg:min-h-8",
+		md: "lg:min-h-10",
+		lg: "lg:min-h-12"
+	}
+};
+const responsiveComboboxPopupInputSizes = {
+	base: {
+		sm: "rounded-md",
+		md: "rounded-lg",
+		lg: "rounded-lg"
+	},
+	md: {
+		sm: "md:rounded-md",
+		md: "md:rounded-lg",
+		lg: "md:rounded-lg"
+	},
+	lg: {
+		sm: "lg:rounded-md",
+		md: "lg:rounded-lg",
+		lg: "lg:rounded-lg"
+	}
+};
 /**
 * The same field, standing in the popup as its search box. It is inside the
 * open popup rather than being the thing that opened it, so none of the
@@ -121,6 +172,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",
@@ -152,14 +213,14 @@ function ComboboxValue({ ...props }) {
 	});
 }
 function ComboboxTrigger({ className, children, ...props }) {
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveComboboxTriggerSizes);
 	const { ref, grown } = useGrown();
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		ref,
 		"data-slot": "combobox-trigger",
-		"data-size": resolvedSize,
+		"data-size": resolvedSize.base,
 		"data-grown": grown ? "true" : void 0,
-		className: cn(comboboxTriggerVariants({ size: resolvedSize }), className),
+		className: cn(comboboxTriggerVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Combobox.Icon, { render: /* @__PURE__ */ jsx(ChevronDown, { className: "text-line-strong transition-transform group-data-disabled/combobox-trigger:text-fg-caption-placeholder group-data-popup-open/combobox-trigger:rotate-180" }) })]
 	});
@@ -177,7 +238,9 @@ function ComboboxClear({ className, ...props }) {
 	});
 }
 function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
-	const resolvedSize = useComponentSize();
+	const sizeValue = useComponentSizeValue();
+	const resolvedSize = responsiveValueClasses(sizeValue, responsiveComboboxInputSizes);
+	const popupSize = responsiveValueClasses(sizeValue, responsiveComboboxPopupInputSizes);
 	const insidePopup = React.useContext(ComboboxPopupContext);
 	const { ref, grown } = useGrown();
 	const contents = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -199,13 +262,13 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
 		children
 	] });
 	if (insidePopup) return /* @__PURE__ */ jsx(InputGroup, {
-		className: cn(comboboxPopupInputVariants({ size: resolvedSize }), className),
+		className: cn(comboboxPopupInputVariants({ size: null }), popupSize.className, className),
 		children: contents
 	});
 	return /* @__PURE__ */ jsx(Combobox.InputGroup, {
 		ref,
 		"data-grown": grown ? "true" : void 0,
-		render: /* @__PURE__ */ jsx(InputGroup, { className: cn(comboboxInputVariants({ size: resolvedSize }), className) }),
+		render: /* @__PURE__ */ jsx(InputGroup, { className: cn(comboboxInputVariants({ size: null }), resolvedSize.className, className) }),
 		children: contents
 	});
 }
@@ -239,18 +302,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 +351,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.d.ts

@@ -1,9 +1,9 @@
-import { t as ComponentSize } from "./size-context-BVhHduLi.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
 import { Virtualizer } from "@tanstack/react-virtual";
 //#region src/combobox.d.ts
-type ComboboxSize = ComponentSize;
+type ComboboxSize = ComponentSizeValue;
 declare function Combobox<Value, Multiple extends boolean | undefined = false>({ multiple, children, size, ...props }: Combobox$1.Root.Props<Value, Multiple> & {
   size?: ComboboxSize;
 }): React.JSX.Element;

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-D7QdQzN8.js";
 export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useComboboxAnchor, useComboboxVirtualizer };

package/dist/data-table.d.ts

@@ -2,7 +2,7 @@ import { t as Button } from "./button-BS5KCibF.js";
 import { Empty } from "./empty-state.js";
 import { FilterApplyButtonProps, FilterContentProps, FilterProps, FilterResetButtonProps } from "./filter.js";
 import { Pagination } from "./pagination.js";
-import { a as PopoverFooter, n as PopoverBody, o as PopoverHeader, r as PopoverContent } from "./popover-CNymD33m.js";
+import { a as PopoverFooter, n as PopoverBody, o as PopoverHeader, r as PopoverContent } from "./popover-BMTZp3AQ.js";
 import { Table as Table$1 } from "./table.js";
 import * as React from "react";
 import { ColumnDef, Row, Table, TableOptions } from "@tanstack/react-table";

package/dist/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { InputSizeValue } from "./input.js";
-import { t as PickerPlacementProps } from "./picker-j3txxA5t.js";
+import { t as PickerPlacementProps } from "./picker-qxWi9wZ1.js";
 import * as React from "react";
 import { DateRange, Matcher } from "react-day-picker";
 //#region src/date-picker.d.ts

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/field.d.ts

@@ -1,5 +1,5 @@
 import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
-import { Label } from "./label.js";
+import { Label, LabelSupplement } from "./label.js";
 import { VariantProps } from "class-variance-authority";
 //#region src/field.d.ts
 declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
@@ -16,6 +16,7 @@ declare function Field({ className, orientation, size, ...props }: React.Compone
 }): import("react").JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldLabelSupplement({ className, ...props }: React.ComponentProps<typeof LabelSupplement>): import("react").JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
 declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
@@ -27,4 +28,4 @@ declare function FieldError({ className, children, errors, ...props }: React.Com
   } | undefined>;
 }): import("react").JSX.Element | null;
 //#endregion
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLabelSupplement, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/field.js

@@ -2,7 +2,7 @@
 import { cn } from "./utils/cn.js";
 import { SizeProvider, responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { Separator } from "./separator.js";
-import { Label } from "./label.js";
+import { Label, LabelSupplement } from "./label.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { useMemo } from "react";
@@ -95,6 +95,13 @@ function FieldLabel({ className, ...props }) {
 		...props
 	});
 }
+function FieldLabelSupplement({ className, ...props }) {
+	return /* @__PURE__ */ jsx(LabelSupplement, {
+		"data-slot": "field-label-supplement",
+		className: cn("shrink font-normal", className),
+		...props
+	});
+}
 function FieldTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "field-label",
@@ -143,4 +150,4 @@ function FieldError({ className, children, errors, ...props }) {
 	});
 }
 //#endregion
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLabelSupplement, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

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/label.d.ts

@@ -4,5 +4,6 @@ declare function Label({ className, children, withAsterisk, showOptionalText, ..
   withAsterisk?: boolean;
   showOptionalText?: boolean;
 }): React.JSX.Element;
+declare function LabelSupplement({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 //#endregion
-export { Label };
+export { Label, LabelSupplement };

package/dist/label.js

@@ -3,39 +3,27 @@ import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/label.tsx
 function Label({ className, children, withAsterisk = false, showOptionalText = false, ...props }) {
-	const labelClassName = cn("flex w-fit max-w-full items-center gap-1 text-gdt-sm leading-none font-semibold text-fg-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className);
-	if (withAsterisk) return /* @__PURE__ */ jsxs("label", {
+	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "label",
-		className: labelClassName,
+		className: cn("flex w-fit max-w-full flex-wrap items-baseline gap-x-1 gap-y-0.5 text-gdt-sm leading-none font-semibold text-fg-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "inline-flex",
-				children
-			}),
+			children,
+			showOptionalText && /* @__PURE__ */ jsx(LabelSupplement, { children: "(optional)" }),
 			withAsterisk && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
 				className: "inline-flex shrink-0 text-fg-danger",
 				children: "*"
-			}),
-			showOptionalText && /* @__PURE__ */ jsx("span", {
-				className: "text-gdt-xs font-normal italic",
-				children: "(optional)"
 			})
 		]
 	});
-	return /* @__PURE__ */ jsx("label", {
-		"data-slot": "label",
-		className: labelClassName,
-		...props,
-		children: /* @__PURE__ */ jsxs("div", { children: [
-			children,
-			" ",
-			showOptionalText && /* @__PURE__ */ jsx("span", {
-				className: "text-gdt-xs font-normal italic",
-				children: "(optional)"
-			})
-		] })
+}
+function LabelSupplement({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "label-supplement",
+		className: cn("font-normal italic text-fg-secondary", className),
+		...props
 	});
 }
 //#endregion
-export { Label };
+export { Label, LabelSupplement };

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 };