@kanso-labs/kanso-ui 0.36.0 → 0.38.0

package/README.md

@@ -302,9 +302,11 @@ the icon inherits it:
 | Slot                                       | Size an `em` icon takes                              |
 | ------------------------------------------ | ---------------------------------------------------- |
 | `Button`'s `icon`                          | 20px, 20px, 24px, 32px and 40px across `xs` to `xxl` |
+| `Chip`'s and `ChipGroup.Chip`'s `icon`     | 18px                                                 |
 | `IconButton`                               | 20px, 24px, 24px, 32px and 40px across `xs` to `xxl` |
 | A field's `leadingIcon` and `trailingIcon` | 24px                                                 |
 | `SegmentedButton.Segment`'s `icon`         | 18px                                                 |
+| `Tabs.Tab`'s `icon`                        | 24px                                                 |
 
 **The `leading` and `trailing` slots on a row are different.** A list item, a
 menu item, a tree item and an app bar set no icon size, so an icon there takes

package/dist/button/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region src/button/context.ts
+const ButtonGroupItemContext = createContext(null);
+//#endregion
+export { ButtonGroupItemContext };
+
+//# sourceMappingURL=context.js.map

package/dist/button/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["stylex","createContext","ButtonState","ButtonGroupItem","onPressEnd","onPressStart","width","shift","size","GroupSize","styles","state","StyleXStyles","ButtonGroupItemContext"],"sources":["../../src/button/context.ts"],"sourcesContent":["import type * as stylex from '@stylexjs/stylex';\nimport { createContext } from 'react';\nimport type { ButtonState } from '.';\n\n// What a group hands each Button or IconButton in it: ButtonGroup's two\n// variants and SplitButton's two halves. Apart from ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it.\n\ntype ButtonGroupItem = {\n  /** Called as a press on the button ends, so the group lets go of it. */\n  onPressEnd?: () => void;\n  /**\n   * Called as a press on the button starts, with its width, so a standard\n   * group can widen it and narrow its neighbours.\n   */\n  onPressStart?: (width: number) => void;\n  /**\n   * How far the button's width moves while it or a neighbour is pressed, in\n   * pixels: the pressed button's gain, or a neighbour's loss as a negative.\n   * Zero at rest.\n   */\n  shift: number;\n  /** The group's size, which a button takes unless it names its own. */\n  size: GroupSize | undefined;\n  /**\n   * Styles the group lays over the button's own, from its render state: a\n   * connected group's inner corners, a split button's paddings. Applied\n   * after the button's own shape and before its disabled styles.\n   */\n  styles?: (state: ButtonState) => stylex.StyleXStyles[];\n};\n\n/** The five sizes Button and IconButton share. */\ntype GroupSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\nconst ButtonGroupItemContext = createContext<ButtonGroupItem | null>(null);\nexport type { ButtonGroupItem, GroupSize };\nexport { ButtonGroupItemContext };"],"mappings":";;AAkCA,MAAMa,yBAAyBZ,cAAsC,IAAI"}

package/dist/button/group.js

@@ -0,0 +1,25 @@
+//#region src/button/group.ts
+/**
+* The press handlers a button inside a group that tracks presses takes: its
+* own, with the group told first. Empty anywhere else, which leaves the
+* call site's own handlers on the button untouched.
+*/
+function groupPressHandlers(group, onPressStart, onPressEnd) {
+	const start = group?.onPressStart;
+	if (start === void 0) return {};
+	const end = group?.onPressEnd;
+	return {
+		onPressEnd: (event) => {
+			end?.();
+			onPressEnd?.(event);
+		},
+		onPressStart: (event) => {
+			start(event.target.getBoundingClientRect().width);
+			onPressStart?.(event);
+		}
+	};
+}
+//#endregion
+export { groupPressHandlers };
+
+//# sourceMappingURL=group.js.map

package/dist/button/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["PressEvent","ButtonGroupItem","groupPressHandlers","group","onPressStart","event","onPressEnd","start","undefined","end","target","getBoundingClientRect","width"],"sources":["../../src/button/group.ts"],"sourcesContent":["import type { PressEvent } from 'react-aria-components'\n\nimport type { ButtonGroupItem } from './context'\n\n// What a button in a standard ButtonGroup does about its own presses: tell\n// the group when one starts, with its width, and when it ends, so the group\n// can widen it and narrow its neighbours. Apart from ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it.\n\n/**\n * The press handlers a button inside a group that tracks presses takes: its\n * own, with the group told first. Empty anywhere else, which leaves the\n * call site's own handlers on the button untouched.\n */\nfunction groupPressHandlers(\n  group: ButtonGroupItem | null,\n  onPressStart: ((event: PressEvent) => void) | undefined,\n  onPressEnd: ((event: PressEvent) => void) | undefined,\n) {\n  const start = group?.onPressStart\n  if (start === undefined) {\n    return {}\n  }\n  const end = group?.onPressEnd\n\n  return {\n    onPressEnd: (event: PressEvent) => {\n      end?.()\n      onPressEnd?.(event)\n    },\n    onPressStart: (event: PressEvent) => {\n      start(event.target.getBoundingClientRect().width)\n      onPressStart?.(event)\n    },\n  }\n}\n\nexport { groupPressHandlers }\n"],"mappings":";;;;;;AAcA,SAASE,mBACPC,OACAC,cACAE,YACA;CACA,MAAMC,QAAQJ,OAAOC;CACrB,IAAIG,UAAUC,KAAAA,GACZ,OAAO,CAAC;CAEV,MAAMC,MAAMN,OAAOG;CAEnB,OAAO;EACLA,aAAaD,UAAsB;GACjCI,MAAM;GACNH,aAAaD,KAAK;EACpB;EACAD,eAAeC,UAAsB;GACnCE,MAAMF,MAAMK,OAAOC,sBAAsB,CAAC,CAACC,KAAK;GAChDR,eAAeC,KAAK;EACtB;CACF;AACF"}

package/dist/button/index.js

@@ -2,6 +2,7 @@ import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../styles/merge.js";
 import { buttonRenderer, linkRenderer, toggleButtonRenderer } from "../render/aria.js";
 import ProgressIndicator from "../components/progress-indicator/index.js";
+import { useToggleGroupDisabled } from "../hooks/useToggleGroupDisabled.js";
 import { useMessages } from "../i18n/index.js";
 import { useButtonBase } from "./hooks.js";
 import { buttonBaseStyles } from "./styles.js";
