@capra/core 1.11.1 → 1.13.0

package/dist/index.cjs

@@ -346,11 +346,50 @@ HelperText.displayName = "HelperText";
 //#endregion
 //#region src/components/input-helpers/fieldLayout.module.css
 var fieldLayout_module_default = {
-	"field": "capra-fieldLayout-module-GZD11W-field",
-	"fieldContent": "capra-fieldLayout-module-GZD11W-fieldContent",
-	"labelRow": "capra-fieldLayout-module-GZD11W-labelRow"
+	"field": "capra-fieldLayout-module-0mM4jW-field",
+	"fieldContent": "capra-fieldLayout-module-0mM4jW-fieldContent",
+	"labelRow": "capra-fieldLayout-module-0mM4jW-labelRow"
 };
 //#endregion
+//#region src/components/input-helpers/useAnchorWidth.ts
+/**
+* Element that visually bounds the field (select trigger or text input shell). The popover matches
+* its width and left edge, which differs from the field root in horizontal layouts where the label
+* sits beside the control.
+*/
+function getShellElement(anchor) {
+	return anchor.querySelector("[data-capra-anchor-width-target]") ?? anchor.querySelector("[data-capra-text-input]") ?? anchor;
+}
+/** Element React Aria anchors the popover to: the select trigger or the combobox input. */
+function getTriggerElement(anchor) {
+	return anchor.querySelector("[data-capra-anchor-width-target]") ?? anchor.querySelector("input") ?? anchor;
+}
+function useAnchorWidth(additionalDependencies = []) {
+	const anchorRef = react.useRef(null);
+	const [width, setWidth] = react.useState(null);
+	const [offset, setOffset] = react.useState(0);
+	react.useEffect(() => {
+		const anchor = anchorRef.current;
+		if (!anchor) return;
+		const measure = () => {
+			const shell = getShellElement(anchor);
+			const trigger = getTriggerElement(anchor);
+			setWidth(shell.offsetWidth + "px");
+			setOffset(shell.getBoundingClientRect().left - trigger.getBoundingClientRect().left);
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(anchor);
+		const shell = getShellElement(anchor);
+		if (shell !== anchor) observer.observe(shell);
+		return () => observer.disconnect();
+	}, additionalDependencies);
+	return [
+		anchorRef,
+		width,
+		offset
+	];
+}
+//#endregion
 //#region src/components/Autocomplete/AutocompleteField.module.css
 var AutocompleteField_module_default = {
 	"item": "capra-AutocompleteField-module-MVvKYa-item",
@@ -409,41 +448,6 @@ function AutocompleteFieldWithoutRef(props, ref) {
 		style: { width: shouldAutoSizeDropdown ? width : void 0 }
 	}, /* @__PURE__ */ react.default.createElement(react_aria_components.ListBox, { className: AutocompleteField_module_default.listbox }, children)));
 }
-function useResizeObserver({ ref, onResize, additionalDependencies = [] }) {
-	react.default.useEffect(() => {
-		if (!ref.current) return;
-		const observer = new ResizeObserver((entries) => {
-			onResize(entries[0]);
-		});
-		observer.observe(ref.current);
-		return () => observer.disconnect();
-	}, [
-		ref,
-		onResize,
-		...additionalDependencies
-	]);
-}
-function useAnchorWidth(additionalDependencies = []) {
-	const anchorRef = react.default.useRef(null);
-	const [width, setWidth] = (0, react.useState)(null);
-	const [offset, setOffset] = (0, react.useState)(0);
-	useResizeObserver({
-		ref: anchorRef,
-		onResize: (0, react.useCallback)(() => {
-			if (anchorRef.current) {
-				setWidth(anchorRef.current.offsetWidth + "px");
-				const input = anchorRef.current.querySelector("input");
-				if (input) setOffset(anchorRef.current.offsetLeft - input.offsetLeft);
-			}
-		}, [anchorRef]),
-		additionalDependencies
-	});
-	return [
-		anchorRef,
-		width,
-		offset
-	];
-}
 /**
 * AutocompleteField combines a text field with a suggestions list. Consumers can supply static `AutocompleteField.Item` children or an `items` collection with an optional default item renderer. The field allows custom values that are not in the list.
 */
