@kanso-labs/kanso-ui 0.44.1 → 0.45.0

package/README.md

@@ -98,14 +98,28 @@ needs around them come from this package too: `I18nProvider` and
 the `useFilter`, `useListData`, `useTreeData` and `useAsyncList` hooks,
 `useDragAndDrop` with `useDrag`, `useDrop`, the drop item guards and
 `DIRECTORY_DRAG_TYPE`, `useLocale`, `parseColor` and `getColorChannels`,
-`TokenFieldValue`, and the `Key`, `Selection`, `SortDescriptor` and `PressEvent`
-types.
+`TokenFieldValue`, and the `Key`, `Selection`, `SortDescriptor`, `PressEvent`,
+`HoverEvent`, `KeyboardEvent` and `FocusableElement` types.
+
+`KeyboardEvent` is React Aria's, which is React's with `continuePropagation()`
+added. It is what `onKeyDown` and `onKeyUp` take on the fields and controls
+React Aria handles the keyboard for: `TextField`, `Select`, `Checkbox`,
+`Switch`, `Chip` and the rest. `Button`, `IconButton`, `Fab` and `Link` hand
+those handlers React's own, as does a component that renders a plain element,
+such as `Card`. `onHoverStart` and `onHoverEnd` take `HoverEvent` wherever a
+component has them.
 
 A virtualized collection needs to be told how tall its rows are, and
 `collectionSizes` is what the collections here measure — `listRow`, `menuRow`,
 `tableRow` and the rest — so a `Virtualizer`'s `layoutOptions` take a number the
 components agree with rather than one guessed at the call site.
 
+The collection inside a `Virtualizer` is its own scroll container, so give the
+`List` itself its height and `overflow-y: auto`, through `className` or `style`.
+React Aria sizes a page of Page Up and Page Down from the collection's own box,
+so one left to grow to its full height inside a scrolling wrapper is one page
+long, and the keys jump from one end of it to the other.
+
 ```tsx
 import { I18nProvider, useListData } from '@kanso-labs/kanso-ui'
 ```
@@ -162,11 +176,42 @@ names React Aria gives sit behind `clearLabel`, `closeLabel` and the rest.
 Numbers follow the provider too: `Currency` writes its amount, and a field its
 character count, in the locale's digits and grouping.
 