@@ -163,7 +164,7 @@ function buttonContent(children, pendingLabel, surface) {
 * as it does for the plain button.
 */
 function ToggleButtonBase(t0) {
-	const $ = c(29);
+	const $ = c(32);
 	let children;
 	let classes;
 	let defaultSelected;
@@ -193,56 +194,68 @@ function ToggleButtonBase(t0) {
 		render = $[7];
 		t1 = $[8];
 	}
-	const { disabled, element, props, ref, ripple } = useButtonBase(input, t1 === void 0 ? false : t1);
+	const isPending = t1 === void 0 ? false : t1;
+	const disabledByGroup = useToggleGroupDisabled(input.id);
 	let t2;
-	if ($[9] !== element || $[10] !== render) {
-		t2 = toggleButtonRenderer(element, toggleRender(render));
-		$[9] = element;
-		$[10] = render;
+	if ($[9] !== disabledByGroup || $[10] !== input) {
+		t2 = disabledByGroup ? {
+			...input,
+			isDisabled: true
+		} : input;
+		$[9] = disabledByGroup;
+		$[10] = input;
 		$[11] = t2;
 	} else t2 = $[11];
-	const t3 = ripple.handlers;
-	let t4;
-	if ($[12] !== classes || $[13] !== props) {
-		t4 = mergeStatefulStyles(classes, props);
-		$[12] = classes;
-		$[13] = props;
-		$[14] = t4;
-	} else t4 = $[14];
+	const { disabled, element, props, ref, ripple } = useButtonBase(t2, isPending);
+	let t3;
+	if ($[12] !== element || $[13] !== render) {
+		t3 = toggleButtonRenderer(element, toggleRender(render));
+		$[12] = element;
+		$[13] = render;
+		$[14] = t3;
+	} else t3 = $[14];
+	const t4 = ripple.handlers;
 	let t5;
-	if ($[15] !== children || $[16] !== ripple.surface) {
-		t5 = toggleContent(children, ripple.surface);
-		$[15] = children;
-		$[16] = ripple.surface;
+	if ($[15] !== classes || $[16] !== props) {
+		t5 = mergeStatefulStyles(classes, props);
+		$[15] = classes;
+		$[16] = props;
 		$[17] = t5;
 	} else t5 = $[17];
 	let t6;
-	if ($[18] !== defaultSelected || $[19] !== disabled || $[20] !== isSelected || $[21] !== onChange || $[22] !== props || $[23] !== ref || $[24] !== ripple.handlers || $[25] !== t2 || $[26] !== t4 || $[27] !== t5) {
-		t6 = /* @__PURE__ */ jsx(ToggleButton, {
+	if ($[18] !== children || $[19] !== ripple.surface) {
+		t6 = toggleContent(children, ripple.surface);
+		$[18] = children;
+		$[19] = ripple.surface;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== defaultSelected || $[22] !== disabled || $[23] !== isSelected || $[24] !== onChange || $[25] !== props || $[26] !== ref || $[27] !== ripple.handlers || $[28] !== t3 || $[29] !== t5 || $[30] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ToggleButton, {
 			defaultSelected,
 			isDisabled: disabled,
 			isSelected,
 			onChange,
 			ref,
-			render: t2,
-			...t3,
-			...props,
+			render: t3,
 			...t4,
-			children: t5
+			...props,
+			...t5,
+			children: t6
 		});
-		$[18] = defaultSelected;
-		$[19] = disabled;
-		$[20] = isSelected;
-		$[21] = onChange;
-		$[22] = props;
-		$[23] = ref;
-		$[24] = ripple.handlers;
-		$[25] = t2;
-		$[26] = t4;
-		$[27] = t5;
-		$[28] = t6;
-	} else t6 = $[28];
-	return t6;
+		$[21] = defaultSelected;
+		$[22] = disabled;
+		$[23] = isSelected;
+		$[24] = onChange;
+		$[25] = props;
+		$[26] = ref;
+		$[27] = ripple.handlers;
+		$[28] = t3;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t7;
+	} else t7 = $[31];
+	return t7;
 }
 function toggleContent(children, surface) {
 	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, surface] });

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","ProgressIndicator","useMessages","buttonRenderer","linkRenderer","toggleButtonRenderer","mergeStatefulStyles","useButtonBase","buttonBaseStyles","ButtonBaseProps","children","classes","state","ButtonState","ReturnType","props","className","disableRipple","href","pendingLabel","rel","style","target","ButtonDOMProps","HTMLAnchorElement","HTMLButtonElement","Omit","GlobalEventKey","Pick","HTMLElement","isSelected","Exclude","ToggleButtonBaseProps","defaultSelected","onChange","ButtonBase","t0","$","_c","input","render","t1","isPending","undefined","messages","disabled","element","ref","ripple","t2","styleProps","t3","t4","handlers","surface","t5","loading","t6","buttonContent","t7","label","labelPending","pending","ToggleButtonBase","toggleRender","toggleContent","_c","RACLink","RACButton","stylex.props","RACToggleButton"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, ButtonProps as RACButtonProps, ToggleButtonProps as RACToggleButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton } from 'react-aria-components';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useMessages } from '../i18n';\nimport { buttonRenderer, linkRenderer, toggleButtonRenderer } from '../render/aria';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { useButtonBase } from './hooks';\nimport { buttonBaseStyles } from './styles';\n\n// The press-button core Button and IconButton both render through. A button\n// is React Aria's `Button`, its `Link` once given `href`, or its\n// `ToggleButton` once it reports a state, and around each this adds what\n// React Aria leaves out: the ripple, the disabled state a parent's context\n// sets, the `aria-*` props and keyboard handlers it would drop or wrap, and\n// the ring drawn over the label while the button is pending. Each component\n// brings its own classes, as a function of the render state, and the call\n// site's `className` and `style` are merged over them.\n//\n// One module rather than a copy in each, since the copies had already drifted\n// once: IconButton read `ButtonContext` for a parent's disabled state and\n// Button did not. Not a component of the library's own and not exported from\n// the package; see `src/row` for the same arrangement around a list's row.\n\ntype ButtonBaseProps = {\n  children?: ReactNode;\n  /**\n   * The component's own classes, from the render state. The call site's\n   * `className` and `style` are merged over them.\n   */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  disableRipple?: boolean;\n  href?: string;\n  pendingLabel?: string;\n  rel?: string;\n  style?: StyleOrFunction<ButtonState>;\n  target?: string;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// The props a button hands React Aria. React Aria types the global DOM events\n// — pointer, mouse, touch, wheel and the rest — against the element each\n// component renders, and a handler written for a <button> does not type-check\n// against an <a>. The keys are retyped against HTMLElement here so one set of\n// props serves both forms; the events React Aria defines itself (press,\n// focus, keyboard) keep its types, since it hands those its own event objects.\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\n\n// The render state React Aria's three elements share. A className or style\n// function written against it serves the button, the link and the toggle\n// alike; `isPending` belongs to the button alone, and `isCurrent` to the\n// link, so neither is here. What the button draws while pending is decided\n// in `buttonContent`, which sees React Aria's own state rather than this one.\n//\n// `isSelected` is optional because only the toggle has one: React Aria hands\n// the button and the link a state without it and the toggle a state with\n// it, and a parameter type this wide accepts either.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {\n  isSelected?: boolean;\n};\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype ToggleButtonBaseProps = {\n  children?: ReactNode;\n  /** As for ButtonBase, handed `isSelected` as well. */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  defaultSelected?: boolean;\n  disableRipple?: boolean;\n  isSelected?: boolean;\n  onChange?: (isSelected: boolean) => void;\n  style?: StyleOrFunction<ButtonState>;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n/**\n * A button drawn with the classes a component hands it: React Aria's\n * `Button`, or its `Link` given `href`. See the header.\n */\nfunction ButtonBase({\n  children,\n  classes,\n  href,\n  isPending = false,\n  pendingLabel,\n  rel,\n  render,\n  target,\n  ...input\n}: ButtonBaseProps) {\n  const messages = useMessages();\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(input, isPending);\n  const styleProps = mergeStatefulStyles(classes, props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={ref} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={ref} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel ?? messages.loading, ripple.surface)}\n    </RACButton>;\n}\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, surface: ReactNode) {\n  return (state: ButtonRenderProps) => <>\n      <span {...stylex.props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending)}>\n        {children}\n      </span>\n      {state.isPending ? <span {...stylex.props(buttonBaseStyles.pending)}>\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {surface}\n    </>;\n}\n\n/**\n * A toggle drawn with the classes a component hands it: React Aria's\n * `ToggleButton`, which reports its state through `aria-pressed`. It is never\n * a link and never pending — React Aria's toggle takes neither, and neither\n * means anything for a control whose whole job is to report which of two\n * states it is in — so `isPending` reaches it only to keep the ripple off,\n * as it does for the plain button.\n */\nfunction ToggleButtonBase({\n  children,\n  classes,\n  defaultSelected,\n  isPending = false,\n  isSelected,\n  onChange,\n  render,\n  ...input\n}: ToggleButtonBaseProps) {\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(input, isPending);\n  return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={ref} render={toggleButtonRenderer(element, toggleRender(render))} {...ripple.handlers} {...props} {...mergeStatefulStyles(classes, props)}>\n      {toggleContent(children, ripple.surface)}\n    </RACToggleButton>;\n}\n\n// What a toggle draws: its label and the ripple. No pending ring — see\n// ToggleButtonBase. Built by a call for the reason `buttonContent` is.\nfunction toggleContent(children: ReactNode, surface: ReactNode) {\n  return () => <>\n      {children}\n      {surface}\n    </>;\n}\n\n// A call site's `render` is written for React Aria's button, whose render\n// state says whether it is pending; a toggle's says nothing of it, and a\n// toggle never is. So the toggle hands that function its own state with\n// `isPending` filled in, which is what lets one `render` prop serve a button\n// whichever element it turns out to be.\nfunction toggleRender(render: RACButtonProps['render']): RACToggleButtonProps['render'] {\n  if (render === undefined) {\n    return undefined;\n  }\n  return (props, state) => render(props, {\n    ...state,\n    isPending: false\n  });\n}\nexport type { ButtonDOMProps, ButtonState };\nexport { ButtonBase, ToggleButtonBase };"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","RefAttributes","ButtonRenderProps","ClassNameOrFunction","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","ProgressIndicator","useToggleGroupDisabled","useMessages","buttonRenderer","linkRenderer","toggleButtonRenderer","mergeStatefulStyles","useButtonBase","buttonBaseStyles","ButtonBaseProps","children","classes","state","ButtonState","ReturnType","props","className","disableRipple","href","pendingLabel","rel","style","target","ButtonDOMProps","HTMLAnchorElement","HTMLButtonElement","Omit","GlobalEventKey","Pick","HTMLElement","isSelected","Exclude","ToggleButtonBaseProps","defaultSelected","onChange","ButtonBase","t0","$","_c","input","render","t1","isPending","undefined","messages","disabled","element","ref","ripple","t2","styleProps","t3","t4","handlers","surface","t5","loading","t6","buttonContent","t7","label","labelPending","pending","ToggleButtonBase","disabledByGroup","id","isDisabled","toggleRender","toggleContent","_c","RACLink","RACButton","stylex.props","RACToggleButton"],"sources":["../../src/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, ButtonProps as RACButtonProps, ToggleButtonProps as RACToggleButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton } from 'react-aria-components';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useToggleGroupDisabled } from '../hooks/useToggleGroupDisabled';\nimport { useMessages } from '../i18n';\nimport { buttonRenderer, linkRenderer, toggleButtonRenderer } from '../render/aria';\nimport { mergeStatefulStyles } from '../styles/merge';\nimport { useButtonBase } from './hooks';\nimport { buttonBaseStyles } from './styles';\n\n// The press-button core Button and IconButton both render through. A button\n// is React Aria's `Button`, its `Link` once given `href`, or its\n// `ToggleButton` once it reports a state, and around each this adds what\n// React Aria leaves out: the ripple, the disabled state a parent's context\n// sets, the `aria-*` props and keyboard handlers it would drop or wrap, and\n// the ring drawn over the label while the button is pending. Each component\n// brings its own classes, as a function of the render state, and the call\n// site's `className` and `style` are merged over them.\n//\n// One module rather than a copy in each, since the copies had already drifted\n// once: IconButton read `ButtonContext` for a parent's disabled state and\n// Button did not. Not a component of the library's own and not exported from\n// the package; see `src/row` for the same arrangement around a list's row.\n\ntype ButtonBaseProps = {\n  children?: ReactNode;\n  /**\n   * The component's own classes, from the render state. The call site's\n   * `className` and `style` are merged over them.\n   */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  disableRipple?: boolean;\n  href?: string;\n  pendingLabel?: string;\n  rel?: string;\n  style?: StyleOrFunction<ButtonState>;\n  target?: string;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n// The props a button hands React Aria. React Aria types the global DOM events\n// — pointer, mouse, touch, wheel and the rest — against the element each\n// component renders, and a handler written for a <button> does not type-check\n// against an <a>. The keys are retyped against HTMLElement here so one set of\n// props serves both forms; the events React Aria defines itself (press,\n// focus, keyboard) keep its types, since it hands those its own event objects.\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\n\n// The render state React Aria's three elements share. A className or style\n// function written against it serves the button, the link and the toggle\n// alike; `isPending` belongs to the button alone, and `isCurrent` to the\n// link, so neither is here. What the button draws while pending is decided\n// in `buttonContent`, which sees React Aria's own state rather than this one.\n//\n// `isSelected` is optional because only the toggle has one: React Aria hands\n// the button and the link a state without it and the toggle a state with\n// it, and a parameter type this wide accepts either.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'> & {\n  isSelected?: boolean;\n};\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype ToggleButtonBaseProps = {\n  children?: ReactNode;\n  /** As for ButtonBase, handed `isSelected` as well. */\n  classes: (state: ButtonState) => ReturnType<typeof stylex.props>;\n  className?: ClassNameOrFunction<ButtonState>;\n  defaultSelected?: boolean;\n  disableRipple?: boolean;\n  isSelected?: boolean;\n  onChange?: (isSelected: boolean) => void;\n  style?: StyleOrFunction<ButtonState>;\n} & ButtonDOMProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>;\n\n/**\n * A button drawn with the classes a component hands it: React Aria's\n * `Button`, or its `Link` given `href`. See the header.\n */\nfunction ButtonBase({\n  children,\n  classes,\n  href,\n  isPending = false,\n  pendingLabel,\n  rel,\n  render,\n  target,\n  ...input\n}: ButtonBaseProps) {\n  const messages = useMessages();\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(input, isPending);\n  const styleProps = mergeStatefulStyles(classes, props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} ref={ref} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} ref={ref} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel ?? messages.loading, ripple.surface)}\n    </RACButton>;\n}\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, surface: ReactNode) {\n  return (state: ButtonRenderProps) => <>\n      <span {...stylex.props(buttonBaseStyles.label, state.isPending && buttonBaseStyles.labelPending)}>\n        {children}\n      </span>\n      {state.isPending ? <span {...stylex.props(buttonBaseStyles.pending)}>\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {surface}\n    </>;\n}\n\n/**\n * A toggle drawn with the classes a component hands it: React Aria's\n * `ToggleButton`, which reports its state through `aria-pressed`. It is never\n * a link and never pending — React Aria's toggle takes neither, and neither\n * means anything for a control whose whole job is to report which of two\n * states it is in — so `isPending` reaches it only to keep the ripple off,\n * as it does for the plain button.\n */\nfunction ToggleButtonBase({\n  children,\n  classes,\n  defaultSelected,\n  isPending = false,\n  isSelected,\n  onChange,\n  render,\n  ...input\n}: ToggleButtonBaseProps) {\n  // A selecting ButtonGroup disables its toggles through React Aria's group\n  // state, which no prop here carries, so the ripple would stay on in a\n  // disabled group and answer a press with an animation. Handed on as the\n  // toggle's own `isDisabled`, which is what React Aria makes of it anyway.\n  const disabledByGroup = useToggleGroupDisabled(input.id);\n  const {\n    disabled,\n    element,\n    props,\n    ref,\n    ripple\n  } = useButtonBase(disabledByGroup ? {\n    ...input,\n    isDisabled: true\n  } : input, isPending);\n  return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} ref={ref} render={toggleButtonRenderer(element, toggleRender(render))} {...ripple.handlers} {...props} {...mergeStatefulStyles(classes, props)}>\n      {toggleContent(children, ripple.surface)}\n    </RACToggleButton>;\n}\n\n// What a toggle draws: its label and the ripple. No pending ring — see\n// ToggleButtonBase. Built by a call for the reason `buttonContent` is.\nfunction toggleContent(children: ReactNode, surface: ReactNode) {\n  return () => <>\n      {children}\n      {surface}\n    </>;\n}\n\n// A call site's `render` is written for React Aria's button, whose render\n// state says whether it is pending; a toggle's says nothing of it, and a\n// toggle never is. So the toggle hands that function its own state with\n// `isPending` filled in, which is what lets one `render` prop serve a button\n// whichever element it turns out to be.\nfunction toggleRender(render: RACButtonProps['render']): RACToggleButtonProps['render'] {\n  if (render === undefined) {\n    return undefined;\n  }\n  return (props, state) => render(props, {\n    ...state,\n    isPending: false\n  });\n}\nexport type { ButtonDOMProps, ButtonState };\nexport { ButtonBase, ToggleButtonBase };"],"mappings":";;;;;;;;;;;;;;;;AA+EA,SAAAoD,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAA5B;CAAA,IAAAC;CAAA,IAAAO;CAAA,IAAAqB;CAAA,IAAApB;CAAA,IAAAC;CAAA,IAAAoB;CAAA,IAAAC;CAAA,IAAAnB;CAAA,IAAAe,EAAA,OAAAD,IAAA;EAAoB,CAAA,CAAA1B,UAAAC,SAAAO,MAAAwB,WAAAD,IAAAtB,cAAAC,KAAAoB,QAAAlB,QAAA,GAAAiB,SAAAH;EAUFC,EAAA,KAAAD;EAAAC,EAAA,KAAA3B;EAAA2B,EAAA,KAAA1B;EAAA0B,EAAA,KAAAnB;EAAAmB,EAAA,KAAAE;EAAAF,EAAA,KAAAlB;EAAAkB,EAAA,KAAAjB;EAAAiB,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAf;CAAA,OAAA;EAAAZ,WAAA2B,EAAA;EAAA1B,UAAA0B,EAAA;EAAAnB,OAAAmB,EAAA;EAAAE,QAAAF,EAAA;EAAAlB,eAAAkB,EAAA;EAAAjB,MAAAiB,EAAA;EAAAG,SAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAf,SAAAe,EAAA;CAAA;CANhB,MAAAK,YAAAD,OAAAE,KAAAA,IAAA,QAAAF;CAOA,MAAAG,WAAiB1C,YAAY;CAC7B,MAAA,EAAA2C,UAAAC,SAAA/B,OAAAgC,KAAAC,WAMIzC,cAAcgC,OAAOG,SAAS;CAAE,IAAAO;CAAA,IAAAZ,EAAA,QAAA1B,WAAA0B,EAAA,QAAAtB,OAAA;EACjBkC,KAAA3C,oBAAoBK,SAASI,KAAK;EAACsB,EAAA,MAAA1B;EAAA0B,EAAA,MAAAtB;EAAAsB,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAtD,MAAAa,aAAmBD;CACnB,IAAI/B,SAASyB,KAAAA,GAAS;EAAA,IAAAQ;EAAA,IAAAd,EAAA,QAAAS,SAAA;GAC0DK,KAAA/C,aAAa0C,OAAO;GAACT,EAAA,MAAAS;GAAAT,EAAA,MAAAc;EAAA,OAAAA,KAAAd,EAAA;EAAA,IAAAe;EAAA,IAAAf,EAAA,QAAA3B,YAAA2B,EAAA,QAAAQ,YAAAR,EAAA,QAAAnB,QAAAmB,EAAA,QAAAtB,SAAAsB,EAAA,QAAAU,OAAAV,EAAA,QAAAjB,OAAAiB,EAAA,QAAAW,OAAAK,YAAAhB,EAAA,QAAAW,OAAAM,WAAAjB,EAAA,QAAAa,cAAAb,EAAA,QAAAc,MAAAd,EAAA,QAAAf,QAAA;GAA5F8B,KAAA,qBAACkB,MAAD;IAAepD;IAAkB2B,YAAAA;IAAeE;IAAU3B;IAAa,QAAA+B;IAA+B7B;IAAM,GAAM0B,OAAMK;IAAS,GAAMtC;IAAK,GAAMmC;IAAlJ,UAAA,CACFxC,UACAsC,OAAMM,OAFI;;GAGHjB,EAAA,MAAA3B;GAAA2B,EAAA,MAAAQ;GAAAR,EAAA,MAAAnB;GAAAmB,EAAA,MAAAtB;GAAAsB,EAAA,MAAAU;GAAAV,EAAA,MAAAjB;GAAAiB,EAAA,MAAAW,OAAAK;GAAAhB,EAAA,MAAAW,OAAAM;GAAAjB,EAAA,MAAAa;GAAAb,EAAA,MAAAc;GAAAd,EAAA,MAAAf;GAAAe,EAAA,MAAAe;EAAA,OAAAA,KAAAf,EAAA;EAAA,OAHLe;CAGK;CACb,IAAAD;CAAA,IAAAd,EAAA,QAAAS,WAAAT,EAAA,QAAAG,QAAA;EAC+EW,KAAAhD,eAAe2C,SAASN,MAAM;EAACH,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAM,MAAAe,KAAAJ,OAAMK;CAC9F,MAAAE,KAAApC,gBAAgByB,SAAQY;CAAQ,IAAAC;CAAA,IAAApB,EAAA,QAAA3B,YAAA2B,EAAA,QAAAW,OAAAM,WAAAjB,EAAA,QAAAkB,IAAA;EAAxDE,KAAAC,cAAchD,UAAU6C,IAAkCP,OAAMM,OAAQ;EAACjB,EAAA,MAAA3B;EAAA2B,EAAA,MAAAW,OAAAM;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAQ,YAAAR,EAAA,QAAAK,aAAAL,EAAA,QAAAtB,SAAAsB,EAAA,QAAAU,OAAAV,EAAA,QAAAW,OAAAK,YAAAhB,EAAA,QAAAa,cAAAb,EAAA,QAAAc,MAAAd,EAAA,QAAAoB,IAAA;EADvEE,KAAA,oBAACY,QAAD;GAAuB1B,YAAAA;GAAqBH;GAAgBK;GAAa,QAAAI;GAA+B,GAAMC;GAAe,GAAMrC;GAAK,GAAMmC;GAChJO,UAAAA;EADY,CAAA;EAEHpB,EAAA,MAAAQ;EAAAR,EAAA,MAAAK;EAAAL,EAAA,MAAAtB;EAAAsB,EAAA,MAAAU;EAAAV,EAAA,MAAAW,OAAAK;EAAAhB,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAoB;EAAApB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OAFPsB;AAEO;AAehB,SAASD,cAAchD,UAAqBS,cAAsBmC,SAAoB;CACpF,QAAQ1C,UAA6B,qBAAA,UAAA,EAAA,UAAA;EACjC,oBAAC,QAAD;GAAM,GAAInB,MAAae,iBAAiBoD,OAAOhD,MAAM8B,aAAalC,iBAAiBqD,YAAY;GAC5FnD;EACG,CAAA;EACLE,MAAM8B,YAAY,oBAAC,QAAD;GAAM,GAAIjD,MAAae,iBAAiBsD,OAAO;GAC9D,UAAA,oBAAC,mBAAD;IAAmB,cAAY3C;IAAc,iBAAA;IAAgB,MAAK;IAAM,MAAK;IAAU,SAAQ;GAAU,CAAA;EACrG,CAAA,IAAI;EACXmC;CACH,EAAA,CAAA;AACJ;;;;;;;;;AAUA,SAAAS,iBAAA3B,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAA5B;CAAA,IAAAC;CAAA,IAAAsB;CAAA,IAAAM;CAAA,IAAAT;CAAA,IAAAI;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAA0B,CAAA,CAAA1B,UAAAC,SAAAsB,iBAAAS,WAAAD,IAAAX,YAAAI,UAAAM,QAAA,GAAAD,SAAAH;EASFC,EAAA,KAAAD;EAAAC,EAAA,KAAA3B;EAAA2B,EAAA,KAAA1B;EAAA0B,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,KAAAP;EAAAO,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAA/B,WAAA2B,EAAA;EAAA1B,UAAA0B,EAAA;EAAAJ,kBAAAI,EAAA;EAAAE,QAAAF,EAAA;EAAAP,aAAAO,EAAA;EAAAH,WAAAG,EAAA;EAAAG,SAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CALtB,MAAAK,YAAAD,OAAAE,KAAAA,IAAA,QAAAF;CAUA,MAAAuB,kBAAwB/D,uBAAuBsC,MAAK0B,EAAG;CAAE,IAAAhB;CAAA,IAAAZ,EAAA,OAAA2B,mBAAA3B,EAAA,QAAAE,OAAA;EAOvCU,KAAAe,kBAAA;GAAA,GACbzB;GAAK2B,YACI;EACN,IAHU3B;EAGTF,EAAA,KAAA2B;EAAA3B,EAAA,MAAAE;EAAAF,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CATT,MAAA,EAAAQ,UAAAC,SAAA/B,OAAAgC,KAAAC,WAMIzC,cAAc0C,IAGPP,SAAS;CAAE,IAAAS;CAAA,IAAAd,EAAA,QAAAS,WAAAT,EAAA,QAAAG,QAAA;EACwHW,KAAA9C,qBAAqByC,SAASqB,aAAa3B,MAAM,CAAC;EAACH,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAM,MAAAe,KAAAJ,OAAMK;CAAS,IAAAE;CAAA,IAAAlB,EAAA,QAAA1B,WAAA0B,EAAA,QAAAtB,OAAA;EAAiBwC,KAAAjD,oBAAoBK,SAASI,KAAK;EAACsB,EAAA,MAAA1B;EAAA0B,EAAA,MAAAtB;EAAAsB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAA3B,YAAA2B,EAAA,QAAAW,OAAAM,SAAA;EACrQG,KAAAW,cAAc1D,UAAUsC,OAAMM,OAAQ;EAACjB,EAAA,MAAA3B;EAAA2B,EAAA,MAAAW,OAAAM;EAAAjB,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAJ,mBAAAI,EAAA,QAAAQ,YAAAR,EAAA,QAAAP,cAAAO,EAAA,QAAAH,YAAAG,EAAA,QAAAtB,SAAAsB,EAAA,QAAAU,OAAAV,EAAA,QAAAW,OAAAK,YAAAhB,EAAA,QAAAc,MAAAd,EAAA,QAAAkB,MAAAlB,EAAA,QAAAoB,IAAA;EADrCE,KAAA,oBAACc,cAAD;GAAkCxC;GAA6BY,YAAAA;GAAsBf;GAAsBI;GAAea;GAAa,QAAAI;GAAmD,GAAMC;GAAe,GAAMrC;GAAK,GAAMwC;GAClOE,UAAAA;EADkB,CAAA;EAEHpB,EAAA,MAAAJ;EAAAI,EAAA,MAAAQ;EAAAR,EAAA,MAAAP;EAAAO,EAAA,MAAAH;EAAAG,EAAA,MAAAtB;EAAAsB,EAAA,MAAAU;EAAAV,EAAA,MAAAW,OAAAK;EAAAhB,EAAA,MAAAc;EAAAd,EAAA,MAAAkB;EAAAlB,EAAA,MAAAoB;EAAApB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OAFbsB;AAEa;AAKtB,SAASS,cAAc1D,UAAqB4C,SAAoB;CAC9D,aAAa,qBAAA,UAAA,EAAA,UAAA,CACR5C,UACA4C,OACH,EAAA,CAAA;AACJ;AAOA,SAASa,aAAa3B,QAAkE;CACtF,IAAIA,WAAWG,KAAAA,GACb;CAEF,QAAQ5B,OAAOH,UAAU4B,OAAOzB,OAAO;EACrC,GAAGH;EACH8B,WAAW;CACb,CAAC;AACH"}

