@kanso-labs/kanso-ui 0.26.6 → 0.27.0

package/dist/components/app-bar/index.d.ts

@@ -62,6 +62,13 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
    * gutter. Unset, the row is as wide as the bar.
    */
   contentMaxInlineSize?: string;
+  /**
+   * Where the headline sits in the page's outline. A screen reader moves
+   * between headings, so a bar drawn beside another bar, or under a page
+   * heading of its own, should lower it.
+   * @default 1
+   */
+  headingLevel?: number;
   /** The page's title. Wraps rather than truncating, and grows the bar with it. */
   headline?: ReactNode;
   /** Usually a back or menu icon button. Sits before the text. */
@@ -101,7 +108,7 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
  * and `collapsed` exist. Neither watches the page: only the app knows which
  * element scrolls, so both are set from its own scroll handler.
  */
-declare function AppBar({ align, collapsed, contentInset, contentMaxInlineSize, headline, leading, render, scrolled, size, subtitle, trailing, ...props }: AppBarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function AppBar({ align, collapsed, contentInset, contentMaxInlineSize, headingLevel, headline, leading, render, scrolled, size, subtitle, trailing, ...props }: AppBarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { type AppBarProps, AppBar as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/app-bar/index.js

@@ -3,6 +3,7 @@ import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
 import Text from "../text/index.js";
 import { c } from "react/compiler-runtime";
+import { createElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/app-bar/index.tsx
 const HEADLINE_OFFSET = "12px";
@@ -53,7 +54,18 @@ const HEADLINE_VARIANT = {
 	medium: "headlineSmall",
 	small: "titleLarge"
 };
-const HEADING_1 = /* @__PURE__ */ jsx("h1", {});
+const HEADINGS = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+function heading(level) {
+	const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;
+	return createElement(HEADINGS[index]);
+}
 const PARAGRAPH = /* @__PURE__ */ jsx("p", {});
 const _temp = {
 	kAzted: "x1chvrdh",
@@ -83,7 +95,7 @@ const rowStyles = { root: (contentInset, maxInlineSize) => [_temp2, {
 * element scrolls, so both are set from its own scroll handler.
 */
 function AppBar(t0) {
-	const $ = c(39);
+	const $ = c(40);
 	let render;
 	let t1;
 	let t2;
@@ -91,105 +103,107 @@ function AppBar(t0) {
 	let t4;
 	let t5;
 	if ($[0] !== t0) {
-		const { align: t6, collapsed: t7, contentInset: t8, contentMaxInlineSize: t9, headline, leading, render: t10, scrolled: t11, size: t12, subtitle, trailing, ...props$1 } = t0;
-		render = t10;
+		const { align: t6, collapsed: t7, contentInset: t8, contentMaxInlineSize: t9, headingLevel: t10, headline, leading, render: t11, scrolled: t12, size: t13, subtitle, trailing, ...props$1 } = t0;
+		render = t11;
 		const align = t6 === void 0 ? "start" : t6;
 		const collapsed = t7 === void 0 ? false : t7;
 		const contentInset = t8 === void 0 ? DEFAULT_CONTENT_INSET : t8;
 		const contentMaxInlineSize = t9 === void 0 ? "none" : t9;
-		const scrolled = t11 === void 0 ? false : t11;
-		const size = t12 === void 0 ? "small" : t12;
+		const headingLevel = t10 === void 0 ? 1 : t10;
+		const scrolled = t12 === void 0 ? false : t12;
+		const size = t13 === void 0 ? "small" : t13;
 		const collapse = collapsed && size !== "small";
 		const expandedHeight = subtitle === void 0 || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;
 		const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;
 		t5 = useRender;
 		t4 = "header";
 		t1 = props$1;
-		let t13;
+		let t14;
 		if ($[7] !== contentInset || $[8] !== contentMaxInlineSize) {
-			t13 = props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize));
+			t14 = props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize));
 			$[7] = contentInset;
 			$[8] = contentMaxInlineSize;
-			$[9] = t13;
-		} else t13 = $[9];
-		let t14;
+			$[9] = t14;
+		} else t14 = $[9];
+		let t15;
 		if ($[10] !== leading) {
-			t14 = leading === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			t15 = leading === void 0 ? null : /* @__PURE__ */ jsx("div", {
 				className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
 				children: leading
 			});
 			$[10] = leading;
-			$[11] = t14;
-		} else t14 = $[11];
-		let t15;
+			$[11] = t15;
+		} else t15 = $[11];
+		let t16;
 		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-			t15 = {
+			t16 = {
 				0: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02" },
 				1: { className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid" }
 			};
-			$[12] = t15;
-		} else t15 = $[12];
-		const t16 = t15[!!(align === "center") << 0];
-		let t17;
-		if ($[13] !== collapse || $[14] !== headline || $[15] !== size) {
-			t17 = headline === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+			$[12] = t16;
+		} else t16 = $[12];
+		const t17 = t16[!!(align === "center") << 0];
+		let t18;
+		if ($[13] !== collapse || $[14] !== headingLevel || $[15] !== headline || $[16] !== size) {
+			t18 = headline === void 0 ? null : /* @__PURE__ */ jsx(Text, {
 				className: "xioksi3 x1nxaspg x1seskgd",
-				render: HEADING_1,
+				render: heading(headingLevel),
 				variant: collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size],
 				children: headline
 			});
 			$[13] = collapse;
-			$[14] = headline;
-			$[15] = size;
-			$[16] = t17;
-		} else t17 = $[16];
-		let t18;
-		if ($[17] !== collapse || $[18] !== subtitle) {
-			t18 = subtitle === void 0 || collapse ? null : /* @__PURE__ */ jsx(Text, {
+			$[14] = headingLevel;
+			$[15] = headline;
+			$[16] = size;
+			$[17] = t18;
+		} else t18 = $[17];
+		let t19;
+		if ($[18] !== collapse || $[19] !== subtitle) {
+			t19 = subtitle === void 0 || collapse ? null : /* @__PURE__ */ jsx(Text, {
 				render: PARAGRAPH,
 				tone: "muted",
 				variant: "bodyMedium",
 				children: subtitle
 			});
-			$[17] = collapse;
-			$[18] = subtitle;
-			$[19] = t18;
-		} else t18 = $[19];
-		let t19;
-		if ($[20] !== t16 || $[21] !== t17 || $[22] !== t18) {
-			t19 = /* @__PURE__ */ jsxs("div", {
-				...t16,
-				children: [t17, t18]
+			$[18] = collapse;
+			$[19] = subtitle;
+			$[20] = t19;
+		} else t19 = $[20];
+		let t20;
+		if ($[21] !== t17 || $[22] !== t18 || $[23] !== t19) {
+			t20 = /* @__PURE__ */ jsxs("div", {
+				...t17,
+				children: [t18, t19]
 			});
-			$[20] = t16;
 			$[21] = t17;
 			$[22] = t18;
 			$[23] = t19;
-		} else t19 = $[23];
-		let t20;
-		if ($[24] !== trailing) {
-			t20 = trailing === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			$[24] = t20;
+		} else t20 = $[24];
+		let t21;
+		if ($[25] !== trailing) {
+			t21 = trailing === void 0 ? null : /* @__PURE__ */ jsx("div", {
 				className: "x6s0dn4 x78zum5 x2lah0s xzoy561",
 				children: trailing
 			});
-			$[24] = trailing;
-			$[25] = t20;
-		} else t20 = $[25];
-		if ($[26] !== t13 || $[27] !== t14 || $[28] !== t19 || $[29] !== t20) {
+			$[25] = trailing;
+			$[26] = t21;
+		} else t21 = $[26];
+		if ($[27] !== t14 || $[28] !== t15 || $[29] !== t20 || $[30] !== t21) {
 			t2 = /* @__PURE__ */ jsxs("div", {
-				...t13,
+				...t14,
 				children: [
-					t14,
-					t19,
-					t20
+					t15,
+					t20,
+					t21
 				]
 			});
-			$[26] = t13;
 			$[27] = t14;
-			$[28] = t19;
+			$[28] = t15;
 			$[29] = t20;
-			$[30] = t2;
-		} else t2 = $[30];
+			$[30] = t21;
+			$[31] = t2;
+		} else t2 = $[31];
 		t3 = mergeStyles(props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props$1);
 		$[0] = t0;
 		$[1] = render;
@@ -207,29 +221,29 @@ function AppBar(t0) {
 		t5 = $[6];
 	}
 	let t6;
-	if ($[31] !== t1 || $[32] !== t2 || $[33] !== t3) {
+	if ($[32] !== t1 || $[33] !== t2 || $[34] !== t3) {
 		t6 = {
 			...t1,
 			children: t2,
 			...t3
 		};
-		$[31] = t1;
-		$[32] = t2;
-		$[33] = t3;
-		$[34] = t6;
-	} else t6 = $[34];
+		$[32] = t1;
+		$[33] = t2;
+		$[34] = t3;
+		$[35] = t6;
+	} else t6 = $[35];
 	let t7;
-	if ($[35] !== render || $[36] !== t4 || $[37] !== t6) {
+	if ($[36] !== render || $[37] !== t4 || $[38] !== t6) {
 		t7 = {
 			defaultTagName: t4,
 			props: t6,
 			render
 		};
-		$[35] = render;
-		$[36] = t4;
-		$[37] = t6;
-		$[38] = t7;
-	} else t7 = $[38];
+		$[36] = render;
+		$[37] = t4;
+		$[38] = t6;
+		$[39] = t7;
+	} else t7 = $[39];
 	return t5(t7);
 }
 //#endregion

package/dist/components/app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","colors","motion","spacing","Text","HEADLINE_OFFSET","DEFAULT_CONTENT_INSET","HEIGHTS","large","plain","withSubtitle","medium","small","const","COLLAPSED_HEIGHT","styles","root","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","row","kOIVth","kzqmXN","kUOVxO","scrolled","HEADLINE_VARIANT","HEADING_1","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","kg3NbH","rowStyles","contentInset","maxInlineSize","AppBarProps","Omit","align","collapsed","contentMaxInlineSize","headline","leading","size","subtitle","trailing","AppBar","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","props","collapse","expandedHeight","height","t13","t14","t15","Symbol","for","0","className","1","t16","t17","t18","t19","t20","children","defaultTagName"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1>. A bar nested somewhere that already has one can pass its own\n// heading as `headline` instead.\n// oxlint-disable-next-line jsx-a11y/heading-has-content -- filled by useRender\nconst HEADING_1 = <h1 />;\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"xioksi3 x1nxaspg x1seskgd\" render={HEADING_1} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","createElement","RenderComponentProps","useRender","mergeStyles","colors","motion","spacing","Text","HEADLINE_OFFSET","DEFAULT_CONTENT_INSET","HEIGHTS","large","plain","withSubtitle","medium","small","const","COLLAPSED_HEIGHT","styles","root","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","row","kOIVth","kzqmXN","kUOVxO","scrolled","HEADLINE_VARIANT","HEADINGS","heading","level","index","Math","min","max","round","length","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","kg3NbH","rowStyles","contentInset","maxInlineSize","AppBarProps","Omit","align","collapsed","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","props","collapse","expandedHeight","height","t14","t15","t16","Symbol","for","0","className","1","t17","t18","t19","t20","t21","children","defaultTagName"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. Disclosure's\n// own `headingLevel` hands the number to React Aria, which is why that one\n// needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;\n  return createElement(HEADINGS[index]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline. A screen reader moves\n   * between headings, so a bar drawn beside another bar, or under a page\n   * heading of its own, should lower it.\n   * @default 1\n   */\n  headingLevel?: number;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":";;;;;;;;AA8BA,MAAMU,kBAAkB;AAKxB,MAAMC,wBAAwB;AAC9B,MAAMC,UAAU;CACdC,OAAO;EACLC,OAAO;EACPC,cAAc;CAChB;CACAC,QAAQ;EACNF,OAAO;EACPC,cAAc;CAChB;CACAE,OAAO;EACLH,OAAO;EACPC,cAAc;CAChB;AACF;AAMA,MAAMI,mBAAmBP,QAAQK,MAAMH;AACvC,MAAMM,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,KAAK;EACHT,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,UAAU;EACRZ,QAAQ;EACRO,OAAO;CACT;AACF;AAMA,MAAMM,mBAAmB;CACvBvB,OAAO;CACPG,QAAQ;CACRC,OAAO;AACT;AAkBA,MAAMoB,WAAW;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI;AACpD,SAASC,QAAQC,OAAe;CAC9B,MAAMC,QAAQC,KAAKC,IAAID,KAAKE,IAAIF,KAAKG,MAAML,KAAK,GAAG,CAAC,GAAGF,SAASQ,MAAM,IAAI;CAC1E,OAAO3C,cAAcmC,SAASG,MAAM;AACtC;AACA,MAAMM,YAAY,oBAAC,KAAD,CAAE,CAAA;AAMpB,MAAMC,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,eAAe,EACnB5B,OAAO6B,iBAAyB,CAACH,OAAO,EACtC,sBAAqBI,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWF,YAAY,EAChH,CAAC,EACH;AAOA,MAAMG,SAAS;CACbC,QAAQ;CACRC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,YAAY,EAChBnC,OAAOoC,cAAsBC,kBAA0B,CAACL,QAAQ;CAC9D,uBAAsBF,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAWM,aAAa;CAChH,uBAAsBP,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,QAAQK,aAAY,KAAM/C,gBAAe,EAAG;AACjJ,CAAC,EACH;;;;;;;;;;;;;;AA6GA,SAAA4D,OAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAgB,MAAA,EAAAV,OAAAmB,IAAAlB,WAAAmB,IAAAxB,cAAAyB,IAAAnB,sBAAAoB,IAAAnB,cAAAoB,KAAAnB,UAAAC,SAAAQ,QAAAW,KAAAlD,UAAAmD,KAAAnB,MAAAoB,KAAAnB,UAAAC,UAAA,GAAAmB,YAAAjB;EAAAG,SAAAW;EACd,MAAAxB,QAAAmB,OAAA5B,KAAAA,IAAA,UAAA4B;EACA,MAAAlB,YAAAmB,OAAA7B,KAAAA,IAAA,QAAA6B;EACA,MAAAxB,eAAAyB,OAAA9B,KAAAA,IAAAzC,wBAAAuE;EACA,MAAAnB,uBAAAoB,OAAA/B,KAAAA,IAAA,SAAA+B;EACA,MAAAnB,eAAAoB,QAAAhC,KAAAA,IAAA,IAAAgC;EAIA,MAAAjD,WAAAmD,QAAAlC,KAAAA,IAAA,QAAAkC;EACA,MAAAnB,OAAAoB,QAAAnC,KAAAA,IAAA,UAAAmC;EAQA,MAAAE,WAAiB3B,aAAaK,SAAS;EACvC,MAAAuB,iBAAuBtB,aAAahB,KAAAA,KAAagB,aAAa,OAAOxD,QAAQuD,KAAK,CAAArD,QAASF,QAAQuD,KAAK,CAAApD;EACxG,MAAA4E,SAAeF,WAAAtE,mBAAAuE;EACRtF,KAAAA;EACW0E,KAAA;EAEXU,KAAAA;EAAK,IAAAI;EAAA,IAAApB,EAAA,OAAAf,gBAAAe,EAAA,OAAAT,sBAAA;GACW6B,MAAA3F,MAAamB,OAAMW,KAAMyB,UAASnC,KAAMoC,cAAcM,oBAAoB,CAAC;GAACS,EAAA,KAAAf;GAAAe,EAAA,KAAAT;GAAAS,EAAA,KAAAoB;EAAA,OAAAA,MAAApB,EAAA;EAAA,IAAAqB;EAAA,IAAArB,EAAA,QAAAN,SAAA;GAC1F2B,MAAA3B,YAAYd,KAAAA,IAAZ,OAA+B,oBAAA,OAAA;IAAe,WAAA;IAAmCc,UAAAA;GAAc,CAAA;GAAAM,EAAA,MAAAN;GAAAM,EAAA,MAAAqB;EAAA,OAAAA,MAAArB,EAAA;EAAA,IAAAsB;EAAA,IAAAtB,EAAA,QAAAuB,OAAAC,IAAA,2BAAA,GAAA;GACvFF,MAAA;IAAAG,GACN,EAAAC,WACU,mEACb;IAACC,GACE,EAAAD,WACU,2EACb;GACF;GAAC1B,EAAA,MAAAsB;EAAA,OAAAA,MAAAtB,EAAA;EAPU,MAAA4B,MAAAN,IAOT,CAAC,EAAEjC,UAAU,aAAa;EAAE,IAAAwC;EAAA,IAAA7B,EAAA,QAAAiB,YAAAjB,EAAA,QAAAR,gBAAAQ,EAAA,QAAAP,YAAAO,EAAA,QAAAL,MAAA;GACzBkC,MAAApC,aAAab,KAAAA,IAAb,OAAgC,oBAAC,MAAD;IAAgB,WAAA;IAAoC,QAAAd,QAAQ0B,YAAY;IAAY,SAAAyB,WAAWrD,iBAAgBnB,QAASmB,iBAAiB+B;IACrKF,UAAAA;GADiC,CAAA;GAE7BO,EAAA,MAAAiB;GAAAjB,EAAA,MAAAR;GAAAQ,EAAA,MAAAP;GAAAO,EAAA,MAAAL;GAAAK,EAAA,MAAA6B;EAAA,OAAAA,MAAA7B,EAAA;EAAA,IAAA8B;EAAA,IAAA9B,EAAA,QAAAiB,YAAAjB,EAAA,QAAAJ,UAAA;GACRkC,MAAAlC,aAAahB,KAAAA,KAAbqC,WAAA,OAA4C,oBAAC,MAAD;IAAc3C,QAAAA;IAAgB,MAAA;IAAgB,SAAA;IACtFsB,UAAAA;GAD6C,CAAA;GAEzCI,EAAA,MAAAiB;GAAAjB,EAAA,MAAAJ;GAAAI,EAAA,MAAA8B;EAAA,OAAAA,MAAA9B,EAAA;EAAA,IAAA+B;EAAA,IAAA/B,EAAA,QAAA4B,OAAA5B,EAAA,QAAA6B,OAAA7B,EAAA,QAAA8B,KAAA;GAbXC,MAAA,qBAAA,OAAA;IAcM,GAdGH;IAAT,UAAA,CAQGC,KAGAC,GAGG;;GAAA9B,EAAA,MAAA4B;GAAA5B,EAAA,MAAA6B;GAAA7B,EAAA,MAAA8B;GAAA9B,EAAA,MAAA+B;EAAA,OAAAA,MAAA/B,EAAA;EAAA,IAAAgC;EAAA,IAAAhC,EAAA,QAAAH,UAAA;GACLmC,MAAAnC,aAAajB,KAAAA,IAAb,OAAgC,oBAAA,OAAA;IAAe,WAAA;IAAmCiB,UAAAA;GAAe,CAAA;GAAAG,EAAA,MAAAH;GAAAG,EAAA,MAAAgC;EAAA,OAAAA,MAAAhC,EAAA;EAAA,IAAAA,EAAA,QAAAoB,OAAApB,EAAA,QAAAqB,OAAArB,EAAA,QAAA+B,OAAA/B,EAAA,QAAAgC,KAAA;GAjB5F5B,KAAA,qBAAA,OAAA;IAkBF,GAlBWgB;IAAT,UAAA;KACLC;KACDU;KAeCC;IACG;;GAAAhC,EAAA,MAAAoB;GAAApB,EAAA,MAAAqB;GAAArB,EAAA,MAAA+B;GAAA/B,EAAA,MAAAgC;GAAAhC,EAAA,MAAAI;EAAA,OAAAA,KAAAJ,EAAA;EACLK,KAAAxE,YAAYJ,MAAamB,OAAMC,MAAO4B,aAAY5B,KAAMsE,MAAM,GAAGxD,YAAYf,OAAMe,QAAS,GAAGqD,OAAK;EAAChB,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EArBnGG,KAAA;GAAA,GACFQ;GAAKiB,UACE7B;GAkBF,GACLC;EACL;EAACL,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,UAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,IAAA;EAxBcC,KAAA;GAAAyB,gBACC5B;GAAQU,OACjBR;GAsBNN;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OA1BMpE,GAAU6E,EA0BhB;AAAC"}

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

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 import { FormProps } from "react-aria-components";
 //#region src/components/form/index.d.ts
-type FormProps$1 = Omit<FormProps, 'className' | 'style'> & {
+type FormProps$1 = {
   className?: string;
   style?: CSSProperties;
   /**
@@ -10,10 +10,17 @@ type FormProps$1 = Omit<FormProps, 'className' | 'style'> & {
    * regardless. `native` hands validation to the browser: a required or
    * malformed field blocks submission, and its message is the browser's
    * own, shown once submission is tried.
+   *
+   * Under `aria`, moving focus after a server answers is the call site's.
+   * The errors are associated — `aria-invalid` on each control, the message
+   * in its `aria-describedby` — but nothing moves and nothing is read out,
+   * because no part of the form knows a round trip happened. `validationErrors`
+   * is a prop rather than an event, so a form cannot tell a submission coming
+   * back from a first render that was given errors to begin with.
    * @default 'aria'
    */
   validationBehavior?: 'aria' | 'native';
-};
+} & Omit<FormProps, 'className' | 'style'>;
 /**
  * A form: the fields inside it and what they are told about validation. Pass
  * `validationErrors`, an object keyed by field `name`, to show what a server
@@ -22,6 +29,10 @@ type FormProps$1 = Omit<FormProps, 'className' | 'style'> & {
  * the submit event; call `preventDefault` on it to handle the submission
  * yourself, and read the values from `new FormData(event.currentTarget)`.
  *
+ * Handing `validationErrors` back from a submission is where a reader has to
+ * be told something arrived: see `validationBehavior` for what the form does
+ * and what it leaves to the call site.
+ *
  * The call site's `className` and `style` land on the form element, which is
  * the element a layout positions.
  */

package/dist/components/form/index.js

@@ -12,6 +12,10 @@ import { Form } from "react-aria-components";
 * the submit event; call `preventDefault` on it to handle the submission
 * yourself, and read the values from `new FormData(event.currentTarget)`.
 *
+* Handing `validationErrors` back from a submission is where a reader has to
+* be told something arrived: see `validationBehavior` for what the form does
+* and what it leaves to the call site.
+*
 * The call site's `className` and `style` land on the form element, which is
 * the element a layout positions.
 */

package/dist/components/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CSSProperties","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","Omit","className","style","validationBehavior","t0","$","_c","T0","t1","t2","t3","t4","props","undefined"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = Omit<RACFormProps, 'className' | 'style'> & {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n};\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,SAAAI,OAAAQ,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAD,oBAAAQ,IAAA,GAAAC,UAAAR;EACZ,MAAAD,qBAAAQ,OAAAE,KAAAA,IAAAf,4BAAAa;EAGQJ,KAAAV;EAA4BM,KAAAA;EAAwBS,KAAAA;EAAWF,KAAAX,YAAY,EAAAE,WACtE,SACb,GAAGW,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BR,oBAAAA;GAAkB,GAAMS;GAAK,GAAMF;EAE9D,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFNM;AAEM"}
+{"version":3,"file":"index.js","names":["CSSProperties","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","className","style","validationBehavior","Omit","t0","$","_c","T0","t1","t2","t3","t4","props","undefined"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * The errors are associated — `aria-invalid` on each control, the message\n   * in its `aria-describedby` — but nothing moves and nothing is read out,\n   * because no part of the form knows a round trip happened. `validationErrors`\n   * is a prop rather than an event, so a form cannot tell a submission coming\n   * back from a first render that was given errors to begin with.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n} & Omit<RACFormProps, 'className' | 'style'>;\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyDA,SAAAI,OAAAQ,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,oBAAAS,IAAA,GAAAC,UAAAR;EACZ,MAAAF,qBAAAS,OAAAE,KAAAA,IAAAf,4BAAAa;EAGQJ,KAAAV;EAA4BK,KAAAA;EAAwBU,KAAAA;EAAWF,KAAAX,YAAY,EAAAC,WACtE,SACb,GAAGY,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BT,oBAAAA;GAAkB,GAAMU;GAAK,GAAMF;EAE9D,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFNM;AAEM"}

package/dist/components/index.d.ts

@@ -33,7 +33,7 @@ import Form, { FormProps } from "./form/index.js";
 import IconButton, { IconButtonProps } from "./icon-button/index.js";
 import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps } from "./link/index.js";
-import List, { ListProps } from "./list/index.js";
+import List, { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps } from "./list/index.js";
 import ListBox, { ListBoxProps } from "./list-box/index.js";
 import ListDetail, { ListDetailProps } from "./list-detail/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
@@ -67,4 +67,4 @@ import TokenField, { TokenFieldProps } from "./token-field/index.js";
 import Toolbar, { ToolbarProps } from "./toolbar/index.js";
 import Tooltip, { TooltipProps } from "./tooltip/index.js";
 import Tree, { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps } from "./tree/index.js";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };

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

@@ -1,20 +1,6 @@
 import { ReactNode } from "react";
 import { GridListItemProps, GridListLoadMoreItemProps, GridListProps, GridListSectionProps } from "react-aria-components";
 //#region src/components/list/index.d.ts
-type ListItemProps<T extends object = object> = {
-  /** The row's headline — the one thing it is mostly about. */
-  children?: ReactNode;
-  /** A function may compute the class from the row's render state. */
-  className?: GridListItemProps<T>['className'];
-  /** Content before the headline: an avatar, an icon. */
-  leading?: ReactNode;
-  /** A function may compute the style from the row's render state. */
-  style?: GridListItemProps<T>['style'];
-  /** A second line under the headline, in the muted role. */
-  supporting?: ReactNode;
-  /** Content after the headline, such as an amount or a control. */
-  trailing?: ReactNode;
-} & Omit<GridListItemProps<T>, 'children' | 'className' | 'style'>;
 type ListLoadMoreProps = Omit<GridListLoadMoreItemProps, 'children'> & {
   /**
    * What the row says while it is loading. Read by a screen reader; the ring
@@ -35,6 +21,20 @@ type ListProps<T extends object> = Omit<GridListProps<T>, 'className' | 'style'>
   /** A function may compute the style from the list's render state. */
   style?: GridListProps<T>['style'];
 };
+type ListRowProps<T extends object = object> = {
+  /** The row's headline — the one thing it is mostly about. */
+  children?: ReactNode;
+  /** A function may compute the class from the row's render state. */
+  className?: GridListItemProps<T>['className'];
+  /** Content before the headline: an avatar, an icon. */
+  leading?: ReactNode;
+  /** A function may compute the style from the row's render state. */
+  style?: GridListItemProps<T>['style'];
+  /** A second line under the headline, in the muted role. */
+  supporting?: ReactNode;
+  /** Content after the headline, such as an amount or a control. */
+  trailing?: ReactNode;
+} & Omit<GridListItemProps<T>, 'children' | 'className' | 'style'>;
 type ListSectionProps<T extends object = object> = Omit<GridListSectionProps<T>, 'children'> & {
   /**
    * The rows in the section. A section built from data puts React Aria's
@@ -80,7 +80,7 @@ declare namespace List {
  * A list that selects with checkboxes draws one before whatever `leading`
  * holds, from the state React Aria reports rather than from a prop here.
  */
-declare function ListItem<T extends object = object>({ children, leading, supporting, textValue, trailing, ...props }: ListItemProps<T>): import("react").JSX.Element;
+declare function ListItem<T extends object = object>({ children, leading, supporting, textValue, trailing, ...props }: ListRowProps<T>): import("react").JSX.Element;
 /**
  * The row the list shows while it is fetching more. React Aria calls
  * `onLoadMore` when this comes into view, and draws it only while
@@ -93,5 +93,5 @@ declare function ListLoadMore({ label, ...props }: ListLoadMoreProps): import("r
  */
 declare function ListSection<T extends object = object>({ children, header, ...props }: ListSectionProps<T>): import("react").JSX.Element;
 //#endregion
-export { type ListItemProps, type ListLoadMoreProps, type ListProps, type ListSectionProps, List as default };
+export { type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, List as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","rowItemStyles","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","ListItemProps","children","className","T","leading","style","supporting","trailing","Omit","ListLoadMoreProps","label","ListProps","selectLabel","ListSectionProps","header","itemContent","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","_c","T0","T1","t1","t2","t3","t4","props","undefined","container","t5","ListItem","textValue","textOf","ListLoadMore","loading","ListSection","section","Item","LoadMore","Section"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListItemProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// 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 on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListItemProps, ListLoadMoreProps, ListProps, ListSectionProps };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","rowItemStyles","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","ListLoadMoreProps","Omit","label","ListProps","T","className","selectLabel","style","ListRowProps","children","leading","supporting","trailing","ListSectionProps","header","itemContent","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","_c","T0","T1","t1","t2","t3","t4","props","undefined","container","t5","ListItem","textValue","textOf","ListLoadMore","loading","ListSection","section","Item","LoadMore","Section"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// 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 on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport default List;"],"mappings":"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"}

package/dist/components/list-detail/index.d.ts

@@ -19,6 +19,15 @@ type ListDetailProps = {
    * Controlled, with no uncontrolled fallback: the layout cannot know that an
    * item was selected or that the reader went back, so holding that state
    * here would only ever be wrong.
+   *
+   * **Moving focus into the revealed pane comes with flipping this.** The
+   * pane being left is hidden outright, so a keyboard or screen reader inside
+   * it lands on the body and the next Tab starts from the top of the page.
+   * The same reason this prop is controlled is why the move is not made here:
+   * only the call site knows whether a key, a pointer or the history put it
+   * in that state, and what inside the pane to send focus to. Both panes hold
+   * nodes it supplied, so it has something to aim at — a heading given
+   * `tabIndex={-1}`, or a ref it already holds.
    * @default 'list'
    */
   showing?: 'detail' | 'list';
@@ -34,6 +43,11 @@ type ListDetailProps = {
  * The panes are written to the DOM in the order they are shown, which is what
  * Material Design asks of co-planar panes: focus order has to match the
  * arrangement on screen.
+ *
+ * Below the expanded breakpoint the pane that is not showing is hidden
+ * outright, so focus inside it is dropped when `showing` changes. The call
+ * site that changed it is what puts focus in the pane it revealed — see the
+ * prop.
  */
 declare function ListDetail({ detail, list, render, showing, ...props }: ListDetailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/components/list-detail/index.js

@@ -14,6 +14,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * The panes are written to the DOM in the order they are shown, which is what
 * Material Design asks of co-planar panes: focus order has to match the
 * arrangement on screen.
+*
+* Below the expanded breakpoint the pane that is not showing is hidden
+* outright, so focus inside it is dropped when `showing` changes. The call
+* site that changed it is what puts focus in the pane it revealed — see the
+* prop.
 */
 function ListDetail(t0) {
 	const $ = c(26);

package/dist/components/list-detail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":";;;;;;;;;;;;;;;;;AA+DA,SAAAc,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAoB,MAAA,EAAAL,QAAAC,MAAAO,QAAAM,IAAAZ,SAAAa,IAAA,GAAAC,UAAAX;EAAAG,SAAAM;EAIlB,MAAAZ,UAAAa,OAAAE,KAAAA,IAAA,SAAAF;EAGOtB,KAAAA;EACWmB,KAAA;EAEXI,KAAAA;EAAK,IAAAE;EAAA,IAAAZ,EAAA,OAAAa,OAAAC,IAAA,2BAAA,GAAA;GAEKF,KAAA;IAAAG,GACN,EAAAC,WACU,iBACb;IAACC,GACE,EAAAD,WACU,kCACb;GACF;GAAChB,EAAA,KAAAY;EAAA,OAAAA,KAAAZ,EAAA;EAPU,MAAAkB,KAAAN,GAOT,CAAC,EAAEhB,YAAY,aAAa;EAAE,IAAAuB;EAAA,IAAAnB,EAAA,OAAAL,QAAAK,EAAA,OAAAkB,IAAA;GAP9BC,MAAA,oBAAA,OAAA;IASM,GATGD;IAQNvB,UAAAA;GACG,CAAA;GAAAK,EAAA,KAAAL;GAAAK,EAAA,KAAAkB;GAAAlB,EAAA,MAAAmB;EAAA,OAAAA,MAAAnB,EAAA;EAAA,IAAAoB;EAAA,IAAApB,EAAA,QAAAa,OAAAC,IAAA,2BAAA,GAAA;GACGM,MAAA;IAAAL,GACN,EAAAC,WACU,iBACb;IAACC,GACE,EAAAD,WACU,kCACb;GACF;GAAChB,EAAA,MAAAoB;EAAA,OAAAA,MAAApB,EAAA;EAPU,MAAAqB,MAAAD,IAOT,CAAC,EAAExB,YAAY,WAAW;EAAE,IAAA0B;EAAA,IAAAtB,EAAA,QAAAN,UAAAM,EAAA,QAAAqB,KAAA;GAP5BC,MAAA,oBAAA,OAAA;IASM,GATGD;IAQN3B,UAAAA;GACG,CAAA;GAAAM,EAAA,MAAAN;GAAAM,EAAA,MAAAqB;GAAArB,EAAA,MAAAsB;EAAA,OAAAA,MAAAtB,EAAA;EAAA,IAAAA,EAAA,QAAAmB,OAAAnB,EAAA,QAAAsB,KAAA;GApBAlB,KAAA,qBAAA,UAAA,EAAA,UAAA,CACNe,KAUAG,GASM,EAAA,CAAA;GACLtB,EAAA,MAAAmB;GAAAnB,EAAA,MAAAsB;GAAAtB,EAAA,MAAAI;EAAA,OAAAA,KAAAJ,EAAA;EACFK,KAAAjB,YAAY,EAAA4B,WACF,kDACb,GAAGN,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EA1BJG,KAAA;GAAA,GACFE;GAAKa,UACEnB;GAqBL,GACFC;EAGL;EAACL,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,UAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,IAAA;EA7BcC,KAAA;GAAAe,gBACClB;GAAKI,OACdF;GA2BNN;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OA/BMb,GAAUsB,EA+BhB;AAAC"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","RenderComponentProps","useRender","mergeStyles","media","spacing","LIST_PANE","LIST_PANE_EXTRA_LARGE","ListDetailProps","detail","list","showing","Omit","ListDetail","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","props","undefined","t8","Symbol","for","0","className","1","t9","t10","t11","t12","t13","children","defaultTagName"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's recommended snap widths for a fixed pane. The list is the\n// fixed one here — Material Design points a fixed pane at \"lists with light\n// information density\" — and the detail pane is the flexible one that absorbs\n// whatever is left, which satisfies the spec's rule that every layout carry at\n// least one flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material Design's canonical layouts, and the fixed-and-flexible shape\n// of its two-pane layouts. Unlike SupportingPane, the detail pane here stands\n// on its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// Material Design puts the second pane on screen from expanded up. Below that\n// the spec shows one pane at a time, with selecting an item swapping to the\n// detail and back returning to the list — app navigation rather than layout,\n// which is why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   *\n   * **Moving focus into the revealed pane comes with flipping this.** The\n   * pane being left is hidden outright, so a keyboard or screen reader inside\n   * it lands on the body and the next Tab starts from the top of the page.\n   * The same reason this prop is controlled is why the move is not made here:\n   * only the call site knows whether a key, a pointer or the history put it\n   * in that state, and what inside the pane to send focus to. Both panes hold\n   * nodes it supplied, so it has something to aim at — a heading given\n   * `tabIndex={-1}`, or a ref it already holds.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * Material Design asks of co-planar panes: focus order has to match the\n * arrangement on screen.\n *\n * Below the expanded breakpoint the pane that is not showing is hidden\n * outright, so focus inside it is dropped when `showing` changes. The call\n * site that changed it is what puts focus in the pane it revealed — see the\n * prop.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":"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"}

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

@@ -47,6 +47,13 @@ type SnackbarProps = Omit<ToastRegionProps<SnackbarMessage>, 'children' | 'class
   'aria-label'?: string;
   /** A function may compute the class from the region's render state. */
   className?: ToastRegionProps<SnackbarMessage>['className'];
+  /**
+   * What a screen reader calls the button that dismisses a snackbar. It sits
+   * here rather than on a message's own options because it does not vary by
+   * message, so putting it there would make every `add` call repeat it.
+   * @default 'Close'
+   */
+  closeLabel?: string;
   /** The queue the region shows messages from. */
   queue: SnackbarQueue;
   /** A function may compute the style from the region's render state. */
@@ -99,7 +106,7 @@ declare class SnackbarQueue {
  * The call site's `className` and `style` land on that region, which is the
  * element a layout positions.
  */
-declare function Snackbar({ queue, ...props }: SnackbarProps): import("react").JSX.Element;
+declare function Snackbar({ closeLabel, queue, ...props }: SnackbarProps): import("react").JSX.Element;
 declare namespace Snackbar {
   var Queue: typeof SnackbarQueue;
 }

package/dist/components/snackbar/index.js

@@ -121,53 +121,58 @@ function closeToast(queue, key) {
 * element a layout positions.
 */
 function Snackbar(t0) {
-	const $ = c(14);
+	const $ = c(16);
 	let T0;
+	let closeLabel;
 	let queue;
 	let t1;
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		const { queue: t4, ...props } = t0;
-		queue = t4;
+		const { closeLabel: t4, queue: t5, ...props } = t0;
+		queue = t5;
+		closeLabel = t4 === void 0 ? "Close" : t4;
 		T0 = UNSTABLE_ToastRegion;
 		t1 = queue.rac;
 		t2 = props;
 		t3 = mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep" }, props);
 		$[0] = t0;
 		$[1] = T0;
-		$[2] = queue;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
+		$[2] = closeLabel;
+		$[3] = queue;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
 	} else {
 		T0 = $[1];
-		queue = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
+		closeLabel = $[2];
+		queue = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
 	}
 	let t4;
-	if ($[6] !== queue) {
-		t4 = snackbarContent(queue);
-		$[6] = queue;
-		$[7] = t4;
-	} else t4 = $[7];
+	if ($[7] !== closeLabel || $[8] !== queue) {
+		t4 = snackbarContent(queue, closeLabel);
+		$[7] = closeLabel;
+		$[8] = queue;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[8] !== T0 || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+	if ($[10] !== T0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			queue: t1,
 			...t2,
 			...t3,
 			children: t4
 		});
-		$[8] = T0;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
+		$[10] = T0;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
 	return t5;
 }
 /**
@@ -217,16 +222,17 @@ function SnackbarButton(t0) {
 	} else t3 = $[11];
 	return t3;
 }
-function snackbarContent(queue) {
+function snackbarContent(queue, closeLabel) {
 	return ({ toast }) => /* @__PURE__ */ jsx(SnackbarToast, {
 		close: closeToast(queue, toast.key),
+		closeLabel,
 		toast
 	});
 }
 /** The action, the close button, or nothing, after the message. */
 function SnackbarControls(t0) {
-	const $ = c(8);
-	const { action, close, isDismissable } = t0;
+	const $ = c(9);
+	const { action, close, closeLabel, isDismissable } = t0;
 	let t1;
 	if ($[0] !== action || $[1] !== close) {
 		t1 = action === void 0 ? null : /* @__PURE__ */ jsx(SnackbarButton, {
@@ -239,29 +245,30 @@ function SnackbarControls(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	let t2;
-	if ($[3] !== isDismissable) {
+	if ($[3] !== closeLabel || $[4] !== isDismissable) {
 		t2 = isDismissable ? /* @__PURE__ */ jsx(SnackbarButton, {
-			"aria-label": "Close",
+			"aria-label": closeLabel,
 			slot: "close",
 			style: styles.close,
 			children: /* @__PURE__ */ jsx(CloseGlyph, { className: "xxk0z11 xvy4d1p" })
 		}) : null;
-		$[3] = isDismissable;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[3] = closeLabel;
+		$[4] = isDismissable;
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[5] !== t1 || $[6] !== t2) {
+	if ($[6] !== t1 || $[7] !== t2) {
 		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
 	return t3;
 }
 /** One snackbar: its message, then whatever sits after it. */
 function SnackbarToast(t0) {
-	const $ = c(10);
-	const { close, toast } = t0;
+	const $ = c(11);
+	const { close, closeLabel, toast } = t0;
 	const { action, isDismissable, message } = toast.content;
 	let t1;
 	if ($[0] !== message) {
@@ -276,29 +283,31 @@ function SnackbarToast(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] !== action || $[3] !== close || $[4] !== isDismissable) {
+	if ($[2] !== action || $[3] !== close || $[4] !== closeLabel || $[5] !== isDismissable) {
 		t2 = /* @__PURE__ */ jsx(SnackbarControls, {
 			action,
 			close,
+			closeLabel,
 			isDismissable
 		});
 		$[2] = action;
 		$[3] = close;
-		$[4] = isDismissable;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[4] = closeLabel;
+		$[5] = isDismissable;
+		$[6] = t2;
+	} else t2 = $[6];
 	let t3;
-	if ($[6] !== t1 || $[7] !== t2 || $[8] !== toast) {
+	if ($[7] !== t1 || $[8] !== t2 || $[9] !== toast) {
 		t3 = /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
 			toast,
 			className: "x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w",
 			children: [t1, t2]
 		});
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = toast;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = toast;
+		$[10] = t3;
+	} else t3 = $[10];
 	return t3;
 }
 Snackbar.Queue = SnackbarQueue;

package/dist/components/snackbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","Omit","className","queue","SnackbarQueue","style","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","props","snackbarContent","t5","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xsdox4t\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"x1useyqa\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {\n  /**\n   * What a screen reader calls the region holding the snackbar.\n   * @default 'Notifications'\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n};\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call 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 on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label=\"Close\" slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  toast\n}: {\n  close: () => void;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":";;;;;;;;AAyDA,MAAM2B,WAAW;AACjB,MAAMC,UAAU;AAUhB,MAAMG,SAAS;CACbC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,OAAO;EACLC,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRpB,OAAO;CACT;AACF;;;;;;;;;;;;;;AAwEA,IAAMkC,gBAAN,MAAoB;;;;;CAKlB;CACAI,cAAc;EAGZ,KAAKD,MAAM,IAAIjE,oBAA+B,EAC5CmE,kBAAkB,EACpB,CAAC;CACH;;;;CAKAC,IAAId,SAAoBe,UAA2B,CAAC,GAAG;EACrD,MAAM,EACJlD,QACAkC,gBAAgB,OAChBG,SACAC,YACEY;EACJ,OAAO,KAAKJ,IAAIG,IAAI;GAClBjD;GACAkC;GACAC;EACF,GAAG;GACDE;GACAC,SAASA,YAAYtC,WAAWmD,KAAAA,IAAYxD,WAAWC;EACzD,CAAC;CACH;;CAGAwD,QAAQ;EACN,KAAKN,IAAIM,MAAM;CACjB;;CAGA1C,MAAM2C,KAAa;EACjB,KAAKP,IAAIpC,MAAM2C,GAAG;CACpB;AACF;AAMA,SAASC,YAAYtD,QAAwBU,OAAmB;CAC9D,aAAa;EACXV,OAAOgC,QAAQ;EACftB,MAAM;CACR;AACF;AACA,SAAS6C,WAAWb,OAAsBW,KAAa;CACrD,aAAa;EACXX,MAAMhC,MAAM2C,GAAG;CACjB;AACF;;;;;;;;;;;;;;;;;;;AAoBA,SAAAG,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAlB;CAAA,IAAAmB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAf,OAAAsB,IAAA,GAAAC,UAAAR;EAAAf,QAAAsB;EAIRJ,KAAA7E;EAAuC8E,KAAAnB,MAAKI;EAAUmB,KAAAA;EAAWF,KAAA5E,oBAAoB,EAAAsD,WAChF,sGACb,GAAGwB,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAhB;EAAAgB,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAhB,QAAAgB,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAhB,OAAA;EACJsB,KAAAE,gBAAgBxB,KAAK;EAACgB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAHpBG,KAAA,oBAAC,IAAD;GAAwC,OAAAN;GAAS,GAAMI;GAAK,GAAMF;GAGpEC,UAAAA;EAHiB,CAAA;EAIHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAJZS;AAIY;;;;;;;AASrB,SAAAC,eAAAX,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAU;CAAA,IAAAJ;CAAA,IAAArB;CAAA,IAAAc,EAAA,OAAAD,IAAA;EAAwB,CAAA,CAAAY,UAAAzB,OAAA,GAAAqB,WAAAR;EAUvBC,EAAA,KAAAD;EAAAC,EAAA,KAAAW;EAAAX,EAAA,KAAAO;EAAAP,EAAA,KAAAd;CAAA,OAAA;EAAAyB,WAAAX,EAAA;EAAAO,UAAAP,EAAA;EAAAd,QAAAc,EAAA;CAAA;CACC,MAAAY,SAAepF,UAA4B;CACrB,MAAA2E,KAAAS,OAAMC;CAAS,IAAAT;CAAA,IAAAJ,EAAA,OAAAd,OAAA;EAAiBkB,KAAAzF,MAAa0B,OAAMe,SAAU8B,KAAK;EAACc,EAAA,KAAAd;EAAAc,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAW,YAAAX,EAAA,OAAAO,WAAAP,EAAA,OAAAY,OAAAC,YAAAb,EAAA,OAAAY,OAAAE,WAAAd,EAAA,QAAAI,IAAA;EAAlFC,KAAA,qBAAC,QAAD;GAAU,GAAKF;GAAe,GAAMI;GAAK,GAAMH;GAA/C,UAAA,CACFO,UACAC,OAAME,OAFM;;EAGHd,EAAA,KAAAW;EAAAX,EAAA,KAAAO;EAAAP,EAAA,KAAAY,OAAAC;EAAAb,EAAA,KAAAY,OAAAE;EAAAd,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAHPK;AAGO;AAEhB,SAASG,gBAAgBxB,OAAsB;CAC7C,QAAQ,EACN+B,YAGI,oBAAC,eAAD;EAAe,OAAOlB,WAAWb,OAAO+B,MAAMpB,GAAG;EAAUoB;CAAM,CAAA;AACzE;;AAGA,SAAAC,iBAAAjB,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA0B,MAAA,EAAA3D,QAAAU,OAAAwB,kBAAAuB;CAQzB,IAAAI;CAAA,IAAAH,EAAA,OAAA1D,UAAA0D,EAAA,OAAAhD,OAAA;EAEMmD,KAAA7D,WAAWmD,KAAAA,IAAX,OAA8B,oBAAC,gBAAD;GAAyB,SAAAG,YAAYtD,QAAQU,KAAK;GAAU,OAAAX,OAAMC;GAC5FA,UAAAA,OAAM+B;EADmC,CAAA;EAE3B2B,EAAA,KAAA1D;EAAA0D,EAAA,KAAAhD;EAAAgD,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAxB,eAAA;EAClB4B,KAAA5B,gBAAgB,oBAAC,gBAAD;GAA2B,cAAA;GAAa,MAAA;GAAe,OAAAnC,OAAMW;GAC1E,UAAA,oBAAC,YAAD,EAAsB,WAAA,kBAAiB,CAAA;EADX,CAAA,IAA/B;EAEyBgD,EAAA,KAAAxB;EAAAwB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EANvBC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACFF,IAGAC,EAEyB,EAAA,CAAA;EACzBJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAPEK;AAOF;;AAIP,SAAAY,cAAAlB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAuB,MAAA,EAAAjD,OAAA+D,UAAAhB;CAOrB,MAAA,EAAAzD,QAAAkC,eAAAC,YAIIsC,MAAKG;CAAS,IAAAf;CAAA,IAAAH,EAAA,OAAAvB,SAAA;EAEd0B,KAAA,oBAAC,uBAAD;GAA2B,WAAA;GACzB,UAAA,oBAAC,MAAD;IAAW,MAAA;IAAS1B,UAAAA;GAAf,CAAA;EADS,CAAA;EAEEuB,EAAA,KAAAvB;EAAAuB,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAA1D,UAAA0D,EAAA,OAAAhD,SAAAgD,EAAA,OAAAxB,eAAA;EAClB4B,KAAA,oBAAC,kBAAD;GAA0B9D;GAAeU;GAAsBwB;EAAa,CAAA;EAAIwB,EAAA,KAAA1D;EAAA0D,EAAA,KAAAhD;EAAAgD,EAAA,KAAAxB;EAAAwB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAe,OAAA;EAJ7EV,KAAA,qBAAC,gBAAD;GAAiBU;GAAiB,WAAA;GAAlC,UAAA,CACHZ,IAGAC,EAJY;;EAKHJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAe;EAAAf,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALNK;AAKM;AAEfP,SAASqB,QAAQlC"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToastRegionProps","RACToastRegionProps","ToastRegionRenderProps","stylex","Button","RACButton","UNSTABLE_Toast","RACToast","UNSTABLE_ToastContent","RACToastContent","UNSTABLE_ToastQueue","RACToastQueue","UNSTABLE_ToastRegion","RACToastRegion","Text","CloseGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","typography","SHORT_MS","LONG_MS","WIDE","rise","styles","action","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","close","kZKoxP","kzqmXN","kmVPX3","control","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","kVAEAm","SnackbarAction","label","onPress","SnackbarMessage","isDismissable","message","SnackbarOptions","onClose","timeout","SnackbarProps","Omit","className","closeLabel","queue","SnackbarQueue","style","SnackbarToastItem","rac","constructor","maxVisibleToasts","add","options","undefined","clear","key","actionPress","closeToast","Snackbar","t0","$","_c","T0","t1","t2","t3","t4","t5","props","snackbarContent","SnackbarButton","children","ripple","handlers","surface","toast","SnackbarControls","SnackbarToast","content","Queue","SnackbarRegionRenderProps"],"sources":["../../../src/components/snackbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToastRegionProps as RACToastRegionProps, ToastRegionRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as RACToastQueue, UNSTABLE_ToastRegion as RACToastRegion, Text } from 'react-aria-components';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The snackbar page's brief message at the bottom of the screen, with an\n// optional action beside it and an optional close button after that. The\n// page's container is the inverse surface at a 4dp corner and elevation 3,\n// its supporting text is body-medium in inverse on surface, its action label\n// is inverse primary, and its close icon takes the supporting text's colour.\n// The measurements are the page's too: 8dp of margin from the edges of the\n// screen, 8dp of padding inside the container with another 8dp either side\n// of the message, 14dp above and below on a single line, and between 320 and\n// 576dp wide above the page's 600dp breakpoint — full width below it.\n//\n// One at a time. The page shows a single snackbar and replaces it rather\n// than stacking, which is `maxVisibleToasts: 1` on the queue.\n//\n// React Aria's toast is the behaviour: the region is a landmark that holds\n// the message, moves focus into it for a keyboard, and pauses every timer\n// while it is hovered or focused, so a message never expires while it is\n// being read or acted on.\n//\n// Three things are decided here rather than taken from React Aria or from\n// the page.\n//\n// **The queue is ours, not React Aria's.** React Aria's toast is still\n// `UNSTABLE_`, and `SnackbarQueue` is what keeps that name out of a\n// consumer's code — an upstream rename is this file rather than every call\n// site. It wraps their queue, defaults it to one visible message, and takes\n// the message and its options as one call.\n//\n// **The action and the close button are drawn here rather than through\n// Button and IconButton.** The page colours them inverse primary and inverse\n// on surface, which no variant of either carries, and a colour pushed in\n// from outside through `className` is the merge hazard AGENTS.md describes:\n// StyleX decides between two atomic classes by their order in the compiled\n// stylesheet, not by the order they are applied. Both are React Aria's\n// `Button` with the same ripple and the same state layers, over\n// `currentColor` so each takes the colour the snackbar gives it.\n//\n// **There is no `container` prop.** Every other overlay here takes one,\n// because React Aria's `Modal` and `Popover` accept a portal container.\n// Its toast region does not: it reads a portal provider that\n// `react-aria-components` does not export, so the region always lands at the\n// end of `<body>`. An app that scopes its StyleX theme to a subtree has to\n// put the theme on `:root` for the snackbar to be drawn in it.\n\n// The page's two durations, from the same implementation its measurements\n// come from: a message alone is shown for the short one, a message with an\n// action for the long one, since an action has to be read before it can be\n// taken.\nconst SHORT_MS = 1500;\nconst LONG_MS = 2750;\n\n// Below the page's 600dp breakpoint the snackbar runs the width of the\n// screen; above it, it takes between 320 and 576.\nconst WIDE = '@media (min-width: 600px)';\n\n// The page's own is a fade. It rises a little as it arrives too, which is\n// what the page draws and what says the message came from the edge of the\n// screen rather than appearing over it.\nconst rise = \"x15b941j-B\";\nconst styles = {\n  action: {\n    kMwMTN: \"x16bex6i\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  close: {\n    kZKoxP: \"xsdox4t\",\n    kMwMTN: \"x1girmi0\",\n    kzqmXN: \"x1useyqa\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x1en43ny x15a1ka xjbqb8w\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  }\n};\ntype SnackbarAction = {\n  /** What the action says. The page gives it a single word where it can. */\n  label: string;\n  /** Run when the action is pressed, just before the snackbar closes. */\n  onPress: () => void;\n};\n\n/** What a snackbar carries: its message, and what may sit beside it. */\ntype SnackbarMessage = {\n  action: SnackbarAction | undefined;\n  isDismissable: boolean;\n  message: ReactNode;\n};\ntype SnackbarOptions = {\n  /**\n   * A single action shown after the message. Pressing it runs `onPress` and\n   * closes the snackbar, which is what the page draws.\n   */\n  action?: SnackbarAction;\n  /**\n   * Whether a close button is shown at the end. The page draws one for a\n   * message a reader may want out of the way before it expires.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /** Run when the snackbar closes, however it was closed. */\n  onClose?: () => void;\n  /**\n   * How long the snackbar is shown, in milliseconds. Defaults to the page's\n   * short duration, or its long one when there is an action to read, and the\n   * timer is paused while the region is hovered or focused so a message never\n   * expires while it is being read.\n   *\n   * `0` is the page's indefinite length: the snackbar stays until something\n   * closes it. Give one of those an action or `isDismissable`, or there is no\n   * way to be rid of it.\n   */\n  timeout?: number;\n};\ntype SnackbarProps = Omit<RACToastRegionProps<SnackbarMessage>, 'children' | 'className' | 'queue' | 'style'> & {\n  /**\n   * What a screen reader calls the region holding the snackbar.\n   * @default 'Notifications'\n   */\n  'aria-label'?: string;\n  /** A function may compute the class from the region's render state. */\n  className?: RACToastRegionProps<SnackbarMessage>['className'];\n  /**\n   * What a screen reader calls the button that dismisses a snackbar. It sits\n   * here rather than on a message's own options because it does not vary by\n   * message, so putting it there would make every `add` call repeat it.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** The queue the region shows messages from. */\n  queue: SnackbarQueue;\n  /** A function may compute the style from the region's render state. */\n  style?: RACToastRegionProps<SnackbarMessage>['style'];\n};\n\n// One entry of the queue, as React Aria hands it to the region's render\n// function. Taken from its render state rather than imported from\n// `react-stately`, which this package does not depend on.\ntype SnackbarToastItem = ToastRegionRenderProps<SnackbarMessage>['visibleToasts'][number];\n\n/**\n * The queue a snackbar is shown from. Make one where the app can reach it —\n * a module of its own is the usual place — mount `Snackbar` once with it,\n * and call `add` from anywhere.\n *\n * ```ts\n * const messages = new Snackbar.Queue()\n * messages.add('Label', { action: { label: 'Undo', onPress: undo } })\n * ```\n *\n * It wraps React Aria's toast queue rather than exposing it, which is what\n * keeps that API's `UNSTABLE_` name out of a consumer's code.\n */\nclass SnackbarQueue {\n  /**\n   * React Aria's queue, which `Snackbar` subscribes to. Not part of the\n   * package's API — read it and an upstream release may break the call site.\n   */\n  readonly rac: RACToastQueue<SnackbarMessage>;\n  constructor() {\n    // One at a time, which is what the page shows: a second message replaces\n    // the first rather than stacking under it.\n    this.rac = new RACToastQueue<SnackbarMessage>({\n      maxVisibleToasts: 1\n    });\n  }\n\n  /**\n   * Shows a message, and returns the key that closes it.\n   */\n  add(message: ReactNode, options: SnackbarOptions = {}) {\n    const {\n      action,\n      isDismissable = false,\n      onClose,\n      timeout\n    } = options;\n    return this.rac.add({\n      action,\n      isDismissable,\n      message\n    }, {\n      onClose,\n      timeout: timeout ?? (action === undefined ? SHORT_MS : LONG_MS)\n    });\n  }\n\n  /** Closes every snackbar, shown or waiting. */\n  clear() {\n    this.rac.clear();\n  }\n\n  /** Closes one snackbar, by the key `add` returned. */\n  close(key: string) {\n    this.rac.close(key);\n  }\n}\n\n// The three handlers the snackbar hands to something below it, each built by\n// a call 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 on\n// its inputs.\nfunction actionPress(action: SnackbarAction, close: () => void) {\n  return () => {\n    action.onPress();\n    close();\n  };\n}\nfunction closeToast(queue: SnackbarQueue, key: string) {\n  return () => {\n    queue.close(key);\n  };\n}\n\n/**\n * A brief message at the bottom of the screen, with an optional action. Mount\n * one of these with a `Snackbar.Queue`, and call the queue's `add` to show a\n * message from anywhere.\n *\n * ```tsx\n * const messages = new Snackbar.Queue()\n *\n * <Snackbar queue={messages} />\n * ```\n *\n * The region is portalled to the end of `<body>` and renders nothing while\n * the queue is empty. It is one region rather than one per message, so mount\n * it once, near the root.\n *\n * The call site's `className` and `style` land on that region, which is the\n * element a layout positions.\n */\nfunction Snackbar({\n  closeLabel = 'Close',\n  queue,\n  ...props\n}: SnackbarProps) {\n  return <RACToastRegion<SnackbarMessage> queue={queue.rac} {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf x126z3so x1ey2m1c x17y0mx6 x1t137rt x1a7rqcl x47corl xixxii4 xfo81ep\"\n  }, props)}>\n      {snackbarContent(queue, closeLabel)}\n    </RACToastRegion>;\n}\n\n/**\n * One of the snackbar's two controls. React Aria's `Button` rather than the\n * library's, for the colour reason in the comment at the top of this file;\n * the ripple and the state layers are the same ones every other control\n * here draws, over `currentColor`.\n */\nfunction SnackbarButton({\n  children,\n  style,\n  ...props\n}: {\n  'aria-label'?: string;\n  children: ReactNode;\n  onPress?: () => void;\n  slot?: string;\n  style: stylex.StyleXStyles;\n}) {\n  const ripple = useRipple<FocusableElement>();\n  return <RACButton {...ripple.handlers} {...props} {...stylex.props(styles.control, style)}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nfunction snackbarContent(queue: SnackbarQueue, closeLabel: string) {\n  return ({\n    toast\n  }: {\n    toast: SnackbarToastItem;\n  }) => <SnackbarToast close={closeToast(queue, toast.key)} closeLabel={closeLabel} toast={toast} />;\n}\n\n/** The action, the close button, or nothing, after the message. */\nfunction SnackbarControls({\n  action,\n  close,\n  closeLabel,\n  isDismissable\n}: {\n  action: SnackbarAction | undefined;\n  close: () => void;\n  closeLabel: string;\n  isDismissable: boolean;\n}) {\n  return <>\n      {action === undefined ? null : <SnackbarButton onPress={actionPress(action, close)} style={styles.action}>\n          {action.label}\n        </SnackbarButton>}\n      {isDismissable ? <SnackbarButton aria-label={closeLabel} slot=\"close\" style={styles.close}>\n          <CloseGlyph className=\"xxk0z11 xvy4d1p\" />\n        </SnackbarButton> : null}\n    </>;\n}\n\n/** One snackbar: its message, then whatever sits after it. */\nfunction SnackbarToast({\n  close,\n  closeLabel,\n  toast\n}: {\n  close: () => void;\n  closeLabel: string;\n  toast: SnackbarToastItem;\n}) {\n  const {\n    action,\n    isDismissable,\n    message\n  } = toast.content;\n  return <RACToast toast={toast} className=\"x6s0dn4 x1n1nwrg x1u6grsq x1dwmuk9 x16dv9tl x1c5gpgi x1tfhd1 x1udv5rz x9f619 x78zum5 xh8yej3 x1x1rfll xlx31pv x1wxaq2x xeuugli xuq8xha x1ulcdur x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd xn60lsn x67bb7w\">\n      <RACToastContent className=\"x9f619 x1girmi0 x1iyjqo2 xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh xz158ff xeuugli xxlmvz2\">\n        <Text slot=\"title\">{message}</Text>\n      </RACToastContent>\n      <SnackbarControls action={action} close={close} closeLabel={closeLabel} isDismissable={isDismissable} />\n    </RACToast>;\n}\nSnackbar.Queue = SnackbarQueue;\n\n// The queue is reached as `Snackbar.Queue` rather than exported beside the\n// component: this file would otherwise export something that is not a\n// component, which is what turns fast refresh off for it.\nexport type { SnackbarAction, SnackbarMessage, SnackbarOptions, SnackbarProps, SnackbarQueue, ToastRegionRenderProps as SnackbarRegionRenderProps };\nexport default Snackbar;"],"mappings":"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"}

package/dist/field/root.js

@@ -6,6 +6,15 @@ import { FormContext, useSlottedContext } from "react-aria-components";
 * marks the control rather than surfacing the browser's own constraint UI.
 * One constant rather than a literal in each field, so the decision has one
 * place to be changed.
+*
+* **It leaves announcing and focusing to the app**, and that is the half of
+* the browser's behaviour this gives up. An error under `aria` is associated
+* the way it should be — `aria-invalid` on the control, the message in its
+* `aria-describedby` — so a reader who moves to the field is told. What does
+* not happen is the move: after a server answers, focus is still wherever
+* the submit left it and nothing has been read out. Nothing here knows a
+* round trip happened, so the call site that made it is what moves focus to
+* the first field that came back invalid.
 */
 const FIELD_VALIDATION_BEHAVIOR = "aria";
 /**

package/dist/field/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":["stylex","FormContext","useSlottedContext","FIELD_VALIDATION_BEHAVIOR","invalidFrom","error","undefined","useFieldValidationBehavior","form","validationBehavior","useInsideForm","fieldStyles","root","kB7OPa","k1xSpc","kXwgrk","$$css"],"sources":["../../src/field/root.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { FormContext, useSlottedContext } from 'react-aria-components';\n\n// What a field applies to its own root, which is React Aria's field element\n// rather than a part of the chrome. Apart from the parts in ./index.tsx so\n// that file exports components alone, which is what keeps fast refresh working\n// for it.\n\n/**\n * What a field passes React Aria for `validationBehavior` outside a `Form`.\n * The message under a field is the library's to show, so validation only\n * marks the control rather than surfacing the browser's own constraint UI.\n * One constant rather than a literal in each field, so the decision has one\n * place to be changed.\n */\nconst FIELD_VALIDATION_BEHAVIOR = 'aria';\n\n/**\n * What a field passes React Aria for `isInvalid`, from its `error` prop. Any\n * value there, `false` included, makes the field's validation controlled: it\n * is exactly as invalid as the prop says, and what a `Form` reports for it —\n * a server's errors, or the browser's own — is never shown. So the prop is\n * left unset while the field has no error of its own, which is what lets\n * the form's reach it.\n */\nfunction invalidFrom(error: string | undefined): true | undefined {\n  return error === undefined ? undefined : true;\n}\n\n/**\n * The validation behaviour a field passes React Aria: its `Form`'s, where it\n * is inside one, and {@link FIELD_VALIDATION_BEHAVIOR} otherwise. React Aria\n * takes a field's own prop over its form's, so a field that passed the\n * constant could never be opted into the native behaviour by the form around\n * it; reading the form here is what lets `Form` decide for every field at\n * once.\n */\nfunction useFieldValidationBehavior(): 'aria' | 'native' {\n  const form = useSlottedContext(FormContext);\n  return form?.validationBehavior ?? FIELD_VALIDATION_BEHAVIOR;\n}\n\n/**\n * Whether this field is inside a `Form`. A form is where a message arrives\n * after the fact — a server's answer, or the browser's own on submit — so it\n * is where the line under a field is kept clear whether or not there is\n * anything to say, and the fields below it stay where they are.\n */\nfunction useInsideForm() {\n  return useSlottedContext(FormContext) !== null;\n}\nconst fieldStyles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\nexport { FIELD_VALIDATION_BEHAVIOR, fieldStyles, invalidFrom, useFieldValidationBehavior, useInsideForm };"],"mappings":";;;;;;;;;AAeA,MAAMG,4BAA4B;;;;;;;;;AAUlC,SAASC,YAAYC,OAA6C;CAChE,OAAOA,UAAUC,KAAAA,IAAYA,KAAAA,IAAY;AAC3C;;;;;;;;;AAUA,SAAAC,6BAAA;CAC8C,OAA/BL,kBAAkBD,WACxBO,CAAI,EAAAC,sBAAAA;AAAiD;;;;;;;AAS9D,SAAAC,gBAAA;CAAA,OACSR,kBAAkBD,WAAW,MAAM;AAAI;AAEhD,MAAMU,cAAc,EAClBC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF"}
+{"version":3,"file":"root.js","names":["stylex","FormContext","useSlottedContext","FIELD_VALIDATION_BEHAVIOR","invalidFrom","error","undefined","useFieldValidationBehavior","form","validationBehavior","useInsideForm","fieldStyles","root","kB7OPa","k1xSpc","kXwgrk","$$css"],"sources":["../../src/field/root.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { FormContext, useSlottedContext } from 'react-aria-components';\n\n// What a field applies to its own root, which is React Aria's field element\n// rather than a part of the chrome. Apart from the parts in ./index.tsx so\n// that file exports components alone, which is what keeps fast refresh working\n// for it.\n\n/**\n * What a field passes React Aria for `validationBehavior` outside a `Form`.\n * The message under a field is the library's to show, so validation only\n * marks the control rather than surfacing the browser's own constraint UI.\n * One constant rather than a literal in each field, so the decision has one\n * place to be changed.\n *\n * **It leaves announcing and focusing to the app**, and that is the half of\n * the browser's behaviour this gives up. An error under `aria` is associated\n * the way it should be — `aria-invalid` on the control, the message in its\n * `aria-describedby` — so a reader who moves to the field is told. What does\n * not happen is the move: after a server answers, focus is still wherever\n * the submit left it and nothing has been read out. Nothing here knows a\n * round trip happened, so the call site that made it is what moves focus to\n * the first field that came back invalid.\n */\nconst FIELD_VALIDATION_BEHAVIOR = 'aria';\n\n/**\n * What a field passes React Aria for `isInvalid`, from its `error` prop. Any\n * value there, `false` included, makes the field's validation controlled: it\n * is exactly as invalid as the prop says, and what a `Form` reports for it —\n * a server's errors, or the browser's own — is never shown. So the prop is\n * left unset while the field has no error of its own, which is what lets\n * the form's reach it.\n */\nfunction invalidFrom(error: string | undefined): true | undefined {\n  return error === undefined ? undefined : true;\n}\n\n/**\n * The validation behaviour a field passes React Aria: its `Form`'s, where it\n * is inside one, and {@link FIELD_VALIDATION_BEHAVIOR} otherwise. React Aria\n * takes a field's own prop over its form's, so a field that passed the\n * constant could never be opted into the native behaviour by the form around\n * it; reading the form here is what lets `Form` decide for every field at\n * once.\n */\nfunction useFieldValidationBehavior(): 'aria' | 'native' {\n  const form = useSlottedContext(FormContext);\n  return form?.validationBehavior ?? FIELD_VALIDATION_BEHAVIOR;\n}\n\n/**\n * Whether this field is inside a `Form`. A form is where a message arrives\n * after the fact — a server's answer, or the browser's own on submit — so it\n * is where the line under a field is kept clear whether or not there is\n * anything to say, and the fields below it stay where they are.\n */\nfunction useInsideForm() {\n  return useSlottedContext(FormContext) !== null;\n}\nconst fieldStyles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\nexport { FIELD_VALIDATION_BEHAVIOR, fieldStyles, invalidFrom, useFieldValidationBehavior, useInsideForm };"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAMG,4BAA4B;;;;;;;;;AAUlC,SAASC,YAAYC,OAA6C;CAChE,OAAOA,UAAUC,KAAAA,IAAYA,KAAAA,IAAY;AAC3C;;;;;;;;;AAUA,SAAAC,6BAAA;CAC8C,OAA/BL,kBAAkBD,WACxBO,CAAI,EAAAC,sBAAAA;AAAiD;;;;;;;AAS9D,SAAAC,gBAAA;CAAA,OACSR,kBAAkBD,WAAW,MAAM;AAAI;AAEhD,MAAMU,cAAc,EAClBC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF"}

package/dist/index.d.ts

@@ -33,7 +33,7 @@ import Form, { FormProps } from "./components/form/index.js";
 import IconButton, { IconButtonProps } from "./components/icon-button/index.js";
 import Keycap, { KeycapProps } from "./components/keycap/index.js";
 import Link, { LinkProps } from "./components/link/index.js";
-import List, { ListProps } from "./components/list/index.js";
+import List, { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps } from "./components/list/index.js";
 import ListBox, { ListBoxProps } from "./components/list-box/index.js";
 import ListDetail, { ListDetailProps } from "./components/list-detail/index.js";
 import ListItem, { ListItemProps } from "./components/list-item/index.js";
@@ -72,4 +72,4 @@ import { collectionSizes } from "./layout.js";
 import { useDragAndDrop } from "./drag/hooks.js";
 import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, Key, ListLayout, PressEvent, Pressable, RouterProvider, Selection, SharedElement, SharedElementTransition, SortDescriptor, TableLayout, TokenFieldValue, Virtualizer, VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter, useListData, useLocale, useTreeData } from "./react-aria.js";
 import "./styles.css";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, Collection, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type Key, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorProps, SharedElement, SharedElementTransition, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type SortDescriptor, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, TableLayout, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, TokenFieldValue, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, Collection, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type Key, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, type ListLoadMoreProps, type ListProps, type ListRowProps, type ListSectionProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorProps, SharedElement, SharedElementTransition, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type SortDescriptor, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, TableLayout, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, TokenFieldValue, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };

package/dist/styles.css

@@ -1767,26 +1767,6 @@
     touch-action: none;
   }
 
-  .x18ouj0k {
-    transform-origin: bottom;
-  }
-
-  .x1g0ag68 {
-    transform-origin: center;
-  }
-
-  .x1nf803f {
-    transform-origin: 0;
-  }
-
-  .xyibjs4 {
-    transform-origin: 100%;
-  }
-
-  .x1dp6rp6 {
-    transform-origin: top;
-  }
-
   .x1c071of {
     transform: none;
   }
@@ -1811,6 +1791,26 @@
     transform: translateY(-50%);
   }
 
+  .x18ouj0k {
+    transform-origin: bottom;
+  }
+
+  .x1g0ag68 {
+    transform-origin: center;
+  }
+
+  .x1nf803f {
+    transform-origin: 0;
+  }
+
+  .xyibjs4 {
+    transform-origin: 100%;
+  }
+
+  .x1dp6rp6 {
+    transform-origin: top;
+  }
+
   .xjl7l83 {
     transition-duration: .105s;
   }
@@ -2703,6 +2703,12 @@
     overflow-y: auto;
   }
 
+  @media (width < 600px) {
+    .xd76zvj.xd76zvj {
+      padding: 0;
+    }
+  }
+
   .x18d9i69 {
     padding-bottom: 0;
   }
@@ -2739,12 +2745,6 @@
     padding-top: var(--xod9tvo);
   }
 
-  @media (width < 600px) {
-    .xd76zvj.xd76zvj {
-      padding: 0;
-    }
-  }
-
   .x13vifvy {
     top: 0;
   }
@@ -2987,6 +2987,10 @@
     .xkgydl7.xkgydl7 {
       grid-template-columns: 360px minmax(0, 1fr);
     }
+
+    .x1674ulc.x1674ulc {
+      grid-template-columns: minmax(0, 1fr) 360px;
+    }
   }
 
   @media (width >= 1600px) {
@@ -2995,12 +2999,6 @@
     }
   }
 
-  @media (width >= 840px) {
-    .x1674ulc.x1674ulc {
-      grid-template-columns: minmax(0, 1fr) 360px;
-    }
-  }
-
   @media (width < 600px) {
     .x1upgybz.x1upgybz {
       inset-inline-start: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.26.6",
+  "version": "0.27.0",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -80,7 +80,7 @@
     "@storybook/addon-vitest": "10.6.0",
     "@storybook/builder-vite": "10.6.0",
     "@storybook/react-vite": "10.6.0",
-    "@stylexjs/unplugin": "0.19.0",
+    "@stylexjs/unplugin": "0.19.1",
     "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",