@kanso-labs/kanso-ui 0.36.0 → 0.37.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":"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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 };
 

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","focus","chipLayers","chipStyles","chipGlyph","isSelected","props","glyph","glyphSvg","chipLabel","children","label","chipPropsFor","state","isDisabled","isHovered","isPressed","inGroup","base","target","targetInGroup","ring","selected","unselected","selectedHovered","unselectedHovered","selectedPressed","unselectedPressed","disabled","disabledSelected","disabledUnselected","chipRemoveClassName","remove","removeHovered","removePressed","className","stylex.props"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { focus } from '../styles/focus';\nimport { chipLayers, chipStyles } from './styles';\n\n/**\n * The check a selected chip draws before its label, and nothing at all while\n * it is not selected. Returns a node rather than letting the type be\n * inferred, since `ReactNode` is a union that includes a promise and an\n * inferred one has to be `async`.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(isSelected: boolean): ReactNode {\n  if (!isSelected) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph)}>\n      <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n    </span>;\n}\n\n/**\n * The label a chip draws, in a span of its own so it can be cut short with an\n * ellipsis rather than wrapped out of the pill; see the header of `./styles`.\n * Shared for the reason `chipGlyph` is, by all three components that draw the\n * pill.\n */\nfunction chipLabel(children: ReactNode): ReactNode {\n  return <span {...stylex.props(chipStyles.label)}>{children}</span>;\n}\n\n/**\n * The pill's styles in the render state React Aria hands a chip's\n * `className`, for Chip's toggle button and ChipGroup's tag alike. StyleX\n * cannot target `[data-selected]` on the element it is styling, so the\n * container is chosen here rather than in CSS — which is also why an\n * uncontrolled chip styles itself without keeping a copy of its state.\n *\n * Shared for the reason `chipGlyph` is: the order is the precedence. The\n * hover and pressed layers come from the render state over the container, a\n * press over a hover, and disabled comes last so it wins over all of them,\n * since StyleX replaces a property whole. `inGroup` is a ChipGroup's\n * chip, whose touch target reaches only halfway across the gap to the next\n * row; see `targetInGroup` in `./styles`.\n */\nfunction chipPropsFor(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}, inGroup = false) {\n  return stylex.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));\n}\n\n/**\n * The close target's class, from its button's own render state, so its\n * hover and pressed layers follow React Aria's report rather than `:hover`\n * and `:active` — see `chipLayers`. A function, which React Aria's\n * `className` takes alongside a string.\n */\nfunction chipRemoveClassName(state: {\n  isHovered: boolean;\n  isPressed: boolean;\n}) {\n  return stylex.props(chipStyles.remove, state.isHovered && chipLayers.removeHovered, state.isPressed && chipLayers.removePressed).className ?? '';\n}\nexport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName };"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAASM,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIN,MAAaI,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIR,MAAaI,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV;;;;;;;AAQA,SAASC,UAAUC,UAAgC;CACjD,OAAO,oBAAC,QAAD;EAAM,GAAIX,MAAaI,WAAWQ,KAAK;EAAID;CAAe,CAAA;AACnE;;;;;;;;;;;;;;;AAgBA,SAASE,aAAaC,OAKnBI,UAAU,OAAO;CAClB,OAAOlB,MAAaI,WAAWe,MAAMf,WAAWgB,QAAQF,WAAWd,WAAWiB,eAAenB,MAAMoB,MAAMR,MAAMR,aAAaF,WAAWmB,WAAWnB,WAAWoB,YAAYV,MAAME,cAAcF,MAAMR,aAAaH,WAAWsB,kBAAkBtB,WAAWuB,oBAAoBZ,MAAMG,cAAcH,MAAMR,aAAaH,WAAWwB,kBAAkBxB,WAAWyB,oBAAoBd,MAAMC,cAAcX,WAAWyB,UAAUf,MAAMC,eAAeD,MAAMR,aAAaF,WAAW0B,mBAAmB1B,WAAW2B,mBAAmB;AAC9f;;;;;;;AAQA,SAASC,oBAAoBlB,OAG1B;CACD,OAAOd,MAAaI,WAAW6B,QAAQnB,MAAME,aAAab,WAAW+B,eAAepB,MAAMG,aAAad,WAAWgC,aAAa,CAAC,CAACC,aAAa;AAChJ"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","focus","chipLayers","chipStyles","chipGlyph","state","isDisabled","isSelected","icon","props","glyph","glyphSvg","undefined","chipLabel","children","label","CONTAINERS","elevated","disabled","elevatedDisabled","focused","elevatedFocused","hovered","elevatedHovered","pressed","elevatedPressed","selected","disabledSelected","selectedFocused","selectedHovered","selectedPressed","unselected","disabledUnselected","unselectedFocused","unselectedHovered","unselectedPressed","ChipKind","chipPropsFor","isFocusVisible","isHovered","isPressed","inGroup","kind","roles","containerOf","raised","base","target","targetInGroup","ring","assist","raisedHovered","chipRemoveClassName","remove","removeHovered","removePressed","className","stylex.props"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { focus } from '../styles/focus';\nimport { chipLayers, chipStyles } from './styles';\n\n/**\n * What a chip draws before its label: the check while it is selected, its own\n * icon while it is not, and nothing for an unselected chip with no icon.\n * Returns a node rather than letting the type be inferred, since `ReactNode`\n * is a union that includes a promise and an inferred one has to be `async`.\n *\n * The check takes the icon's place rather than joining it, as the chips page\n * draws a filter chip and as a segmented button's segments do. So a chip with\n * an icon keeps its width when it is chosen, where one without grows by the\n * slot.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n}, icon?: ReactNode): ReactNode {\n  if (state.isSelected) {\n    return <span {...stylex.props(chipStyles.glyph)}>\n        <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n      </span>;\n  }\n  if (icon === undefined || icon === null) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph, !state.isDisabled && chipStyles.icon)}>\n      {icon}\n    </span>;\n}\n\n/**\n * The label a chip draws, in a span of its own so it can be cut short with an\n * ellipsis rather than wrapped out of the pill; see the header of `./styles`.\n * Shared for the reason `chipGlyph` is, by all three components that draw the\n * pill.\n */\nfunction chipLabel(children: ReactNode): ReactNode {\n  return <span {...stylex.props(chipStyles.label)}>{children}</span>;\n}\n\n// The three containers a chip can be on, with the layers and the disabled\n// treatment each takes. A table rather than a branch per state, so the\n// containers cannot differ in which states they answer.\nconst CONTAINERS = {\n  elevated: {\n    disabled: chipStyles.elevatedDisabled,\n    focused: chipLayers.elevatedFocused,\n    hovered: chipLayers.elevatedHovered,\n    pressed: chipLayers.elevatedPressed\n  },\n  selected: {\n    disabled: chipStyles.disabledSelected,\n    focused: chipLayers.selectedFocused,\n    hovered: chipLayers.selectedHovered,\n    pressed: chipLayers.selectedPressed\n  },\n  unselected: {\n    disabled: chipStyles.disabledUnselected,\n    focused: chipLayers.unselectedFocused,\n    hovered: chipLayers.unselectedHovered,\n    pressed: chipLayers.unselectedPressed\n  }\n};\n\n/** Which of the page's chips a pill is drawn as. */\ntype ChipKind = 'assist' | 'filter' | 'suggestion';\n\n/**\n * The pill's styles in the render state React Aria hands a chip's\n * `className`, for Chip's two buttons and ChipGroup's tag alike. StyleX\n * cannot target `[data-selected]` on the element it is styling, so the\n * container is chosen here rather than in CSS — which is also why an\n * uncontrolled chip styles itself without keeping a copy of its state.\n *\n * Shared for the reason `chipGlyph` is: the order is the precedence. The\n * hover, focus and pressed layers come from the render state over the\n * container — focus over hover, and a press over both — and disabled comes\n * last so it wins over all of them, since StyleX replaces a property whole.\n *\n * `elevated` raises the chip off the page on a container of its own, and\n * `kind` names which of the page's chips it is, which decides the label's\n * role. `inGroup` is a ChipGroup's chip, whose touch target reaches only\n * halfway across the gap to the next row; see `targetInGroup` in `./styles`.\n */\nfunction chipPropsFor(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}, {\n  elevated = false,\n  inGroup = false,\n  kind = 'filter'\n}: {\n  elevated?: boolean;\n  inGroup?: boolean;\n  kind?: ChipKind;\n} = {}) {\n  const roles = CONTAINERS[containerOf(state.isSelected, elevated)];\n  const raised = elevated && !state.isDisabled;\n  return stylex.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);\n}\n\n/**\n * The close target's class, from its button's own render state, so its\n * hover and pressed layers follow React Aria's report rather than `:hover`\n * and `:active` — see `chipLayers`. A function, which React Aria's\n * `className` takes alongside a string.\n */\nfunction chipRemoveClassName(state: {\n  isHovered: boolean;\n  isPressed: boolean;\n}) {\n  return stylex.props(chipStyles.remove, state.isHovered && chipLayers.removeHovered, state.isPressed && chipLayers.removePressed).className ?? '';\n}\n\n// Which container a chip is on: the secondary container while selected,\n// elevated or not, and otherwise the elevated one or the outline.\nfunction containerOf(isSelected: boolean, elevated: boolean) {\n  if (isSelected) {\n    return 'selected';\n  }\n  return elevated ? 'elevated' : 'unselected';\n}\nexport type { ChipKind };\nexport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName };"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAASM,UAAUC,OAGhBG,MAA6B;CAC9B,IAAIH,MAAME,YACR,OAAO,oBAAC,QAAD;EAAM,GAAIR,MAAaI,WAAWO,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIX,MAAaI,WAAWQ,QAAQ,EAAE,CAAA;CAC9C,CAAA;CAEV,IAAIH,SAASI,KAAAA,KAAaJ,SAAS,MACjC,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIT,MAAaI,WAAWO,OAAO,CAACL,MAAMC,cAAcH,WAAWK,IAAI;EAC/EA,UAAAA;CACG,CAAA;AACV;;;;;;;AAQA,SAASK,UAAUC,UAAgC;CACjD,OAAO,oBAAC,QAAD;EAAM,GAAIf,MAAaI,WAAWY,KAAK;EAAID;CAAe,CAAA;AACnE;AAKA,MAAME,aAAa;CACjBC,UAAU;EACRC,UAAUf,WAAWgB;EACrBC,SAASlB,WAAWmB;EACpBC,SAASpB,WAAWqB;EACpBC,SAAStB,WAAWuB;CACtB;CACAC,UAAU;EACRR,UAAUf,WAAWwB;EACrBP,SAASlB,WAAW0B;EACpBN,SAASpB,WAAW2B;EACpBL,SAAStB,WAAW4B;CACtB;CACAC,YAAY;EACVb,UAAUf,WAAW6B;EACrBZ,SAASlB,WAAW+B;EACpBX,SAASpB,WAAWgC;EACpBV,SAAStB,WAAWiC;CACtB;AACF;;;;;;;;;;;;;;;;;;AAsBA,SAASE,aAAahC,OAMnB,EACDY,WAAW,OACXwB,UAAU,OACVC,OAAO,aAKL,CAAC,GAAG;CACN,MAAMC,QAAQ3B,WAAW4B,YAAYvC,MAAME,YAAYU,QAAQ;CAC/D,MAAM4B,SAAS5B,YAAY,CAACZ,MAAMC;CAClC,OAAOP,MAAaI,WAAW2C,MAAM3C,WAAW4C,QAAQN,WAAWtC,WAAW6C,eAAe/C,MAAMgD,MAAM5C,MAAME,aAAaJ,WAAWuB,WAAWvB,WAAW4B,YAAYd,YAAY,CAACZ,MAAME,cAAcJ,WAAWc,UAAUyB,SAAS,YAAYvC,WAAW+C,QAAQL,UAAU1C,WAAW0C,QAAQxC,MAAMkC,aAAaI,MAAMrB,SAASuB,UAAUxC,MAAMkC,aAAapC,WAAWgD,eAAe9C,MAAMiC,kBAAkBK,MAAMvB,SAASf,MAAMmC,aAAaG,MAAMnB,SAASnB,MAAMC,cAAcH,WAAWe,UAAUb,MAAMC,cAAcqC,MAAMzB,QAAQ;AACnhB;;;;;;;AAQA,SAASkC,oBAAoB/C,OAG1B;CACD,OAAON,MAAaI,WAAWkD,QAAQhD,MAAMkC,aAAarC,WAAWoD,eAAejD,MAAMmC,aAAatC,WAAWqD,aAAa,CAAC,CAACC,aAAa;AAChJ;AAIA,SAASZ,YAAYrC,YAAqBU,UAAmB;CAC3D,IAAIV,YACF,OAAO;CAET,OAAOU,WAAW,aAAa;AACjC"}

