@kanso-labs/kanso-ui 0.43.7 → 0.44.0

package/dist/components/search-field/index.js

@@ -2,13 +2,13 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CloseGlyph, SearchGlyph } from "../../glyphs/index.js";
+import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import IconButton from "../icon-button/index.js";
 import { focusesControl } from "../../field/press.js";
-import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldInput, FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Label, SearchField, VisuallyHidden } from "react-aria-components";
+import { FieldInputContext, Label, SearchField, VisuallyHidden, useSlottedContext } from "react-aria-components";
 //#region src/components/search-field/index.tsx
 function fieldContent(label, placeholder, clearLabel, description, error, inputRef) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -16,17 +16,17 @@ function fieldContent(label, placeholder, clearLabel, description, error, inputR
 		/* @__PURE__ */ jsxs("div", {
 			onPointerDown: focusesControl(void 0),
 			...{
-				0: { className: "x12w9bfk x6s0dn4 x17m4uoy xmaqtb8 x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7" },
-				2: { className: "x12w9bfk x6s0dn4 x17m4uoy xmaqtb8 x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 x1bll8u6 x19irva8" },
-				1: { className: "x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo xt0e3qv" },
-				3: { className: "x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo xt0e3qv" }
+				0: { className: "x12w9bfk x6s0dn4 x5u4zhu x17m4uoy xuwmtp3 xmaqtb8 x9qvdww x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7" },
+				2: { className: "x12w9bfk x6s0dn4 x5u4zhu x17m4uoy xuwmtp3 xmaqtb8 x9qvdww x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 x1bll8u6 x19irva8" },
+				1: { className: "x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo x1h6gzvc" },
+				3: { className: "x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo x1h6gzvc" }
 			}[!!state.isInvalid << 1 | !!state.isDisabled << 0],
 			children: [
 				/* @__PURE__ */ jsx(SearchGlyph, { className: "xxk0z11 x1lliihq x2lah0s xvy4d1p" }),
 				/* @__PURE__ */ jsx(FieldInput, {
 					placeholder,
 					ref: inputRef,
-					className: "x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli"
+					className: "x1hcrkkg xzwh6sb xjyslct xmper1u x1iyjqo2 xeuugli"
 				}),
 				state.isEmpty ? null : /* @__PURE__ */ jsx(IconButton, {
 					"aria-label": clearLabel,
@@ -55,38 +55,41 @@ function fieldContent(label, placeholder, clearLabel, description, error, inputR
 * share.
 */
 function SearchField$1(t0) {
-	const $ = c(17);
-	const { clearLabel, description, error, inputRef, isDisabled: t1, label, placeholder, ...props$1 } = t0;
+	const $ = c(18);
+	const { clearLabel, description, enterKeyHint, error, inputRef, isDisabled: t1, label, placeholder, ...props$1 } = t0;
 	const isDisabled = t1 === void 0 ? false : t1;
 	const validationBehavior = useFieldValidationBehavior();
+	const inherited = useSlottedContext(FieldInputContext)?.enterKeyHint;
 	const T0 = SearchField;
-	let t2;
+	const t2 = enterKeyHint ?? (inherited === void 0 ? "search" : void 0);
+	let t3;
 	if ($[0] !== error) {
-		t2 = invalidFrom(error);
+		t3 = invalidFrom(error);
 		$[0] = error;
-		$[1] = t2;
-	} else t2 = $[1];
-	const t3 = mergeStatefulStyles(props(fieldStyles.root), props$1);
-	let t4;
+		$[1] = t3;
+	} else t3 = $[1];
+	const t4 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t5;
 	if ($[2] !== clearLabel || $[3] !== description || $[4] !== error || $[5] !== inputRef || $[6] !== label || $[7] !== placeholder) {
-		t4 = fieldContent(label, placeholder, clearLabel, description, error, inputRef);
+		t5 = fieldContent(label, placeholder, clearLabel, description, error, inputRef);
 		$[2] = clearLabel;
 		$[3] = description;
 		$[4] = error;
 		$[5] = inputRef;
 		$[6] = label;
 		$[7] = placeholder;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== T0 || $[10] !== isDisabled || $[11] !== props$1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== validationBehavior) {
-		t5 = /* @__PURE__ */ jsx(T0, {
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== T0 || $[10] !== isDisabled || $[11] !== props$1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== validationBehavior) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			enterKeyHint: t2,
 			isDisabled,
-			isInvalid: t2,
+			isInvalid: t3,
 			validationBehavior,
 			...props$1,
-			...t3,
-			children: t4
+			...t4,
+			children: t5
 		});
 		$[9] = T0;
 		$[10] = isDisabled;
@@ -94,10 +97,11 @@ function SearchField$1(t0) {
 		$[12] = t2;
 		$[13] = t3;
 		$[14] = t4;
-		$[15] = validationBehavior;
-		$[16] = t5;
-	} else t5 = $[16];
-	return t5;
+		$[15] = t5;
+		$[16] = validationBehavior;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
 }
 //#endregion
 export { SearchField$1 as default };

package/dist/components/search-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Ref","RefAttributes","SearchFieldProps","RACSearchFieldProps","SearchFieldRenderProps","stylex","Label","SearchField","RACSearchField","VisuallyHidden","FieldInput","FieldMessage","focusesControl","fieldStyles","invalidFrom","useFieldValidationBehavior","CloseGlyph","SearchGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","IconButton","FORCED_COLORS","HOVER_CAPABLE","clearLabel","description","error","inputRef","HTMLInputElement","label","placeholder","Omit","fieldContent","state","undefined","className","isInvalid","isDisabled","isEmpty","t0","$","t1","props","validationBehavior","T0","t2","t3","root","t4","t5","SearchField","_c","props","RACSearchField","stylex.props"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { focusesControl } from '../../field/press';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// A pointer that can hover: a mouse or a trackpad, not a finger. The bar is a\n// plain element around the input rather than a part React Aria hosts, so its\n// hover layer is a pseudo-class, and Chromium leaves `:hover` on whatever a\n// touch last tapped. Inside this query a touch screen draws no hover at all;\n// a touchscreen laptop still matches it for its trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * Left out, React Aria names it in the reader's locale — \"Clear search\" in\n   * English.\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something, and the error ring while it is invalid. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\n//\n// A press anywhere on the bar focuses the input, as a press anywhere on the\n// box of every other field does. The bar is 56dp and the input's line 24dp\n// of it, so the magnifier, the padding at either end and the strips above\n// and below the text took a press, darkened the bar for it, and focused\n// nothing. A press on the input itself or on the clear button is left to\n// them, and a disabled field takes none.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string | undefined, description: string | undefined, error: string | undefined, inputRef: Ref<HTMLInputElement> | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div onPointerDown={focusesControl(undefined)} {...{\n      0: {\n        className: \"x12w9bfk x6s0dn4 x17m4uoy xmaqtb8 x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      2: {\n        className: \"x12w9bfk x6s0dn4 x17m4uoy xmaqtb8 x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 x1bll8u6 x19irva8\"\n      },\n      1: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo xt0e3qv\"\n      },\n      3: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo xt0e3qv\"\n      }\n    }[!!state.isInvalid << 1 | !!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} ref={inputRef} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel,\n  description,\n  error,\n  inputRef,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: RefAttributes<HTMLDivElement> & SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACSearchField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error, inputRef)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;;;;AA0GA,SAASsC,aAAaH,OAAeC,aAAiCN,YAAgCC,aAAiCC,OAA2BC,UAA6C;CAC7M,QAAQM,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQJ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,eAAerB,eAAe0B,KAAAA,CAAS;GAAG,GAAI;IACnD,GAAG,EACDC,WAAW,wPACb;IACA,GAAG,EACDA,WAAW,wPACb;IACA,GAAG,EACDA,WAAW,6NACb;IACA,GAAG,EACDA,WAAW,6NACb;GACF,EAAE,CAAC,CAACF,MAAMG,aAAa,IAAI,CAAC,CAACH,MAAMI,cAAc;GAb/C,UAAA;IAcE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyBP;KAAa,KAAKH;KAAU,WAAU;IAA2C,CAAA;IACzGM,MAAMK,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAYd;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAAvB,cAAAoC,IAAA;CAAA,MAAAC,IAAA7C,EAAA,EAAA;CAAqB,MAAA,EAAA6B,YAAAC,aAAAC,OAAAC,UAAAU,YAAAI,IAAAZ,OAAAC,aAAA,GAAAY,YAAAH;CAKnB,MAAAF,aAAAI,OAAAP,KAAAA,IAAA,QAAAO;CAKA,MAAAE,qBAA2BhC,2BAA2B;CAC9C,MAAAiC,KAAAxC;CAAc,IAAAyC;CAAA,IAAAL,EAAA,OAAAd,OAAA;EAAoCmB,KAAAnC,YAAYgB,KAAK;EAACc,EAAA,KAAAd;EAAAc,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAyD,MAAAM,KAAAhC,oBAAoBb,MAAaQ,YAAWsC,IAAK,GAAGL,OAAK;CAAC,IAAAM;CAAA,IAAAR,EAAA,OAAAhB,cAAAgB,EAAA,OAAAf,eAAAe,EAAA,OAAAd,SAAAc,EAAA,OAAAb,YAAAa,EAAA,OAAAX,SAAAW,EAAA,OAAAV,aAAA;EAC1LkB,KAAAhB,aAAaH,OAAOC,aAAaN,YAAYC,aAAaC,OAAOC,QAAQ;EAACa,EAAA,KAAAhB;EAAAgB,EAAA,KAAAf;EAAAe,EAAA,KAAAd;EAAAc,EAAA,KAAAb;EAAAa,EAAA,KAAAX;EAAAW,EAAA,KAAAV;EAAAU,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAI,MAAAJ,EAAA,QAAAH,cAAAG,EAAA,QAAAE,WAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,MAAAR,EAAA,QAAAG,oBAAA;EADxEM,KAAA,oBAAC,IAAD;GAA4BZ;GAAuB,WAAAQ;GAAwCF;GAAkB,GAAMD;GAAK,GAAMI;GAChIE,UAAAA;EADiB,CAAA;EAEHR,EAAA,KAAAI;EAAAJ,EAAA,MAAAH;EAAAG,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAG;EAAAH,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFZS;AAEY"}
+{"version":3,"file":"index.js","names":["c","_c","Ref","RefAttributes","SearchFieldProps","RACSearchFieldProps","SearchFieldRenderProps","stylex","FieldInputContext","Label","SearchField","RACSearchField","useSlottedContext","VisuallyHidden","FieldInput","FieldMessage","focusesControl","fieldStyles","invalidFrom","useFieldValidationBehavior","CloseGlyph","SearchGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","IconButton","FORCED_COLORS","HOVER_CAPABLE","clearLabel","description","enterKeyHint","error","inputRef","HTMLInputElement","label","placeholder","Omit","fieldContent","state","undefined","className","isInvalid","isDisabled","isEmpty","t0","$","t1","props","validationBehavior","inherited","T0","t2","t3","t4","root","t5","t6","SearchField","_c","props","RACSearchField","stylex.props"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { FieldInputContext, Label, SearchField as RACSearchField, useSlottedContext, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { focusesControl } from '../../field/press';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// A pointer that can hover: a mouse or a trackpad, not a finger. The bar is a\n// plain element around the input rather than a part React Aria hosts, so its\n// hover layer is a pseudo-class, and Chromium leaves `:hover` on whatever a\n// touch last tapped. Inside this query a touch screen draws no hover at all;\n// a touchscreen laptop still matches it for its trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * Left out, React Aria names it in the reader's locale — \"Clear search\" in\n   * English.\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The action an on-screen keyboard labels its Enter key with. A search\n   * field asks for Search, which iOS otherwise shows only for a search input\n   * inside a form with an action, so a field submitted through `onSubmit`\n   * alone gets it too. Inside an `Autocomplete` the field takes the Go key\n   * React Aria gives it there, for the option Enter picks.\n   *\n   * @default 'search'\n   */\n  enterKeyHint?: RACSearchFieldProps['enterKeyHint'];\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something, and the error ring while it is invalid. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\n//\n// A press anywhere on the bar focuses the input, as a press anywhere on the\n// box of every other field does. The bar is 56dp and the input's line 24dp\n// of it, so the magnifier, the padding at either end and the strips above\n// and below the text took a press, darkened the bar for it, and focused\n// nothing. A press on the input itself or on the clear button is left to\n// them, and a disabled field takes none.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string | undefined, description: string | undefined, error: string | undefined, inputRef: Ref<HTMLInputElement> | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div onPointerDown={focusesControl(undefined)} {...{\n      0: {\n        className: \"x12w9bfk x6s0dn4 x5u4zhu x17m4uoy xuwmtp3 xmaqtb8 x9qvdww x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      2: {\n        className: \"x12w9bfk x6s0dn4 x5u4zhu x17m4uoy xuwmtp3 xmaqtb8 x9qvdww x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x9f619 x1w5n3ug x1ed109x x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 x1bll8u6 x19irva8\"\n      },\n      1: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo x1h6gzvc\"\n      },\n      3: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1gnnqk1 x1xj74d8 x1bhcspo x1h6gzvc\"\n      }\n    }[!!state.isInvalid << 1 | !!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} ref={inputRef} className=\"x1hcrkkg xzwh6sb xjyslct xmper1u x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel,\n  description,\n  enterKeyHint,\n  error,\n  inputRef,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: RefAttributes<HTMLDivElement> & SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  // An Autocomplete hands its input `go` through this context, and a prop\n  // written here would replace it, so the default steps aside for it; an\n  // undefined prop leaves the context's value standing.\n  const inherited = useSlottedContext(FieldInputContext)?.enterKeyHint;\n  return <RACSearchField enterKeyHint={enterKeyHint ?? (inherited === undefined ? 'search' : undefined)} isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error, inputRef)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;;;;AAoHA,SAASyC,aAAaH,OAAeC,aAAiCP,YAAgCC,aAAiCE,OAA2BC,UAA6C;CAC7M,QAAQM,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQJ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,eAAetB,eAAe2B,KAAAA,CAAS;GAAG,GAAI;IACnD,GAAG,EACDC,WAAW,gRACb;IACA,GAAG,EACDA,WAAW,gRACb;IACA,GAAG,EACDA,WAAW,8NACb;IACA,GAAG,EACDA,WAAW,8NACb;GACF,EAAE,CAAC,CAACF,MAAMG,aAAa,IAAI,CAAC,CAACH,MAAMI,cAAc;GAb/C,UAAA;IAcE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyBP;KAAa,KAAKH;KAAU,WAAU;IAAmD,CAAA;IACjHM,MAAMK,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAYf;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2BC;GAAoBE;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAAzB,cAAAsC,IAAA;CAAA,MAAAC,IAAAhD,EAAA,EAAA;CAAqB,MAAA,EAAA+B,YAAAC,aAAAC,cAAAC,OAAAC,UAAAU,YAAAI,IAAAZ,OAAAC,aAAA,GAAAY,YAAAH;CAMnB,MAAAF,aAAAI,OAAAP,KAAAA,IAAA,QAAAO;CAKA,MAAAE,qBAA2BjC,2BAA2B;CAItD,MAAAkC,YAAkBzC,kBAAkBJ,iBAA+B,CAAC,EAAA0B;CAC5D,MAAAoB,KAAA3C;CAA6B,MAAA4C,KAAArB,iBAAiBmB,cAAcV,KAAAA,IAAd,WAAAA,KAAAA;CAA+C,IAAAa;CAAA,IAAAP,EAAA,OAAAd,OAAA;EAAqCqB,KAAAtC,YAAYiB,KAAK;EAACc,EAAA,KAAAd;EAAAc,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAyD,MAAAQ,KAAAnC,oBAAoBf,MAAaU,YAAWyC,IAAK,GAAGP,OAAK;CAAC,IAAAQ;CAAA,IAAAV,EAAA,OAAAjB,cAAAiB,EAAA,OAAAhB,eAAAgB,EAAA,OAAAd,SAAAc,EAAA,OAAAb,YAAAa,EAAA,OAAAX,SAAAW,EAAA,OAAAV,aAAA;EAC1QoB,KAAAlB,aAAaH,OAAOC,aAAaP,YAAYC,aAAaE,OAAOC,QAAQ;EAACa,EAAA,KAAAjB;EAAAiB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAd;EAAAc,EAAA,KAAAb;EAAAa,EAAA,KAAAX;EAAAW,EAAA,KAAAV;EAAAU,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAK,MAAAL,EAAA,QAAAH,cAAAG,EAAA,QAAAE,WAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,MAAAR,EAAA,QAAAU,MAAAV,EAAA,QAAAG,oBAAA;EADxEQ,KAAA,oBAAC,IAAD;GAA8B,cAAAL;GAA8ET;GAAuB,WAAAU;GAAwCJ;GAAkB,GAAMD;GAAK,GAAMM;GAChNE,UAAAA;EADiB,CAAA;EAEHV,EAAA,KAAAK;EAAAL,EAAA,MAAAH;EAAAG,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAG;EAAAH,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAFZW;AAEY"}

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

@@ -1,6 +1,6 @@
 import { LabelledByAttribute } from "../../render/name.js";
 import { ReactNode, RefAttributes } from "react";
-import { ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components";
+import { Key, ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components";
 //#region src/components/segmented-button/index.d.ts
 type SegmentedButtonProps = LabelledByAttribute & Omit<ToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {
   /** A function may compute the class from the set's render state. */
@@ -25,7 +25,7 @@ type SegmentedButtonProps = LabelledByAttribute & Omit<ToggleButtonGroupProps, '
   /** A function may compute the style from the set's render state. */
   style?: ToggleButtonGroupProps['style'];
 };
-type SegmentedButtonSegmentProps = Omit<ToggleButtonProps, 'children' | 'className' | 'style'> & {
+type SegmentedButtonSegmentProps = Omit<ToggleButtonProps, 'children' | 'className' | 'id' | 'style'> & {
   /** The segment's label. */
   children?: ReactNode;
   /** A function may compute the class from the segment's render state. */
@@ -45,6 +45,13 @@ type SegmentedButtonSegmentProps = Omit<ToggleButtonProps, 'children' | 'classNa
    * while chosen; name the segment with `aria-label` then.
    */
   icon?: ReactNode;
+  /**
+   * The key selection is reported by. Required, because React Aria joins a
+   * toggle to its group's selection by this key alone: a segment without one
+   * keeps a pressed state of its own, so a set where one is chosen could hold
+   * two, and it is announced as a pressed button rather than a radio.
+   */
+  id: Key;
   /** A function may compute the style from the segment's render state. */
   style?: ToggleButtonProps['style'];
 };

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

@@ -396,7 +396,7 @@ function SegmentedButtonSegment(t0) {
 	} else t2 = $[6];
 	const ripple = useRipple(!disableRipple && props.isDisabled !== true && !disabledByGroup, t2);
 	const T0 = ToggleButton;
-	const t3 = selectionMode === "single" && props.id !== void 0 ? JSON.stringify(props.id) : void 0;
+	const t3 = selectionMode === "single" ? JSON.stringify(props.id) : void 0;
 	const t4 = toggleButtonRenderer(element, render);
 	const t5 = ripple.handlers;
 	const t6 = mergeStatefulStyles(segmentStyles(marked), props);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","KeyboardEventHandler","ReactNode","RefAttributes","FocusableElement","Key","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","ToggleGroupState","stylex","createContext","createElement","useContext","useLayoutEffect","useState","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","GroupRender","Ripple","ReturnType","NonNullable","keyOf","segment","HTMLElement","written","dataset","key","undefined","JSON","parse","radioGroupRenderer","render","domProps","renderProps","merged","onKeyDownCapture","radioKeys","state","toolbar","HTMLDivElement","event","group","currentTarget","segments","querySelectorAll","filter","closest","from","findIndex","target","step","altKey","ctrlKey","metaKey","stepOf","getComputedStyle","direction","preventDefault","stopPropagation","to","length","setSelected","rtl","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","PADDING_GIVE","md","FORCED_COLORS","styles","kgeoSG","kGOzcv","kpsdNU","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k7Eaqz","k8WAf4","kg3NbH","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","segmentDisabled","kMwMTN","segmentSelected","segmentSelectedUnmarked","segmentUnselected","spacer","kmuXW","kzqmXN","spacerHalf","spacerHolding","spacerIcon","SegmentedButtonProps","Omit","className","disallowEmptySelection","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","marked","isSelected","hasLabel","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","labelRef","element","HTMLSpanElement","labelTitle","labelled","reserves","glyph","drawn","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","t9","single","t10","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","label","setLabel","useTruncatedText","aria","disabledByGroup","id","stringify","handlers","segmentStyles","ring","text","setText","measure","cut","scrollWidth","clientWidth","textContent","resize","ResizeObserver","observe","relabel","MutationObserver","characterData","childList","subtree","disconnect","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, Key, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps, ToggleGroupState } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, createElement, useContext, useLayoutEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// React Aria stops at the name, though: its single mode is announced as a\n// radio group and behaves as a toolbar. So that mode takes the rest of the\n// radio group pattern from the ARIA Authoring Practices, a deliberate\n// departure from React Aria's `ToggleButtonGroup`, in two parts. The chosen\n// segment cannot be pressed off, since a radio group always holds a choice\n// and the page's single-select set always keeps one segment chosen;\n// `disallowEmptySelection={false}` gives React Aria's default back. And the\n// arrow keys choose as they move, wrapping at either end, with Home and End\n// choosing the first and last segment. Under React Aria the arrows moved\n// focus alone and stopped at the ends, so a screen reader reached each radio\n// without it being checked, and choosing one took a separate Space. Choosing\n// several keeps React Aria's toolbar keys, where the arrows only move between\n// buttons and Space toggles one.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// A segment with an `icon` and no label is drawn that way whatever the set\n// says. It keeps its icon when chosen, since the icon is all that tells it\n// from its neighbours, and a check in its place would hide which of them is\n// the chosen one.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\n//\n// Every segment that could ever draw that slot keeps room for it whether\n// or not it is drawing one. Sized by what it drew, the slot made the widest\n// segment whichever one was chosen, and the whole track changed width with\n// the choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot opens from 0 to 18dp and the space it\n// lands in opens beside it, both over `durationShort2`. Here that space is\n// two spacers either side of the label, which trade it between them: half\n// on each side while nothing is drawn, so a bare label stays centred, and\n// all of it on the leading side, where the slot sits, once something is.\n// Their total never changes, so neither does the segment's width. Angular\n// Material has no case of the first kind, since its toggles are sized by\n// their own content rather than by the widest of them.\n//\n// That room gives way before the label does. A track with room to spare is\n// the widest label plus 26dp per segment, which is what the widest column\n// already measured while its own segment was the chosen one. A track\n// squeezed below that — long labels on a phone — gives the reserve back\n// first, then the 4dp of the page's 12dp padding beyond the 8dp a segment\n// always keeps, and only then cuts a label short, with an ellipsis and a\n// `title` that shows it whole. A segment drawing a glyph keeps the glyph and\n// its 8dp gap, so the chosen label is the first to be cut. A label shows\n// whole in a segment 16dp wider than it, or 42dp while a glyph is drawn\n// beside it, plus the segment's rule. The track's width still never depends\n// on the choice: squeezed, its columns are the container's, shared equally.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype GroupRender = RACToggleButtonGroupProps['render'];\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// A segment's key, back from the attribute `SegmentedButtonSegment` writes\n// it into. JSON rather than the key as written, so a numeric key comes back\n// a number and matches the one React Aria's selection holds.\nfunction keyOf(segment: HTMLElement): Key | null {\n  const written = segment.dataset.key;\n  if (written === undefined) {\n    return null;\n  }\n  const key: unknown = JSON.parse(written);\n  return typeof key === 'string' || typeof key === 'number' ? key : null;\n}\n\n// The group's element, with `radioKeys` in place of React Aria's keyboard\n// handler, then handed to the call site's own `render` if it passed one.\nfunction radioGroupRenderer(render: GroupRender): NonNullable<GroupRender> {\n  return (domProps, renderProps) => {\n    const merged = {\n      ...domProps,\n      onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)\n    };\n    return render === undefined ? createElement('div', merged) : render(merged, renderProps);\n  };\n}\n\n// The radio group's keys, taken ahead of React Aria's toolbar ones on the\n// same capture listener: the arrows, Home and End move focus to a segment\n// and choose it, wrapping at the ends and passing over a disabled segment,\n// which is what the toolbar's own handler would otherwise do with focus\n// alone. Everything else — Tab, and an arrow held with a modifier the\n// browser may want — is handed to the toolbar as before.\nfunction radioKeys(state: ToggleGroupState, toolbar: KeyboardEventHandler<HTMLDivElement> | undefined): KeyboardEventHandler<HTMLDivElement> {\n  return event => {\n    const group = event.currentTarget;\n    const segments = [...group.querySelectorAll<HTMLElement>('[data-key]:not([data-disabled])')].filter(segment => segment.closest('[role=\"radiogroup\"]') === group);\n    const from = segments.findIndex(segment => segment === event.target);\n    const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === 'rtl');\n    if (from === -1 || step === null) {\n      toolbar?.(event);\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const to = step === 'first' ? 0 : step === 'last' ? segments.length - 1 : (from + step + segments.length) % segments.length;\n    const segment = segments[to];\n    const key = keyOf(segment);\n    if (key === null) {\n      return;\n    }\n    segment.focus();\n    state.setSelected(key, true);\n  };\n}\n\n// Where a key moves the choice in a radio group: one segment on, one back,\n// or to either end. Right and left follow the direction the track is drawn\n// in, read off the track itself rather than the locale, so a `dir` on a\n// wrapper turns them over as it turns the track over; up and down, and Home\n// and End, follow the document order whatever the direction.\nfunction stepOf(key: string, rtl: boolean): -1 | 1 | 'first' | 'last' | null {\n  switch (key) {\n    case 'ArrowDown':\n      {\n        return 1;\n      }\n    case 'ArrowLeft':\n      {\n        return rtl ? 1 : -1;\n      }\n    case 'ArrowRight':\n      {\n        return rtl ? -1 : 1;\n      }\n    case 'ArrowUp':\n      {\n        return -1;\n      }\n    case 'End':\n      {\n        return 'last';\n      }\n    case 'Home':\n      {\n        return 'first';\n      }\n    default:\n      {\n        return null;\n      }\n  }\n}\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\n\n// The part of the page's 12dp padding a segment gives back on a narrow\n// track: the padding is 8dp, and the rest sits in the spacers, which shrink.\nconst PADDING_GIVE = `calc(${spacing.md} - ${spacing.sm})`;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"xn60lsn\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  spacer: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"xs83m0k\",\n    kzqmXN: \"xbraz1g\",\n    kjj79g: \"x13a6bvl\",\n    k7Eaqz: \"xeuugli\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1pha8k4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  spacerHalf: {\n    kzqmXN: \"x154zo0h\",\n    $$css: true\n  },\n  spacerHolding: {\n    kzqmXN: \"x1n85vuq\",\n    k7Eaqz: \"x36sgg7\",\n    $$css: true\n  },\n  spacerIcon: {\n    kzqmXN: \"x1iuy3mw\",\n    k7Eaqz: \"x16xo4sp\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether the chosen segment stays chosen when it is pressed again. On\n   * by default while one is chosen, since a radio group always holds a\n   * choice; `false` lets a press clear it, as React Aria's own default\n   * does. Off by default while several may be, where any of them can be\n   * turned off.\n   * @default true while one is chosen, false while several may be\n   */\n  disallowEmptySelection?: boolean;\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected,\n   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   *\n   * Given with no label, the icon is the segment, centred in it and kept\n   * while chosen; name the segment with `aria-label` then.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, marked: boolean): ReactNode {\n  if (state.isSelected && marked) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// Whether a segment has a label, rather than an icon alone. An empty string\n// and a `false` from a condition at the call site are no label either.\nfunction hasLabel(children: ReactNode) {\n  return children !== undefined && children !== null && children !== false && children !== '';\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode, marked: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!marked << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, marked: boolean, labelRef: (element: HTMLSpanElement | null) => void, labelTitle: string | undefined) {\n  const labelled = hasLabel(children);\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = marked || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, marked);\n    const drawn = glyph !== null;\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode, marked)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        <span {...stylex.props(styles.spacer, reserves && (drawn ? labelled ? styles.spacerHolding : styles.spacerIcon : styles.spacerHalf))}>\n          {reserves && <span {...{\n          0: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7\"\n          },\n          2: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a\"\n          },\n          1: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1nsf9p3\"\n          },\n          3: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a x1nsf9p3\"\n          }\n        }[!!drawn << 1 | !!(drawn && labelled) << 0]}>\n              {glyph}\n            </span>}\n        </span>\n        {labelled && <span ref={labelRef} title={labelTitle} {...{\n        0: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft\"\n        },\n        2: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8\"\n        },\n        1: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1g12otp\"\n        },\n        3: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8 x1g12otp\"\n        }\n      }[!!drawn << 1 | !!(state.isSelected && !state.isDisabled) << 0]}>\n            {children}\n          </span>}\n        <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k xbraz1g x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7 x154zo0h\"\n        }\n      }[!!(reserves && !drawn) << 0]} />\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * Choosing one behaves as a radio group too, which React Aria's\n * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is\n * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys\n * move to a segment and choose it, wrapping at either end, and Home and End\n * choose the first and last. Choosing several keeps React Aria's keys: the\n * arrows move between segments, and Space or Enter toggles the focused one.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  disallowEmptySelection,\n  render,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: RefAttributes<HTMLDivElement> & SegmentedButtonProps) {\n  const single = selectionMode === 'single';\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} disallowEmptySelection={disallowEmptySelection ?? single} render={single ? radioGroupRenderer(render) : render} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  // Whether this segment draws the check when chosen: the set's choice,\n  // unless the segment has no label — see the header.\n  const marked = useContext(ShowSelectedIconContext) && hasLabel(children);\n  const [label, setLabel] = useState<HTMLSpanElement | null>(null);\n  const labelTitle = useTruncatedText(label);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton\n  // The key the radio group's arrow keys choose this segment by; see\n  // `radioKeys`. React Aria keeps a segment's key off its element.\n  data-key={selectionMode === 'single' && props.id !== undefined ? JSON.stringify(props.id) : undefined} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(marked), props)}>\n      {segmentContent(children, icon, ripple, selectionMode, marked, setLabel, labelTitle)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(marked: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !marked && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\n\n// The text of a label its segment is cutting short, for a `title` that shows\n// it whole; undefined while it fits. Measured again whenever the label's box\n// or its text changes, which is when it can start or stop being cut.\nfunction useTruncatedText(label: HTMLElement | null): string | undefined {\n  const [text, setText] = useState<string | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (label === null) {\n      return undefined;\n    }\n    const measure = () => {\n      const cut = label.scrollWidth > label.clientWidth;\n      setText(cut && label.textContent !== '' ? label.textContent : undefined);\n    };\n    measure();\n    const resize = new ResizeObserver(measure);\n    resize.observe(label);\n    const relabel = new MutationObserver(measure);\n    relabel.observe(label, {\n      characterData: true,\n      childList: true,\n      subtree: true\n    });\n    return () => {\n      resize.disconnect();\n      relabel.disconnect();\n    };\n  }, [label]);\n  return text;\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","KeyboardEventHandler","ReactNode","RefAttributes","FocusableElement","Key","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","ToggleGroupState","stylex","createContext","createElement","useContext","useLayoutEffect","useState","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","GroupRender","Ripple","ReturnType","NonNullable","keyOf","segment","HTMLElement","written","dataset","key","undefined","JSON","parse","radioGroupRenderer","render","domProps","renderProps","merged","onKeyDownCapture","radioKeys","state","toolbar","HTMLDivElement","event","group","currentTarget","segments","querySelectorAll","filter","closest","from","findIndex","target","step","altKey","ctrlKey","metaKey","stepOf","getComputedStyle","direction","preventDefault","stopPropagation","to","length","setSelected","rtl","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","PADDING_GIVE","md","FORCED_COLORS","styles","kgeoSG","kGOzcv","kpsdNU","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k7Eaqz","k8WAf4","kg3NbH","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","segmentDisabled","kMwMTN","segmentSelected","segmentSelectedUnmarked","segmentUnselected","spacer","kmuXW","kzqmXN","spacerHalf","spacerHolding","spacerIcon","SegmentedButtonProps","Omit","className","disallowEmptySelection","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","id","glyphFor","marked","isSelected","hasLabel","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","labelRef","element","HTMLSpanElement","labelTitle","labelled","reserves","glyph","drawn","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","t9","single","t10","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","label","setLabel","useTruncatedText","aria","disabledByGroup","stringify","handlers","segmentStyles","ring","text","setText","measure","cut","scrollWidth","clientWidth","textContent","resize","ResizeObserver","observe","relabel","MutationObserver","characterData","childList","subtree","disconnect","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, Key, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps, ToggleGroupState } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, createElement, useContext, useLayoutEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// React Aria stops at the name, though: its single mode is announced as a\n// radio group and behaves as a toolbar. So that mode takes the rest of the\n// radio group pattern from the ARIA Authoring Practices, a deliberate\n// departure from React Aria's `ToggleButtonGroup`, in two parts. The chosen\n// segment cannot be pressed off, since a radio group always holds a choice\n// and the page's single-select set always keeps one segment chosen;\n// `disallowEmptySelection={false}` gives React Aria's default back. And the\n// arrow keys choose as they move, wrapping at either end, with Home and End\n// choosing the first and last segment. Under React Aria the arrows moved\n// focus alone and stopped at the ends, so a screen reader reached each radio\n// without it being checked, and choosing one took a separate Space. Choosing\n// several keeps React Aria's toolbar keys, where the arrows only move between\n// buttons and Space toggles one.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// A segment with an `icon` and no label is drawn that way whatever the set\n// says. It keeps its icon when chosen, since the icon is all that tells it\n// from its neighbours, and a check in its place would hide which of them is\n// the chosen one.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\n//\n// Every segment that could ever draw that slot keeps room for it whether\n// or not it is drawing one. Sized by what it drew, the slot made the widest\n// segment whichever one was chosen, and the whole track changed width with\n// the choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot opens from 0 to 18dp and the space it\n// lands in opens beside it, both over `durationShort2`. Here that space is\n// two spacers either side of the label, which trade it between them: half\n// on each side while nothing is drawn, so a bare label stays centred, and\n// all of it on the leading side, where the slot sits, once something is.\n// Their total never changes, so neither does the segment's width. Angular\n// Material has no case of the first kind, since its toggles are sized by\n// their own content rather than by the widest of them.\n//\n// That room gives way before the label does. A track with room to spare is\n// the widest label plus 26dp per segment, which is what the widest column\n// already measured while its own segment was the chosen one. A track\n// squeezed below that — long labels on a phone — gives the reserve back\n// first, then the 4dp of the page's 12dp padding beyond the 8dp a segment\n// always keeps, and only then cuts a label short, with an ellipsis and a\n// `title` that shows it whole. A segment drawing a glyph keeps the glyph and\n// its 8dp gap, so the chosen label is the first to be cut. A label shows\n// whole in a segment 16dp wider than it, or 42dp while a glyph is drawn\n// beside it, plus the segment's rule. The track's width still never depends\n// on the choice: squeezed, its columns are the container's, shared equally.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype GroupRender = RACToggleButtonGroupProps['render'];\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// A segment's key, back from the attribute `SegmentedButtonSegment` writes\n// it into. JSON rather than the key as written, so a numeric key comes back\n// a number and matches the one React Aria's selection holds.\nfunction keyOf(segment: HTMLElement): Key | null {\n  const written = segment.dataset.key;\n  if (written === undefined) {\n    return null;\n  }\n  const key: unknown = JSON.parse(written);\n  return typeof key === 'string' || typeof key === 'number' ? key : null;\n}\n\n// The group's element, with `radioKeys` in place of React Aria's keyboard\n// handler, then handed to the call site's own `render` if it passed one.\nfunction radioGroupRenderer(render: GroupRender): NonNullable<GroupRender> {\n  return (domProps, renderProps) => {\n    const merged = {\n      ...domProps,\n      onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)\n    };\n    return render === undefined ? createElement('div', merged) : render(merged, renderProps);\n  };\n}\n\n// The radio group's keys, taken ahead of React Aria's toolbar ones on the\n// same capture listener: the arrows, Home and End move focus to a segment\n// and choose it, wrapping at the ends and passing over a disabled segment,\n// which is what the toolbar's own handler would otherwise do with focus\n// alone. Everything else — Tab, and an arrow held with a modifier the\n// browser may want — is handed to the toolbar as before.\nfunction radioKeys(state: ToggleGroupState, toolbar: KeyboardEventHandler<HTMLDivElement> | undefined): KeyboardEventHandler<HTMLDivElement> {\n  return event => {\n    const group = event.currentTarget;\n    const segments = [...group.querySelectorAll<HTMLElement>('[data-key]:not([data-disabled])')].filter(segment => segment.closest('[role=\"radiogroup\"]') === group);\n    const from = segments.findIndex(segment => segment === event.target);\n    const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === 'rtl');\n    if (from === -1 || step === null) {\n      toolbar?.(event);\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const to = step === 'first' ? 0 : step === 'last' ? segments.length - 1 : (from + step + segments.length) % segments.length;\n    const segment = segments[to];\n    const key = keyOf(segment);\n    if (key === null) {\n      return;\n    }\n    segment.focus();\n    state.setSelected(key, true);\n  };\n}\n\n// Where a key moves the choice in a radio group: one segment on, one back,\n// or to either end. Right and left follow the direction the track is drawn\n// in, read off the track itself rather than the locale, so a `dir` on a\n// wrapper turns them over as it turns the track over; up and down, and Home\n// and End, follow the document order whatever the direction.\nfunction stepOf(key: string, rtl: boolean): -1 | 1 | 'first' | 'last' | null {\n  switch (key) {\n    case 'ArrowDown':\n      {\n        return 1;\n      }\n    case 'ArrowLeft':\n      {\n        return rtl ? 1 : -1;\n      }\n    case 'ArrowRight':\n      {\n        return rtl ? -1 : 1;\n      }\n    case 'ArrowUp':\n      {\n        return -1;\n      }\n    case 'End':\n      {\n        return 'last';\n      }\n    case 'Home':\n      {\n        return 'first';\n      }\n    default:\n      {\n        return null;\n      }\n  }\n}\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\n\n// The part of the page's 12dp padding a segment gives back on a narrow\n// track: the padding is 8dp, and the rest sits in the spacers, which shrink.\nconst PADDING_GIVE = `calc(${spacing.md} - ${spacing.sm})`;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"xn60lsn\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  spacer: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"xs83m0k\",\n    kzqmXN: \"xbraz1g\",\n    kjj79g: \"x13a6bvl\",\n    k7Eaqz: \"xeuugli\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1pha8k4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  spacerHalf: {\n    kzqmXN: \"x154zo0h\",\n    $$css: true\n  },\n  spacerHolding: {\n    kzqmXN: \"x1n85vuq\",\n    k7Eaqz: \"x36sgg7\",\n    $$css: true\n  },\n  spacerIcon: {\n    kzqmXN: \"x1iuy3mw\",\n    k7Eaqz: \"x16xo4sp\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether the chosen segment stays chosen when it is pressed again. On\n   * by default while one is chosen, since a radio group always holds a\n   * choice; `false` lets a press clear it, as React Aria's own default\n   * does. Off by default while several may be, where any of them can be\n   * turned off.\n   * @default true while one is chosen, false while several may be\n   */\n  disallowEmptySelection?: boolean;\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected,\n   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'id' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   *\n   * Given with no label, the icon is the segment, centred in it and kept\n   * while chosen; name the segment with `aria-label` then.\n   */\n  icon?: ReactNode;\n  /**\n   * The key selection is reported by. Required, because React Aria joins a\n   * toggle to its group's selection by this key alone: a segment without one\n   * keeps a pressed state of its own, so a set where one is chosen could hold\n   * two, and it is announced as a pressed button rather than a radio.\n   */\n  id: Key;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, marked: boolean): ReactNode {\n  if (state.isSelected && marked) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// Whether a segment has a label, rather than an icon alone. An empty string\n// and a `false` from a condition at the call site are no label either.\nfunction hasLabel(children: ReactNode) {\n  return children !== undefined && children !== null && children !== false && children !== '';\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode, marked: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!marked << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, marked: boolean, labelRef: (element: HTMLSpanElement | null) => void, labelTitle: string | undefined) {\n  const labelled = hasLabel(children);\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = marked || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, marked);\n    const drawn = glyph !== null;\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode, marked)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        <span {...stylex.props(styles.spacer, reserves && (drawn ? labelled ? styles.spacerHolding : styles.spacerIcon : styles.spacerHalf))}>\n          {reserves && <span {...{\n          0: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7\"\n          },\n          2: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a\"\n          },\n          1: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1nsf9p3\"\n          },\n          3: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a x1nsf9p3\"\n          }\n        }[!!drawn << 1 | !!(drawn && labelled) << 0]}>\n              {glyph}\n            </span>}\n        </span>\n        {labelled && <span ref={labelRef} title={labelTitle} {...{\n        0: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft\"\n        },\n        2: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8\"\n        },\n        1: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1g12otp\"\n        },\n        3: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8 x1g12otp\"\n        }\n      }[!!drawn << 1 | !!(state.isSelected && !state.isDisabled) << 0]}>\n            {children}\n          </span>}\n        <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k xbraz1g x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7 x154zo0h\"\n        }\n      }[!!(reserves && !drawn) << 0]} />\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * Choosing one behaves as a radio group too, which React Aria's\n * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is\n * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys\n * move to a segment and choose it, wrapping at either end, and Home and End\n * choose the first and last. Choosing several keeps React Aria's keys: the\n * arrows move between segments, and Space or Enter toggles the focused one.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  disallowEmptySelection,\n  render,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: RefAttributes<HTMLDivElement> & SegmentedButtonProps) {\n  const single = selectionMode === 'single';\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} disallowEmptySelection={disallowEmptySelection ?? single} render={single ? radioGroupRenderer(render) : render} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  // Whether this segment draws the check when chosen: the set's choice,\n  // unless the segment has no label — see the header.\n  const marked = useContext(ShowSelectedIconContext) && hasLabel(children);\n  const [label, setLabel] = useState<HTMLSpanElement | null>(null);\n  const labelTitle = useTruncatedText(label);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton\n  // The key the radio group's arrow keys choose this segment by; see\n  // `radioKeys`. React Aria keeps a segment's key off its element.\n  data-key={selectionMode === 'single' ? JSON.stringify(props.id) : undefined} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(marked), props)}>\n      {segmentContent(children, icon, ripple, selectionMode, marked, setLabel, labelTitle)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(marked: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !marked && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\n\n// The text of a label its segment is cutting short, for a `title` that shows\n// it whole; undefined while it fits. Measured again whenever the label's box\n// or its text changes, which is when it can start or stop being cut.\nfunction useTruncatedText(label: HTMLElement | null): string | undefined {\n  const [text, setText] = useState<string | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (label === null) {\n      return undefined;\n    }\n    const measure = () => {\n      const cut = label.scrollWidth > label.clientWidth;\n      setText(cut && label.textContent !== '' ? label.textContent : undefined);\n    };\n    measure();\n    const resize = new ResizeObserver(measure);\n    resize.observe(label);\n    const relabel = new MutationObserver(measure);\n    relabel.observe(label, {\n      characterData: true,\n      childList: true,\n      subtree: true\n    });\n    return () => {\n      resize.disconnect();\n      relabel.disconnect();\n    };\n  }, [label]);\n  return text;\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}

package/dist/components/separator/index.d.ts

@@ -2,7 +2,16 @@ import { RefAttributes } from "react";
 import { SeparatorProps } from "react-aria-components";
 //#region src/components/separator/index.d.ts
 type SeparatorInset = 'both' | 'none' | 'start';
-type SeparatorProps$1 = Omit<SeparatorProps, 'orientation'> & {
+type SeparatorProps$1 = {
+  /**
+   * Takes the rule out of the accessibility tree, for a divider that only
+   * draws a line between things that already say where each starts — the
+   * sections of a `DisclosureGroup`, or rows that are each a control. A
+   * reader then hears nothing between them rather than "separator" at every
+   * one. The rule draws the same either way.
+   * @default false
+   */
+  decorative?: boolean;
   /**
    * How far the rule is held off the edges it runs between. `start` holds it
    * 16dp off the leading end, which is the page's inset divider; `both`
@@ -13,17 +22,20 @@ type SeparatorProps$1 = Omit<SeparatorProps, 'orientation'> & {
   inset?: SeparatorInset;
   /**
    * Which way the rule runs. A vertical separator takes its length from a
-   * flex or grid parent and has none of its own. Defaults to whatever the
-   * container asks for — a `Toolbar` asks for the rule across its own
-   * direction — and to horizontal outside one.
+   * flex or grid parent, and is one line of the text around it, `1em`, in
+   * any other. Defaults to whatever the container asks for — a `Toolbar`
+   * asks for the rule across its own direction — and to horizontal outside
+   * one.
    */
   orientation?: 'horizontal' | 'vertical';
-};
+} & Omit<SeparatorProps, 'orientation'>;
 /**
  * A 1px rule between items. The orientation drives the accessibility tree as
  * well as which side the rule is drawn on: horizontal renders an `<hr>`,
  * whose role and orientation are implicit, and vertical a `<div>` given the
- * separator role and `aria-orientation="vertical"`.
+ * separator role and `aria-orientation="vertical"`. `decorative` takes the
+ * rule out of that tree altogether, for one that only draws a line between
+ * items that already carry their own structure.
  *
  * `inset` holds the rule off the ends it runs between — `start` off the
  * leading one, `both` off each — which is what a rule between list rows
@@ -35,7 +47,7 @@ type SeparatorProps$1 = Omit<SeparatorProps, 'orientation'> & {
  * the rule across the toolbar's own direction. `elementType` picks a
  * different element, and `render` is React Aria's function form.
  */
-declare function Separator$1({ inset, orientation, ...props }: RefAttributes<HTMLElement> & SeparatorProps$1): import("react").JSX.Element;
+declare function Separator$1({ decorative, inset, orientation, render, ...props }: RefAttributes<HTMLElement> & SeparatorProps$1): import("react").JSX.Element;
 //#endregion
 export { type SeparatorInset, type SeparatorProps$1 as SeparatorProps, Separator$1 as default };
 //# sourceMappingURL=index.d.ts.map