package/dist/calendar/styles.js

@@ -212,8 +212,9 @@ const calendarStyles = {
 	},
 	months: {
 		kGNEyG: "x7a106z",
-		k1xSpc: "x78zum5",
+		k1xSpc: "x78zum5 x1yrkhk",
 		kOIVth: "xj2l1yv",
+		kJBjZk: "x12n7ir1",
 		kAzted: "x1fivsg2",
 		$$css: true
 	},

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","sizing","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","chevronHidden","k33iCy","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","headerGroup","heading","kogj98","k9WMMc","menuArrow","kmuXW","menuArrowExpanded","menuButton","kg3NbH","menuCheck","menuItem","k3XXqK","menuItemDisabled","menuItemFocused","kInvED","kMeerF","menuItemSelected","menuList","kLZC3w","kPef9Z","kEafiO","kORKVm","months","root","kXwgrk","k7Eaqz","kmVPX3","dateLayers","inRangeHovered","inRangePressed","plainHovered","plainPressed","selectedHovered","selectedPressed","menuLayers"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  chevronHidden: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headerGroup: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  menuArrow: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  menuArrowExpanded: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true\n  },\n  menuButton: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  menuCheck: {\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"x139gbkf\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  menuItem: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xbg5kjn\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  menuItemDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  menuItemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  menuItemSelected: {\n    kWkggS: \"xkrgufg\",\n    $$css: true\n  },\n  menuList: {\n    kZKoxP: \"x1mj9p22\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    kUOVxO: \"xnx04jz\",\n    k3XXqK: \"x1t137rt\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\n\n// A date's hover and pressed layers, one pair per ground it sits on: nothing,\n// the range band, and the selected circle. From React Aria's render state rather than `:hover` and `:active`, for Button's\n// reasons — see its header: a hover layer stayed on after a tap, and no\n// pressed layer showed for a press made from the keyboard.\n// Each layer is written whole for its ground because StyleX replaces a\n// property whole, and the band and the circle keep their forced-colours\n// `Highlight` under the layer.\nconst dateLayers = {\n  inRangeHovered: {\n    kWkggS: \"x3zumxv x1jzqe4\",\n    $$css: true\n  },\n  inRangePressed: {\n    kWkggS: \"x1as5h4c x1jzqe4\",\n    $$css: true\n  },\n  plainHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  plainPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// A list row's hover and pressed layers over the checked row's surface\n// variant. Over nothing a row takes a date's own pair, `dateLayers.plain*`,\n// since the page gives both the same on-surface layer.\nconst menuLayers = {\n  selectedHovered: {\n    kWkggS: \"xgw93rf\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x113d7pk\",\n    $$css: true\n  }\n};\nexport { calendarStyles, dateLayers, menuLayers };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","media","radii","sizing","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","chevronHidden","k33iCy","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","headerGroup","heading","kogj98","k9WMMc","menuArrow","kmuXW","menuArrowExpanded","menuButton","kg3NbH","menuCheck","menuItem","k3XXqK","menuItemDisabled","menuItemFocused","kInvED","kMeerF","menuItemSelected","menuList","kLZC3w","kPef9Z","kEafiO","kORKVm","months","kJBjZk","root","kXwgrk","k7Eaqz","kmVPX3","dateLayers","inRangeHovered","inRangePressed","plainHovered","plainPressed","selectedHovered","selectedPressed","menuLayers"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  chevronHidden: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headerGroup: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  menuArrow: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  menuArrowExpanded: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true\n  },\n  menuButton: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  menuCheck: {\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"x139gbkf\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  menuItem: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xbg5kjn\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  menuItemDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  menuItemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  menuItemSelected: {\n    kWkggS: \"xkrgufg\",\n    $$css: true\n  },\n  menuList: {\n    kZKoxP: \"x1mj9p22\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    kUOVxO: \"xnx04jz\",\n    k3XXqK: \"x1t137rt\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5 x1yrkhk\",\n    kOIVth: \"xj2l1yv\",\n    kJBjZk: \"x12n7ir1\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\n\n// A date's hover and pressed layers, one pair per ground it sits on: nothing,\n// the range band, and the selected circle. From React Aria's render state rather than `:hover` and `:active`, for Button's\n// reasons — see its header: a hover layer stayed on after a tap, and no\n// pressed layer showed for a press made from the keyboard.\n// Each layer is written whole for its ground because StyleX replaces a\n// property whole, and the band and the circle keep their forced-colours\n// `Highlight` under the layer.\nconst dateLayers = {\n  inRangeHovered: {\n    kWkggS: \"x3zumxv x1jzqe4\",\n    $$css: true\n  },\n  inRangePressed: {\n    kWkggS: \"x1as5h4c x1jzqe4\",\n    $$css: true\n  },\n  plainHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  plainPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// A list row's hover and pressed layers over the checked row's surface\n// variant. Over nothing a row takes a date's own pair, `dateLayers.plain*`,\n// since the page gives both the same on-surface layer.\nconst menuLayers = {\n  selectedHovered: {\n    kWkggS: \"xgw93rf\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x113d7pk\",\n    $$css: true\n  }\n};\nexport { calendarStyles, dateLayers, menuLayers };"],"mappings":"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"}

