npm - @primer/react - Versions diffs - 38.40.0 → 38.40.1-rc.0bcc68991 - Mend

@primer/react 38.40.0 → 38.40.1-rc.0bcc68991

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,13 @@
 # @primer/react
+## 38.40.1
+### Patch Changes
+- [#8413](https://github.com/primer/react/pull/8413) [`d4e30ed`](https://github.com/primer/react/commit/d4e30ed186af6ae781b3adcf83278e0c2001a834) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SelectPanel: Announce the filter input label when focus moves into the panel
+- [#8442](https://github.com/primer/react/pull/8442) [`68019e8`](https://github.com/primer/react/commit/68019e8945a754bb0f97c9e963b90e2a9ccaaf85) Thanks [@joshfarrant](https://github.com/joshfarrant)! - SegmentedControl: Allow controls to grow vertically and preserve visible labels when they wrap
 ## 38.40.0
 ### Minor Changes

package/dist/FilteredActionList/FilteredActionList.js CHANGED Viewed

@@ -96,6 +96,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		}
 	}, [activeDescendantRef]);
 	const listContainerRefCallback = useCallback((node) => {
+		listRef.current = node;
 		setListContainerElement(node);
 		onListContainerRefChanged === null || onListContainerRefChanged === void 0 || onListContainerRefChanged(node);
 	}, [onListContainerRefChanged]);
@@ -201,7 +202,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		readInputRef,
 		usingRovingTabindex
 	]);