@@ -834,7 +838,7 @@ function RadioTileWithoutRef({ children, checked, disabled, description, icon, F
 const RadioTile = fixedForwardRef(RadioTileWithoutRef);
 //#endregion
 //#region src/components/Switch/Switch.module.css
-var Switch_module_default = { "switch": "capra-Switch-module-16LYpW-switch" };
+var Switch_module_default = { "switch": "capra-Switch-module-j8Yc-q-switch" };
 //#endregion
 //#region src/components/Switch/Switch.tsx
 const Switch = react.forwardRef((props, ref) => {
@@ -2313,6 +2317,430 @@ const DatePickerFieldWithRef = react.forwardRef(DatePickerFieldInner);
 DatePickerFieldWithRef.displayName = "DatePickerField";
 const DatePickerField = DatePickerFieldWithRef;
 //#endregion
+//#region src/components/SelectField/SelectField.module.css
+var SelectField_module_default = {
+	"chevron": "capra-SelectField-module-1X4diq-chevron",
+	"dropdownPanel": "capra-SelectField-module-1X4diq-dropdownPanel",
+	"emptyState": "capra-SelectField-module-1X4diq-emptyState",
+	"errorIndicator": "capra-SelectField-module-1X4diq-errorIndicator",
+	"header": "capra-SelectField-module-1X4diq-header",
+	"item": "capra-SelectField-module-1X4diq-item",
+	"itemCheck": "capra-SelectField-module-1X4diq-itemCheck",
+	"itemContent": "capra-SelectField-module-1X4diq-itemContent",
+	"leadingSlot": "capra-SelectField-module-1X4diq-leadingSlot",
+	"listbox": "capra-SelectField-module-1X4diq-listbox",
+	"multipleOpenButton": "capra-SelectField-module-1X4diq-multipleOpenButton",
+	"multipleTrigger": "capra-SelectField-module-1X4diq-multipleTrigger",
+	"search": "capra-SelectField-module-1X4diq-search",
+	"section": "capra-SelectField-module-1X4diq-section",
+	"singleTrigger": "capra-SelectField-module-1X4diq-singleTrigger",
+	"tag": "capra-SelectField-module-1X4diq-tag",
+	"tagGroup": "capra-SelectField-module-1X4diq-tagGroup",
+	"tagIcon": "capra-SelectField-module-1X4diq-tagIcon",
+	"tagLabel": "capra-SelectField-module-1X4diq-tagLabel",
+	"tagList": "capra-SelectField-module-1X4diq-tagList",
+	"tagRemove": "capra-SelectField-module-1X4diq-tagRemove",
+	"trailingSlot": "capra-SelectField-module-1X4diq-trailingSlot",
+	"triggerShell": "capra-SelectField-module-1X4diq-triggerShell",
+	"value": "capra-SelectField-module-1X4diq-value",
+	"valueIcon": "capra-SelectField-module-1X4diq-valueIcon",
+	"valueText": "capra-SelectField-module-1X4diq-valueText",
+	"warningIndicator": "capra-SelectField-module-1X4diq-warningIndicator"
+};
+//#endregion
+//#region src/components/SelectField/SelectField.tsx
+/** When true, SelectField.Item indents by default (inside SelectField.Section that contains SelectField.Header). */
+const SelectFieldSectionIndentContext = react.createContext(false);
+function normalizeIterable(value) {
+	return value === void 0 ? void 0 : Array.from(value);
+}
+function getItemLabelFromNode(node) {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (react.isValidElement(node)) {
+		if (typeof node.props.textValue === "string") return node.props.textValue;
+		return getItemLabelFromNode(node.props.children);
+	}
+	return "";
+}
+function removeKeysFromSelection(selection, keys) {
+	return (selection ?? []).filter((selectedKey) => !keys.has(selectedKey));
+}
+function getItemIcon(item) {
+	if (item && typeof item === "object" && "icon" in item) {
+		const icon = item.icon;
+		return icon && typeof icon === "object" && "__brand" in icon ? icon : void 0;
+	}
+}
+function isDefaultSection(item) {
+	const children = item.children;
+	return children != null && typeof children !== "string" && typeof children[Symbol.iterator] === "function";
+}
+function SelectFieldIndicators(props) {
+	const { appearance } = props;
+	return /* @__PURE__ */ react.createElement(react.Fragment, null, appearance === "warning" ? /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.warningIndicator,
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(_capra_icons.WarningOutlined, { size: "sm" })) : null, appearance === "danger" ? /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.errorIndicator,
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(_capra_icons.Exclamation, { size: "sm" })) : null, /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.chevron,
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(_capra_icons.ChevronDown, { size: "sm" })));
+}
+function SelectFieldTriggerButton(props) {
+	const { appearance, buttonRef, children, className, ...rest } = props;
+	const localRef = react.useRef(null);
+	const ref = buttonRef ?? localRef;
+	const [mergedProps, mergedRef] = (0, react_aria_components.useContextProps)({
+		...rest,
+		className
+	}, ref, react_aria_components.ButtonContext);
+	const { buttonProps, isPressed } = (0, react_aria.useButton)(mergedProps, mergedRef);
+	const { focusProps, isFocused, isFocusVisible } = (0, react_aria.useFocusRing)(mergedProps);
+	return /* @__PURE__ */ react.createElement("button", {
+		...(0, react_aria.mergeProps)(buttonProps, focusProps),
+		ref: mergedRef,
+		className,
+		"aria-invalid": appearance === "danger" ? true : void 0,
+		"data-pressed": isPressed || void 0,
+		"data-focused": isFocused || void 0,
+		"data-focus-visible": isFocusVisible || void 0,
+		"data-disabled": mergedProps.isDisabled || void 0
+	}, children);
+}
+function SelectFieldTrigger(props) {
+	const { appearance, disabled, leadingSlot, placeholder, required, selectedItemsLabel, size, triggerRef } = props;
+	const state = react.useContext(react_aria_components.SelectStateContext);
+	const openButtonRef = react.useRef(null);
+	if (!state) return null;
+	if (!(state.selectionManager.selectionMode === "multiple")) return /* @__PURE__ */ react.createElement(SelectFieldTriggerButton, {
+		appearance,
+		className: clsx(SelectField_module_default.triggerShell, SelectField_module_default.singleTrigger),
+		"data-capra-anchor-width-target": "",
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"aria-required": required || void 0,
+		isDisabled: disabled
+	}, leadingSlot ? /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.leadingSlot }, leadingSlot) : null, /* @__PURE__ */ react.createElement(react_aria_components.SelectValue, { className: SelectField_module_default.value }, ({ isPlaceholder, selectedText, selectedItems }) => {
+		const ValueIcon = getItemIcon(selectedItems[0]);
+		return /* @__PURE__ */ react.createElement(react.Fragment, null, ValueIcon ? /* @__PURE__ */ react.createElement("span", {
+			className: SelectField_module_default.valueIcon,
+			"aria-hidden": true
+		}, /* @__PURE__ */ react.createElement(ValueIcon, { size: "sm" })) : null, /* @__PURE__ */ react.createElement("span", {
+			className: SelectField_module_default.valueText,
+			"data-placeholder": isPlaceholder || !selectedText || void 0
+		}, selectedText || placeholder));
+	}), /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.trailingSlot }, /* @__PURE__ */ react.createElement(SelectFieldIndicators, { appearance })));
+	const hasSelection = !state.selectionManager.isEmpty;
+	const handleEmptyTriggerPress = (event) => {
+		if (disabled || hasSelection || state.isOpen) return;
+		if (event.target.closest("button")) return;
+		openButtonRef.current?.focus();
+		state.open();
+	};
+	return /* @__PURE__ */ react.createElement(react_aria_components.Group, {
+		ref: triggerRef,
+		className: clsx(SelectField_module_default.triggerShell, SelectField_module_default.multipleTrigger),
+		"data-capra-anchor-width-target": "",
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-empty": hasSelection ? void 0 : "",
+		onClick: handleEmptyTriggerPress
+	}, leadingSlot ? /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.leadingSlot }, leadingSlot) : null, /* @__PURE__ */ react.createElement(react_aria_components.ButtonContext.Provider, { value: null }, /* @__PURE__ */ react.createElement(react_aria_components.SelectValue, { className: SelectField_module_default.value }, ({ state: selectState }) => {
+		const tagItems = selectState.selectedItems.filter((item) => item != null).map((item) => ({
+			id: item.key,
+			label: item.textValue || getItemLabelFromNode(item.rendered) || String(item.key),
+			icon: getItemIcon(item.value)
+		}));
+		return /* @__PURE__ */ react.createElement(react_aria_components.TagGroup, {
+			"aria-label": selectedItemsLabel,
+			className: SelectField_module_default.tagGroup,
+			onRemove: disabled ? void 0 : (keys) => {
+				const value = selectState.value;
+				if (Array.isArray(value)) selectState.setValue(removeKeysFromSelection(value, keys));
+			}
+		}, /* @__PURE__ */ react.createElement(react_aria_components.TagList, {
+			className: SelectField_module_default.tagList,
+			items: tagItems,
+			renderEmptyState: () => /* @__PURE__ */ react.createElement("span", {
+				className: SelectField_module_default.valueText,
+				"data-placeholder": placeholder ? true : void 0
+			}, placeholder)
+		}, (item) => /* @__PURE__ */ react.createElement(react_aria_components.Tag, {
+			id: item.id,
+			textValue: item.label,
+			className: SelectField_module_default.tag,
+			"data-size": size === "sm" ? "sm" : "md"
+		}, ({ allowsRemoving }) => /* @__PURE__ */ react.createElement(react.Fragment, null, item.icon ? /* @__PURE__ */ react.createElement("span", {
+			className: SelectField_module_default.tagIcon,
+			"aria-hidden": true
+		}, /* @__PURE__ */ react.createElement(item.icon, { size: "xs" })) : null, /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.tagLabel }, item.label), allowsRemoving ? /* @__PURE__ */ react.createElement(react_aria_components.Button, {
+			slot: "remove",
+			className: SelectField_module_default.tagRemove,
+			"aria-label": "Delete",
+			excludeFromTabOrder: true
+		}, /* @__PURE__ */ react.createElement(_capra_icons.CloseOutlined, { size: "xs" })) : null))));
+	})), /* @__PURE__ */ react.createElement(SelectFieldTriggerButton, {
+		appearance,
+		buttonRef: openButtonRef,
+		className: SelectField_module_default.multipleOpenButton,
+		isDisabled: disabled,
+		"aria-required": required || void 0
+	}, /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.trailingSlot }, /* @__PURE__ */ react.createElement(SelectFieldIndicators, { appearance }))));
+}
+function SelectFieldItem(props) {
+	const { id, textValue, isDisabled, indent: indentProp, value, children } = props;
+	const indentFromSectionHeader = react.useContext(SelectFieldSectionIndentContext);
+	const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader;
+	return /* @__PURE__ */ react.createElement(react_aria_components.ListBoxItem, {
+		id,
+		value,
+		textValue: textValue || getItemLabelFromNode(children),
+		isDisabled,
+		className: SelectField_module_default.item,
+		"data-indent": indent || void 0
+	}, ({ isSelected, selectionMode }) => /* @__PURE__ */ react.createElement("div", { className: SelectField_module_default.itemContent }, selectionMode === "multiple" ? /* @__PURE__ */ react.createElement("span", {
+		className: SelectField_module_default.itemCheck,
+		"data-selected": isSelected || void 0,
+		"aria-hidden": true
+	}, isSelected ? /* @__PURE__ */ react.createElement(_capra_icons.CheckOutlined, { size: "sm" }) : null) : null, typeof children === "string" ? /* @__PURE__ */ react.createElement(Text, { slot: "label" }, children) : children));
+}
+function SelectFieldHeader(props) {
+	const { id, label = "Header", FORCE__className: classNameOverride, children } = props;
+	return /* @__PURE__ */ react.createElement(react_aria_components.Header, {
+		id,
+		className: clsx(SelectField_module_default.header, classNameOverride)
+	}, children ?? label);
+}
+SelectFieldHeader.displayName = "SelectField.Header";
+function isSelectFieldHeaderElement(child) {
+	return react.isValidElement(child) && child.type === SelectFieldHeader;
+}
+function SelectFieldSection(props) {
+	const { children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, FORCE__className: classNameOverride, className, ...rest } = props;
+	const autoHeaderId = react.useId();
+	const childArray = react.Children.toArray(children);
+	let headerIndex = -1;
+	for (let i = 0; i < childArray.length; i++) if (isSelectFieldHeaderElement(childArray[i])) {
+		headerIndex = i;
+		break;
+	}
+	const hasHeader = headerIndex >= 0;
+	if (process.env.NODE_ENV !== "production") {
+		if (!hasHeader && !ariaLabel?.trim() && !ariaLabelledBy?.trim()) console.error("SelectField.Section: provide aria-label or aria-labelledby when the section has no direct SelectField.Header child.");
+	}
+	const labelledBy = hasHeader ? ariaLabelledBy ?? autoHeaderId : ariaLabelledBy;
+	const effectiveAriaLabel = hasHeader ? void 0 : ariaLabel;
+	const resolvedChildren = hasHeader && headerIndex >= 0 ? childArray.map((child, i) => {
+		if (i === headerIndex && isSelectFieldHeaderElement(child)) return react.cloneElement(child, { id: child.props.id ?? autoHeaderId });
+		return child;
+	}) : children;
+	return /* @__PURE__ */ react.createElement(SelectFieldSectionIndentContext.Provider, { value: hasHeader }, /* @__PURE__ */ react.createElement(react_aria_components.ListBoxSection, {
+		"aria-label": effectiveAriaLabel,
+		"aria-labelledby": labelledBy,
+		className: clsx(SelectField_module_default.section, className, classNameOverride),
+		...rest
+	}, resolvedChildren));
+}
+SelectFieldSection.displayName = "SelectField.Section";
+function defaultSelectFieldItemRenderer(item) {
+	if (isDefaultSection(item)) {
+		const { id, label, "aria-label": ariaLabel, children } = item;
+		return /* @__PURE__ */ react.createElement(SelectFieldSection, {
+			key: String(id),
+			"aria-label": label ? void 0 : ariaLabel
+		}, label ? /* @__PURE__ */ react.createElement(SelectFieldHeader, { label }) : null, /* @__PURE__ */ react.createElement(react_aria_components.Collection, { items: children }, (child) => defaultSelectFieldItemRenderer(child)));
+	}
+	const Icon = item.icon;
+	return /* @__PURE__ */ react.createElement(SelectFieldItem, {
+		id: item.id,
+		textValue: item.label
+	}, Icon ? /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(Icon, { size: "sm" }), /* @__PURE__ */ react.createElement(Text, { slot: "label" }, item.label)) : item.label);
+}
+function SelectFieldLabel(props) {
+	const { children, required } = props;
+	const { elementType: _elementType, ...labelContextWithoutElementType } = (0, react_aria_components.useSlottedContext)(react_aria_components.LabelContext) ?? {};
+	return /* @__PURE__ */ react.createElement(react_aria_components.LabelContext.Provider, { value: labelContextWithoutElementType }, /* @__PURE__ */ react.createElement(Label, { required }, children));
+}
+function AutocompleteTextInput(props) {
+	const { placeholder, shouldFocus, size } = props;
+	const ref = react.useRef(null);
+	const [mergedProps, mergedRef] = (0, react_aria_components.useContextProps)({
+		"aria-label": props["aria-label"],
+		placeholder,
+		type: "search"
+	}, ref, react_aria_components.FieldInputContext);
+	const { onChange, value, ...inputProps } = mergedProps;
+	const inputRef = mergedRef;
+	react.useLayoutEffect(() => {
+		if (!shouldFocus) return;
+		const input = inputRef.current;
+		if (!input) return;
+		requestAnimationFrame(() => {
+			try {
+				input.focus({ preventScroll: true });
+			} catch {}
+		});
+	}, [inputRef, shouldFocus]);
+	return /* @__PURE__ */ react.createElement(TextInput, {
+		...inputProps,
+		ref: inputRef,
+		size,
+		value: typeof value === "string" ? value : "",
+		onChange: (event) => {
+			onChange?.(event.target.value);
+		}
+	});
+}
+function SelectFieldInner(props, ref) {
+	const { appearance = "default", autoFocus, canSearch, defaultOpen, disabled, disabledKeys, helperText, id, isOpen, items, children, label, layout, leadingSlot, name, onOpenChange, placeholder, required, searchPlaceholder, selectionMode = "single", shouldAutoSizeDropdown = true, size = "md", FORCE__className: classNameOverride, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+	const [searchValue, setSearchValue] = react.useState("");
+	const [popoverWidth, setPopoverWidth] = react.useState();
+	const [uncontrolledOpen, setUncontrolledOpen] = react.useState(Boolean(defaultOpen));
+	const isPopoverOpen = isOpen ?? uncontrolledOpen;
+	const { contains } = (0, react_aria_components.useFilter)({ sensitivity: "base" });
+	const [anchorRef, width, offset] = useAnchorWidth([
+		canSearch,
+		selectionMode,
+		size
+	]);
+	const multipleTriggerRef = react.useRef(null);
+	const selectedItemsLabel = label ? `Selected ${label}` : ariaLabel ?? "Selected items";
+	react.useImperativeHandle(ref, () => anchorRef.current, [anchorRef]);
+	react.useLayoutEffect(() => {
+		const trigger = multipleTriggerRef.current ?? anchorRef.current;
+		if (selectionMode !== "multiple" || !isPopoverOpen || popoverWidth || !trigger) return;
+		setPopoverWidth(`${trigger.offsetWidth}px`);
+	}, [
+		isPopoverOpen,
+		popoverWidth,
+		selectionMode,
+		width,
+		anchorRef
+	]);
+	const itemList = react.useMemo(() => items ? Array.from(items) : void 0, [items]);
+	const resolvedChildren = children ?? (itemList ? defaultSelectFieldItemRenderer : void 0);
+	const handleOpenChange = react.useCallback((nextOpen) => {
+		if (isOpen === void 0) setUncontrolledOpen(nextOpen);
+		if (selectionMode === "multiple" && !nextOpen) setPopoverWidth(void 0);
+		if (!nextOpen) setSearchValue("");
+		onOpenChange?.(nextOpen);
+	}, [
+		isOpen,
+		onOpenChange,
+		selectionMode
+	]);
+	const dropdownWidth = selectionMode === "multiple" ? popoverWidth ?? width ?? void 0 : width ?? void 0;
+	const listBoxSearchProps = canSearch ? {
+		autoFocus: false,
+		renderEmptyState: () => /* @__PURE__ */ react.createElement("span", { className: SelectField_module_default.emptyState }, "No results")
+	} : {};
+	const listBox = /* @__PURE__ */ react.createElement(react_aria_components.ListBox, {
+		...listBoxSearchProps,
+		className: SelectField_module_default.listbox,
+		"data-selection-mode": selectionMode,
+		items: itemList
+	}, resolvedChildren);
+	const popoverContent = canSearch ? /* @__PURE__ */ react.createElement(react_aria_components.Autocomplete, {
+		filter: contains,
+		inputValue: searchValue,
+		onInputChange: setSearchValue
+	}, /* @__PURE__ */ react.createElement("div", { className: SelectField_module_default.search }, /* @__PURE__ */ react.createElement(AutocompleteTextInput, {
+		"aria-label": searchPlaceholder || "Search",
+		placeholder: searchPlaceholder || "Search",
+		shouldFocus: isPopoverOpen,
+		size
+	})), listBox) : listBox;
+	const selectContent = /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement("div", { className: fieldLayout_module_default.labelRow }, /* @__PURE__ */ react.createElement(SelectFieldLabel, { required }, label)), /* @__PURE__ */ react.createElement("div", { className: fieldLayout_module_default.fieldContent }, /* @__PURE__ */ react.createElement(SelectFieldTrigger, {
+		appearance,
+		disabled,
+		leadingSlot,
+		placeholder,
+		required,
+		selectedItemsLabel,
+		size,
+		triggerRef: selectionMode === "multiple" ? multipleTriggerRef : void 0
+	}), /* @__PURE__ */ react.createElement(HelperText, {
+		appearance,
+		disabled
+	}, helperText)), /* @__PURE__ */ react.createElement(react_aria_components.Popover, {
+		className: SelectField_module_default.dropdownPanel,
+		offset: 2,
+		crossOffset: offset,
+		triggerRef: selectionMode === "multiple" ? multipleTriggerRef : void 0,
+		style: { width: shouldAutoSizeDropdown ? dropdownWidth : void 0 }
+	}, popoverContent));
+	if (props.selectionMode === "multiple") {
+		const handleChange = (nextValue) => {
+			props.onChange?.(new Set(nextValue));
+		};
+		return /* @__PURE__ */ react.createElement(react_aria_components.Select, {
+			id,
+			ref: anchorRef,
+			name,
+			className: clsx(fieldLayout_module_default.field, classNameOverride),
+			"data-capra-field-root": "",
+			"data-layout": layout,
+			isDisabled: disabled,
+			isRequired: required,
+			isInvalid: appearance === "danger",
+			validationBehavior: "aria",
+			placeholder,
+			selectionMode: "multiple",
+			disabledKeys,
+			value: normalizeIterable(props.value),
+			defaultValue: normalizeIterable(props.defaultValue),
+			onChange: handleChange,
+			isOpen,
+			defaultOpen,
+			onOpenChange: handleOpenChange,
+			autoFocus,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": ariaDescribedBy
+		}, selectContent);
+	}
+	const handleChange = (nextValue) => {
+		props.onChange?.(nextValue ?? null);
+	};
+	return /* @__PURE__ */ react.createElement(react_aria_components.Select, {
+		id,
+		ref: anchorRef,
+		name,
+		className: clsx(fieldLayout_module_default.field, classNameOverride),
+		"data-capra-field-root": "",
+		"data-layout": layout,
+		isDisabled: disabled,
+		isRequired: required,
+		isInvalid: appearance === "danger",
+		validationBehavior: "aria",
+		placeholder,
+		selectionMode: "single",
+		disabledKeys,
+		value: props.value,
+		defaultValue: props.defaultValue,
+		onChange: handleChange,
+		isOpen,
+		defaultOpen,
+		onOpenChange: handleOpenChange,
+		autoFocus,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy
+	}, selectContent);
+}
+const SelectFieldRoot = react.forwardRef(SelectFieldInner);
+/**
+* Composed select field with Capra label/helper text layout, single and multiple selection, and an optional popover search input.
+*/
+const SelectField = Object.assign(SelectFieldRoot, {
+	Item: SelectFieldItem,
+	Header: SelectFieldHeader,
+	Section: SelectFieldSection
+});
+//#endregion
 //#region src/components/DateRangePickerField/DateRangePickerField.module.css
 var DateRangePickerField_module_default = {
 	"cell": "capra-DateRangePickerField-module-QpPhpG-cell",
@@ -4120,20 +4548,21 @@ const Toast = {
 //#endregion
 //#region src/components/Menu/Menu.module.css
 var Menu_module_default = {
-	"divider": "capra-Menu-module-3G4VeG-divider",
-	"header": "capra-Menu-module-3G4VeG-header",
-	"list": "capra-Menu-module-3G4VeG-list",
-	"menu": "capra-Menu-module-3G4VeG-menu",
-	"menuItem": "capra-Menu-module-3G4VeG-menuItem",
-	"menuItemDescription": "capra-Menu-module-3G4VeG-menuItemDescription",
-	"menuItemLabel": "capra-Menu-module-3G4VeG-menuItemLabel",
-	"menuItemLeadingGutter": "capra-Menu-module-3G4VeG-menuItemLeadingGutter",
-	"menuItemListItemShell": "capra-Menu-module-3G4VeG-menuItemListItemShell",
-	"menuItemShortcut": "capra-Menu-module-3G4VeG-menuItemShortcut",
-	"menuItemTrailingGroup": "capra-Menu-module-3G4VeG-menuItemTrailingGroup",
-	"menuItemTrailingGutter": "capra-Menu-module-3G4VeG-menuItemTrailingGutter",
-	"menuTriggerSlot": "capra-Menu-module-3G4VeG-menuTriggerSlot",
-	"section": "capra-Menu-module-3G4VeG-section"
+	"divider": "capra-Menu-module-HIhAFW-divider",
+	"header": "capra-Menu-module-HIhAFW-header",
+	"list": "capra-Menu-module-HIhAFW-list",
+	"menu": "capra-Menu-module-HIhAFW-menu",
+	"menuItem": "capra-Menu-module-HIhAFW-menuItem",
+	"menuItemDescription": "capra-Menu-module-HIhAFW-menuItemDescription",
+	"menuItemLabel": "capra-Menu-module-HIhAFW-menuItemLabel",
+	"menuItemLeadingGutter": "capra-Menu-module-HIhAFW-menuItemLeadingGutter",
+	"menuItemListItemShell": "capra-Menu-module-HIhAFW-menuItemListItemShell",
+	"menuItemShortcut": "capra-Menu-module-HIhAFW-menuItemShortcut",
+	"menuItemTrailingGroup": "capra-Menu-module-HIhAFW-menuItemTrailingGroup",
+	"menuItemTrailingGutter": "capra-Menu-module-HIhAFW-menuItemTrailingGutter",
+	"menuTriggerSlot": "capra-Menu-module-HIhAFW-menuTriggerSlot",
+	"section": "capra-Menu-module-HIhAFW-section",
+	"slot": "capra-Menu-module-HIhAFW-slot"
 };
 //#endregion
 //#region src/components/Menu/Menu.tsx
@@ -4223,7 +4652,7 @@ const MenuItem = ({ as: Component, label, description, ariaLabel, href, disabled
 	const labelContent = children ?? label;
 	const showDescription = description != null && description !== "";
 	const textValue = ariaLabel || (typeof label === "string" ? label : void 0) || (typeof children === "string" ? children : void 0) || "";
-	const listItemContent = /* @__PURE__ */ react.createElement(react.Fragment, null, (indent || icon) && /* @__PURE__ */ react.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon && /* @__PURE__ */ react.createElement("span", { "aria-hidden": "true" }, icon)), /* @__PURE__ */ react.createElement(ListItem.Content, null, /* @__PURE__ */ react.createElement(ListItem.Label, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ react.createElement(ListItem.Description, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ react.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ react.createElement("span", {
+	const listItemContent = /* @__PURE__ */ react.createElement(react.Fragment, null, (indent || icon) && /* @__PURE__ */ react.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon), /* @__PURE__ */ react.createElement(ListItem.Content, null, /* @__PURE__ */ react.createElement(ListItem.Label, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ react.createElement(ListItem.Description, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ react.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ react.createElement("span", {
 		key: "shortcut",
 		className: Menu_module_default.menuItemShortcut
 	}, shortcut) : null, parent ? /* @__PURE__ */ react.createElement(_capra_icons.ChevronRight, {
@@ -4251,7 +4680,8 @@ const MenuItem = ({ as: Component, label, description, ariaLabel, href, disabled
 		"data-has-description": showDescription || void 0,
 		render,
 		onClick,
-		onPress
+		onPress,
+		...rest
 	}, /* @__PURE__ */ react.createElement(ListItem, {
 		as: "div",
 		role: "presentation",
@@ -4293,7 +4723,6 @@ const MenuSubmenu = ({ label, children, itemHoverAppearance = "default", itemAct
 	}, listItemContent)), /* @__PURE__ */ react.createElement(PopoverSurface, {
 		placement: "rightTop",
 		isNonModal: true,
-		shouldFlip: false,
 		offsets: [0, 0],
 		removeContentPadding: true
 	}, /* @__PURE__ */ react.createElement("div", menuSessionId != null ? { [MENU_SESSION_DATA_ATTR]: menuSessionId } : {}, /* @__PURE__ */ react.createElement(react_aria_components.Menu, {
@@ -4361,7 +4790,7 @@ function MenuPanelFocusScope({ controlledOpen, children }) {
 		restoreFocus: true
 	}, children));
 }
-const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 0, trapFocus = false, FORCE__className: classNameOverride }) => {
+const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 2, trapFocus = false, FORCE__className: classNameOverride }) => {
 	const sessionId = react.useId();
 	const menuPanel = /* @__PURE__ */ react.createElement(react_aria_components.Menu, {
 		className: clsx(Menu_module_default.menu, classNameOverride),
@@ -4428,6 +4857,17 @@ var TabNav_module_default = {
 const SUB_KEY_SEP = "::";
 /** Delay before closing a subnav on pointer leave (hover), so users can move into the menu. */
 const HOVER_CLOSE_DELAY_MS = 150;
+function getRoutedLinkProps(source) {
+	return {
+		href: source.href,
+		hrefLang: source.hrefLang,
+		target: source.target,
+		rel: source.rel,
+		download: source.download,
+		referrerPolicy: source.referrerPolicy,
+		routerOptions: source.routerOptions
+	};
+}
 function optionalAriaLabelProps(source) {
 	const v = source["aria-label"];
 	return v != null && v !== "" ? { "aria-label": v } : {};
@@ -4437,7 +4877,7 @@ function optionalAriaLabelProps(source) {
 * Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs
 * use an inline indented list (Tab Nav | Vertical in Figma).
 */
-const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
+const TabNav = ({ activeKey, onTabPress, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
 	const [subMenuOpen, setSubMenuOpen] = react.useState({});
 	const hoverCloseTimeoutRef = react.useRef(null);
 	const pendingKeyboardFocusKeyRef = react.useRef(null);
@@ -4598,15 +5038,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 		getEnabledMenuItems,
 		getTriggerElement
 	]);
-	const handleTabClick = (key, event) => {
-		const item = items.find((i) => i.key === key);
-		if (item?.disabled) {
-			event.preventDefault();
-			return;
-		}
-		if (item?.subItems?.length) return;
-		onTabClick?.(key, event);
-	};
 	const handleKeyDown = (event, key) => {
 		const itemIndex = items.findIndex((i) => i.key === key);
 		if (itemIndex === -1) return;
@@ -4743,37 +5174,24 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 			}, item.subItems.map((sub) => {
 				const subActive = activeMainKey === item.key && activeSubKey === sub.key;
 				const compoundKey = `${item.key}${SUB_KEY_SEP}${sub.key}`;
-				const subCommon = {
+				return /* @__PURE__ */ react.createElement("li", {
+					key: sub.key,
+					className: TabNav_module_default.subTabListItem
+				}, /* @__PURE__ */ react.createElement(react_aria_components.Link, {
 					"data-tab-key": compoundKey,
 					"data-indent": true,
 					"data-variant": "default",
 					"data-active": subActive || void 0,
-					"data-disabled": sub.disabled || void 0,
 					id: `tabnav-${item.key}-${sub.key}`,
 					className: clsx(TabNav_module_default.tab, TabNav_module_default.subTab),
-					"aria-current": subActive ? "page" : void 0
-				};
-				if (sub.href && sub.disabled) return /* @__PURE__ */ react.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ react.createElement("a", {
-					...subCommon,
+					"aria-current": subActive ? "page" : void 0,
 					...optionalAriaLabelProps(sub),
-					href: sub.href,
-					"aria-disabled": true,
-					tabIndex: -1,
-					onClick: (e) => e.preventDefault()
-				}, /* @__PURE__ */ react.createElement("span", {
-					className: TabNav_module_default.indentSpacer,
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
-				if (sub.href) return /* @__PURE__ */ react.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ react.createElement("a", {
-					...subCommon,
-					...optionalAriaLabelProps(sub),
-					href: sub.href,
+					...getRoutedLinkProps(sub),
+					isDisabled: sub.disabled,
+					onPress: () => {
+						sub.onPress?.();
+						onTabPress?.(compoundKey);
+					},
 					onClick: (e) => {
 						sub.onClick?.(e);
 						onTabClick?.(compoundKey, e);
@@ -4783,26 +5201,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 					className: TabNav_module_default.indentSpacer,
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
-				return /* @__PURE__ */ react.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ react.createElement("span", {
-					...subCommon,
-					...optionalAriaLabelProps(sub),
-					role: "link",
-					"aria-disabled": sub.disabled,
-					tabIndex: sub.disabled ? -1 : 0,
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							sub.onClick?.(e);
-							onTabClick?.(compoundKey, e);
-						} else handleKeyDown(e, item.key);
-					}
-				}, /* @__PURE__ */ react.createElement("span", {
-					className: TabNav_module_default.indentSpacer,
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
 			})));
 		}
 		if (hasSubItems) {
@@ -4826,7 +5224,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 				itemActiveLabelSemibold: false,
 				panelPadding: "none",
 				popoverOffset: 1,
-				open: subMenuOpen[item.key],
+				open: Boolean(subMenuOpen[item.key]),
 				onOpenChange: (open) => {
 					if (open) {
 						openSubMenu(item.key);
@@ -4862,36 +5260,30 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 					ariaLabel: sub["aria-label"],
 					href: sub.href,
 					disabled: sub.disabled,
+					routerOptions: sub.routerOptions,
 					active: activeSubKey === sub.key,
+					onPress: () => {
+						sub.onPress?.();
+						onTabPress?.(`${item.key}${SUB_KEY_SEP}${sub.key}`);
+						closeMenu();
+					},
 					onClick: (e) => {
 						sub.onClick?.(e);
-						closeMenu();
+						onTabClick?.(`${item.key}${SUB_KEY_SEP}${sub.key}`, e);
 					}
 				});
 			}));
 		}
-		if (item.href && !item.disabled) return /* @__PURE__ */ react.createElement(react_aria_components.Link, {
+		return /* @__PURE__ */ react.createElement(react_aria_components.Link, {
 			key: item.key,
 			...commonTabProps,
-			href: item.href,
+			...getRoutedLinkProps(item),
+			isDisabled: item.disabled,
 			"aria-current": ariaCurrentPage ? "page" : void 0,
-			onClick: (e) => handleTabClick(item.key, e),
+			onPress: () => onTabPress?.(item.key),
+			onClick: (e) => onTabClick?.(item.key, e),
 			onKeyDown: (e) => handleKeyDown(e, item.key)
 		}, renderTabContent(item));
-		return /* @__PURE__ */ react.createElement("span", {
-			key: item.key,
-			...commonTabProps,
-			role: "link",
-			"aria-disabled": item.disabled,
-			"aria-current": ariaCurrentPage ? "page" : void 0,
-			tabIndex: item.disabled ? -1 : computedTabIndex ?? 0,
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleTabClick(item.key, e);
-				} else handleKeyDown(e, item.key);
-			}
-		}, renderTabContent(item));
 	})), tabBarExtraSlot && /* @__PURE__ */ react.createElement("div", { className: TabNav_module_default.extraContent }, tabBarExtraSlot)));
 };
 TabNav.displayName = "TabNav";
@@ -5270,6 +5662,7 @@ Object.defineProperty(exports, "RouterProvider", {
 });
 exports.SKELETON_SIZE = SKELETON_SIZE;
 exports.SKELETON_SIZE_TOKENS = SKELETON_SIZE_TOKENS;
+exports.SelectField = SelectField;
 exports.Skeleton = Skeleton;
 exports.SkeletonGroup = SkeletonGroup;
 exports.Spinner = Spinner;