package/dist/carousel/arrangement.d.ts

@@ -0,0 +1,5 @@
+//#region src/carousel/arrangement.d.ts
+type CarouselLayout = 'hero' | 'multi-browse' | 'uncontained';
+//#endregion
+export type { CarouselLayout };
+//# sourceMappingURL=arrangement.d.ts.map

package/dist/carousel/arrangement.js

@@ -0,0 +1,123 @@
+/** The page's small item: 40dp at the least and 56dp at the most. */
+const SMALL_MAX = 56;
+const SMALL_MIN = 40;
+/**
+* The sizes a layout draws its items at in a content box `room` wide, for
+* `count` items and a preferred large width of `itemSize`.
+*/
+function arrange(layout, room, itemSize, count) {
+	if (layout === "uncontained") return {
+		large: Math.min(itemSize, room),
+		largeCount: 0,
+		medium: 0,
+		small: 0,
+		steps: 0
+	};
+	const small = room >= 184 ? SMALL_MAX : SMALL_MIN;
+	if (layout === "hero") return withSteps({
+		large: Math.max(room - 8 - small, small),
+		largeCount: 1,
+		medium: 0,
+		small
+	}, count);
+	const fit = Math.floor((room - small - 8) / (itemSize + 8));
+	const most = Math.max(1, Math.min(fit, count - 2));
+	for (let largeCount = most; largeCount >= 1; largeCount--) {
+		const gaps = (largeCount + 1) * 8;
+		const medium = room - largeCount * itemSize - gaps - small;
+		if (medium >= small && medium <= itemSize) return withSteps({
+			large: itemSize,
+			largeCount,
+			medium,
+			small
+		}, count);
+		const large = (room - gaps - 1.5 * small) / (largeCount + .5);
+		if (large >= small) return withSteps({
+			large,
+			largeCount,
+			medium: (large + small) / 2,
+			small
+		}, count);
+	}
+	return arrange("hero", room, itemSize, count);
+}
+function filledOf(sizes, count) {
+	return Math.min(count, sizes.largeCount + trailingOf(sizes).length);
+}
+/**
+* Where every item is drawn with the carousel `position` rests along: a
+* whole number at a rest, and the fraction between two while it moves.
+* `room` is the content box's width and `padding` the space on each side of
+* it, which an item past the edge is drawn beyond.
+*/
+function placements(layout, arrangement, room, padding, count, position) {
+	if (layout === "uncontained") return Array.from({ length: count }, (_, index) => ({
+		left: index * (arrangement.large + 8),
+		width: arrangement.large
+	}));
+	const clamped = Math.min(Math.max(position, 0), arrangement.steps);
+	const from = Math.floor(clamped);
+	const to = Math.min(from + 1, arrangement.steps);
+	const fraction = clamped - from;
+	const start = rest(arrangement, room, padding, count, from);
+	const end = rest(arrangement, room, padding, count, to);
+	return start.map((placement, index) => {
+		const next = end[index] ?? placement;
+		return {
+			left: placement.left + (next.left - placement.left) * fraction,
+			width: placement.width + (next.width - placement.width) * fraction
+		};
+	});
+}
+function rest(arrangement, room, padding, count, step) {
+	const { large, largeCount, small } = arrangement;
+	const filled = filledOf(arrangement, count);
+	const trailing = trailingOf(arrangement).slice(0, filled - largeCount);
+	const last = count - filled;
+	const turned = Math.max(0, step - last);
+	const kept = trailing.length - turned;
+	const sizes = [
+		...Array.from({ length: turned }, (_, slot) => trailing[trailing.length - 1 - slot] ?? small),
+		...Array.from({ length: Math.min(largeCount, filled) }, () => large),
+		...trailing.slice(0, kept)
+	];
+	const first = Math.min(step, last);
+	const lefts = [];
+	let cursor = 0;
+	for (const size of sizes) {
+		lefts.push(cursor);
+		cursor += size + 8;
+	}
+	const shift = turned > 0 ? room - (cursor - 8) : 0;
+	const away = small > 0 ? small : large;
+	return Array.from({ length: count }, (_, index) => {
+		const slot = index - first;
+		if (slot < 0) return {
+			left: -padding + slot * (away + 8),
+			width: away
+		};
+		if (slot >= sizes.length) return {
+			left: room + padding + 8 + (slot - sizes.length) * (away + 8),
+			width: away
+		};
+		return {
+			left: (lefts[slot] ?? 0) + shift,
+			width: sizes[slot] ?? away
+		};
+	});
+}
+function trailingOf({ medium, small }) {
+	return [medium, small].filter((size) => size > 0);
+}
+function withSteps(sizes, count) {
+	const filled = filledOf(sizes, count);
+	const turning = Math.max(0, filled - sizes.largeCount);
+	return {
+		...sizes,
+		steps: count - filled + turning
+	};
+}
+//#endregion
+export { arrange, placements };
+
+//# sourceMappingURL=arrangement.js.map