package/dist/chip/styles.js

@@ -1,5 +1,9 @@
 //#region src/chip/styles.ts
 const chipStyles = {
+	assist: {
+		kMwMTN: "x139gbkf",
+		$$css: true
+	},
 	base: {
 		k6CgDc: "x12w9bfk",
 		kGNEyG: "x6s0dn4",
@@ -39,6 +43,17 @@ const chipStyles = {
 		kVAM5u: "xrh88j3",
 		$$css: true
 	},
+	elevated: {
+		kWkggS: "x1vnz5z6",
+		kVAM5u: "x9r1u3d",
+		$$css: true
+	},
+	elevatedDisabled: {
+		kWkggS: "xepofeg",
+		kVAM5u: "x9r1u3d",
+		kGVxlE: "x1gnnqk1",
+		$$css: true
+	},
 	glyph: {
 		kGNEyG: "x6s0dn4",
 		kZKoxP: "xmix8c7",
@@ -55,6 +70,10 @@ const chipStyles = {
 		kzqmXN: "xh8yej3",
 		$$css: true
 	},
+	icon: {
+		kMwMTN: "x1mxwv8y",
+		$$css: true
+	},
 	label: {
 		kB7OPa: "x9f619",
 		kVQacm: "xb3r6kr",
@@ -62,6 +81,15 @@ const chipStyles = {
 		khDVqt: "xuxw1ft",
 		$$css: true
 	},
+	raised: {
+		kGVxlE: "x19efjv6",
+		k1ekBW: "xu8237s",
+		$$css: true
+	},
+	raisedHovered: {
+		kGVxlE: "x1os83gw",
+		$$css: true
+	},
 	remove: {
 		kgeoSG: "x1cpjm7i",
 		kFcpXp: "xtu493u",
@@ -118,6 +146,18 @@ const chipStyles = {
 	}
 };
 const chipLayers = {
+	elevatedFocused: {
+		kWkggS: "x1drsm1c",
+		$$css: true
+	},
+	elevatedHovered: {
+		kWkggS: "x1ei6177",
+		$$css: true
+	},
+	elevatedPressed: {
+		kWkggS: "x1vt8e7r",
+		$$css: true
+	},
 	removeHovered: {
 		kWkggS: "x930l3l",
 		$$css: true
@@ -126,6 +166,10 @@ const chipLayers = {
 		kWkggS: "xsykwg8",
 		$$css: true
 	},
+	selectedFocused: {
+		kWkggS: "x1s5x49g",
+		$$css: true
+	},
 	selectedHovered: {
 		kWkggS: "x1fctxn6",
 		$$css: true
@@ -134,6 +178,10 @@ const chipLayers = {
 		kWkggS: "xzpauq9",
 		$$css: true
 	},
+	unselectedFocused: {
+		kWkggS: "xwqhyid",
+		$$css: true
+	},
 	unselectedHovered: {
 		kWkggS: "x1b18xnh",
 		$$css: true

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","chipStyles","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","ks0D6T","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","label","kVQacm","kg5iWk","khDVqt","remove","kgeoSG","kFcpXp","kEoFBp","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kVAEAm","removeGlyph","selected","target","kGOzcv","kpsdNU","targetInGroup","unselected","chipLayers","removeHovered","removePressed","selectedHovered","selectedPressed","unselectedHovered","unselectedPressed"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own; ChipGroup's chip, which is one of\n// a set that can also be removed; and TokenField's token, which takes `base`\n// and `unselected` alone — a token is not selectable, so it reaches for\n// neither the selected container nor the check below. The measurements and\n// roles are the page's filter chip — a 32dp container with an 8dp corner and\n// 16dp of inline padding, an outline variant border while unselected, the\n// secondary container pair once selected.\n//\n// **A label with no room on one line is cut short, never wrapped.** The\n// container is a fixed 32dp, so a second line has nowhere to go but out of\n// the pill: a chip or a token in a room narrower than its label drew the\n// rest below its own edge, and a chip in a group's row ran past the row's\n// end instead. The pill is held to the room it is in, and the label sits in\n// a span of its own that ends in an ellipsis where the pill does — a span,\n// because a flex container ignores `text-overflow`, which is also why\n// Material's own chips carry one. The whole label stays in the DOM, so a\n// screen reader still reads all of it.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\n// The press area the chips page requires around its 32dp chip. A literal for\n// the reason IconButton's `TARGET_SIZE` gives.\nconst TARGET_SIZE = '48px';\nconst chipStyles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  remove: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"xtu493u\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  target: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xouqwce\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  targetInGroup: {\n    kGOzcv: \"x1xkszu9\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The hover and pressed layers, applied from React Aria's render state rather\n// than from `:hover` and `:active`, for Button's reasons — see its header: a\n// hover layer stayed on after a tap, and no pressed layer showed for a press\n// made from the keyboard. One pair per container, the pressed after the\n// hovered so a press wins, and one for the close target, whose own render\n// state is its button's. A token in a TokenField draws none of them: React\n// Aria reports neither state for one, since it is text the caret moves\n// through rather than a control a press acts on.\nconst chipLayers = {\n  removeHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  removePressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  unselectedHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  unselectedPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  }\n};\nexport { chipLayers, chipStyles };"],"mappings":";AA2DA,MAAMS,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,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;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRjB,QAAQ;EACRe,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL5B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRmB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR/B,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACAY,OAAO;EACL5B,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRxC,QAAQ;EACRyB,QAAQ;EACRxB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRkB,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPqB,QAAQ;EACRC,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,aAAa;EACX/C,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACA4B,UAAU;EACRxB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACA6B,QAAQ;EACNZ,QAAQ;EACRa,QAAQ;EACRC,QAAQ;EACRZ,QAAQ;EACRO,QAAQ;EACR1B,OAAO;CACT;CACAgC,eAAe;EACbF,QAAQ;EACR9B,OAAO;CACT;CACAiC,YAAY;EACV7B,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF;AAUA,MAAMkC,aAAa;CACjBC,eAAe;EACb/B,QAAQ;EACRJ,OAAO;CACT;CACAoC,eAAe;EACbhC,QAAQ;EACRJ,OAAO;CACT;CACAqC,iBAAiB;EACfjC,QAAQ;EACRJ,OAAO;CACT;CACAsC,iBAAiB;EACflC,QAAQ;EACRJ,OAAO;CACT;CACAuC,mBAAmB;EACjBnC,QAAQ;EACRJ,OAAO;CACT;CACAwC,mBAAmB;EACjBpC,QAAQ;EACRJ,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","chipStyles","assist","kMwMTN","$$css","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","ks0D6T","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","disabled","disabledSelected","kWkggS","disabledUnselected","kVAM5u","elevated","elevatedDisabled","kGVxlE","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","icon","label","kVQacm","kg5iWk","khDVqt","raised","raisedHovered","remove","kgeoSG","kFcpXp","kEoFBp","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kVAEAm","removeGlyph","selected","target","kGOzcv","kpsdNU","targetInGroup","unselected","chipLayers","elevatedFocused","elevatedHovered","elevatedPressed","removeHovered","removePressed","selectedFocused","selectedHovered","selectedPressed","unselectedFocused","unselectedHovered","unselectedPressed"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own or one of the page's two action\n// chips; ChipGroup's chip, which is one of a set that can also be removed;\n// and TokenField's token, which takes `base` and `unselected` alone — a token\n// is not selectable, so it reaches for neither the selected container nor\n// the check below. The measurements and roles are the page's filter chip — a\n// 32dp container with an 8dp corner and 16dp of inline padding, an outline\n// variant border while unselected, the secondary container pair once\n// selected.\n//\n// The assist and suggestion chips are that unselected pill, never selected.\n// The page's only difference between them is the label: on surface on an\n// assist chip, on surface variant on a suggestion chip as on a filter one.\n//\n// **An elevated chip trades the outline for a container**, surface container\n// low at the page's elevation 1, raised to 2 under a hovering pointer. A\n// selected one keeps the secondary container and takes the shadow with it.\n// Its 1px border stays, transparent, as every chip's does: a forced-colours\n// mode paints a transparent border in its text colour and drops the shadow\n// and the fill, so the border is the boundary left there.\n//\n// **A label with no room on one line is cut short, never wrapped.** The\n// container is a fixed 32dp, so a second line has nowhere to go but out of\n// the pill: a chip or a token in a room narrower than its label drew the\n// rest below its own edge, and a chip in a group's row ran past the row's\n// end instead. The pill is held to the room it is in, and the label sits in\n// a span of its own that ends in an ellipsis where the pill does — a span,\n// because a flex container ignores `text-overflow`, which is also why\n// Material's own chips carry one. The whole label stays in the DOM, so a\n// screen reader still reads all of it.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across. A chip given an icon does not widen, since the check takes the\n// icon's place in the same slot.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\n// The press area the chips page requires around its 32dp chip. A literal for\n// the reason IconButton's `TARGET_SIZE` gives.\nconst TARGET_SIZE = '48px';\nconst chipStyles = {\n  assist: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"x9r1u3d\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  icon: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  raised: {\n    kGVxlE: \"x19efjv6\",\n    k1ekBW: \"xu8237s\",\n    $$css: true\n  },\n  raisedHovered: {\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  remove: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"xtu493u\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  target: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xouqwce\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  targetInGroup: {\n    kGOzcv: \"x1xkszu9\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The hover and pressed layers, applied from React Aria's render state rather\n// than from `:hover` and `:active`, for Button's reasons — see its header: a\n// hover layer stayed on after a tap, and no pressed layer showed for a press\n// made from the keyboard. One pair per container, the pressed after the\n// hovered so a press wins, and one for the close target, whose own render\n// state is its button's. A token in a TokenField draws none of them: React\n// Aria reports neither state for one, since it is text the caret moves\n// through rather than a control a press acts on.\nconst chipLayers = {\n  elevatedFocused: {\n    kWkggS: \"x1drsm1c\",\n    $$css: true\n  },\n  elevatedHovered: {\n    kWkggS: \"x1ei6177\",\n    $$css: true\n  },\n  elevatedPressed: {\n    kWkggS: \"x1vt8e7r\",\n    $$css: true\n  },\n  removeHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  removePressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  },\n  selectedFocused: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  unselectedFocused: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  unselectedHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  unselectedPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  }\n};\nexport { chipLayers, chipStyles };"],"mappings":"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"}

package/dist/collection/styles.js

@@ -10,6 +10,14 @@ const collectionStyles = {
 		k8WAf4: "x1cmllll",
 		$$css: true
 	},
+	dropTarget: {
+		kWkggS: "x659ado",
+		kjBf7l: "xrgy624 x1x84bn5",
+		kInvED: "x2ssjo2",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
 	header: {
 		kB7OPa: "x9f619",
 		kMwMTN: "x1w5n3ug",
@@ -39,6 +47,17 @@ const collectionStyles = {
 	}
 };
 /**
+* A collection's own box, as the function React Aria's `className` prop
+* wants: the container, and the drop target while a drop would land on the
+* collection as a whole. List, ListBox and Tree each draw it.
+*/
+function containerClasses(state) {
+	return {
+		0: { className: "x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll" },
+		1: { className: "x9f619 x78zum5 xdt5ytf x1cmllll x659ado xrgy624 x1x84bn5 x2ssjo2 xaatb59 x1de99jn" }
+	}[!!state.isDropTarget << 0];
+}
+/**
 * The styles a selectable row in a list takes, as the function React Aria's
 * `className` prop wants.
 *
@@ -59,9 +78,9 @@ const collectionStyles = {
 */
 function rowItemStyles(supporting, overline, extra) {
 	const lines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
-	return (state) => props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);
+	return (state) => props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isDragging === true && rowStyles.dragging, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDropTarget === true && rowStyles.dropTarget, state.isDisabled && rowStyles.disabled);
 }
 //#endregion
-export { collectionStyles, rowItemStyles };
+export { collectionStyles, containerClasses, rowItemStyles };
 
 //# sourceMappingURL=styles.js.map