@kanso-labs/kanso-ui 0.36.0 → 0.38.0

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":";AAwEA,MAAMU,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRC,OAAO;CACT;CACAC,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;EACRvB,OAAO;CACT;CACAwB,UAAU;EACRzB,QAAQ;EACRU,QAAQ;EACRT,OAAO;CACT;CACAyB,kBAAkB;EAChBC,QAAQ;EACR1B,OAAO;CACT;CACA2B,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACR5B,OAAO;CACT;CACA6B,UAAU;EACRH,QAAQ;EACRE,QAAQ;EACR5B,OAAO;CACT;CACA8B,kBAAkB;EAChBJ,QAAQ;EACRE,QAAQ;EACRG,QAAQ;EACR/B,OAAO;CACT;CACAgC,OAAO;EACL7B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRoB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnC,OAAO;CACT;CACAoC,UAAU;EACRhC,QAAQ;EACR6B,QAAQ;EACRjC,OAAO;CACT;CACAqC,MAAM;EACJtC,QAAQ;EACRC,OAAO;CACT;CACAsC,OAAO;EACL9B,QAAQ;EACR+B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzC,OAAO;CACT;CACA0C,QAAQ;EACNX,QAAQ;EACRT,QAAQ;EACRtB,OAAO;CACT;CACA2C,eAAe;EACbZ,QAAQ;EACR/B,OAAO;CACT;CACA4C,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR5C,QAAQ;EACRuB,QAAQ;EACRtB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPsB,QAAQ;EACRC,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRtD,OAAO;CACT;CACAuD,aAAa;EACXnD,QAAQ;EACR6B,QAAQ;EACRjC,OAAO;CACT;CACAwD,UAAU;EACR9B,QAAQ;EACRE,QAAQ;EACR7B,QAAQ;EACRC,OAAO;CACT;CACAyD,QAAQ;EACNZ,QAAQ;EACRa,QAAQ;EACRC,QAAQ;EACRZ,QAAQ;EACRO,QAAQ;EACRtD,OAAO;CACT;CACA4D,eAAe;EACbF,QAAQ;EACR1D,OAAO;CACT;CACA6D,YAAY;EACVnC,QAAQ;EACRE,QAAQ;EACR7B,QAAQ;EACRC,OAAO;CACT;AACF;AAUA,MAAM8D,aAAa;CACjBC,iBAAiB;EACfrC,QAAQ;EACR1B,OAAO;CACT;CACAgE,iBAAiB;EACftC,QAAQ;EACR1B,OAAO;CACT;CACAiE,iBAAiB;EACfvC,QAAQ;EACR1B,OAAO;CACT;CACAkE,eAAe;EACbxC,QAAQ;EACR1B,OAAO;CACT;CACAmE,eAAe;EACbzC,QAAQ;EACR1B,OAAO;CACT;CACAoE,iBAAiB;EACf1C,QAAQ;EACR1B,OAAO;CACT;CACAqE,iBAAiB;EACf3C,QAAQ;EACR1B,OAAO;CACT;CACAsE,iBAAiB;EACf5C,QAAQ;EACR1B,OAAO;CACT;CACAuE,mBAAmB;EACjB7C,QAAQ;EACR1B,OAAO;CACT;CACAwE,mBAAmB;EACjB9C,QAAQ;EACR1B,OAAO;CACT;CACAyE,mBAAmB;EACjB/C,QAAQ;EACR1B,OAAO;CACT;AACF"}

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

package/dist/collection/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","typography","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","state","props","base","list","twoLine","threeLine","selectedList","hovered","focusVisible","pressed","disabled","stylex.props"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n};\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.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);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, rowItemStyles };"],"mappings":";;;AAuBA,MAAMO,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,SAAS;EACPC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,SAAS;EACPpB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;AAiCA,SAASsB,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQC,UAA+B1C,MAAaC,UAAU2C,MAAM3C,UAAU4C,MAAMP,OAAOE,UAAU,KAAKvC,UAAU6C,SAASN,UAAU,KAAKvC,UAAU8C,WAAWL,MAAMR,cAAcjC,UAAU+C,cAAcN,MAAMV,aAAa/B,UAAUgD,SAASP,MAAMX,kBAAkB9B,UAAUiD,cAAcR,MAAMT,aAAahC,UAAUkD,SAAST,MAAMZ,cAAc7B,UAAUmD,QAAQ;AACjX"}
+{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","stateLayerOpacity","typography","FORCED_COLORS","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","dropTarget","kWkggS","kjBf7l","kInvED","kMeerF","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isDragging","isDropTarget","isFocusVisible","isHovered","isPressed","isSelected","containerClasses","state","className","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","props","base","list","twoLine","threeLine","dragging","selectedList","hovered","focusVisible","pressed","disabled","stylex.props"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\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 collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  dropTarget: {\n    kWkggS: \"x659ado\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  /** Reported only where the collection drags; see `dragging` in `src/row`. */\n  isDragging?: boolean;\n  /** Reported only where the collection takes drops onto its items. */\n  isDropTarget?: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n};\n\n/**\n * A collection's own box, as the function React Aria's `className` prop\n * wants: the container, and the drop target while a drop would land on the\n * collection as a whole. List, ListBox and Tree each draw it.\n */\nfunction containerClasses(state: {\n  isDropTarget: boolean;\n}) {\n  return {\n    0: {\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    },\n    1: {\n      className: \"x9f619 x78zum5 xdt5ytf x1cmllll x659ado xrgy624 x1x84bn5 x2ssjo2 xaatb59 x1de99jn\"\n    }\n  }[!!state.isDropTarget << 0];\n}\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.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);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, containerClasses, rowItemStyles };"],"mappings":";;;AA4BA,MAAMS,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRO,QAAQ;EACRL,OAAO;CACT;CACAM,QAAQ;EACNX,QAAQ;EACRY,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,SAAS;EACPC,QAAQ;EACRtB,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,SAAS;EACPzB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;AAuBA,SAAS6B,iBAAiBC,OAEvB;CACD,OAAO;EACL,GAAG,EACDC,WAAW,2CACb;EACA,GAAG,EACDA,WAAW,oFACb;CACF,EAAE,CAAC,CAACD,MAAMN,gBAAgB;AAC5B;;;;;;;;;;;;;;;;;;;;AAqBA,SAASQ,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQR,UAA+B7C,MAAaC,UAAUsD,MAAMtD,UAAUuD,MAAMN,OAAOE,UAAU,KAAKnD,UAAUwD,SAASL,UAAU,KAAKnD,UAAUyD,WAAWb,MAAMP,eAAe,QAAQrC,UAAU0D,UAAUd,MAAMF,cAAc1C,UAAU2D,cAAcf,MAAMJ,aAAaxC,UAAU4D,SAAShB,MAAML,kBAAkBvC,UAAU6D,cAAcjB,MAAMH,aAAazC,UAAU8D,SAASlB,MAAMN,iBAAiB,QAAQtC,UAAUe,YAAY6B,MAAMR,cAAcpC,UAAU+D,QAAQ;AACvd"}

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