package/dist/carousel/arrangement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrangement.js","names":["CarouselLayout","GAP","SMALL_MAX","SMALL_MIN","Arrangement","large","largeCount","medium","small","steps","Placement","left","width","arrange","layout","room","itemSize","count","Math","min","max","withSteps","fit","floor","most","gaps","sizes","filledOf","Omit","trailingOf","length","placements","arrangement","padding","position","Array","from","_","index","clamped","to","fraction","start","rest","end","map","placement","next","step","filled","trailing","slice","last","turned","kept","slot","first","lefts","cursor","size","push","shift","away","filter","turning"],"sources":["../../src/carousel/arrangement.ts"],"sourcesContent":["// The carousel page's layouts as numbers: which items are large, medium and\n// small at each place a carousel comes to rest, and where each is drawn as\n// it moves between two of them. Apart from the component so the arithmetic\n// can be tested without a browser laying anything out, and so the\n// component's file holds what it renders.\n//\n// The model is MDC-Android's keylines, simplified to what the page draws.\n// At rest a multi-browse carousel shows `largeCount` large items, one medium\n// and one small, filling the room exactly; a hero carousel one large and one\n// small. Each rest is one item further along than the last, and once the\n// last item has come into view the rests that remain turn the arrangement\n// round a slot at a time — small, the large ones, medium; then small,\n// medium, the large ones — so every item is drawn large at one rest at\n// least. At rest `s` the large items are always `s` to `s + largeCount - 1`.\n// Between two rests every item's place and width are interpolated, which is\n// what makes an item grow or shrink as it moves rather than jump. Items past\n// either edge are drawn small and out of sight, so they arrive at the size\n// of the slot they enter.\n//\n// Everything is in pixels along the inline axis of the carousel's content\n// box: 0 is its start edge, inside the leading padding.\n\ntype CarouselLayout = 'hero' | 'multi-browse' | 'uncontained'\n\n/** The page's 8dp between items. */\nconst GAP = 8\n\n/** The page's small item: 40dp at the least and 56dp at the most. */\nconst SMALL_MAX = 56\nconst SMALL_MIN = 40\n\ntype Arrangement = {\n  /** The large item's width, which every item is laid out at. */\n  large: number\n  /** How many items are large at rest. */\n  largeCount: number\n  /** The medium item's width, or 0 for a layout without one. */\n  medium: number\n  /** The small item's width, or 0 for a layout without one. */\n  small: number\n  /** The last place the carousel comes to rest, counting from 0. */\n  steps: number\n}\n\n/** Where an item is drawn: the start of what shows of it, and its width. */\ntype Placement = { left: number; width: number }\n\n/**\n * The sizes a layout draws its items at in a content box `room` wide, for\n * `count` items and a preferred large width of `itemSize`.\n */\nfunction arrange(\n  layout: CarouselLayout,\n  room: number,\n  itemSize: number,\n  count: number,\n): Arrangement {\n  if (layout === 'uncontained') {\n    const large = Math.min(itemSize, room)\n    return { large, largeCount: 0, medium: 0, small: 0, steps: 0 }\n  }\n\n  // The small item at its largest unless the room is too narrow for it.\n  const small = room >= 3 * SMALL_MAX + 2 * GAP ? SMALL_MAX : SMALL_MIN\n\n  if (layout === 'hero') {\n    const large = Math.max(room - GAP - small, small)\n    return withSteps({ large, largeCount: 1, medium: 0, small }, count)\n  }\n\n  // As many items at the preferred width as fit beside a medium and a small\n  // one, and no more than leave a medium and a small item to fill those two\n  // slots, so a short run of items still fills the room rather than leaving\n  // its last slots empty. Where what is left for the medium item is not\n  // between the small and the large width, the large width gives way, to\n  // whatever leaves the medium item halfway between the two.\n  const fit = Math.floor((room - small - GAP) / (itemSize + GAP))\n  const most = Math.max(1, Math.min(fit, count - 2))\n  for (let largeCount = most; largeCount >= 1; largeCount--) {\n    const gaps = (largeCount + 1) * GAP\n    const medium = room - largeCount * itemSize - gaps - small\n    if (medium >= small && medium <= itemSize) {\n      return withSteps({ large: itemSize, largeCount, medium, small }, count)\n    }\n    const large = (room - gaps - 1.5 * small) / (largeCount + 0.5)\n    if (large >= small) {\n      const sizes = { large, largeCount, medium: (large + small) / 2, small }\n      return withSteps(sizes, count)\n    }\n  }\n  // Too narrow for three: one large item and one small, as a hero draws.\n  return arrange('hero', room, itemSize, count)\n}\n\n// How many of the slots are filled: all of them, unless there are fewer\n// items, which leaves the last slots empty.\nfunction filledOf(sizes: Omit<Arrangement, 'steps'>, count: number) {\n  return Math.min(count, sizes.largeCount + trailingOf(sizes).length)\n}\n\n/**\n * Where every item is drawn with the carousel `position` rests along: a\n * whole number at a rest, and the fraction between two while it moves.\n * `room` is the content box's width and `padding` the space on each side of\n * it, which an item past the edge is drawn beyond.\n */\nfunction placements(\n  layout: CarouselLayout,\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  position: number,\n): Placement[] {\n  if (layout === 'uncontained') {\n    return Array.from({ length: count }, (_, index) => ({\n      left: index * (arrangement.large + GAP),\n      width: arrangement.large,\n    }))\n  }\n\n  const clamped = Math.min(Math.max(position, 0), arrangement.steps)\n  const from = Math.floor(clamped)\n  const to = Math.min(from + 1, arrangement.steps)\n  const fraction = clamped - from\n  const start = rest(arrangement, room, padding, count, from)\n  const end = rest(arrangement, room, padding, count, to)\n\n  return start.map((placement, index) => {\n    const next = end[index] ?? placement\n    return {\n      left: placement.left + (next.left - placement.left) * fraction,\n      width: placement.width + (next.width - placement.width) * fraction,\n    }\n  })\n}\n\n// Where every item is drawn at one rest.\nfunction rest(\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  step: number,\n) {\n  const { large, largeCount, small } = arrangement\n  const filled = filledOf(arrangement, count)\n  const trailing = trailingOf(arrangement).slice(0, filled - largeCount)\n  // The last rest drawn from the start; past it, how many trailing slots\n  // have turned round to the front, the last of them first.\n  const last = count - filled\n  const turned = Math.max(0, step - last)\n  const kept = trailing.length - turned\n  const sizes = [\n    ...Array.from(\n      { length: turned },\n      (_, slot) => trailing[trailing.length - 1 - slot] ?? small,\n    ),\n    ...Array.from({ length: Math.min(largeCount, filled) }, () => large),\n    ...trailing.slice(0, kept),\n  ]\n  // The item in the first slot. Once the arrangement turns, the slots hold\n  // the last items, whichever way round they are drawn.\n  const first = Math.min(step, last)\n\n  // The slots, laid out from the start edge.\n  const lefts: number[] = []\n  let cursor = 0\n  for (const size of sizes) {\n    lefts.push(cursor)\n    cursor += size + GAP\n  }\n  // A turned arrangement that does not fill the room is set against the end\n  // edge instead, which is where its large items belong.\n  const shift = turned > 0 ? room - (cursor - GAP) : 0\n  const away = small > 0 ? small : large\n\n  return Array.from({ length: count }, (_, index): Placement => {\n    const slot = index - first\n    if (slot < 0) {\n      // Past the start edge, beyond the padding, a small item per place.\n      return { left: -padding + slot * (away + GAP), width: away }\n    }\n    if (slot >= sizes.length) {\n      // Past the end edge, likewise.\n      return {\n        left: room + padding + GAP + (slot - sizes.length) * (away + GAP),\n        width: away,\n      }\n    }\n    return { left: (lefts[slot] ?? 0) + shift, width: sizes[slot] ?? away }\n  })\n}\n\n// The widths that follow the large ones at rest: medium then small, or the\n// small alone for a hero.\nfunction trailingOf({ medium, small }: Omit<Arrangement, 'steps'>) {\n  return [medium, small].filter((size) => size > 0)\n}\n\n// A rest starts at each item while every slot after it is filled, and each\n// trailing slot turning round to the front is one rest more.\nfunction withSteps(\n  sizes: Omit<Arrangement, 'steps'>,\n  count: number,\n): Arrangement {\n  const filled = filledOf(sizes, count)\n  const turning = Math.max(0, filled - sizes.largeCount)\n  return { ...sizes, steps: count - filled + turning }\n}\n\nexport type { Arrangement, CarouselLayout, Placement }\n\nexport { arrange, GAP, placements }\n"],"mappings":"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"}

