@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/segmented-control-field/segmented-control-field.js

@@ -1,3 +1,4 @@
+import { Field } from "../field/field.js";
 import { normalizeFieldErrors } from "../../lib/forms/errors.js";
 import { SegmentedControl } from "./segmented-control.js";
 import { c } from "react/compiler-runtime";
@@ -17,7 +18,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var SegmentedControlField = (t0) => {
-	const $ = c(50);
+	const $ = c(53);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className } = t0;
 	const { descriptionId, errorId, describedBy } = SegmentedControl.useIds();
 	let t1;
@@ -29,98 +30,109 @@ var SegmentedControlField = (t0) => {
 	const invalid = t1.length > 0;
 	const t2 = value !== null;
 	let t3;
-	if ($[2] !== label || $[3] !== optionalLabel || $[4] !== requiredness) {
-		t3 = /* @__PURE__ */ jsx(SegmentedControl.Legend, {
-			requiredness,
-			optionalLabel,
-			children: label
-		});
-		$[2] = label;
-		$[3] = optionalLabel;
-		$[4] = requiredness;
+	if ($[2] !== optionalLabel) {
+		t3 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[2] = optionalLabel;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== label || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(SegmentedControl.Legend, { children: [
+			label,
+			" ",
+			t3
+		] });
+		$[4] = label;
 		$[5] = t3;
-	} else t3 = $[5];
-	const t4 = description !== void 0;
-	let t5;
-	if ($[6] !== describedBy || $[7] !== invalid || $[8] !== t4) {
-		t5 = describedBy(t4, invalid);
-		$[6] = describedBy;
-		$[7] = invalid;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = description !== void 0;
 	let t6;
-	if ($[10] !== value) {
-		t6 = value === null ? [] : [value];
-		$[10] = value;
-		$[11] = t6;
-	} else t6 = $[11];
+	if ($[7] !== describedBy || $[8] !== invalid || $[9] !== t5) {
+		t6 = describedBy(t5, invalid);
+		$[7] = describedBy;
+		$[8] = invalid;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
 	let t7;
-	if ($[12] !== onValueChange) {
-		t7 = (next) => onValueChange(next[0] ?? null);
-		$[12] = onValueChange;
-		$[13] = t7;
-	} else t7 = $[13];
+	if ($[11] !== value) {
+		t7 = value === null ? [] : [value];
+		$[11] = value;
+		$[12] = t7;
+	} else t7 = $[12];
 	let t8;
-	if ($[14] !== options) {
-		t8 = options.map(_temp);
-		$[14] = options;
-		$[15] = t8;
-	} else t8 = $[15];
+	if ($[13] !== onValueChange) {
+		t8 = (next) => onValueChange(next[0] ?? null);
+		$[13] = onValueChange;
+		$[14] = t8;
+	} else t8 = $[14];
 	let t9;
-	if ($[16] !== options) {
-		t9 = /* @__PURE__ */ jsx(SegmentedControl.Indicator, { options });
-		$[16] = options;
-		$[17] = t9;
-	} else t9 = $[17];
+	if ($[15] !== options) {
+		t9 = options.map(_temp);
+		$[15] = options;
+		$[16] = t9;
+	} else t9 = $[16];
 	let t10;
-	if ($[18] !== disabled || $[19] !== invalid || $[20] !== onBlur || $[21] !== orientation || $[22] !== readOnly || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(SegmentedControl.Group, {
-			"aria-describedby": t5,
+	if ($[17] !== options) {
+		t10 = options.map(_temp2);
+		$[17] = options;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t10) {
+		t11 = /* @__PURE__ */ jsx(SegmentedControl.Indicator, { children: /* @__PURE__ */ jsx(SegmentedControl.IndicatorLabels, { children: t10 }) });
+		$[19] = t10;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== disabled || $[22] !== invalid || $[23] !== onBlur || $[24] !== orientation || $[25] !== readOnly || $[26] !== t11 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(SegmentedControl.Group, {
+			"aria-describedby": t6,
 			readOnly,
 			invalid,
 			orientation,
 			disabled,
-			value: t6,
-			onValueChange: t7,
+			value: t7,
+			onValueChange: t8,
 			onBlur,
-			children: [t8, t9]
+			children: [t9, t11]
 		});
-		$[18] = disabled;
-		$[19] = invalid;
-		$[20] = onBlur;
-		$[21] = orientation;
-		$[22] = readOnly;
-		$[23] = t5;
-		$[24] = t6;
-		$[25] = t7;
-		$[26] = t8;
-		$[27] = t9;
-		$[28] = t10;
-	} else t10 = $[28];
-	let t11;
-	if ($[29] !== description || $[30] !== descriptionId) {
-		t11 = /* @__PURE__ */ jsx(SegmentedControl.Description, {
+		$[21] = disabled;
+		$[22] = invalid;
+		$[23] = onBlur;
+		$[24] = orientation;
+		$[25] = readOnly;
+		$[26] = t11;
+		$[27] = t6;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t12;
+	} else t12 = $[31];
+	let t13;
+	if ($[32] !== description || $[33] !== descriptionId) {
+		t13 = /* @__PURE__ */ jsx(SegmentedControl.Description, {
 			id: descriptionId,
 			children: description
 		});
-		$[29] = description;
-		$[30] = descriptionId;
-		$[31] = t11;
-	} else t11 = $[31];
-	let t12;
-	if ($[32] !== errorId || $[33] !== errors) {
-		t12 = /* @__PURE__ */ jsx(SegmentedControl.Error, {
+		$[32] = description;
+		$[33] = descriptionId;
+		$[34] = t13;
+	} else t13 = $[34];
+	let t14;
+	if ($[35] !== errorId || $[36] !== errors) {
+		t14 = /* @__PURE__ */ jsx(SegmentedControl.Error, {
 			id: errorId,
 			children: errors
 		});
-		$[32] = errorId;
-		$[33] = errors;
-		$[34] = t12;
-	} else t12 = $[34];
-	let t13;
-	if ($[35] !== className || $[36] !== dirty || $[37] !== disabled || $[38] !== errors || $[39] !== name || $[40] !== pending || $[41] !== readOnly || $[42] !== requiredness || $[43] !== t10 || $[44] !== t11 || $[45] !== t12 || $[46] !== t2 || $[47] !== t3 || $[48] !== touched) {
-		t13 = /* @__PURE__ */ jsxs(SegmentedControl.Root, {
+		$[35] = errorId;
+		$[36] = errors;
+		$[37] = t14;
+	} else t14 = $[37];
+	let t15;
+	if ($[38] !== className || $[39] !== dirty || $[40] !== disabled || $[41] !== errors || $[42] !== name || $[43] !== pending || $[44] !== readOnly || $[45] !== requiredness || $[46] !== t12 || $[47] !== t13 || $[48] !== t14 || $[49] !== t2 || $[50] !== t4 || $[51] !== touched) {
+		t15 = /* @__PURE__ */ jsxs(SegmentedControl.Root, {
 			name,
 			className,
 			disabled,
@@ -132,29 +144,29 @@ var SegmentedControlField = (t0) => {
 			pending,
 			filled: t2,
 			children: [
-				t3,
-				t10,
-				t11,
-				t12
+				t4,
+				t12,
+				t13,
+				t14
 			]
 		});
-		$[35] = className;
-		$[36] = dirty;
-		$[37] = disabled;
-		$[38] = errors;
-		$[39] = name;
-		$[40] = pending;
-		$[41] = readOnly;
-		$[42] = requiredness;
-		$[43] = t10;
-		$[44] = t11;
-		$[45] = t12;
-		$[46] = t2;
-		$[47] = t3;
-		$[48] = touched;
-		$[49] = t13;
-	} else t13 = $[49];
-	return t13;
+		$[38] = className;
+		$[39] = dirty;
+		$[40] = disabled;
+		$[41] = errors;
+		$[42] = name;
+		$[43] = pending;
+		$[44] = readOnly;
+		$[45] = requiredness;
+		$[46] = t12;
+		$[47] = t13;
+		$[48] = t14;
+		$[49] = t2;
+		$[50] = t4;
+		$[51] = touched;
+		$[52] = t15;
+	} else t15 = $[52];
+	return t15;
 };
 function _temp(option) {
 	return /* @__PURE__ */ jsx(SegmentedControl.Option, {
@@ -163,4 +175,7 @@ function _temp(option) {
 		children: option.label
 	}, option.value);
 }
+function _temp2(option_0) {
+	return /* @__PURE__ */ jsx(SegmentedControl.IndicatorLabel, { children: option_0.label }, option_0.value);
+}
 export { SegmentedControlField };

package/dist/components/segmented-control-field/segmented-control.css

@@ -1,19 +1,26 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._group_1tamn_3 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
-    --field-fg: var(
+  ._group_1gt1b_3 {
+    --_field-fg: var(--field-fg, var(--sys-color-text));
+    --_field-muted-fg: var(
+    	--field-muted-fg,
+    	var(--sys-color-text-muted)
+    );
+    --_field-placeholder-fg: var(
+    	--field-placeholder-fg,
+    	var(--sys-color-text-placeholder)
+    );
+    --_field-caret: var(--field-caret, auto);
+    --_field-fg: var(
     	--segmented-control-fg,
     	var(--sys-color-on-primary-container)
     );
-    --_segmented-control-fill: var(
-    	--segmented-control-fill,
+    --_segmented-control-indicator-bg: var(
+    	--segmented-control-indicator-bg,
     	var(--sys-color-primary)
     );
-    --_segmented-control-on-fill: var(
-    	--segmented-control-on-fill,
+    --_segmented-control-indicator-fg: var(
+    	--segmented-control-indicator-fg,
     	var(--sys-color-on-primary)
     );
     position: relative;
@@ -22,81 +29,118 @@
     box-sizing: border-box;
     max-inline-size: 100%;
     gap: 0;
-    border: 1px solid transparent;
-    border-radius: var(--sys-radius-full);
+    border: var(--segmented-control-track-border-width, var(--field-border-width, 1px)) solid var(--segmented-control-track-border, transparent);
+    border-radius: var(--segmented-control-track-radius, var(--sys-radius-full));
     background: var(--segmented-control-track-bg, var(--sys-color-primary-container));
   }
-  ._group_1tamn_3[data-orientation=vertical] {
+  ._group_1gt1b_3[data-orientation=vertical] {
     flex-direction: column;
   }
-  ._group_1tamn_3[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
-    --_segmented-control-fill: var(
-    	--sys-color-primary-container
+  ._group_1gt1b_3[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
     );
-    --_segmented-control-on-fill: var(
-    	--sys-color-on-primary-container
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
+    --_segmented-control-indicator-bg: var(
+    	--segmented-control-indicator-readonly-bg,
+    	var(--sys-color-primary-container)
+    );
+    --_segmented-control-indicator-fg: var(
+    	--segmented-control-indicator-readonly-fg,
+    	var(--sys-color-on-primary-container)
     );
     pointer-events: none;
   }
-  ._group_1tamn_3[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-    --_segmented-control-fill: var(--sys-color-error-fg);
-    --_segmented-control-on-fill: var(
-    	--sys-color-error-bg
-    );
-  }
-  ._group_1tamn_3[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+  ._group_1gt1b_3[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    --_segmented-control-indicator-bg: var(
+    	--segmented-control-indicator-invalid-bg,
+    	var(--sys-color-error-fg)
+    );
+    --_segmented-control-indicator-fg: var(
+    	--segmented-control-indicator-invalid-fg,
+    	var(--sys-color-error-bg)
+    );
+  }
+  ._group_1gt1b_3[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    --_segmented-control-fill: var(
-    	--sys-color-disabled-fg
+    --_segmented-control-indicator-bg: var(
+    	--segmented-control-indicator-disabled-bg,
+    	var(--sys-color-disabled-fg)
     );
-    --_segmented-control-on-fill: var(
-    	--sys-color-disabled-bg
+    --_segmented-control-indicator-fg: var(
+    	--segmented-control-indicator-disabled-fg,
+    	var(--sys-color-disabled-bg)
     );
-    background: var(--sys-color-disabled-bg);
+    background: var(--segmented-control-track-disabled-bg, var(--sys-color-disabled-bg));
   }
-  ._option_1tamn_72 {
+  ._option_1gt1b_116 {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    gap: var(--sys-unit-3);
+    gap: var(--segmented-control-option-gap, var(--sys-unit-3));
     box-sizing: border-box;
     min-block-size: var(--segmented-control-option-block-size, var(--sys-unit-20));
     border: 0;
-    border-radius: var(--sys-radius-full);
+    border-radius: var(--segmented-control-option-radius, var(--sys-radius-full));
     background: none;
-    padding-inline: var(--segmented-control-option-padding-inline, var(--sys-unit-10));
-    color: var(--field-fg);
+    padding-inline: var(--segmented-control-option-pad-x, var(--sys-unit-10));
+    color: var(--_field-fg);
     font: var(--segmented-control-font, var(--sys-font-label-medium));
     cursor: pointer;
   }
-  ._option_1tamn_72 {
+  ._option_1gt1b_116 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._option_1tamn_72[data-focus-visible] {
+  ._option_1gt1b_116[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._option_1tamn_72 {
+  ._option_1gt1b_116 {
     position: relative;
     isolation: isolate;
   }
-  ._option_1tamn_72::after {
+  ._option_1gt1b_116::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -107,32 +151,41 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._option_1tamn_72::after {
+    ._option_1gt1b_116::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._option_1tamn_72:hover:not(:disabled, [data-disabled])::after {
+  ._option_1gt1b_116:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._option_1tamn_72:active:not(:disabled, [data-disabled])::after {
+  ._option_1gt1b_116:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._option_1tamn_72 {
+  ._option_1gt1b_116 {
     outline-offset: calc(-1 * var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._option_1tamn_72 {
+    ._option_1gt1b_116 {
       transition: color var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  ._option_1tamn_72[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+  ._option_1gt1b_116[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
   }
-  ._indicator_1tamn_135 {
+  ._indicator_1gt1b_188 {
     --_indicator-slack: var(
     	--sliding-indicator-slack,
     	0.5px
@@ -150,34 +203,34 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1tamn_135 {
+    ._indicator_1gt1b_188 {
       transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide), inline-size var(--_indicator-slide), block-size var(--_indicator-slide), opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }
-  ._indicator_1tamn_135[data-jump] {
+  ._indicator_1gt1b_188[data-jump] {
     --_indicator-slide: 0s;
   }
-  ._indicator_1tamn_135[data-empty] {
+  ._indicator_1gt1b_188[data-empty] {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1tamn_135[data-empty] {
+    ._indicator_1gt1b_188[data-empty] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._indicator_1tamn_135 {
+  ._indicator_1gt1b_188 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._indicator_1tamn_135 {
-    border-radius: var(--sys-radius-full);
-    background: var(--_segmented-control-fill);
+  ._indicator_1gt1b_188 {
+    border-radius: var(--segmented-control-indicator-radius, var(--sys-radius-full));
+    background: var(--_segmented-control-indicator-bg);
   }
-  ._option_1tamn_72[data-pressed][data-focus-visible] ~ ._indicator_1tamn_135 {
+  ._option_1gt1b_116[data-pressed][data-focus-visible] ~ ._indicator_1gt1b_188 {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._indicatorLabels_1tamn_180 {
+  ._indicatorLabels_1gt1b_233 {
     position: absolute;
     inset-inline-start: calc(var(--_indicator-slack) - var(--active-item-left, 0));
     inset-block-start: calc(var(--_indicator-slack) - var(--active-item-top, 0));
@@ -185,19 +238,19 @@
     inline-size: max-content;
   }
   @media not (prefers-reduced-motion) {
-    ._indicatorLabels_1tamn_180 {
+    ._indicatorLabels_1gt1b_233 {
       transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide);
     }
   }
-  ._group_1tamn_3[data-orientation=vertical] ._indicatorLabels_1tamn_180 {
+  ._group_1gt1b_3[data-orientation=vertical] ._indicatorLabels_1gt1b_233 {
     flex-direction: column;
     align-items: stretch;
   }
-  ._indicatorLabels_1tamn_180 ._option_1tamn_72 {
-    color: var(--_segmented-control-on-fill);
+  ._indicatorLabels_1gt1b_233 ._option_1gt1b_116 {
+    color: var(--_segmented-control-indicator-fg);
     cursor: default;
   }
-  ._indicatorLabels_1tamn_180 ._option_1tamn_72::after {
+  ._indicatorLabels_1gt1b_233 ._option_1gt1b_116::after {
     content: none;
   }
 }

package/dist/components/segmented-control-field/segmented-control.d.ts

@@ -1,7 +1,7 @@
 import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
-import type { ReactNode } from "react";
-import { Field, type ChoiceOption } from "../field/index.ts";
+import type { ComponentProps, ReactNode } from "react";
+import { Field } from "../field/index.ts";
 import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../fieldset/fieldset-root.tsx";
 export type SegmentedControlRootProps = FieldsetRootProps;
 export type SegmentedControlGroupProps = Omit<BaseToggleGroup.Props, "multiple"> & Readonly<{
@@ -13,20 +13,37 @@ export type SegmentedControlGroupProps = Omit<BaseToggleGroup.Props, "multiple">
 declare const SegmentedControlGroup: ({ className, readOnly, invalid, disabled, onValueChange, children, ...props }: SegmentedControlGroupProps) => ReactNode;
 export type SegmentedControlOptionProps = BaseToggle.Props;
 declare const SegmentedControlOption: ({ className, children, ...props }: SegmentedControlOptionProps) => ReactNode;
-export type SegmentedControlIndicatorProps = Readonly<{
-    /** The choices, in the order the group renders them. */
-    options: readonly ChoiceOption[];
-}>;
+export type SegmentedControlIndicatorProps = Omit<ComponentProps<"span">, "ref">;
+/**
+ * The pill that slides to the pressed option, after the options in the group.
+ * Arriving from an empty group it lands in place and pops. Give it
+ * `IndicatorLabels` for ink that changes colour as the pill arrives.
+ *
+ * @example
+ * <SegmentedControl.Indicator>
+ * 	<SegmentedControl.IndicatorLabels>…</SegmentedControl.IndicatorLabels>
+ * </SegmentedControl.Indicator>
+ */
+declare const SegmentedControlIndicator: ({ className, ...props }: SegmentedControlIndicatorProps) => ReactNode;
+/**
+ * A second copy of every option's label inside the pill, offset so that only
+ * the pressed one falls inside it. Holds one `IndicatorLabel` per option, in
+ * the order the group renders them.
+ *
+ * @example
+ * <SegmentedControl.IndicatorLabels>
+ * 	<SegmentedControl.IndicatorLabel>List</SegmentedControl.IndicatorLabel>
+ * 	<SegmentedControl.IndicatorLabel>Board</SegmentedControl.IndicatorLabel>
+ * </SegmentedControl.IndicatorLabels>
+ */
+declare const SegmentedControlIndicatorLabels: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
 /**
- * The pill that slides to the pressed option. It holds a second copy of every
- * label, offset so that only the pressed one falls inside the pill, so the ink
- * changes colour as the pill arrives rather than the instant the value does.
- * Arriving from an empty group it lands in place and pops.
+ * One option's label as the pill shows it, matching that option's content.
  *
  * @example
- * <SegmentedControl.Indicator options={options} />
+ * <SegmentedControl.IndicatorLabel>List</SegmentedControl.IndicatorLabel>
  */
-declare const SegmentedControlIndicator: ({ options, }: SegmentedControlIndicatorProps) => ReactNode;
+declare const SegmentedControlIndicatorLabel: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
 /** The parts of a segmented control. */
 export type SegmentedControlParts = Readonly<{
     Root: typeof FieldsetRoot;
@@ -34,6 +51,8 @@ export type SegmentedControlParts = Readonly<{
     Group: typeof SegmentedControlGroup;
     Option: typeof SegmentedControlOption;
     Indicator: typeof SegmentedControlIndicator;
+    IndicatorLabels: typeof SegmentedControlIndicatorLabels;
+    IndicatorLabel: typeof SegmentedControlIndicatorLabel;
     Description: typeof Field.Description;
     Error: typeof Field.Error;
     useIds: typeof Field.useIds;
@@ -45,12 +64,17 @@ export type SegmentedControlParts = Readonly<{
  * `SegmentedControlField`.
  *
  * @example
- * <SegmentedControl.Root filled={view !== null}>
- * 	<SegmentedControl.Legend optionalLabel="optional">View</SegmentedControl.Legend>
+ * <SegmentedControl.Root filled={view !== null} requiredness="optional">
+ * 	<SegmentedControl.Legend>View <Field.Requiredness optionalLabel="optional" /></SegmentedControl.Legend>
  * 	<SegmentedControl.Group value={view === null ? [] : [view]} onValueChange={next => setView(next[0] ?? null)}>
  * 		<SegmentedControl.Option value="list">List</SegmentedControl.Option>
  * 		<SegmentedControl.Option value="board">Board</SegmentedControl.Option>
- * 		<SegmentedControl.Indicator options={views} />
+ * 		<SegmentedControl.Indicator>
+ * 			<SegmentedControl.IndicatorLabels>
+ * 				<SegmentedControl.IndicatorLabel>List</SegmentedControl.IndicatorLabel>
+ * 				<SegmentedControl.IndicatorLabel>Board</SegmentedControl.IndicatorLabel>
+ * 			</SegmentedControl.IndicatorLabels>
+ * 		</SegmentedControl.Indicator>
  * 	</SegmentedControl.Group>
  * </SegmentedControl.Root>
  */