-A bundler includes every language unless told which ones the app supports. React
-Aria's
+A bundler includes every language React Aria ships unless told which ones the
+app supports.
 [`@react-aria/optimize-locales-plugin`](https://www.npmjs.com/package/@react-aria/optimize-locales-plugin)
-is how an app says so for React Aria's own tables. This package's table is one
-small module, included whole.
+is how an app says so. Install it as a development dependency and give it the
+locales the app hands `I18nProvider`. Under Next.js with Turbopack, which needs
+Next.js 15.4 or newer, its rules spread into `turbopack.rules`:
+
+```ts
+// next.config.ts
+import optimizeLocales from '@react-aria/optimize-locales-plugin'
+
+const locales = optimizeLocales.turbopack({ locales: ['en-US', 'de-DE'] })
+
+export default {
+  turbopack: { rules: { ...locales.rules } },
+}
+```
+
+The object is left untyped because the plugin types `locales` as a read-only
+array, which `NextConfig` does not accept, so `const config: NextConfig` fails
+Next.js's type check over the same rules. Under Vite it is a plugin:
+
+```ts
+// vite.config.ts
+import optimizeLocales from '@react-aria/optimize-locales-plugin'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [optimizeLocales.vite({ locales: ['en-US', 'de-DE'] })],
+})
+```
+
+React Aria's strings for every other locale then build to nothing. The plugin's
+own README covers webpack, Rollup and esbuild. It reaches React Aria's tables
+alone: this package's strings are one module holding every locale, included
+whole wherever a component uses it.
 
 ### Layout
 
@@ -178,7 +223,7 @@ otherwise be bespoke CSS in every consuming app:
 ```tsx
 <Container>
   <Stack gap="xl">
-    <Stack align="center" direction="row" justify="between">
+    <Stack align="center" direction="row" gap="sm" justify="between" wrap>
       <Text variant="titleLarge">Headline</Text>
       <Button>Save changes</Button>
     </Stack>
@@ -608,6 +653,13 @@ a `transform` or a `filter` makes a sheet's scrim cover that ancestor rather
 than the viewport, and `overflow: hidden` clips a popover — so put the scope
 around such an element rather than inside it.
 
+The overlays' container is one more child of the scope's element, after
+everything the scope renders. It takes up no room, but selectors that count
+children count it: inside the scope, the last element you render is not
+`:last-child` and is counted wrong by `:nth-last-child()`, a lone child is not
+`:only-child`, and an empty scope is not `:empty`. Key a rule like that on a
+class of your own, or put the scope around the element whose children it counts.
+
 `themeScope` is the same thing as a class name, for an element you render
 yourself. Overlays opened under it still portal to the body and keep the page's
 tokens, since nothing tells them otherwise.

package/dist/chip/index.js

@@ -51,6 +51,21 @@ function chipGlyph(state, icon, selectable = true) {
 function chipLabel(children) {
 	return /* @__PURE__ */ jsx(ChipLabel, { children });
 }
+/**
+* What a chip draws after its label: its trailing icon, in the 18dp slot the
+* leading one takes, trimming the chip's padding at its own end instead. It
+* keeps the chip's content colour, which is the page's trailing icon role in
+* every state, and it stays while the chip is selected, since the check
+* takes the leading slot alone. Nothing at all for a chip with none. Beside
+* `chipGlyph` so the two slots are drawn from one box.
+*/
+function chipTrailingIcon(icon) {
+	if (icon === void 0 || icon === null) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props(chipStyles.glyph, chipStyles.trailing),
+		children: icon
+	});
+}
 const CONTAINERS = {
 	elevated: {
 		disabled: chipStyles.elevatedDisabled,
@@ -85,13 +100,18 @@ const CONTAINERS = {
 *
 * `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. `inert` marks a chip a press does nothing to, which draws the arrow
-* rather than the pointer.
+* role and whether a flat selected chip lifts under a hovering pointer: a
+* filter chip does and an input chip, a group's removable one, does not. A
+* hover's lift gives way while the chip is pressed, since a mouse press does
+* not end the hover.
+* `inert` marks a chip a press does nothing to, which draws the arrow rather
+* than the pointer.
 */
 function chipPropsFor(state, { elevated = false, inert = false, kind = "filter" } = {}) {
 	const roles = CONTAINERS[containerOf(state.isSelected, elevated)];
 	const raised = elevated && !state.isDisabled;
-	return props(chipStyles.base, inert && chipStyles.inert, chipStyles.target, 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);
+	const lifted = state.isHovered && !state.isPressed;
+	return props(chipStyles.base, inert && chipStyles.inert, chipStyles.target, 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 && lifted && chipStyles.raisedHovered, kind === "filter" && !elevated && state.isSelected && lifted && chipStyles.selectedHovered, 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
@@ -108,6 +128,6 @@ function containerOf(isSelected, elevated) {
 	return elevated ? "elevated" : "unselected";
 }
 //#endregion
-export { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName };
+export { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName, chipTrailingIcon };
 
 //# sourceMappingURL=index.js.map

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","focus","ChipLabel","chipLayers","chipStyles","chipGlyph","state","isDisabled","isSelected","icon","selectable","hasIcon","undefined","props","glyph","glyphOpening","glyphFolded","glyphSvg","chipLabel","children","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","inert","kind","roles","containerOf","raised","base","target","ring","assist","raisedHovered","chipRemoveClassName","remove","removeHovered","removePressed","removeDisabled","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 { ChipLabel } from './label';\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 for an unselected chip with no icon, a slot folded\n * to nothing that opens when it is selected. A chip that can never be selected\n * passes `selectable` as false and draws nothing there. Returns a node rather\n * than letting the type be inferred, since `ReactNode` is a union that\n * 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, and the slot is kept mounted while folded so that growth has a width\n * to transition from; see the header of `./styles`.\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, selectable = true): ReactNode {\n  const hasIcon = icon !== undefined && icon !== null;\n  if (!hasIcon && (selectable || state.isSelected)) {\n    return <span {...stylex.props(chipStyles.glyph, chipStyles.glyphOpening, !state.isSelected && chipStyles.glyphFolded)}>\n        <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n      </span>;\n  }\n  if (state.isSelected) {\n    return <span {...stylex.props(chipStyles.glyph)}>\n        <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n      </span>;\n  }\n  if (!hasIcon) {\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 * A label cut short shows its full text in the browser's tooltip on hover —\n * see `useClippedTitle`. Shared for the reason `chipGlyph` is, by all three\n * components that draw the pill.\n */\nfunction chipLabel(children: ReactNode): ReactNode {\n  return <ChipLabel>{children}</ChipLabel>;\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. `inert` marks a chip a press does nothing to, which draws the arrow\n * rather than the pointer.\n */\nfunction chipPropsFor(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}, {\n  elevated = false,\n  inert = false,\n  kind = 'filter'\n}: {\n  elevated?: boolean;\n  inert?: 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, inert && chipStyles.inert, chipStyles.target, 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` — and a disabled chip's close target\n * takes the chip's cursor. A function, which React Aria's `className` takes\n * alongside a string.\n */\nfunction chipRemoveClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n}) {\n  return stylex.props(chipStyles.remove, state.isHovered && chipLayers.removeHovered, state.isPressed && chipLayers.removePressed, state.isDisabled && chipStyles.removeDisabled).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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAASO,UAAUC,OAGhBG,MAAkBC,aAAa,MAAiB;CACjD,MAAMC,UAAUF,SAASG,KAAAA,KAAaH,SAAS;CAC/C,IAAI,CAACE,YAAYD,cAAcJ,MAAME,aACnC,OAAO,oBAAC,QAAD;EAAM,GAAIT,MAAaK,WAAWU,OAAOV,WAAWW,cAAc,CAACT,MAAME,cAAcJ,WAAWY,WAAW;EAChH,UAAA,oBAAC,YAAD,EAAY,GAAIjB,MAAaK,WAAWa,QAAQ,EAAE,CAAA;CAC9C,CAAA;CAEV,IAAIX,MAAME,YACR,OAAO,oBAAC,QAAD;EAAM,GAAIT,MAAaK,WAAWU,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIf,MAAaK,WAAWa,QAAQ,EAAE,CAAA;CAC9C,CAAA;CAEV,IAAI,CAACN,SACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIZ,MAAaK,WAAWU,OAAO,CAACR,MAAMC,cAAcH,WAAWK,IAAI;EAC/EA,UAAAA;CACG,CAAA;AACV;;;;;;;;AASA,SAASS,UAAUC,UAAgC;CACjD,OAAO,oBAAC,WAAD,EAAYA,SAAoB,CAAA;AACzC;AAKA,MAAMC,aAAa;CACjBC,UAAU;EACRC,UAAUlB,WAAWmB;EACrBC,SAASrB,WAAWsB;EACpBC,SAASvB,WAAWwB;EACpBC,SAASzB,WAAW0B;CACtB;CACAC,UAAU;EACRR,UAAUlB,WAAW2B;EACrBP,SAASrB,WAAW6B;EACpBN,SAASvB,WAAW8B;EACpBL,SAASzB,WAAW+B;CACtB;CACAC,YAAY;EACVb,UAAUlB,WAAWgC;EACrBZ,SAASrB,WAAWkC;EACpBX,SAASvB,WAAWmC;EACpBV,SAASzB,WAAWoC;CACtB;AACF;;;;;;;;;;;;;;;;;;AAsBA,SAASE,aAAanC,OAMnB,EACDe,WAAW,OACXwB,QAAQ,OACRC,OAAO,aAKL,CAAC,GAAG;CACN,MAAMC,QAAQ3B,WAAW4B,YAAY1C,MAAME,YAAYa,QAAQ;CAC/D,MAAM4B,SAAS5B,YAAY,CAACf,MAAMC;CAClC,OAAOR,MAAaK,WAAW8C,MAAML,SAASzC,WAAWyC,OAAOzC,WAAW+C,QAAQlD,MAAMmD,MAAM9C,MAAME,aAAaJ,WAAW0B,WAAW1B,WAAW+B,YAAYd,YAAY,CAACf,MAAME,cAAcJ,WAAWiB,UAAUyB,SAAS,YAAY1C,WAAWiD,QAAQJ,UAAU7C,WAAW6C,QAAQ3C,MAAMqC,aAAaI,MAAMrB,SAASuB,UAAU3C,MAAMqC,aAAavC,WAAWkD,eAAehD,MAAMoC,kBAAkBK,MAAMvB,SAASlB,MAAMsC,aAAaG,MAAMnB,SAAStB,MAAMC,cAAcH,WAAWkB,UAAUhB,MAAMC,cAAcwC,MAAMzB,QAAQ;AACzgB;;;;;;;;AASA,SAASiC,oBAAoBjD,OAI1B;CACD,OAAOP,MAAaK,WAAWoD,QAAQlD,MAAMqC,aAAaxC,WAAWsD,eAAenD,MAAMsC,aAAazC,WAAWuD,eAAepD,MAAMC,cAAcH,WAAWuD,cAAc,CAAC,CAACC,aAAa;AAC/L;AAIA,SAASZ,YAAYxC,YAAqBa,UAAmB;CAC3D,IAAIb,YACF,OAAO;CAET,OAAOa,WAAW,aAAa;AACjC"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","focus","ChipLabel","chipLayers","chipStyles","chipGlyph","state","isDisabled","isSelected","icon","selectable","hasIcon","undefined","props","glyph","glyphOpening","glyphFolded","glyphSvg","chipLabel","children","chipTrailingIcon","trailing","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","inert","kind","roles","containerOf","raised","lifted","base","target","ring","assist","raisedHovered","chipRemoveClassName","remove","removeHovered","removePressed","removeDisabled","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 { ChipLabel } from './label';\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 for an unselected chip with no icon, a slot folded\n * to nothing that opens when it is selected. A chip that can never be selected\n * passes `selectable` as false and draws nothing there. Returns a node rather\n * than letting the type be inferred, since `ReactNode` is a union that\n * 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, and the slot is kept mounted while folded so that growth has a width\n * to transition from; see the header of `./styles`.\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, selectable = true): ReactNode {\n  const hasIcon = icon !== undefined && icon !== null;\n  if (!hasIcon && (selectable || state.isSelected)) {\n    return <span {...stylex.props(chipStyles.glyph, chipStyles.glyphOpening, !state.isSelected && chipStyles.glyphFolded)}>\n        <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n      </span>;\n  }\n  if (state.isSelected) {\n    return <span {...stylex.props(chipStyles.glyph)}>\n        <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n      </span>;\n  }\n  if (!hasIcon) {\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 * A label cut short shows its full text in the browser's tooltip on hover —\n * see `useClippedTitle`. Shared for the reason `chipGlyph` is, by all three\n * components that draw the pill.\n */\nfunction chipLabel(children: ReactNode): ReactNode {\n  return <ChipLabel>{children}</ChipLabel>;\n}\n\n/**\n * What a chip draws after its label: its trailing icon, in the 18dp slot the\n * leading one takes, trimming the chip's padding at its own end instead. It\n * keeps the chip's content colour, which is the page's trailing icon role in\n * every state, and it stays while the chip is selected, since the check\n * takes the leading slot alone. Nothing at all for a chip with none. Beside\n * `chipGlyph` so the two slots are drawn from one box.\n */\nfunction chipTrailingIcon(icon?: ReactNode): ReactNode {\n  if (icon === undefined || icon === null) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph, chipStyles.trailing)}>{icon}</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' | 'input' | '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 and whether a flat selected chip lifts under a hovering pointer: a\n * filter chip does and an input chip, a group's removable one, does not. A\n * hover's lift gives way while the chip is pressed, since a mouse press does\n * not end the hover.\n * `inert` marks a chip a press does nothing to, which draws the arrow rather\n * than the pointer.\n */\nfunction chipPropsFor(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}, {\n  elevated = false,\n  inert = false,\n  kind = 'filter'\n}: {\n  elevated?: boolean;\n  inert?: boolean;\n  kind?: ChipKind;\n} = {}) {\n  const roles = CONTAINERS[containerOf(state.isSelected, elevated)];\n  const raised = elevated && !state.isDisabled;\n  const lifted = state.isHovered && !state.isPressed;\n  return stylex.props(chipStyles.base, inert && chipStyles.inert, chipStyles.target, 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 && lifted && chipStyles.raisedHovered, kind === 'filter' && !elevated && state.isSelected && lifted && chipStyles.selectedHovered, 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` — and a disabled chip's close target\n * takes the chip's cursor. A function, which React Aria's `className` takes\n * alongside a string.\n */\nfunction chipRemoveClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n}) {\n  return stylex.props(chipStyles.remove, state.isHovered && chipLayers.removeHovered, state.isPressed && chipLayers.removePressed, state.isDisabled && chipStyles.removeDisabled).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, chipTrailingIcon };"],"mappings":"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"}

package/dist/chip/styles.js

@@ -25,17 +25,17 @@ const chipStyles = {
 		k8WAf4: "xt970qd",
 		kg3NbH: "x790zyz",
 		kIyJzY: "x1qno0dh",
-		k1ekBW: "x1eaenvl",
+		k1ekBW: "xu8237s",
 		kAMwcw: "xpc4ca7",
 		$$css: true
 	},
 	disabled: {
-		kMwMTN: "x1xj74d8 x1bhcspo",
+		kMwMTN: "x1gpw424 x1bhcspo",
 		kkrTdU: "x1h6gzvc",
 		$$css: true
 	},
 	disabledSelected: {
-		kWkggS: "xepofeg",
+		kWkggS: "x19v6zzp",
 		$$css: true
 	},
 	disabledUnselected: {
@@ -49,7 +49,7 @@ const chipStyles = {
 		$$css: true
 	},
 	elevatedDisabled: {
-		kWkggS: "xepofeg",
+		kWkggS: "x19v6zzp",
 		kVAM5u: "x9r1u3d",
 		kGVxlE: "x1gnnqk1",
 		$$css: true
@@ -103,7 +103,6 @@ const chipStyles = {
 	},
 	raised: {
 		kGVxlE: "x19efjv6",
-		k1ekBW: "xu8237s",
 		$$css: true
 	},
 	raisedHovered: {
@@ -150,6 +149,10 @@ const chipStyles = {
 		kMwMTN: "x1sawysd",
 		$$css: true
 	},
+	selectedHovered: {
+		kGVxlE: "x19efjv6",
+		$$css: true
+	},
 	surfaceCorners: {
 		kaIpWk: "x5a2xki",
 		kB7OPa: "x9f619",
@@ -164,6 +167,11 @@ const chipStyles = {
 		kVAEAm: "x1n2onr6",
 		$$css: true
 	},
+	trailing: {
+		k71WvV: "x1kfc2zf",
+		keTefX: "x1lziwak",
+		$$css: true
+	},
 	unselected: {
 		kWkggS: "xjbqb8w",
 		kVAM5u: "x133yhug",

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","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","glyphFolded","k71WvV","kSiTet","glyphOpening","kVQacm","glyphSvg","icon","inert","label","kg5iWk","khDVqt","raised","raisedHovered","remove","kgeoSG","kFcpXp","kEoFBp","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kVAEAm","removeDisabled","removeGlyph","selected","surfaceCorners","target","kGOzcv","kpsdNU","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// **The widening is animated rather than taken in one frame.** A chip with\n// no icon keeps its slot mounted while unselected, folded to nothing, and\n// selecting it opens the slot over the chip's own short duration while the\n// check fades in, so the chips after it in a wrapped row glide rather than\n// jump 18dp. Reduced motion takes the change at once, as it does the\n// colours. A chip that can never be selected, an assist or suggestion chip\n// or one in a group that does not select, has no slot to open.\n//\n// **The press ripple takes the chip's corner from here** wherever the chip\n// is a ChipGroup's. The ripple clips itself to its host's corner by\n// inheriting it, and React Aria puts a cell between a group's chip and its\n// content, so what the ripple would inherit is the cell's square corner.\n// `surfaceCorners` restates the chip's own corner on a box the ripple sits\n// in, less the 1px border every chip keeps, since the ripple fills the\n// inside of that border.\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';\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 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 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\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  glyphFolded: {\n    kzqmXN: \"xnalus7\",\n    k71WvV: \"x1kfc2zf\",\n    keTefX: \"x1lziwak\",\n    kSiTet: \"xg01cxk\",\n    $$css: true\n  },\n  glyphOpening: {\n    k6CgDc: \"x12w9bfk\",\n    kVQacm: \"xb3r6kr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x17vvy08\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  icon: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  inert: {\n    kkrTdU: \"xt0e3qv\",\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  removeDisabled: {\n    kkrTdU: \"x1h6gzvc\",\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  surfaceCorners: {\n    kaIpWk: \"x5a2xki\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  target: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1xkszu9\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kVAEAm: \"x1n2onr6\",\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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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","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","glyphFolded","k71WvV","kSiTet","glyphOpening","kVQacm","glyphSvg","icon","inert","label","kg5iWk","khDVqt","raised","raisedHovered","remove","kgeoSG","kFcpXp","kEoFBp","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kVAEAm","removeDisabled","removeGlyph","selected","selectedHovered","surfaceCorners","target","kGOzcv","kpsdNU","trailing","unselected","chipLayers","elevatedFocused","elevatedHovered","elevatedPressed","removeHovered","removePressed","selectedFocused","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 and\n// back to 1 while pressed, since a mouse press does not end the hover. 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 flat chip lies on the page, apart from one state.** A selected filter\n// chip under a hovering pointer rises to elevation 1, and comes back down\n// while pressed, as the page's filter chip tokens give it; every other flat\n// state, and every state of an input chip, stays at 0.\n//\n// **A disabled chip is translucent**, its content at 38% and its container at\n// 12% of on surface over whatever is behind it, as the page gives them,\n// rather than mixed into the surface. Mixed into the surface, a disabled chip\n// on a coloured container drew an opaque pale patch with grey text on it.\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// **A filter chip can carry an icon after its label as well**, the page's\n// trailing icon, which is what draws its dropdown filter chip: an arrow\n// saying the chip opens a menu. It takes the same 18dp slot at the other\n// end, and the chip's content role rather than the primary one the leading\n// icon takes — on surface variant, then on secondary container once\n// selected, then the disabled 38% — so it is drawn in the chip's own colour\n// rather than a role of its own. The check never displaces it.\n//\n// **The widening is animated rather than taken in one frame.** A chip with\n// no icon keeps its slot mounted while unselected, folded to nothing, and\n// selecting it opens the slot over the chip's own short duration while the\n// check fades in, so the chips after it in a wrapped row glide rather than\n// jump 18dp. Reduced motion takes the change at once, as it does the\n// colours. A chip that can never be selected, an assist or suggestion chip\n// or one in a group that does not select, has no slot to open.\n//\n// **The press ripple takes the chip's corner from here** wherever the chip\n// is a ChipGroup's. The ripple clips itself to its host's corner by\n// inheriting it, and React Aria puts a cell between a group's chip and its\n// content, so what the ripple would inherit is the cell's square corner.\n// `surfaceCorners` restates the chip's own corner on a box the ripple sits\n// in, less the 1px border every chip keeps, since the ripple fills the\n// inside of that border.\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';\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 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: \"xu8237s\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"x19v6zzp\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"x19v6zzp\",\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  glyphFolded: {\n    kzqmXN: \"xnalus7\",\n    k71WvV: \"x1kfc2zf\",\n    keTefX: \"x1lziwak\",\n    kSiTet: \"xg01cxk\",\n    $$css: true\n  },\n  glyphOpening: {\n    k6CgDc: \"x12w9bfk\",\n    kVQacm: \"xb3r6kr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x17vvy08\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  icon: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  inert: {\n    kkrTdU: \"xt0e3qv\",\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    $$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  removeDisabled: {\n    kkrTdU: \"x1h6gzvc\",\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  selectedHovered: {\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  surfaceCorners: {\n    kaIpWk: \"x5a2xki\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  target: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1xkszu9\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  trailing: {\n    k71WvV: \"x1kfc2zf\",\n    keTefX: \"x1lziwak\",\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/components/app-bar/index.d.ts

@@ -4,7 +4,11 @@ import { ReactNode } from "react";
 type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   /**
    * Which of Material Design's alignments the text takes. `center` is the
-   * configuration that replaced the old center-aligned variant.
+   * configuration that replaced the old center-aligned variant, and centres
+   * the text on the bar rather than between the slots, so a bar with a
+   * leading icon and no actions still has its headline in the middle. The
+   * text moves off the middle only as far as a slot wider than the other
+   * needs, rather than running under it.
    * @default 'start'
    */
   align?: 'center' | 'start';
@@ -77,7 +81,11 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   /** The page's title. Wraps rather than truncating, and grows the bar with it. */
   headline?: ReactNode;
-  /** Usually a back or menu icon button. Sits before the text. */
+  /**
+   * Usually a back or menu icon button. Sits before the text, and a standard
+   * icon button here draws its icon in on surface, the colour the page gives
+   * a bar's leading icon, rather than its own on surface variant.
+   */
   leading?: ReactNode;
   /**
    * Holds the bar at the top of its scroll container while the content
@@ -116,6 +124,10 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
  * Material Design's app bar: the container at the top of a page carrying its
  * title, one or two actions, and the way back out.
  *
+ * ```tsx
+ * <AppBar headline="Headline" leading={back} size="md" trailing={actions} />
+ * ```
+ *
  * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;
  * `md` and `lg` are the flexible bars, which give the headline a larger
  * type role in a row of its own under the slots, and grow to fit a subtitle

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

@@ -51,7 +51,6 @@ const styles = {
 		kB7OPa: "x9f619",
 		k1xSpc: "xrvj5dj",
 		kC13JO: "x97ohe",
-		kumcoG: "xx9t13c",
 		kzqmXN: "xh8yej3",
 		kUOVxO: "xvueqy4",
 		$$css: true
@@ -152,11 +151,16 @@ const rowStyles = {
 			"--x-paddingInlineStart": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start)
 		}
 	],
-	tracks: (gridTemplateRows) => [{
+	tracks: (gridTemplateColumns, gridTemplateRows) => [{
+		kumcoG: gridTemplateColumns != null ? "xqketvx" : gridTemplateColumns,
 		k9llMU: gridTemplateRows != null ? "x1xxtoay" : gridTemplateRows,
 		$$css: true
-	}, { "--x-gridTemplateRows": gridTemplateRows != null ? gridTemplateRows : void 0 }]
+	}, {
+		"--x-gridTemplateColumns": gridTemplateColumns != null ? gridTemplateColumns : void 0,
+		"--x-gridTemplateRows": gridTemplateRows != null ? gridTemplateRows : void 0
+	}]
 };
+const START_COLUMNS = "auto minmax(0, 1fr) auto";
 const _temp3 = {
 	keoZOQ: "x1vhfslr",
 	"$$css": true
@@ -178,6 +182,10 @@ const LINES = [":scope > :is(h1, h2, h3, h4, h5, h6)", ":scope > p"];
 * Material Design's app bar: the container at the top of a page carrying its
 * title, one or two actions, and the way back out.
 *
+* ```tsx
+* <AppBar headline="Headline" leading={back} size="md" trailing={actions} />
+* ```
+*
 * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;
 * `md` and `lg` are the flexible bars, which give the headline a larger
 * type role in a row of its own under the slots, and grow to fit a subtitle
@@ -205,14 +213,18 @@ function AppBar(t0) {
 	const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;
 	const hasLeading = hasContent(leading);
 	const hasTrailing = hasContent(trailing);
+	const centred = align === "center";
+	const hasSlot = hasLeading || hasTrailing;
+	const padsForStart = centred ? hasSlot : hasLeading;
+	const padsForEnd = centred ? hasSlot : hasTrailing;
 	const textRef = useCollapseMotion(collapse, align);
 	const t9 = "header";
-	const t10 = props(styles.row, rowStyles.root(edgePadding(contentInset, hasLeading), edgePadding(contentInset, hasTrailing), contentMaxInlineSize), rowStyles.tracks(below ? `minmax(${COLLAPSED_HEIGHT}, auto) 1fr` : `minmax(${COLLAPSED_HEIGHT}, auto)`), heightStyles.root(height), below && twoRows[size]);
+	const t10 = props(styles.row, rowStyles.root(edgePadding(contentInset, padsForStart), edgePadding(contentInset, padsForEnd), contentMaxInlineSize), rowStyles.tracks(centred ? centredColumns(contentInset, hasLeading, hasTrailing) : START_COLUMNS, below ? `minmax(${COLLAPSED_HEIGHT}, auto) 1fr` : `minmax(${COLLAPSED_HEIGHT}, auto)`), heightStyles.root(height), below && twoRows[size]);
 	const t11 = !hasLeading ? null : /* @__PURE__ */ jsx("div", {
-		className: "x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x1kxrqrs x15ir4sr",
+		className: "x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x155k8fu x139gbkf x1kxrqrs x1lqcxt8 x15ir4sr",
 		children: leading
 	});
-	const t12 = props(styles.text, below && styles.textBelow, below && textStyles.inset(glyphRoom(contentInset, hasLeading), glyphRoom(contentInset, hasTrailing)), below && textStyles.reach(`calc(-1 * ${UNDER_TARGETS})`), align === "center" && styles.textCenter);
+	const t12 = props(styles.text, below && styles.textBelow, below && textStyles.inset(glyphRoom(contentInset, padsForStart), glyphRoom(contentInset, padsForEnd)), below && textStyles.reach(`calc(-1 * ${UNDER_TARGETS})`), align === "center" && styles.textCenter);
 	let t13;
 	if ($[0] !== collapse || $[1] !== headingLevel || $[2] !== headline || $[3] !== size) {
 		t13 = !hasContent(headline) ? null : /* @__PURE__ */ jsx(Text, {
@@ -255,7 +267,7 @@ function AppBar(t0) {
 	let t16;
 	if ($[14] !== hasTrailing || $[15] !== trailing) {
 		t16 = !hasTrailing ? null : /* @__PURE__ */ jsx("div", {
-			className: "x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x1txd71x x6aqprb",
+			className: "x6s0dn4 xamitd3 x9f619 x78zum5 x1r8zjiw x1let9r4 x1w5n3ug x1txd71x x1qab1bc x6aqprb",
 			children: trailing
 		});
 		$[14] = hasTrailing;
@@ -305,6 +317,23 @@ function AppBar(t0) {
 	return useRender(t20);
 }
 /**
+* A centred bar's columns: the text in the middle at its own width, and a
+* column either side sharing what it leaves equally, so the text is centred
+* on the row. A side column is never narrower than its slot, which is what
+* moves the text off the middle when a slot is wider than the other side's
+* share, and never as far as overlapping it.
+*
+* The row pads both edges for a slot, so the two sides match, and an edge
+* with no slot puts back what that padding held off for a glyph as its
+* column's least width. A headline long enough to reach that edge stops on
+* the inset, as it does at the start.
+*/
+function centredColumns(contentInset, hasLeading, hasTrailing) {
+	const room = glyphRoom(contentInset, hasLeading || hasTrailing);
+	const side = (hasSlot) => hasSlot ? "minmax(auto, 1fr)" : `minmax(${room}, 1fr)`;
+	return `${side(hasLeading)} auto ${side(hasTrailing)}`;
+}
+/**
 * Where an animation still under way has the bar and the text drawn: the
 * height it holds the bar at, and each line where its transform has taken it
 * and at the size its scale has reached. A line scales about the point it