package/dist/chip/index.js

@@ -5,10 +5,15 @@ import { chipLayers, chipStyles } from "./styles.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/chip/index.tsx
 /**
-* The check a selected chip draws before its label, and nothing at all while
-* it is not selected. Returns a node rather than letting the type be
-* inferred, since `ReactNode` is a union that includes a promise and an
-* inferred one has to be `async`.
+* What a chip draws before its label: the check while it is selected, its own
+* icon while it is not, and nothing for an unselected chip with no icon.
+* Returns a node rather than letting the type be inferred, since `ReactNode`
+* is a union that includes a promise and an inferred one has to be `async`.
+*
+* The check takes the icon's place rather than joining it, as the chips page
+* draws a filter chip and as a segmented button's segments do. So a chip with
+* an icon keeps its width when it is chosen, where one without grows by the
+* slot.
 *
 * Shared rather than written at each of the two call sites: Chip and
 * ChipGroup's chip draw the same pill from `./styles`, and a check written
@@ -16,12 +21,16 @@ import { jsx } from "react/jsx-runtime";
 * library's own and not exported from the package; see `src/row` for the
 * same arrangement around a list's row.
 */
-function chipGlyph(isSelected) {
-	if (!isSelected) return null;
-	return /* @__PURE__ */ jsx("span", {
+function chipGlyph(state, icon) {
+	if (state.isSelected) return /* @__PURE__ */ jsx("span", {
 		...props(chipStyles.glyph),
 		children: /* @__PURE__ */ jsx(CheckGlyph, { ...props(chipStyles.glyphSvg) })
 	});
+	if (icon === void 0 || icon === null) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props(chipStyles.glyph, !state.isDisabled && chipStyles.icon),
+		children: icon
+	});
 }
 /**
 * The label a chip draws, in a span of its own so it can be cut short with an
@@ -35,22 +44,47 @@ function chipLabel(children) {
 		children
 	});
 }
+const CONTAINERS = {
+	elevated: {
+		disabled: chipStyles.elevatedDisabled,
+		focused: chipLayers.elevatedFocused,
+		hovered: chipLayers.elevatedHovered,
+		pressed: chipLayers.elevatedPressed
+	},
+	selected: {
+		disabled: chipStyles.disabledSelected,
+		focused: chipLayers.selectedFocused,
+		hovered: chipLayers.selectedHovered,
+		pressed: chipLayers.selectedPressed
+	},
+	unselected: {
+		disabled: chipStyles.disabledUnselected,
+		focused: chipLayers.unselectedFocused,
+		hovered: chipLayers.unselectedHovered,
+		pressed: chipLayers.unselectedPressed
+	}
+};
 /**
 * The pill's styles in the render state React Aria hands a chip's
-* `className`, for Chip's toggle button and ChipGroup's tag alike. StyleX
+* `className`, for Chip's two buttons and ChipGroup's tag alike. StyleX
 * cannot target `[data-selected]` on the element it is styling, so the
 * container is chosen here rather than in CSS — which is also why an
 * uncontrolled chip styles itself without keeping a copy of its state.
 *
 * Shared for the reason `chipGlyph` is: the order is the precedence. The
-* hover and pressed layers come from the render state over the container, a
-* press over a hover, and disabled comes last so it wins over all of them,
-* since StyleX replaces a property whole. `inGroup` is a ChipGroup's
-* chip, whose touch target reaches only halfway across the gap to the next
-* row; see `targetInGroup` in `./styles`.
+* hover, focus and pressed layers come from the render state over the
+* container — focus over hover, and a press over both — and disabled comes
+* last so it wins over all of them, since StyleX replaces a property whole.
+*
+* `elevated` raises the chip off the page on a container of its own, and
+* `kind` names which of the page's chips it is, which decides the label's
+* role. `inGroup` is a ChipGroup's chip, whose touch target reaches only
+* halfway across the gap to the next row; see `targetInGroup` in `./styles`.
 */
-function chipPropsFor(state, inGroup = false) {
-	return props(chipStyles.base, chipStyles.target, inGroup && chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isHovered && (state.isSelected ? chipLayers.selectedHovered : chipLayers.unselectedHovered), state.isPressed && (state.isSelected ? chipLayers.selectedPressed : chipLayers.unselectedPressed), state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+function chipPropsFor(state, { elevated = false, inGroup = false, kind = "filter" } = {}) {
+	const roles = CONTAINERS[containerOf(state.isSelected, elevated)];
+	const raised = elevated && !state.isDisabled;
+	return props(chipStyles.base, chipStyles.target, inGroup && chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, elevated && !state.isSelected && chipStyles.elevated, kind === "assist" && chipStyles.assist, raised && chipStyles.raised, state.isHovered && roles.hovered, raised && state.isHovered && chipStyles.raisedHovered, state.isFocusVisible && roles.focused, state.isPressed && roles.pressed, state.isDisabled && chipStyles.disabled, state.isDisabled && roles.disabled);
 }
 /**
 * The close target's class, from its button's own render state, so its
@@ -61,6 +95,10 @@ function chipPropsFor(state, inGroup = false) {
 function chipRemoveClassName(state) {
 	return props(chipStyles.remove, state.isHovered && chipLayers.removeHovered, state.isPressed && chipLayers.removePressed).className ?? "";
 }
+function containerOf(isSelected, elevated) {
+	if (isSelected) return "selected";
+	return elevated ? "elevated" : "unselected";
+}
 //#endregion
 export { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName };