@kanso-labs/kanso-ui 0.40.8 → 0.41.0

package/dist/components/segmented-button/index.d.ts

@@ -5,6 +5,15 @@ import { ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components
 type SegmentedButtonProps = LabelledByAttribute & Omit<ToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {
   /** A function may compute the class from the set's render state. */
   className?: ToggleButtonGroupProps['className'];
+  /**
+   * Whether the chosen segment stays chosen when it is pressed again. On
+   * by default while one is chosen, since a radio group always holds a
+   * choice; `false` lets a press clear it, as React Aria's own default
+   * does. Off by default while several may be, where any of them can be
+   * turned off.
+   * @default true while one is chosen, false while several may be
+   */
+  disallowEmptySelection?: boolean;
   /**
    * Whether a chosen segment draws a check before its label, as the page
    * has it. `false` leaves the segment's own icon in place while selected,
@@ -31,6 +40,9 @@ type SegmentedButtonSegmentProps = Omit<ToggleButtonProps, 'children' | 'classNa
    * An icon before the label, in the page's 18dp size. Replaced by the check
    * while the segment is chosen, unless the set turns that off. An icon drawn
    * in `em` takes that size from the slot.
+   *
+   * Given with no label, the icon is the segment, centred in it and kept
+   * while chosen; name the segment with `aria-label` then.
    */
   icon?: ReactNode;
   /** A function may compute the style from the segment's render state. */
@@ -57,10 +69,17 @@ type SegmentedButtonSegmentProps = Omit<ToggleButtonProps, 'children' | 'classNa
  * how the chosen container moves: it slides between segments while one is
  * chosen, and fades in place while several may be.
  *
+ * Choosing one behaves as a radio group too, which React Aria's
+ * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is
+ * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys
+ * move to a segment and choose it, wrapping at either end, and Home and End
+ * choose the first and last. Choosing several keeps React Aria's keys: the
+ * arrows move between segments, and Space or Enter toggles the focused one.
+ *
  * The call site's `className` and `style` land on the track, which is the
  * element a layout positions.
  */
-declare function SegmentedButton({ selectionMode, showSelectedIcon, ...props }: RefAttributes<HTMLDivElement> & SegmentedButtonProps): import("react").JSX.Element;
+declare function SegmentedButton({ disallowEmptySelection, render, selectionMode, showSelectedIcon, ...props }: RefAttributes<HTMLDivElement> & SegmentedButtonProps): import("react").JSX.Element;
 declare namespace SegmentedButton {
   var Segment: typeof SegmentedButtonSegment;
 }

package/dist/components/segmented-button/index.js

@@ -8,40 +8,61 @@ import { focus } from "../../styles/focus.js";
 import { useToggleGroupDisabled } from "../../hooks/useToggleGroupDisabled.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext } from "react";
+import { createContext, createElement, useContext, useLayoutEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { SelectionIndicator, ToggleButton, ToggleButtonGroup } from "react-aria-components";
 //#region src/components/segmented-button/index.tsx
 const ShowSelectedIconContext = createContext(true);
 const SelectionModeContext = createContext("single");
+function keyOf(segment) {
+	const written = segment.dataset.key;
+	if (written === void 0) return null;
+	const key = JSON.parse(written);
+	return typeof key === "string" || typeof key === "number" ? key : null;
+}
+function radioGroupRenderer(render) {
+	return (domProps, renderProps) => {
+		const merged = {
+			...domProps,
+			onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)
+		};
+		return render === void 0 ? createElement("div", merged) : render(merged, renderProps);
+	};
+}
+function radioKeys(state, toolbar) {
+	return (event) => {
+		const group = event.currentTarget;
+		const segments = [...group.querySelectorAll("[data-key]:not([data-disabled])")].filter((segment) => segment.closest("[role=\"radiogroup\"]") === group);
+		const from = segments.findIndex((segment) => segment === event.target);
+		const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === "rtl");
+		if (from === -1 || step === null) {
+			toolbar?.(event);
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		const segment = segments[step === "first" ? 0 : step === "last" ? segments.length - 1 : (from + step + segments.length) % segments.length];
+		const key = keyOf(segment);
+		if (key === null) return;
+		segment.focus();
+		state.setSelected(key, true);
+	};
+}
+function stepOf(key, rtl) {
+	switch (key) {
+		case "ArrowDown": return 1;
+		case "ArrowLeft": return rtl ? 1 : -1;
+		case "ArrowRight": return rtl ? -1 : 1;
+		case "ArrowUp": return -1;
+		case "End": return "last";
+		case "Home": return "first";
+		default: return null;
+	}
+}
 `${spacing.sm}`;
 `${spacing.sm}`;
+`${spacing.md}${spacing.sm}`;
 const styles = {
-	label: {
-		k6CgDc: "x12w9bfk",
-		k7Eaqz: "xeuugli",
-		kVQacm: "xb3r6kr",
-		kg5iWk: "xlyipyv",
-		kIyJzY: "x1qno0dh",
-		k1ekBW: "x1ve1rmq",
-		kAMwcw: "xpc4ca7",
-		khDVqt: "xuxw1ft",
-		$$css: true
-	},
-	labelChosen: {
-		kAXs8y: "x1g12otp",
-		$$css: true
-	},
-	labelReserved: {
-		k71WvV: "x184gv5z",
-		keTefX: "x1mjqfaz",
-		$$css: true
-	},
-	labelShifted: {
-		k71WvV: "x14z9mp",
-		keTefX: "x1c5lys2",
-		$$css: true
-	},
 	segment: {
 		"--segment-indicator-radius-end": "x32u3vw x111hk5a",
 		"--segment-indicator-radius-start": "xatjrgw x1syycwj",
@@ -72,7 +93,7 @@ const styles = {
 		kLWn49: "x1lz68p4",
 		k7Eaqz: "xeuugli",
 		k8WAf4: "xt970qd",
-		kg3NbH: "x18fpw6u",
+		kg3NbH: "xn60lsn",
 		kVAEAm: "x1n2onr6",
 		kIyJzY: "x1qno0dh",
 		k1ekBW: "xt3l3uh",
@@ -96,6 +117,34 @@ const styles = {
 	segmentUnselected: {
 		kMwMTN: "x139gbkf",
 		$$css: true
+	},
+	spacer: {
+		k6CgDc: "x12w9bfk",
+		kGNEyG: "x6s0dn4",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kmuXW: "xs83m0k",
+		kzqmXN: "xbraz1g",
+		kjj79g: "x13a6bvl",
+		k7Eaqz: "xeuugli",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "x1pha8k4",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	spacerHalf: {
+		kzqmXN: "x154zo0h",
+		$$css: true
+	},
+	spacerHolding: {
+		kzqmXN: "x1n85vuq",
+		k7Eaqz: "x36sgg7",
+		$$css: true
+	},
+	spacerIcon: {
+		kzqmXN: "x1iuy3mw",
+		k7Eaqz: "x16xo4sp",
+		$$css: true
 	}
 };
 /**
@@ -105,11 +154,14 @@ const styles = {
 * type be inferred, since `ReactNode` is a union that includes a promise and
 * an inferred one has to be `async`.
 */
-function glyphFor(state, icon, showSelectedIcon) {
-	if (state.isSelected && showSelectedIcon) return /* @__PURE__ */ jsx(CheckGlyph, { className: "x5yr21d x2lah0s x1xp8n7a" });
+function glyphFor(state, icon, marked) {
+	if (state.isSelected && marked) return /* @__PURE__ */ jsx(CheckGlyph, { className: "x5yr21d x2lah0s x1xp8n7a" });
 	return icon ?? null;
 }
-function indicatorClassName(isDisabled, selectionMode, showSelectedIcon) {
+function hasLabel(children) {
+	return children !== void 0 && children !== null && children !== false && children !== "";
+}
+function indicatorClassName(isDisabled, selectionMode, marked) {
 	return (state) => ({
 		0: { className: "x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd" },
 		8: { className: "x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7" },
@@ -127,14 +179,16 @@ function indicatorClassName(isDisabled, selectionMode, showSelectedIcon) {
 		11: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" },
 		7: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" },
 		15: { className: "xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk" }
-	})[!!(selectionMode === "multiple") << 3 | !!!showSelectedIcon << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? "";
+	})[!!(selectionMode === "multiple") << 3 | !!!marked << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? "";
 }
-function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon) {
-	const reserves = showSelectedIcon || icon !== void 0;
+function segmentContent(children, icon, ripple, selectionMode, marked, labelRef, labelTitle) {
+	const labelled = hasLabel(children);
+	const reserves = marked || icon !== void 0;
 	return (state) => {
-		const glyph = glyphFor(state, icon, showSelectedIcon);
+		const glyph = glyphFor(state, icon, marked);
+		const drawn = glyph !== null;
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(SelectionIndicator, { className: indicatorClassName(state.isDisabled, selectionMode, showSelectedIcon) }),
+			/* @__PURE__ */ jsx(SelectionIndicator, { className: indicatorClassName(state.isDisabled, selectionMode, marked) }),
 			/* @__PURE__ */ jsx("span", { ...{
 				0: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4" },
 				4: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb" },
@@ -145,17 +199,33 @@ function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)
 				3: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g" },
 				7: { className: "x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g" }
 			}[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0] }),
-			reserves && /* @__PURE__ */ jsx("span", {
-				...{
-					0: { className: "x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7" },
-					1: { className: "x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a" }
-				}[!!(glyph !== null) << 0],
-				children: glyph
-			}),
 			/* @__PURE__ */ jsx("span", {
-				...props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted), state.isSelected && !state.isDisabled && styles.labelChosen),
+				...props(styles.spacer, reserves && (drawn ? labelled ? styles.spacerHolding : styles.spacerIcon : styles.spacerHalf)),
+				children: reserves && /* @__PURE__ */ jsx("span", {
+					...{
+						0: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7" },
+						2: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a" },
+						1: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1nsf9p3" },
+						3: { className: "x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a x1nsf9p3" }
+					}[!!drawn << 1 | !!(drawn && labelled) << 0],
+					children: glyph
+				})
+			}),
+			labelled && /* @__PURE__ */ jsx("span", {
+				ref: labelRef,
+				title: labelTitle,
+				...{
+					0: { className: "x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft" },
+					2: { className: "x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8" },
+					1: { className: "x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1g12otp" },
+					3: { className: "x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8 x1g12otp" }
+				}[!!drawn << 1 | !!(state.isSelected && !state.isDisabled) << 0],
 				children
 			}),
+			/* @__PURE__ */ jsx("span", { ...{
+				0: { className: "x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k xbraz1g x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7" },
+				1: { className: "x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7 x154zo0h" }
+			}[!!(reserves && !drawn) << 0] }),
 			ripple.surface
 		] });
 	};
@@ -181,11 +251,18 @@ function segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)
 * how the chosen container moves: it slides between segments while one is
 * chosen, and fades in place while several may be.
 *
+* Choosing one behaves as a radio group too, which React Aria's
+* `ToggleButtonGroup` does not. The chosen segment stays chosen when it is
+* pressed again, unless `disallowEmptySelection` is `false`. The arrow keys
+* move to a segment and choose it, wrapping at either end, and Home and End
+* choose the first and last. Choosing several keeps React Aria's keys: the
+* arrows move between segments, and Space or Enter toggles the focused one.
+*
 * The call site's `className` and `style` land on the track, which is the
 * element a layout positions.
 */
 function SegmentedButton(t0) {
-	const $ = c(22);
+	const $ = c(29);
 	let T0;
 	let T1;
 	let T2;
@@ -194,18 +271,28 @@ function SegmentedButton(t0) {
 	let t3;
 	let t4;
 	let t5;
+	let t6;
+	let t7;
 	if ($[0] !== t0) {
-		const { selectionMode: t6, showSelectedIcon: t7, ...props } = t0;
-		const selectionMode = t6 === void 0 ? "single" : t6;
-		const showSelectedIcon = t7 === void 0 ? true : t7;
+		const { disallowEmptySelection, render, selectionMode: t8, showSelectedIcon: t9, ...props } = t0;
+		const selectionMode = t8 === void 0 ? "single" : t8;
+		const showSelectedIcon = t9 === void 0 ? true : t9;
+		const single = selectionMode === "single";
 		T2 = ShowSelectedIconContext;
-		t5 = showSelectedIcon;
+		t7 = showSelectedIcon;
 		T1 = SelectionModeContext;
-		t4 = selectionMode;
+		t6 = selectionMode;
 		T0 = ToggleButtonGroup;
 		t1 = props;
-		t2 = selectionMode;
-		t3 = mergeStatefulStyles({ className: "x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0" }, props);
+		t2 = disallowEmptySelection ?? single;
+		if ($[11] !== render || $[12] !== single) {
+			t3 = single ? radioGroupRenderer(render) : render;
+			$[11] = render;
+			$[12] = single;
+			$[13] = t3;
+		} else t3 = $[13];
+		t4 = selectionMode;
+		t5 = mergeStatefulStyles({ className: "x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0" }, props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = T1;
@@ -215,6 +302,8 @@ function SegmentedButton(t0) {
 		$[6] = t3;
 		$[7] = t4;
 		$[8] = t5;
+		$[9] = t6;
+		$[10] = t7;
 	} else {
 		T0 = $[1];
 		T1 = $[2];
@@ -224,43 +313,49 @@ function SegmentedButton(t0) {
 		t3 = $[6];
 		t4 = $[7];
 		t5 = $[8];
+		t6 = $[9];
+		t7 = $[10];
 	}
-	let t6;
-	if ($[9] !== T0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
-		t6 = /* @__PURE__ */ jsx(T0, {
+	let t8;
+	if ($[14] !== T0 || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t8 = /* @__PURE__ */ jsx(T0, {
 			...t1,
-			selectionMode: t2,
-			...t3
+			disallowEmptySelection: t2,
+			render: t3,
+			selectionMode: t4,
+			...t5
 		});
-		$[9] = T0;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
-	if ($[14] !== T1 || $[15] !== t4 || $[16] !== t6) {
-		t7 = /* @__PURE__ */ jsx(T1, {
-			value: t4,
-			children: t6
+		$[14] = T0;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== T1 || $[22] !== t6 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T1, {
+			value: t6,
+			children: t8
 		});
-		$[14] = T1;
-		$[15] = t4;
-		$[16] = t6;
-		$[17] = t7;
-	} else t7 = $[17];
-	let t8;
-	if ($[18] !== T2 || $[19] !== t5 || $[20] !== t7) {
-		t8 = /* @__PURE__ */ jsx(T2, {
-			value: t5,
-			children: t7
+		$[21] = T1;
+		$[22] = t6;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== T2 || $[26] !== t7 || $[27] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T2, {
+			value: t7,
+			children: t9
 		});
-		$[18] = T2;
-		$[19] = t5;
-		$[20] = t7;
-		$[21] = t8;
-	} else t8 = $[21];
-	return t8;
+		$[25] = T2;
+		$[26] = t7;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
+	return t10;
 }
 /**
 * One segment. Its `id` is what selection is reported by, and its label is
@@ -268,11 +363,13 @@ function SegmentedButton(t0) {
 * unchosen one draws whatever `icon` holds, if anything.
 */
 function SegmentedButtonSegment(t0) {
-	const $ = c(20);
+	const $ = c(23);
 	const { children, disableRipple: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, ...props } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
 	const selectionMode = useContext(SelectionModeContext);
-	const showSelectedIcon = useContext(ShowSelectedIconContext);
+	const marked = useContext(ShowSelectedIconContext) && hasLabel(children);
+	const [label, setLabel] = useState(null);
+	const labelTitle = useTruncatedText(label);
 	const element = {
 		aria: ariaAttributesOf(props),
 		onKeyDown,
@@ -299,40 +396,82 @@ function SegmentedButtonSegment(t0) {
 	} else t2 = $[6];
 	const ripple = useRipple(!disableRipple && props.isDisabled !== true && !disabledByGroup, t2);
 	const T0 = ToggleButton;
-	const t3 = toggleButtonRenderer(element, render);
-	const t4 = ripple.handlers;
-	const t5 = mergeStatefulStyles(segmentStyles(showSelectedIcon), props);
-	let t6;
-	if ($[7] !== children || $[8] !== icon || $[9] !== ripple || $[10] !== selectionMode || $[11] !== showSelectedIcon) {
-		t6 = segmentContent(children, icon, ripple, selectionMode, showSelectedIcon);
+	const t3 = selectionMode === "single" && props.id !== void 0 ? JSON.stringify(props.id) : void 0;
+	const t4 = toggleButtonRenderer(element, render);
+	const t5 = ripple.handlers;
+	const t6 = mergeStatefulStyles(segmentStyles(marked), props);
+	let t7;
+	if ($[7] !== children || $[8] !== icon || $[9] !== labelTitle || $[10] !== marked || $[11] !== ripple || $[12] !== selectionMode || $[13] !== setLabel) {
+		t7 = segmentContent(children, icon, ripple, selectionMode, marked, setLabel, labelTitle);
 		$[7] = children;
 		$[8] = icon;
-		$[9] = ripple;
-		$[10] = selectionMode;
-		$[11] = showSelectedIcon;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== T0 || $[14] !== props || $[15] !== ripple.handlers || $[16] !== t3 || $[17] !== t5 || $[18] !== t6) {
-		t7 = /* @__PURE__ */ jsx(T0, {
-			render: t3,
-			...t4,
-			...props,
+		$[9] = labelTitle;
+		$[10] = marked;
+		$[11] = ripple;
+		$[12] = selectionMode;
+		$[13] = setLabel;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== T0 || $[16] !== props || $[17] !== ripple.handlers || $[18] !== t3 || $[19] !== t4 || $[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			"data-key": t3,
+			render: t4,
 			...t5,
-			children: t6
+			...props,
+			...t6,
+			children: t7
 		});
-		$[13] = T0;
-		$[14] = props;
-		$[15] = ripple.handlers;
-		$[16] = t3;
-		$[17] = t5;
-		$[18] = t6;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[15] = T0;
+		$[16] = props;
+		$[17] = ripple.handlers;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
+}
+function segmentStyles(marked) {
+	return (state) => props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !marked && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);
 }
-function segmentStyles(showSelectedIcon) {
-	return (state) => props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);
+function useTruncatedText(label) {
+	const $ = c(3);
+	const [text, setText] = useState(void 0);
+	let t0;
+	let t1;
+	if ($[0] !== label) {
+		t0 = () => {
+			if (label === null) return;
+			const measure = () => {
+				const cut = label.scrollWidth > label.clientWidth;
+				setText(cut && label.textContent !== "" ? label.textContent : void 0);
+			};
+			measure();
+			const resize = new ResizeObserver(measure);
+			resize.observe(label);
+			const relabel = new MutationObserver(measure);
+			relabel.observe(label, {
+				characterData: true,
+				childList: true,
+				subtree: true
+			});
+			return () => {
+				resize.disconnect();
+				relabel.disconnect();
+			};
+		};
+		t1 = [label];
+		$[0] = label;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useLayoutEffect(t0, t1);
+	return text;
 }
 SegmentedButton.Segment = SegmentedButtonSegment;
 //#endregion