@@ -28,6 +28,9 @@ type BadgeProps = RenderComponentProps<'span'> & {
  * </IconButton>
  * ```
  *
+ * Given no children, the mark stands alone in the line, as a tab draws it
+ * after its label.
+ *
  * The call site's `className` and `style` land on the element wrapping what
  * the badge is drawn on.
  */

package/dist/components/badge/index.js

@@ -19,6 +19,9 @@ import { useLocale } from "react-aria-components";
 * </IconButton>
 * ```
 *
+* Given no children, the mark stands alone in the line, as a tab draws it
+* after its label.
+*
 * The call site's `className` and `style` land on the element wrapping what
 * the badge is drawn on.
 */
@@ -43,11 +46,13 @@ function Badge(t0) {
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = {
 			0: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft" },
-			1: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x" }
+			2: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x" },
+			1: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk" },
+			3: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk" }
 		};
 		$[4] = t5;
 	} else t5 = $[4];
-	const t6 = t5[!!(label === void 0) << 0];
+	const t6 = t5[!!(label === void 0) << 1 | !!(children === void 0 || children === null) << 0];
 	let t7;
 	if ($[5] !== label || $[6] !== t6) {
 		t7 = /* @__PURE__ */ jsx("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","FORCED_COLORS","BadgeProps","count","max","Badge","t0","$","children","t1","render","props","undefined","locale","t2","numbers","Intl","NumberFormat","format","label","t3","t4","className","t5","Symbol","for","0","1","t6","t7","t8","t9","t10","defaultTagName","_c"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The badges page's badge: a mark on the corner of an icon that flags\n// something new there, either as the 6dp small badge or as the 16dp large\n// badge holding a count. Both are the error pair — the error role, with the\n// count in on error — on a full corner, and the count is label small, capped\n// at four characters with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that element's box, which is what the page measures from. The\n// small badge fills the icon's top trailing 6dp square. The large badge's\n// bottom leading corner sits 14dp down and 12dp in from the icon's top\n// trailing corner, so it stands 2dp above the icon and grows toward the end\n// as its count lengthens, to the page's 34dp at \"999+\". Both are logical\n// insets, so the mark stays on the trailing corner under right-to-left.\n//\n// The mark is hidden from assistive technology. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts — \"Notifications, 3 new\" — and\n// the stories show it there.\n//\n// Under forced colours the error fill is painted over in the mode's\n// background, which left the small badge as nothing at all. It takes a 1px\n// border there instead, which the mode keeps and paints in its text colour.\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)';\ntype BadgeProps = RenderComponentProps<'span'> & {\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  count?: number;\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  max?: number;\n};\n\n/**\n * A badge on the corner of what it wraps, usually an icon: the small dot,\n * or with `count` the large badge holding a number. The mark is hidden from\n * assistive technology, so put what it says in the name of the control it\n * sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Notifications, 3 new\">\n *   <Badge count={3}>\n *     <BellIcon />\n *   </Badge>\n * </IconButton>\n * ```\n *\n * The call site's `className` and `style` land on the element wrapping what\n * the badge is drawn on.\n */\nfunction Badge({\n  children,\n  count,\n  max = 999,\n  render,\n  ...props\n}: BadgeProps) {\n  const {\n    locale\n  } = useLocale();\n  const numbers = new Intl.NumberFormat(locale);\n  const label = count === undefined ? undefined : count > max ? `${numbers.format(max)}+` : numbers.format(count);\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x3nfvp2 x1n2onr6\"\n      }, props),\n      children: <>\n          {children}\n          <span aria-hidden=\"true\" {...{\n          0: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft\"\n          },\n          1: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x\"\n          }\n        }[!!(label === undefined) << 0]}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsEA,SAAAe,MAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,EAAA;CAAe,MAAA,EAAAiB,UAAAL,OAAAC,KAAAK,IAAAC,QAAA,GAAAC,UAAAL;CAGb,MAAAF,MAAAK,OAAAG,KAAAA,IAAA,MAAAH;CAIA,MAAA,EAAAI,WAEIpB,UAAU;CAAE,IAAAqB;CAAA,IAAAP,EAAA,OAAAJ,SAAAI,EAAA,OAAAM,UAAAN,EAAA,OAAAH,KAAA;EAChB,MAAAW,UAAgB,IAAIC,KAAIC,aAAcJ,MAAM;EAC9BC,KAAAX,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCT,QAAQC,MAAR,GAAiBW,QAAOG,OAAQd,GAAG,EAAC,KAAMW,QAAOG,OAAQf,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;EAAAN,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAA/G,MAAAY,QAAcL;CAEI,MAAAM,KAAA;CAGX,MAAAC,KAAAzB,YAAY,EAAA0B,WACF,0BACb,GAAGX,KAAK;CAAC,IAAAY;CAAA,IAAAhB,EAAA,OAAAiB,OAAAC,IAAA,2BAAA,GAAA;EAGwBF,KAAA;GAAAG,GAC1B,EAAAJ,WACU,0MACb;GAACK,GACE,EAAAL,WACU,uGACb;EACF;EAACf,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAP8B,MAAAqB,KAAAL,GAO7B,CAAC,EAAEJ,UAAUP,KAAAA,MAAc;CAAE,IAAAiB;CAAA,IAAAtB,EAAA,OAAAY,SAAAZ,EAAA,OAAAqB,IAAA;EAP7BC,KAAA,oBAAA,QAAA;GAAkB,eAAA;GAAM,GAAKD;GAQ1BT,UAAAA;EACI,CAAA;EAAAZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAqB;EAAArB,EAAA,KAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,OAAAC,YAAAD,EAAA,OAAAsB,IAAA;EAXDC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLtB,UACDqB,EASO,EAAA,CAAA;EACNtB,EAAA,KAAAC;EAAAD,EAAA,KAAAsB;EAAAtB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,IAAAwB;CAAA,IAAAxB,EAAA,QAAAI,SAAAJ,EAAA,QAAAc,MAAAd,EAAA,QAAAuB,IAAA;EAjBAC,KAAA;GAAA,GACFpB;GAAK,GACLU;GAEMb,UACCsB;EAaZ;EAACvB,EAAA,MAAAI;EAAAJ,EAAA,MAAAc;EAAAd,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAG,UAAAH,EAAA,QAAAwB,IAAA;EApBcC,MAAA;GAAAC,gBACCb;GAAMT,OACfoB;GAkBNrB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,OAtBMZ,UAAUqC,GAsBhB;AAAC"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","FORCED_COLORS","BadgeProps","count","max","Badge","t0","$","children","t1","render","props","undefined","locale","t2","numbers","Intl","NumberFormat","format","label","t3","t4","className","t5","Symbol","for","0","2","1","3","t6","t7","t8","t9","t10","defaultTagName","_c"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The badges page's badge: a mark on the corner of an icon that flags\n// something new there, either as the 6dp small badge or as the 16dp large\n// badge holding a count. Both are the error pair — the error role, with the\n// count in on error — on a full corner, and the count is label small, capped\n// at four characters with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that element's box, which is what the page measures from. The\n// small badge fills the icon's top trailing 6dp square. The large badge's\n// bottom leading corner sits 14dp down and 12dp in from the icon's top\n// trailing corner, so it stands 2dp above the icon and grows toward the end\n// as its count lengthens, to the page's 34dp at \"999+\". Both are logical\n// insets, so the mark stays on the trailing corner under right-to-left.\n//\n// Given nothing to wrap, the badge is the mark alone, standing in the line\n// rather than over a corner. That is the form the tabs page draws after a\n// label with no icon above it.\n//\n// The mark is hidden from assistive technology. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts — \"Notifications, 3 new\" — and\n// the stories show it there.\n//\n// Under forced colours the error fill is painted over in the mode's\n// background, which left the small badge as nothing at all. It takes a 1px\n// border there instead, which the mode keeps and paints in its text colour.\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)';\ntype BadgeProps = RenderComponentProps<'span'> & {\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  count?: number;\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  max?: number;\n};\n\n/**\n * A badge on the corner of what it wraps, usually an icon: the small dot,\n * or with `count` the large badge holding a number. The mark is hidden from\n * assistive technology, so put what it says in the name of the control it\n * sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Notifications, 3 new\">\n *   <Badge count={3}>\n *     <BellIcon />\n *   </Badge>\n * </IconButton>\n * ```\n *\n * Given no children, the mark stands alone in the line, as a tab draws it\n * after its label.\n *\n * The call site's `className` and `style` land on the element wrapping what\n * the badge is drawn on.\n */\nfunction Badge({\n  children,\n  count,\n  max = 999,\n  render,\n  ...props\n}: BadgeProps) {\n  const {\n    locale\n  } = useLocale();\n  const numbers = new Intl.NumberFormat(locale);\n  const label = count === undefined ? undefined : count > max ? `${numbers.format(max)}+` : numbers.format(count);\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x3nfvp2 x1n2onr6\"\n      }, props),\n      children: <>\n          {children}\n          <span aria-hidden=\"true\" {...{\n          0: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft\"\n          },\n          2: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x\"\n          },\n          1: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk\"\n          },\n          3: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk\"\n          }\n        }[!!(label === undefined) << 1 | !!(children === undefined || children === null) << 0]}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,SAAAe,MAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,EAAA;CAAe,MAAA,EAAAiB,UAAAL,OAAAC,KAAAK,IAAAC,QAAA,GAAAC,UAAAL;CAGb,MAAAF,MAAAK,OAAAG,KAAAA,IAAA,MAAAH;CAIA,MAAA,EAAAI,WAEIpB,UAAU;CAAE,IAAAqB;CAAA,IAAAP,EAAA,OAAAJ,SAAAI,EAAA,OAAAM,UAAAN,EAAA,OAAAH,KAAA;EAChB,MAAAW,UAAgB,IAAIC,KAAIC,aAAcJ,MAAM;EAC9BC,KAAAX,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCT,QAAQC,MAAR,GAAiBW,QAAOG,OAAQd,GAAG,EAAC,KAAMW,QAAOG,OAAQf,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;EAAAN,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAA/G,MAAAY,QAAcL;CAEI,MAAAM,KAAA;CAGX,MAAAC,KAAAzB,YAAY,EAAA0B,WACF,0BACb,GAAGX,KAAK;CAAC,IAAAY;CAAA,IAAAhB,EAAA,OAAAiB,OAAAC,IAAA,2BAAA,GAAA;EAGwBF,KAAA;GAAAG,GAC1B,EAAAJ,WACU,0MACb;GAACK,GACE,EAAAL,WACU,uGACb;GAACM,GACE,EAAAN,WACU,0MACb;GAACO,GACE,EAAAP,WACU,uGACb;EACF;EAACf,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAb8B,MAAAuB,KAAAP,GAa7B,CAAC,EAAEJ,UAAUP,KAAAA,MAAc,IAAI,CAAC,EAAEJ,aAAaI,KAAAA,KAAaJ,aAAa,SAAS;CAAE,IAAAuB;CAAA,IAAAxB,EAAA,OAAAY,SAAAZ,EAAA,OAAAuB,IAAA;EAbpFC,KAAA,oBAAA,QAAA;GAAkB,eAAA;GAAM,GAAKD;GAc1BX,UAAAA;EACI,CAAA;EAAAZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAuB;EAAAvB,EAAA,KAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,OAAAC,YAAAD,EAAA,OAAAwB,IAAA;EAjBDC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLxB,UACDuB,EAeO,EAAA,CAAA;EACNxB,EAAA,KAAAC;EAAAD,EAAA,KAAAwB;EAAAxB,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAI,SAAAJ,EAAA,QAAAc,MAAAd,EAAA,QAAAyB,IAAA;EAvBAC,KAAA;GAAA,GACFtB;GAAK,GACLU;GAEMb,UACCwB;EAmBZ;EAACzB,EAAA,MAAAI;EAAAJ,EAAA,MAAAc;EAAAd,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAG,UAAAH,EAAA,QAAA0B,IAAA;EA1BcC,MAAA;GAAAC,gBACCf;GAAMT,OACfsB;GAwBNvB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,OA5BMZ,UAAUuC,GA4BhB;AAAC"}

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

@@ -101,7 +101,7 @@ type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
  * </Button>
  * ```
  */
-declare function Button$1({ children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape, size, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
+declare function Button$1({ children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape, size: ownSize, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
 //#endregion
 export { type ButtonDOMProps, type ButtonProps$1 as ButtonProps, type ButtonShape, type ButtonSize, type ButtonState, type ButtonVariant, Button$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,9 +1,14 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { spacing } from "../../tokens/design.tokens.stylex.js";
 import { focus } from "../../styles/focus.js";
 import { ButtonBase, ToggleButtonBase } from "../../button/index.js";
+import { ButtonGroupItemContext } from "../../button/context.js";
+import { groupPressHandlers } from "../../button/group.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ToggleGroupStateContext } from "react-aria-components";
 //#region src/components/button/index.tsx
 const styles = {
 	base: {
@@ -24,7 +29,7 @@ const styles = {
 		kVAEAm: "x1n2onr6",
 		kybGjl: "x1hl2dhg",
 		kIyJzY: "x1qno0dh x12w9bfk",
-		k1ekBW: "xro4s79",
+		k1ekBW: "x1hdt7lq",
 		kAMwcw: "x1seskgd",
 		$$css: true
 	},
@@ -233,6 +238,17 @@ const iconSizes = {
 		$$css: true
 	}
 };
+const PADDINGS = {
+	lg: spacing.xl,
+	md: spacing.lg,
+	xl: "48px",
+	xs: spacing.lg,
+	xxl: "64px"
+};
+const shifted = { padding: (value) => [{
+	kg3NbH: value != null ? "x30g6up" : value,
+	$$css: true
+}, { "--x-paddingInline": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(value) }] };
 const squareShapes = {
 	lg: {
 		kaIpWk: "xhpdng0",
@@ -451,114 +467,76 @@ const toggleContainers = {
 * </Button>
 * ```
 */
-function Button(t0) {
-	const $ = c(44);
-	let children;
-	let defaultSelected;
-	let href;
-	let icon;
-	let isPending;
-	let isSelected;
-	let onChange;
-	let pendingLabel;
-	let props$1;
-	let rel;
-	let t1;
-	let t2;
-	let t3;
-	let target;
-	if ($[0] !== t0) {
-		({children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape: t1, size: t2, target, variant: t3, ...props$1} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = defaultSelected;
-		$[3] = href;
-		$[4] = icon;
-		$[5] = isPending;
-		$[6] = isSelected;
-		$[7] = onChange;
-		$[8] = pendingLabel;
-		$[9] = props$1;
-		$[10] = rel;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = target;
-	} else {
-		children = $[1];
-		defaultSelected = $[2];
-		href = $[3];
-		icon = $[4];
-		isPending = $[5];
-		isSelected = $[6];
-		onChange = $[7];
-		pendingLabel = $[8];
-		props$1 = $[9];
-		rel = $[10];
-		t1 = $[11];
-		t2 = $[12];
-		t3 = $[13];
-		target = $[14];
-	}
+function Button$1(t0) {
+	const $ = c(33);
+	const { children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape: t1, size: ownSize, target, variant: t2, ...props$1 } = t0;
 	const shape = t1 === void 0 ? "round" : t1;
-	const size = t2 === void 0 ? "md" : t2;
-	const variant = t3 === void 0 ? "filled" : t3;
-	let t4;
-	if ($[15] !== children || $[16] !== icon || $[17] !== size) {
-		t4 = icon === void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	const variant = t2 === void 0 ? "filled" : t2;
+	const group = useContext(ButtonGroupItemContext);
+	const size = ownSize ?? group?.size ?? "md";
+	const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;
+	const press = groupPressHandlers(group, props$1.onPressStart, props$1.onPressEnd);
+	let t3;
+	if ($[0] !== children || $[1] !== icon || $[2] !== size) {
+		t3 = icon === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			...props(styles.icon, iconSizes[size]),
 			children: icon
 		}), children] });
-		$[15] = children;
-		$[16] = icon;
-		$[17] = size;
-		$[18] = t4;
-	} else t4 = $[18];
-	const content = t4;
-	if (variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0)) {
+		$[0] = children;
+		$[1] = icon;
+		$[2] = size;
+		$[3] = t3;
+	} else t3 = $[3];
+	const content = t3;
+	if (inSelectingGroup || variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0)) {
+		let t4;
+		if ($[4] !== group || $[5] !== shape || $[6] !== size || $[7] !== variant) {
+			t4 = variant === "text" ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group);
+			$[4] = group;
+			$[5] = shape;
+			$[6] = size;
+			$[7] = variant;
+			$[8] = t4;
+		} else t4 = $[8];
 		let t5;