-	useAnnouncements(items, usingRovingTabindex ? listRef : { current: listContainerElement }, readInputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement);
+	const onInputFocus = useAnnouncements(items, listRef, readInputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement, filterValue);
 	useScrollFlash(readScrollContainerRef);
 	const handleSelectAllChange = useCallback((e) => {
 		if (onSelectAllChange) onSelectAllChange(e.target.checked);
@@ -302,6 +303,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
 		children: [
 			/*#__PURE__*/ jsx(FilteredActionListInput, {
 				inputRef: appliedInputRef,
+				onInputFocus,
 				value: filterValue,
 				onInputChange,
 				onInputKeyPress,

package/dist/FilteredActionList/FilteredActionListInput.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import React from "react";
 interface FilteredActionListInputProps extends Partial<Omit<TextInputProps, 'onChange' | 'onKeyDown'>> {
   inputRef: React.Ref<HTMLInputElement | null>;
   onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInputFocus?: React.FocusEventHandler<HTMLInputElement>;
   onInputKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
   onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   placeholderText?: string;
@@ -17,6 +18,7 @@ declare function FilteredActionListInput({
   inputRef,
   value,
   onInputChange,
+  onInputFocus,
   onInputKeyPress,
   onInputKeyDown,
   placeholderText,
@@ -25,6 +27,7 @@ declare function FilteredActionListInput({
   loading,
   fullScreenOnNarrow,
   className,
+  onFocus,
   ...restTextInputProps
 }: FilteredActionListInputProps): React.JSX.Element;
 //#endregion

package/dist/FilteredActionList/FilteredActionListInput.js CHANGED Viewed

@@ -5,21 +5,23 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/FilteredActionList/FilteredActionListInput.tsx
 function FilteredActionListInput(t0) {
-	const $ = c(28);
+	const $ = c(34);
 	let className;
 	let fullScreenOnNarrow;
 	let inputDescriptionTextId;
 	let inputRef;
 	let listId;
 	let loading;
+	let onFocus;
 	let onInputChange;
+	let onInputFocus;
 	let onInputKeyDown;
 	let onInputKeyPress;
 	let placeholderText;
 	let restTextInputProps;
 	let value;
 	if ($[0] !== t0) {
-		({inputRef, value, onInputChange, onInputKeyPress, onInputKeyDown, placeholderText, listId, inputDescriptionTextId, loading, fullScreenOnNarrow, className, ...restTextInputProps} = t0);
+		({inputRef, value, onInputChange, onInputFocus, onInputKeyPress, onInputKeyDown, placeholderText, listId, inputDescriptionTextId, loading, fullScreenOnNarrow, className, onFocus, ...restTextInputProps} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = fullScreenOnNarrow;
@@ -27,12 +29,14 @@ function FilteredActionListInput(t0) {
 		$[4] = inputRef;
 		$[5] = listId;
 		$[6] = loading;
-		$[7] = onInputChange;
-		$[8] = onInputKeyDown;
-		$[9] = onInputKeyPress;
-		$[10] = placeholderText;
-		$[11] = restTextInputProps;
-		$[12] = value;
+		$[7] = onFocus;
+		$[8] = onInputChange;
+		$[9] = onInputFocus;
+		$[10] = onInputKeyDown;
+		$[11] = onInputKeyPress;
+		$[12] = placeholderText;
+		$[13] = restTextInputProps;
+		$[14] = value;
 	} else {
 		className = $[1];
 		fullScreenOnNarrow = $[2];
@@ -40,23 +44,36 @@ function FilteredActionListInput(t0) {
 		inputRef = $[4];
 		listId = $[5];
 		loading = $[6];
-		onInputChange = $[7];
-		onInputKeyDown = $[8];
-		onInputKeyPress = $[9];
-		placeholderText = $[10];
-		restTextInputProps = $[11];
-		value = $[12];
+		onFocus = $[7];
+		onInputChange = $[8];
+		onInputFocus = $[9];
+		onInputKeyDown = $[10];
+		onInputKeyPress = $[11];
+		placeholderText = $[12];
+		restTextInputProps = $[13];
+		value = $[14];
 	}
 	let t1;
-	if ($[13] !== className || $[14] !== fullScreenOnNarrow) {
-		t1 = clsx(className, { [FilteredActionList_module_css_default.FullScreenTextInput]: fullScreenOnNarrow });
-		$[13] = className;
-		$[14] = fullScreenOnNarrow;
-		$[15] = t1;
-	} else t1 = $[15];
+	if ($[15] !== onFocus || $[16] !== onInputFocus) {
+		t1 = (event) => {
+			var _onInputFocus, _onFocus;
+			(_onInputFocus = onInputFocus) === null || _onInputFocus === void 0 || _onInputFocus(event);
+			(_onFocus = onFocus) === null || _onFocus === void 0 || _onFocus(event);
+		};
+		$[15] = onFocus;
+		$[16] = onInputFocus;
+		$[17] = t1;
+	} else t1 = $[17];
 	let t2;
-	if ($[16] !== inputDescriptionTextId || $[17] !== inputRef || $[18] !== listId || $[19] !== loading || $[20] !== onInputChange || $[21] !== onInputKeyDown || $[22] !== onInputKeyPress || $[23] !== placeholderText || $[24] !== restTextInputProps || $[25] !== t1 || $[26] !== value) {
-		t2 = /*#__PURE__*/ jsx("div", {
+	if ($[18] !== className || $[19] !== fullScreenOnNarrow) {
+		t2 = clsx(className, { [FilteredActionList_module_css_default.FullScreenTextInput]: fullScreenOnNarrow });
+		$[18] = className;
+		$[19] = fullScreenOnNarrow;
+		$[20] = t2;
+	} else t2 = $[20];
+	let t3;
+	if ($[21] !== inputDescriptionTextId || $[22] !== inputRef || $[23] !== listId || $[24] !== loading || $[25] !== onInputChange || $[26] !== onInputKeyDown || $[27] !== onInputKeyPress || $[28] !== placeholderText || $[29] !== restTextInputProps || $[30] !== t1 || $[31] !== t2 || $[32] !== value) {
+		t3 = /*#__PURE__*/ jsx("div", {
 			className: FilteredActionList_module_css_default.Header,
 			"data-component": "FilteredActionList.Header",
 			children: /*#__PURE__*/ jsx(TextInput_default, {
@@ -66,6 +83,7 @@ function FilteredActionListInput(t0) {
 				color: "fg.default",
 				value,
 				onChange: onInputChange,
+				onFocus: t1,
 				onKeyPress: onInputKeyPress,
 				onKeyDown: onInputKeyDown,
 				placeholder: placeholderText,
@@ -77,24 +95,25 @@ function FilteredActionListInput(t0) {
 				"aria-describedby": inputDescriptionTextId,
 				loaderPosition: "leading",
 				loading,
-				className: t1,
+				className: t2,
 				...restTextInputProps
 			})
 		});
-		$[16] = inputDescriptionTextId;
-		$[17] = inputRef;
-		$[18] = listId;
-		$[19] = loading;
-		$[20] = onInputChange;
-		$[21] = onInputKeyDown;
-		$[22] = onInputKeyPress;
-		$[23] = placeholderText;
-		$[24] = restTextInputProps;
-		$[25] = t1;
-		$[26] = value;
-		$[27] = t2;
-	} else t2 = $[27];
-	return t2;
+		$[21] = inputDescriptionTextId;
+		$[22] = inputRef;
+		$[23] = listId;
+		$[24] = loading;
+		$[25] = onInputChange;
+		$[26] = onInputKeyDown;
+		$[27] = onInputKeyPress;
+		$[28] = placeholderText;
+		$[29] = restTextInputProps;
+		$[30] = t1;
+		$[31] = t2;
+		$[32] = value;
+		$[33] = t3;
+	} else t3 = $[33];
+	return t3;
 }
 //#endregion
 export { FilteredActionListInput };

package/dist/FilteredActionList/useAnnouncements.js CHANGED Viewed

@@ -2,12 +2,20 @@ import { useCallback, useEffect, useRef } from "react";
 import { announce } from "@primer/live-region-element";
 //#region src/FilteredActionList/useAnnouncements.tsx
 const delayMs = 500;
-const useFirstRender = () => {
-	const firstRender = useRef(true);
-	useEffect(() => {
-		firstRender.current = false;
-	}, []);
-	return firstRender.current;
+const getInputLabel = (input) => {
+	var _input$labels;
+	if (!input) return;
+	const labelledBy = input.getAttribute("aria-labelledby");
+	if (labelledBy) {
+		const label = labelledBy.split(/\s+/).map((id) => {
+			var _input$ownerDocument$;
+			return (_input$ownerDocument$ = input.ownerDocument.getElementById(id)) === null || _input$ownerDocument$ === void 0 ? void 0 : _input$ownerDocument$.textContent.trim();
+		}).filter(Boolean).join(" ");
+		if (label) return label;
+	}
+	const ariaLabel = input.getAttribute("aria-label");
+	if (ariaLabel) return ariaLabel;
+	return Array.from((_input$labels = input.labels) !== null && _input$labels !== void 0 ? _input$labels : []).map((label) => label.textContent.trim()).filter(Boolean).join(" ") || void 0;
 };
 const getItemWithActiveDescendant = (listRef, items) => {
 	const listElement = listRef.current;
@@ -22,52 +30,65 @@ const getItemWithActiveDescendant = (listRef, items) => {
 		selected: activeItem === null || activeItem === void 0 ? void 0 : activeItem.selected
 	};
 };
-const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loading = false, message, focusManagement) => {
+const getAnnouncementState = (items, loading, message, filterValue) => JSON.stringify({
+	items: items.map((item, index) => {
+		var _ref, _item$id;
+		return [
+			(_ref = (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item.text) !== null && _ref !== void 0 ? _ref : index,
+			item.text,
+			item.selected
+		];
+	}),
+	loading,
+	message,
+	filterValue
+});
+const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loading = false, message, focusManagement, filterValue) => {
 	const usingRovingTabindex = focusManagement === "roving-tabindex";
 	const liveRegion = document.querySelector("live-region");
 	const selectedItems = items.filter((item) => item.selected).length;
 	const announce$1 = useCallback((...args) => {
 		if (enabled) return announce(...args);
 	}, [enabled]);
-	useEffect(function announceInitialFocus() {
-		const focusHandler = () => {
-			if (usingRovingTabindex) {
-				const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
-				announce$1(announcementText, {
-					delayMs,
-					from: liveRegion ? liveRegion : void 0
-				});
-			} else window.requestAnimationFrame(() => {
-				const activeItem = getItemWithActiveDescendant(listContainerRef, items);
-				if (!activeItem) return;
-				const { index, text, selected } = activeItem;
-				const announcementText = [
-					`Focus on filter text box and list of items`,
-					`Focused item: ${text}`,
-					`${selected ? "selected" : "not selected"}`,
-					`${index + 1} of ${items.length}`
-				].join(", ");
-				announce$1(announcementText, {
-					delayMs,
-					from: liveRegion ? liveRegion : void 0
-				});
+	const onInputFocus = useCallback(() => {
+		if (usingRovingTabindex) {
+			const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+			announce$1(announcementText, {
+				delayMs,
+				from: liveRegion ? liveRegion : void 0
+			});
+			return;
+		}
+		window.setTimeout(() => {
+			const activeItem = getItemWithActiveDescendant(listContainerRef, items);
+			if (!activeItem) return;
+			const { index, text, selected } = activeItem;
+			const inputLabel = getInputLabel(inputRef.current);
+			const announcementText = [
+				inputLabel ? `${inputLabel}, filter text box and list of items` : "Focus on filter text box and list of items",
+				`Focused item: ${text}`,
+				`${selected ? "selected" : "not selected"}`,
+				`${index + 1} of ${items.length}`
+			].join(", ");
+			announce$1(announcementText, {
+				delayMs,
+				from: liveRegion ? liveRegion : void 0
 			});
-		};
-		const inputElement = inputRef.current;
-		inputElement === null || inputElement === void 0 || inputElement.addEventListener("focus", focusHandler);
-		return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
+		});
 	}, [
-		listContainerRef,
+		announce$1,
 		inputRef,
 		items,
+		listContainerRef,
 		liveRegion,
-		announce$1,
-		usingRovingTabindex,
-		selectedItems
+		selectedItems,
+		usingRovingTabindex
 	]);
-	const isFirstRender = useFirstRender();
+	const announcementState = getAnnouncementState(items, loading, message, filterValue);
+	const previousAnnouncementState = useRef(announcementState);
 	useEffect(function announceListUpdates() {
-		if (isFirstRender) return;
+		if (previousAnnouncementState.current === announcementState) return;
+		previousAnnouncementState.current = announcementState;
 		liveRegion === null || liveRegion === void 0 || liveRegion.clear();
 		if (items.length === 0 && !loading) {
 			announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
@@ -96,7 +117,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 		});
 	}, [
 		announce$1,
-		isFirstRender,
+		announcementState,
 		items,
 		listContainerRef,
 		liveRegion,
@@ -106,6 +127,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 		loading,
 		selectedItems
 	]);
+	return onInputFocus;
 };
 //#endregion
 export { useAnnouncements };

package/dist/SegmentedControl/SegmentedControl-32b3c0ea.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:-moz-fit-content;height:fit-content;margin:0;min-height:32px;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-disable-knob-transition]:before{transition:none}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}.prc-SegmentedControl-SegmentedControl-lqIXp>[data-component="SegmentedControl.Divider"]{align-self:stretch;background-color:var(--borderColor-default,#d1d9e0);display:none;list-style:none;margin-block:var(--base-size-8,.5rem);margin-inline-end:calc(var(--base-size-8,.5rem) - 1px);margin-inline-start:var(--base-size-8,.5rem);width:1px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);--segmented-control-button-bg-inset:4px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]):before{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border-radius:var(--segmented-control-outer-radius);color:currentColor;padding:var(--segmented-control-button-bg-inset)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:var(--borderWidth-thin,.0625rem) solid transparent;padding-inline:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:currentColor;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:transparent;padding-inline:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);min-height:28px}.prc-SegmentedControl-DropdownGroup-9SmpX{--segmented-control-action-size:32px;--segmented-control-list-flex:0 1 auto;align-items:center;display:inline-flex;gap:var(--base-size-4,.25rem)}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=false]{width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=false]{width:auto}}@media (min-width:48rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=false]{width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=false]{width:auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]:not([data-full-width-wide=true]){width:auto;--segmented-control-list-flex:0 1 auto}}.prc-SegmentedControl-DropdownGroup-9SmpX[data-size=small]{--segmented-control-action-size:28px}.prc-SegmentedControl-DropdownGroup-9SmpX>.prc-SegmentedControl-SegmentedControl-lqIXp{flex:var(--segmented-control-list-flex);min-width:0}.prc-SegmentedControl-InlineAction-4qmw0{display:flex}.prc-SegmentedControl-InlineAction-4qmw0[data-variant=dropdown]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-narrow=dropdown]{display:none}}@media (min-width:48rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-regular=dropdown]{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-wide=dropdown]{display:none}}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+:where([data-component="SegmentedControl.Divider"])+:where([data-selected])):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-ActionItem-2V1ou,.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex}.prc-SegmentedControl-ActionItem-2V1ou{margin-inline-start:0}.prc-SegmentedControl-ActionButton-Q5fnw{height:var(--segmented-control-action-size);padding:0;width:var(--segmented-control-action-size)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2	+ /# sourceMappingURL=SegmentedControl-32b3c0ea.css.map /

package/dist/SegmentedControl/SegmentedControl-32b3c0ea.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"AAiGA,6CAEE,mCAAoC,CACpC,oEAA4D,CAU5D,yDAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CAVzC,mBAAoB,CAOpB,8CAAuC,CAJvC,uBAAmB,CAAnB,kBAAmB,CAGnB,QAAS,CAFT,eAAgB,CAChB,SAAU,CAMV,iBA2KF,CAzKE,gCACE,oDACE,gDAAiD,CAIjD,qDAAiD,CACjD,yFAAyE,CAEzE,mDAAoD,CANpD,UAAW,CAEX,2DAA4D,CAD5D,iBAUF,CAHE,8CAVF,oDAWI,kGAEJ,CADE,CAGF,kFACE,eACF,CACF,CAGA,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,yFAEE,kBAAmB,CAQnB,mDAA4C,CAT5C,YAAa,CAOb,eAAgB,CAJhB,qCAAgC,CAGhC,sDAAiD,CAFjD,4CAAuC,CAFvC,SAQF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAGA,oEACE,YACF,CAEA,0EA/NA,kEAA2D,CAC3D,uCAAwC,CAExC,4BAA6B,CAC7B,QA6NA,CA1NA,iFACE,YACF,CAEA,kIACE,4BACF,CAEA,sHACE,aACF,CAEA,6GAGE,QAAS,CACT,8CAAwC,CAFxC,kCAA2B,CAD3B,SASF,CAJE,iJAEE,QAAS,CADT,yCAEF,CAGF,gIACE,oCAKF,CAHE,oKACE,6CACF,CAGF,6MACE,6CAEF,CAHA,6CAAA,6MAEE,gFACF,CAAA,CA0LA,uGACE,YACF,CAEA,wCAKE,yLACE,YACF,CAEA,iFAjPF,kEAA2D,CAC3D,uCAAwC,CAExC,4BAA6B,CAC7B,QA+OE,CA5OF,wFACE,YACF,CAEA,yIACE,4BACF,CAEA,6HACE,aACF,CAEA,oHAGE,QAAS,CACT,8CAAwC,CAFxC,kCAA2B,CAD3B,SASF,CAJE,wJAEE,QAAS,CADT,yCAEF,CAGF,uIACE,oCAKF,CAHE,2KACE,6CACF,CAGF,oNACE,6CAEF,CAHA,6CAAA,oNAEE,gFACF,CAAA,CA0MA,CAEA,yBAKE,2LACE,YACF,CAEA,kFA/PF,kEAA2D,CAC3D,uCAAwC,CAExC,4BAA6B,CAC7B,QA6PE,CA1PF,yFACE,YACF,CAEA,0IACE,4BACF,CAEA,8HACE,aACF,CAEA,qHAGE,QAAS,CACT,8CAAwC,CAFxC,kCAA2B,CAD3B,SASF,CAJE,yJAEE,QAAS,CADT,yCAEF,CAGF,wIACE,oCAKF,CAHE,4KACE,6CACF,CAGF,qNACE,6CAEF,CAHA,6CAAA,qNAEE,gFACF,CAAA,CAwNA,CAEA,2BAKE,qLACE,YACF,CAEA,+EA7QF,kEAA2D,CAC3D,uCAAwC,CAExC,4BAA6B,CAC7B,QA2QE,CAxQF,sFACE,YACF,CAEA,uIACE,4BACF,CAEA,2HACE,aACF,CAEA,kHAGE,QAAS,CACT,8CAAwC,CAFxC,kCAA2B,CAD3B,SASF,CAJE,sJAEE,QAAS,CADT,yCAEF,CAGF,qIACE,oCAKF,CAHE,yKACE,6CACF,CAGF,kNACE,6CAEF,CAHA,6CAAA,kNAEE,gFACF,CAAA,CAuOE,kHAnOF,oEAA4D,CAC5D,uCAAwC,CAExC,yDAAkD,CAClD,8FAiOE,CA9NF,yHACE,aACF,CAEA,0KAEE,mDACF,CAEA,8JACE,YACF,CAEA,qJAKE,mDAAoD,CAFpD,kBAAmB,CADnB,gDAUF,CALE,yLAGE,yDAAiD,CADjD,6GAEF,CAGF,wKAEE,kBAAmB,CADnB,SAQF,CALE,4MAGE,4BAA6B,CAD7B,4DAEF,CAGF,qPACE,0DACF,CAuLA,CAEA,sEAGE,4CAAsC,CADtC,eAEF,CAGF,0CACE,oCAAqC,CACrC,sCAAuC,CAGvC,kBAAmB,CADnB,mBAAoB,CAEpB,6BA8DF,CA5DE,gEACE,UAAW,CAEX,sCACF,CAEA,iEACE,UACF,CAEA,wCACE,uEACE,UAAW,CAEX,sCACF,CAEA,wEACE,UACF,CACF,CAEA,yBACE,wEACE,UAAW,CAEX,sCACF,CAEA,yEACE,UACF,CACF,CAEA,2BACE,qEACE,UAAW,CAEX,sCACF,CAEA,sEACE,UACF,CAEA,yGACE,UAAW,CAEX,sCACF,CACF,CAEA,2DACE,oCACF,CAEA,uFAEE,uCAAwC,CADxC,WAEF,CAGF,yCACE,YAuBF,CArBE,gEACE,YACF,CAEA,wCACE,uEACE,YACF,CACF,CAEA,yBACE,wEACE,YACF,CACF,CAEA,2BACE,qEACE,YACF,CACF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBA+CF,CAvCE,kDAEE,gBAoBF,CAlBE,wDAQE,mDAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAGA,uSAIE,4BACF,CAGF,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEACE,4CAGF,CAGF,4GAJI,kBAAmB,CADnB,YASJ,CAJA,uCAGE,qBACF,CAEA,yCAEE,2CAA4C,CAC5C,SAAU,CAFV,0CAGF,CAEA,mCAEE,6CAA8C,CAC9C,uCAAwC,CAWxC,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAmEF,CApDE,uCACE,iCAA0B,CAC1B,kCACF,CAGA,wDAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,qCAA8B,CAD9B,kBAQF,CAJE,oFACE,oCAA6B,CAC7B,qCACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAmBE,kBAAmB,CATnB,4BAA6B,CAH7B,wBAAyB,CAWzB,sGAAyG,CAVzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAkBZ,sBAAuB,CAdvB,2GAA4G,CAF5G,4GAA6G,CAO7G,6GAUF,CAEA,sDAEE,gDAA6C,CAD7C,SAiBF,CAdE,0FAIE,0DAA2D,CAF3D,2DAA4D,CAG5D,4CAQF,CANE,oCAPF,0FAQI,qDAAiD,CACjD,wDAAiD,CAEjD,mDAEJ,CADE,CAKF,2HACE,0DACF,CAEA,4HACE,2DACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-32b3c0ea.css","sourcesContent":["@define-mixin subtleVariant {\n --segmented-control-outer-radius: var(--borderRadius-large);\n --segmented-control-button-bg-inset: 0px;\n\n background-color: transparent;\n border: 0;\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: none;\n }\n\n .Item:not(:last-child)::after {\n background-color: transparent;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: block;\n }\n\n .Button {\n padding: 0;\n color: var(--fgColor-muted);\n border: 0;\n border-radius: var(--borderRadius-large);\n\n .Content {\n padding-inline: var(--base-size-12);\n border: 0;\n }\n }\n\n .Button[aria-pressed='true'] {\n color: var(--fgColor-default);\n\n .Content {\n background-color: var(--bgColor-muted);\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--bgColor-muted);\n background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent);\n }\n}\n\n@define-mixin defaultVariant {\n --segmented-control-outer-radius: var(--borderRadius-medium);\n --segmented-control-button-bg-inset: 4px;\n\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: block;\n }\n\n .Item:not(:last-child)::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n }\n\n .Button {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n color: currentColor;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border: var(--borderWidth-thin) solid transparent;\n }\n }\n\n .Button[aria-pressed='true'] {\n padding: 0;\n color: currentColor;\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--segmented-control-button-inner-padding);\n background-color: transparent;\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n}\n\n.SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: fit-content;\n min-height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n\n &[data-disable-knob-transition]::before {\n transition: none;\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n align-self: stretch;\n width: 1px;\n margin-block: var(--base-size-8);\n margin-inline-start: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing -- preserve the previous divider's 16px layout footprint */\n margin-inline-end: calc(var(--base-size-8) - 1px);\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n &:where([data-variant='subtle']) {\n @mixin subtleVariant;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-narrow='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-regular='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-wide='subtle']) {\n @mixin subtleVariant;\n }\n\n &:where([data-variant-regular='subtle']):not([data-variant-wide='subtle']) {\n @mixin defaultVariant;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n min-height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownGroup {\n --segmented-control-action-size: 32px;\n --segmented-control-list-flex: 0 1 auto;\n\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n\n &[data-full-width='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width='false'] {\n width: auto;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-narrow='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-regular='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-wide='false'] {\n width: auto;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n width: auto;\n\n --segmented-control-list-flex: 0 1 auto;\n }\n }\n\n &[data-size='small'] {\n --segmented-control-action-size: 28px;\n }\n\n > .SegmentedControl {\n min-width: 0;\n flex: var(--segmented-control-list-flex);\n }\n}\n\n.InlineAction {\n display: flex;\n\n &[data-variant='dropdown'] {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- account for a hidden divider in the default variant */\n &:has(+ :where([data-component='SegmentedControl.Divider']) + :where([data-selected]))::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.ActionItem {\n display: flex;\n align-items: center;\n margin-inline-start: 0;\n}\n\n.ActionButton {\n width: var(--segmented-control-action-size);\n height: var(--segmented-control-action-size);\n padding: 0;\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}

package/dist/SegmentedControl/SegmentedControl.module.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import "./SegmentedControl-e68d4197.css";
+import "./SegmentedControl-32b3c0ea.css";
 //#region src/SegmentedControl/SegmentedControl.module.css.js
 var SegmentedControl_module_css_default = {
 	"SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.40.0",
+  "version": "38.40.1-rc.0bcc68991",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/SegmentedControl/SegmentedControl-e68d4197.css DELETED Viewed

	@@ -1,2 +0,0 @@
1	- .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-disable-knob-transition]:before{transition:none}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}.prc-SegmentedControl-SegmentedControl-lqIXp>[data-component="SegmentedControl.Divider"]{align-self:stretch;background-color:var(--borderColor-default,#d1d9e0);display:none;list-style:none;margin-block:var(--base-size-8,.5rem);margin-inline-end:calc(var(--base-size-8,.5rem) - 1px);margin-inline-start:var(--base-size-8,.5rem);width:1px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);--segmented-control-button-bg-inset:4px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]):before{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border-radius:var(--segmented-control-outer-radius);color:currentColor;padding:var(--segmented-control-button-bg-inset)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:var(--borderWidth-thin,.0625rem) solid transparent;padding-inline:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:currentColor;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:transparent;padding-inline:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownGroup-9SmpX{--segmented-control-action-size:32px;--segmented-control-list-flex:0 1 auto;align-items:center;display:inline-flex;gap:var(--base-size-4,.25rem)}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=false]{width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=false]{width:auto}}@media (min-width:48rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=false]{width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=false]{width:auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]:not([data-full-width-wide=true]){width:auto;--segmented-control-list-flex:0 1 auto}}.prc-SegmentedControl-DropdownGroup-9SmpX[data-size=small]{--segmented-control-action-size:28px}.prc-SegmentedControl-DropdownGroup-9SmpX>.prc-SegmentedControl-SegmentedControl-lqIXp{flex:var(--segmented-control-list-flex);min-width:0}.prc-SegmentedControl-InlineAction-4qmw0{display:flex}.prc-SegmentedControl-InlineAction-4qmw0[data-variant=dropdown]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-narrow=dropdown]{display:none}}@media (min-width:48rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-regular=dropdown]{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-wide=dropdown]{display:none}}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+:where([data-component="SegmentedControl.Divider"])+:where([data-selected])):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-ActionItem-2V1ou,.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex}.prc-SegmentedControl-ActionItem-2V1ou{margin-inline-start:0}.prc-SegmentedControl-ActionButton-Q5fnw{height:var(--segmented-control-action-size);padding:0;width:var(--segmented-control-action-size)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2	- /# sourceMappingURL=SegmentedControl-e68d4197.css.map /

package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-e68d4197.css","sourcesContent":["@define-mixin subtleVariant {\n --segmented-control-outer-radius: var(--borderRadius-large);\n --segmented-control-button-bg-inset: 0px;\n\n background-color: transparent;\n border: 0;\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: none;\n }\n\n .Item:not(:last-child)::after {\n background-color: transparent;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: block;\n }\n\n .Button {\n padding: 0;\n color: var(--fgColor-muted);\n border: 0;\n border-radius: var(--borderRadius-large);\n\n .Content {\n padding-inline: var(--base-size-12);\n border: 0;\n }\n }\n\n .Button[aria-pressed='true'] {\n color: var(--fgColor-default);\n\n .Content {\n background-color: var(--bgColor-muted);\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--bgColor-muted);\n background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent);\n }\n}\n\n@define-mixin defaultVariant {\n --segmented-control-outer-radius: var(--borderRadius-medium);\n --segmented-control-button-bg-inset: 4px;\n\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: block;\n }\n\n .Item:not(:last-child)::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n }\n\n .Button {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n color: currentColor;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border: var(--borderWidth-thin) solid transparent;\n }\n }\n\n .Button[aria-pressed='true'] {\n padding: 0;\n color: currentColor;\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--segmented-control-button-inner-padding);\n background-color: transparent;\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n}\n\n.SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n\n &[data-disable-knob-transition]::before {\n transition: none;\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n align-self: stretch;\n width: 1px;\n margin-block: var(--base-size-8);\n margin-inline-start: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing -- preserve the previous divider's 16px layout footprint */\n margin-inline-end: calc(var(--base-size-8) - 1px);\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n &:where([data-variant='subtle']) {\n @mixin subtleVariant;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-narrow='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-regular='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-wide='subtle']) {\n @mixin subtleVariant;\n }\n\n &:where([data-variant-regular='subtle']):not([data-variant-wide='subtle']) {\n @mixin defaultVariant;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownGroup {\n --segmented-control-action-size: 32px;\n --segmented-control-list-flex: 0 1 auto;\n\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n\n &[data-full-width='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width='false'] {\n width: auto;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-narrow='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-regular='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-wide='false'] {\n width: auto;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n width: auto;\n\n --segmented-control-list-flex: 0 1 auto;\n }\n }\n\n &[data-size='small'] {\n --segmented-control-action-size: 28px;\n }\n\n > .SegmentedControl {\n min-width: 0;\n flex: var(--segmented-control-list-flex);\n }\n}\n\n.InlineAction {\n display: flex;\n\n &[data-variant='dropdown'] {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- account for a hidden divider in the default variant */\n &:has(+ :where([data-component='SegmentedControl.Divider']) + :where([data-selected]))::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.ActionItem {\n display: flex;\n align-items: center;\n margin-inline-start: 0;\n}\n\n.ActionButton {\n width: var(--segmented-control-action-size);\n height: var(--segmented-control-action-size);\n padding: 0;\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}