-		if ($[19] !== shape || $[20] !== size || $[21] !== variant) {
-			t5 = toggleClasses(shape, size, variant);
-			$[19] = shape;
-			$[20] = size;
-			$[21] = variant;
-			$[22] = t5;
-		} else t5 = $[22];
-		let t6;
-		if ($[23] !== content || $[24] !== defaultSelected || $[25] !== isPending || $[26] !== isSelected || $[27] !== onChange || $[28] !== props$1 || $[29] !== t5) {
-			t6 = /* @__PURE__ */ jsx(ToggleButtonBase, {
+		if ($[9] !== content || $[10] !== defaultSelected || $[11] !== isPending || $[12] !== isSelected || $[13] !== onChange || $[14] !== press || $[15] !== props$1 || $[16] !== t4) {
+			t5 = /* @__PURE__ */ jsx(ToggleButtonBase, {
 				...props$1,
-				classes: t5,
+				...press,
+				classes: t4,
 				defaultSelected,
 				isPending,
 				isSelected,
 				onChange,
 				children: content
 			});
-			$[23] = content;
-			$[24] = defaultSelected;
-			$[25] = isPending;
-			$[26] = isSelected;
-			$[27] = onChange;
-			$[28] = props$1;
-			$[29] = t5;
-			$[30] = t6;
-		} else t6 = $[30];
-		return t6;
+			$[9] = content;
+			$[10] = defaultSelected;
+			$[11] = isPending;
+			$[12] = isSelected;
+			$[13] = onChange;
+			$[14] = press;
+			$[15] = props$1;
+			$[16] = t4;
+			$[17] = t5;
+		} else t5 = $[17];
+		return t5;
 	}
+	let t4;
+	if ($[18] !== group || $[19] !== shape || $[20] !== size || $[21] !== variant) {
+		t4 = buttonClasses(shape, size, variant, group);
+		$[18] = group;
+		$[19] = shape;
+		$[20] = size;
+		$[21] = variant;
+		$[22] = t4;
+	} else t4 = $[22];
 	let t5;
-	if ($[31] !== shape || $[32] !== size || $[33] !== variant) {
-		t5 = buttonClasses(shape, size, variant);
-		$[31] = shape;
-		$[32] = size;
-		$[33] = variant;
-		$[34] = t5;
-	} else t5 = $[34];
-	let t6;
-	if ($[35] !== content || $[36] !== href || $[37] !== isPending || $[38] !== pendingLabel || $[39] !== props$1 || $[40] !== rel || $[41] !== t5 || $[42] !== target) {
-		t6 = /* @__PURE__ */ jsx(ButtonBase, {
+	if ($[23] !== content || $[24] !== href || $[25] !== isPending || $[26] !== pendingLabel || $[27] !== press || $[28] !== props$1 || $[29] !== rel || $[30] !== t4 || $[31] !== target) {
+		t5 = /* @__PURE__ */ jsx(ButtonBase, {
 			...props$1,
-			classes: t5,
+			...press,
+			classes: t4,
 			href,
 			isPending,
 			pendingLabel,
@@ -566,29 +544,34 @@ function Button(t0) {
 			target,
 			children: content
 		});
-		$[35] = content;
-		$[36] = href;
-		$[37] = isPending;
-		$[38] = pendingLabel;
-		$[39] = props$1;
-		$[40] = rel;
-		$[41] = t5;
-		$[42] = target;
-		$[43] = t6;
-	} else t6 = $[43];
-	return t6;
+		$[23] = content;
+		$[24] = href;
+		$[25] = isPending;
+		$[26] = pendingLabel;
+		$[27] = press;
+		$[28] = props$1;
+		$[29] = rel;
+		$[30] = t4;
+		$[31] = target;
+		$[32] = t5;
+	} else t5 = $[32];
+	return t5;
+}
+function buttonClasses(shape, size, variant, group) {
+	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], shape === "square" && squareShapes[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 }
-function buttonClasses(shape, size, variant) {
-	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], shape === "square" && squareShapes[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+function groupStyles(group, size, state) {
+	if (group === null) return null;
+	return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} + ${group.shift / 2}px)`)];
 }
-function toggleClasses(shape, size, variant) {
+function toggleClasses(shape, size, variant, group) {
 	return (state) => {
 		const isSelected = state.isSelected === true;
 		const container = toggleContainers[variant][isSelected ? "selected" : "unselected"];
-		return props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === "square" && squareShapes[size], isSelected && (shape === "square" ? styles.round : squareShapes[size]), variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isHovered && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && pressed[variant], state.isPressed && pressed[container], state.isPressed && pressedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		return props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === "square" && squareShapes[size], isSelected && (shape === "square" ? styles.round : squareShapes[size]), variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isHovered && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && pressed[variant], state.isPressed && pressed[container], state.isPressed && pressedShapes[size], groupStyles(group, size, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 	};
 }
 //#endregion
-export { Button as default };
+export { Button$1 as default };
 
 //# sourceMappingURL=index.js.map