@kanso-labs/kanso-ui 0.40.5 → 0.40.7

package/dist/chip/styles.js

@@ -128,16 +128,12 @@ const chipStyles = {
 	},
 	target: {
 		kgeoSG: "x1cpjm7i",
-		kGOzcv: "xouqwce",
-		kpsdNU: "xm4btww",
+		kGOzcv: "x1xkszu9",
+		kpsdNU: "x1ecwmwu",
 		kEoFBp: "x1hmns74",
 		kVAEAm: "x1n2onr6",
 		$$css: true
 	},
-	targetInGroup: {
-		kGOzcv: "x1xkszu9",
-		$$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","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';\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  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  icon: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  raised: {\n    kGVxlE: \"x19efjv6\",\n    k1ekBW: \"xu8237s\",\n    $$css: true\n  },\n  raisedHovered: {\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  remove: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"xtu493u\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  target: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xouqwce\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  targetInGroup: {\n    kGOzcv: \"x1xkszu9\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The hover and pressed layers, applied from React Aria's render state rather\n// than from `:hover` and `:active`, for Button's reasons — see its header: a\n// hover layer stayed on after a tap, and no pressed layer showed for a press\n// made from the keyboard. One pair per container, the pressed after the\n// hovered so a press wins, and one for the close target, whose own render\n// state is its button's. A token in a TokenField draws none of them: React\n// Aria reports neither state for one, since it is text the caret moves\n// through rather than a control a press acts on.\nconst chipLayers = {\n  elevatedFocused: {\n    kWkggS: \"x1drsm1c\",\n    $$css: true\n  },\n  elevatedHovered: {\n    kWkggS: \"x1ei6177\",\n    $$css: true\n  },\n  elevatedPressed: {\n    kWkggS: \"x1vt8e7r\",\n    $$css: true\n  },\n  removeHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  removePressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  },\n  selectedFocused: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  unselectedFocused: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  unselectedHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  unselectedPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  }\n};\nexport { chipLayers, chipStyles };"],"mappings":"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"}
+{"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","glyphSvg","icon","label","kVQacm","kg5iWk","khDVqt","raised","raisedHovered","remove","kgeoSG","kFcpXp","kEoFBp","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kVAEAm","removeGlyph","selected","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// 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  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: \"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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"}

package/dist/collection/empty.js

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

package/dist/collection/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","names":["createContext","EmptyStatusContext","empty"],"sources":["../../src/collection/empty.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Who to tell that a collection has emptied, so it can say so where a screen\n// reader hears it. See `CollectionStatus` in ./index.tsx.\nconst EmptyStatusContext = createContext<((empty: boolean) => void) | null>(\n  null,\n)\n\nexport { EmptyStatusContext }\n"],"mappings":";;AAIA,MAAMC,qBAAqBD,cACzB,IACF"}

package/dist/collection/index.js

@@ -1,9 +1,85 @@
+import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import ProgressIndicator from "../components/progress-indicator/index.js";
 import { useMessages } from "../i18n/index.js";
+import { rowStyles } from "../row/styles.js";
+import { EmptyStatusContext } from "./empty.js";
+import { collectionStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/collection/index.tsx
 /**
+* The row a collection shows when nothing is in it, which is what a search
+* that matches nothing leaves. `ListBox` and `Menu.Content` draw it as their
+* default `renderEmptyState`.
+*
+* An item's box and headline, so the collection keeps a row's height rather
+* than collapsing to its padding, in the muted role and with no role of its
+* own: it is not an option or an action. React Aria wraps it in an element
+* with the collection's item role and `display: contents`, since a listbox
+* or a menu may only own those.
+*
+* It also tells the nearest `CollectionStatus` the collection has emptied,
+* which is what puts it where a screen reader hears it.
+*/
+function CollectionEmpty(t0) {
+	const $ = c(13);
+	const { variant } = t0;
+	const messages = useMessages();
+	const report = useContext(EmptyStatusContext);
+	let t1;
+	let t2;
+	if ($[0] !== report) {
+		t1 = () => {
+			report?.(true);
+			return () => {
+				report?.(false);
+			};
+		};
+		t2 = [report];
+		$[0] = report;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== variant) {
+		t3 = props(rowStyles.base, variant === "menu" ? rowStyles.menu : rowStyles.list, collectionStyles.empty);
+		$[3] = variant;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== variant) {
+		t4 = props(variant === "menu" ? rowStyles.headlineMenu : rowStyles.headlineList);
+		$[5] = variant;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== messages.noResults || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", {
+			...t4,
+			children: messages.noResults
+		});
+		$[7] = messages.noResults;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t3 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			...t3,
+			children: t5
+		});
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+/**
 * The ring a collection shows while it loads more items.
 *
 * Indeterminate and circular in every collection that has one, since none of
@@ -28,7 +104,54 @@ function CollectionLoadMore(t0) {
 	} else t2 = $[2];
 	return t2;
 }
+/**
+* A polite status that says when a collection inside it has emptied.
+*
+* The region is rendered from the start and only its text changes, since a
+* screen reader announces a change to a live region it already knows about
+* and not one that arrives with its text in it. That is why the empty row
+* cannot announce itself: it mounts already saying what it says. `<output>`
+* carries an implicit role of status, as CopyField's does.
+*
+* `Autocomplete` puts one round what it filters, and `Menu.Content` one
+* inside its surface — a modal popover hides everything outside it from
+* assistive technology, a live region included, so the menu's has to be
+* within it. A row reports to the nearest, so a menu inside an
+* `Autocomplete` speaks through its own.
+*/
+function CollectionStatus(t0) {
+	const $ = c(6);
+	const { children } = t0;
+	const messages = useMessages();
+	const [empty, setEmpty] = useState(false);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = props(collectionStyles.status);
+		$[0] = t1;
+	} else t1 = $[0];
+	const t2 = empty ? messages.noResults : "";
+	let t3;
+	if ($[1] !== t2) {
+		t3 = /* @__PURE__ */ jsx("output", {
+			...t1,
+			children: t2
+		});
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== children || $[4] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(EmptyStatusContext, {
+			value: setEmpty,
+			children: [children, t3]
+		});
+		$[3] = children;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
 //#endregion
-export { CollectionLoadMore };
+export { CollectionEmpty, CollectionLoadMore, CollectionStatus };
 
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ProgressIndicator","useMessages","CollectionLoadMoreProps","diameter","label","CollectionLoadMore","t0","$","_c","messages","t1","loadingMore","t2","_c"],"sources":["../../src/collection/index.tsx"],"sourcesContent":["import ProgressIndicator from '../components/progress-indicator'\nimport { useMessages } from '../i18n'\n\ntype CollectionLoadMoreProps = {\n  /** The ring's diameter, which follows the row it sits in. */\n  diameter: string\n  /**\n   * What a screen reader announces while the next page is on its way. Left\n   * out, it is the I18nProvider's locale's word for it.\n   */\n  label: string | undefined\n}\n\n/**\n * The ring a collection shows while it loads more items.\n *\n * Indeterminate and circular in every collection that has one, since none of\n * them knows how many items are still to come.\n */\nfunction CollectionLoadMore({ diameter, label }: CollectionLoadMoreProps) {\n  const messages = useMessages()\n\n  return (\n    <ProgressIndicator\n      aria-label={label ?? messages.loadingMore}\n      diameter={diameter}\n      isIndeterminate\n      variant=\"circular\"\n    />\n  )\n}\n\nexport type { CollectionLoadMoreProps }\nexport { CollectionLoadMore }\n"],"mappings":";;;;;;;;;;;AAmBA,SAAAK,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAL,UAAAC,UAAAE;CAC1B,MAAAG,WAAiBR,YAAY;CAIb,MAAAS,KAAAN,SAASK,SAAQE;CAAY,IAAAC;CAAA,IAAAL,EAAA,OAAAJ,YAAAI,EAAA,OAAAG,IAAA;EAD3CE,KAAA,oBAAC,mBAAD;GACc,cAAAF;GACFP;GACV,iBAAA;GACQ,SAAA;EAAU,CAAA;EAClBI,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","useContext","useEffect","useState","ProgressIndicator","useMessages","rowStyles","EmptyStatusContext","collectionStyles","CollectionEmptyProps","variant","CollectionLoadMoreProps","diameter","label","CollectionEmpty","t0","$","_c","messages","report","t1","t2","t3","props","base","menu","list","empty","t4","headlineMenu","headlineList","t5","noResults","t6","CollectionLoadMore","loadingMore","CollectionStatus","children","setEmpty","Symbol","for","status","_c","stylex.props"],"sources":["../../src/collection/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useEffect, useState } from 'react';\nimport ProgressIndicator from '../components/progress-indicator';\nimport { useMessages } from '../i18n';\nimport { rowStyles } from '../row/styles';\nimport { EmptyStatusContext } from './empty';\nimport { collectionStyles } from './styles';\ntype CollectionEmptyProps = {\n  /** Which spec page's row it stands in for: a list's or a menu's. */\n  variant: 'list' | 'menu';\n};\ntype CollectionLoadMoreProps = {\n  /** The ring's diameter, which follows the row it sits in. */\n  diameter: string;\n  /**\n   * What a screen reader announces while the next page is on its way. Left\n   * out, it is the I18nProvider's locale's word for it.\n   */\n  label: string | undefined;\n};\n\n/**\n * The row a collection shows when nothing is in it, which is what a search\n * that matches nothing leaves. `ListBox` and `Menu.Content` draw it as their\n * default `renderEmptyState`.\n *\n * An item's box and headline, so the collection keeps a row's height rather\n * than collapsing to its padding, in the muted role and with no role of its\n * own: it is not an option or an action. React Aria wraps it in an element\n * with the collection's item role and `display: contents`, since a listbox\n * or a menu may only own those.\n *\n * It also tells the nearest `CollectionStatus` the collection has emptied,\n * which is what puts it where a screen reader hears it.\n */\nfunction CollectionEmpty({\n  variant\n}: CollectionEmptyProps) {\n  const messages = useMessages();\n  const report = useContext(EmptyStatusContext);\n  useEffect(() => {\n    report?.(true);\n    return () => {\n      report?.(false);\n    };\n  }, [report]);\n  return <div {...stylex.props(rowStyles.base, variant === 'menu' ? rowStyles.menu : rowStyles.list, collectionStyles.empty)}>\n      <span {...stylex.props(variant === 'menu' ? rowStyles.headlineMenu : rowStyles.headlineList)}>\n        {messages.noResults}\n      </span>\n    </div>;\n}\n\n/**\n * The ring a collection shows while it loads more items.\n *\n * Indeterminate and circular in every collection that has one, since none of\n * them knows how many items are still to come.\n */\nfunction CollectionLoadMore({\n  diameter,\n  label\n}: CollectionLoadMoreProps) {\n  const messages = useMessages();\n  return <ProgressIndicator aria-label={label ?? messages.loadingMore} diameter={diameter} isIndeterminate variant=\"circular\" />;\n}\n\n/**\n * A polite status that says when a collection inside it has emptied.\n *\n * The region is rendered from the start and only its text changes, since a\n * screen reader announces a change to a live region it already knows about\n * and not one that arrives with its text in it. That is why the empty row\n * cannot announce itself: it mounts already saying what it says. `<output>`\n * carries an implicit role of status, as CopyField's does.\n *\n * `Autocomplete` puts one round what it filters, and `Menu.Content` one\n * inside its surface — a modal popover hides everything outside it from\n * assistive technology, a live region included, so the menu's has to be\n * within it. A row reports to the nearest, so a menu inside an\n * `Autocomplete` speaks through its own.\n */\nfunction CollectionStatus({\n  children\n}: {\n  children: ReactNode;\n}) {\n  const messages = useMessages();\n  const [empty, setEmpty] = useState(false);\n  return <EmptyStatusContext value={setEmpty}>\n      {children}\n      <output {...stylex.props(collectionStyles.status)}>\n        {empty ? messages.noResults : ''}\n      </output>\n    </EmptyStatusContext>;\n}\nexport type { CollectionEmptyProps, CollectionLoadMoreProps };\nexport { CollectionEmpty, CollectionLoadMore, CollectionStatus };"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAAe,gBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAyB,MAAA,EAAAP,YAAAK;CAGvB,MAAAG,WAAiBb,YAAY;CAC7B,MAAAc,SAAelB,WAAWM,kBAAkB;CAAE,IAAAa;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAG,QAAA;EACpCC,WAAA;GACRD,SAAS,IAAI;GAAC,aACP;IACLA,SAAS,KAAK;GAAC;EAChB;EACAE,KAAA,CAACF,MAAM;EAACH,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CALXd,UAAUkB,IAKPC,EAAQ;CAAC,IAAAC;CAAA,IAAAN,EAAA,OAAAN,SAAA;EACIY,KAAAtB,MAAaM,UAASkB,MAAOd,YAAY,SAASJ,UAASmB,OAAQnB,UAASoB,MAAOlB,iBAAgBmB,KAAM;EAACX,EAAA,KAAAN;EAAAM,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAN,SAAA;EAC5GkB,KAAA5B,MAAaU,YAAY,SAASJ,UAASuB,eAAgBvB,UAASwB,YAAa;EAACd,EAAA,KAAAN;EAAAM,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,SAAAc,aAAAhB,EAAA,OAAAY,IAAA;EAA5FG,KAAA,oBAAA,QAAA;GAEO,GAFGH;GACPV,UAAAA,SAAQc;EACJ,CAAA;EAAAhB,EAAA,KAAAE,SAAAc;EAAAhB,EAAA,KAAAY;EAAAZ,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAM,MAAAN,EAAA,QAAAe,IAAA;EAHJE,KAAA,oBAAA,OAAA;GAIC,GAJQX;GACZS,UAAAA;EAGI,CAAA;EAAAf,EAAA,MAAAM;EAAAN,EAAA,MAAAe;EAAAf,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAJDiB;AAIC;;;;;;;AASV,SAAAC,mBAAAnB,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAL,UAAAC,UAAAE;CAI1B,MAAAG,WAAiBb,YAAY;CACS,MAAAe,KAAAP,SAASK,SAAQiB;CAAY,IAAAd;CAAA,IAAAL,EAAA,OAAAJ,YAAAI,EAAA,OAAAI,IAAA;EAA5DC,KAAA,oBAAC,mBAAD;GAA+B,cAAAD;GAAyCR;GAAU,iBAAA;GAAwB,SAAA;EAAU,CAAA;EAAGI,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAvHK;AAAuH;;;;;;;;;;;;;;;;AAkBhI,SAAAe,iBAAArB,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA0B,MAAA,EAAAoB,aAAAtB;CAKxB,MAAAG,WAAiBb,YAAY;CAC7B,MAAA,CAAAsB,OAAAW,YAA0BnC,SAAS,KAAK;CAAE,IAAAiB;CAAA,IAAAJ,EAAA,OAAAuB,OAAAC,IAAA,2BAAA,GAAA;EAG1BpB,KAAApB,MAAaQ,iBAAgBiC,MAAO;EAACzB,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAC9C,MAAAK,KAAAM,QAAQT,SAAQc,YAAhB;CAA+B,IAAAV;CAAA,IAAAN,EAAA,OAAAK,IAAA;EADlCC,KAAA,oBAAA,UAAA;GAES,GAFGF;GACTC,UAAAA;EACM,CAAA;EAAAL,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAqB,YAAArB,EAAA,OAAAM,IAAA;EAJNM,KAAA,qBAAC,oBAAD;GAA2BU,OAAAA;GAA3B,UAAA,CACFD,UACDf,EAFsB;;EAKHN,EAAA,KAAAqB;EAAArB,EAAA,KAAAM;EAAAN,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OALhBY;AAKgB"}

package/dist/collection/styles.js

@@ -19,6 +19,10 @@ const collectionStyles = {
 		kMeerF: "x1de99jn",
 		$$css: true
 	},
+	empty: {
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	},
 	header: {
 		kB7OPa: "x9f619",
 		kMwMTN: "x1w5n3ug",
@@ -45,6 +49,16 @@ const collectionStyles = {
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
 		$$css: true
+	},
+	status: {
+		kZKoxP: "xjm9jq1",
+		kB7OPa: "x9f619",
+		kz4h6p: "x1hyvwdk",
+		kzqmXN: "x1i1rx1s",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "x10l6tqk",
+		khDVqt: "xuxw1ft",
+		$$css: true
 	}
 };
 /**

package/dist/collection/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["ReactNode","stylex","hasContent","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","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 { hasContent } from '../render/content';\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 = (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0);\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":";;;;AA6BA,MAAMU,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,SAASpD,WAAWiD,QAAQ,IAAI,IAAI,MAAMjD,WAAWgD,UAAU,IAAI,IAAI;CAC7E,QAAQH,UAA+B9C,MAAaE,UAAUqD,MAAMrD,UAAUsD,MAAML,OAAOE,UAAU,KAAKnD,UAAUuD,SAASJ,UAAU,KAAKnD,UAAUwD,WAAWZ,MAAMP,eAAe,QAAQrC,UAAUyD,UAAUb,MAAMF,cAAc1C,UAAU0D,cAAcd,MAAMJ,aAAaxC,UAAU2D,SAASf,MAAML,kBAAkBvC,UAAU4D,cAAchB,MAAMH,aAAazC,UAAU6D,SAASjB,MAAMN,iBAAiB,QAAQtC,UAAUe,YAAY6B,MAAMR,cAAcpC,UAAU8D,QAAQ;AACvd"}
+{"version":3,"file":"styles.js","names":["ReactNode","stylex","hasContent","rowStyles","colors","sizing","spacing","stateLayerOpacity","typography","FORCED_COLORS","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","dropTarget","kWkggS","kjBf7l","kInvED","kMeerF","empty","kMwMTN","header","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","status","kZKoxP","kz4h6p","kzqmXN","kVQacm","kVAEAm","khDVqt","CollectionItemState","isDisabled","isDragging","isDropTarget","isFocusVisible","isHovered","isPressed","isSelected","containerClasses","state","className","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","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 { hasContent } from '../render/content';\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  empty: {\n    kMwMTN: \"x1w5n3ug\",\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  status: {\n    kZKoxP: \"xjm9jq1\",\n    kB7OPa: \"x9f619\",\n    kz4h6p: \"x1hyvwdk\",\n    kzqmXN: \"x1i1rx1s\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x10l6tqk\",\n    khDVqt: \"xuxw1ft\",\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 = (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0);\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":";;;;AA6BA,MAAMU,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,OAAO;EACLC,QAAQ;EACRP,OAAO;CACT;CACAQ,QAAQ;EACNb,QAAQ;EACRY,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,SAAS;EACPC,QAAQ;EACRvB,QAAQ;EACRC,QAAQ;EACRuB,QAAQ;EACRC,QAAQ;EACRpB,OAAO;CACT;CACAqB,SAAS;EACP1B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;CACAsB,QAAQ;EACNC,QAAQ;EACR5B,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR5B,OAAO;CACT;AACF;;;;;;AAuBA,SAASqC,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,SAAS5D,WAAWyD,QAAQ,IAAI,IAAI,MAAMzD,WAAWwD,UAAU,IAAI,IAAI;CAC7E,QAAQH,UAA+BtD,MAAaE,UAAU6D,MAAM7D,UAAU8D,MAAML,OAAOE,UAAU,KAAK3D,UAAU+D,SAASJ,UAAU,KAAK3D,UAAUgE,WAAWZ,MAAMP,eAAe,QAAQ7C,UAAUiE,UAAUb,MAAMF,cAAclD,UAAUkE,cAAcd,MAAMJ,aAAahD,UAAUmE,SAASf,MAAML,kBAAkB/C,UAAUoE,cAAchB,MAAMH,aAAajD,UAAUqE,SAASjB,MAAMN,iBAAiB,QAAQ9C,UAAUe,YAAYqC,MAAMR,cAAc5C,UAAUsE,QAAQ;AACvd"}

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

@@ -16,40 +16,43 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
    *
    * Controlled, and for the same reason `scrolled` is: only the app knows
    * which element scrolls, and how far into it the bar should have finished
-   * collapsing. Usually set from the same handler.
+   * collapsing. `useAppBarScroll` derives both from that element's scroll,
+   * and is the way to set them unless the app needs a rule of its own.
    *
    * Ignored on `sm`, which is already the height this collapses to. The
    * subtitle goes with the height, since there is no room for a second line
    * in the small bar.
    *
-   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands
-   * the page back the height the bar gives up, and browsers answer a change
-   * in height above the viewport by moving the scroll offset by exactly that
-   * amount, so the content underneath stays where it was. That offset is
-   * what the call site derived `collapsed` from, so it lands back under the
-   * threshold, the bar expands, the offset is restored, and the two take
-   * turns for as long as the reader stays in that band. Turning anchoring off
-   * is what breaks the loop, and it is also the movement you want: the
-   * content follows the bar's bottom edge up rather than standing still while
-   * the bar shrinks behind it.
+   * Collapsing hands the page back the height the bar gives up, and a bar
+   * whose state is read off the scroll offset can then undo itself in two
+   * ways. Both move the offset back under the threshold, so the bar expands,
+   * the page regains its height, and the two take turns for as long as the
+   * reader stays there.
    *
-   * No threshold avoids this on its own. The unstable band is as tall as the
-   * height the bar gives back and it sits directly above wherever the
-   * threshold is put, so moving the threshold moves the band with it.
+   * - **Scroll anchoring.** Browsers answer a change in height above the
+   *   viewport by moving the offset by the same amount, to keep the content
+   *   in place. Give the scroll container `overflow-anchor: none`, which is
+   *   also the movement you want: the content follows the bar's bottom edge
+   *   up rather than standing still while the bar shrinks behind it.
+   * - **The shorter page.** A page that overflows by less than the threshold
+   *   plus the height the bar gives back cannot scroll that far once the bar
+   *   has collapsed, so the browser pulls the offset back inside it. No
+   *   threshold avoids this, since the band moves with it; what does is not
+   *   collapsing on such a page, which is the rule `useAppBarScroll` applies.
    * @default false
    */
   collapsed?: boolean;
   /**
-   * Where the bar's content starts, measured to the headline. A leading slot
-   * sits 12px before that, which is the room an icon button's own padding
-   * fills around its glyph — Material Design's arrangement, and what makes a
-   * bar with an icon and one without start their text in the same place.
+   * Where the bar's content starts on each edge: the headline where nothing
+   * comes before it, and the leading icon's glyph where something does, with
+   * the headline after the icon button's target. The trailing edge is the
+   * same mirrored. Any length works, `0` included, for a bar drawn flush.
    *
-   * The default is Material Design's own margin for a top app bar, which is
-   * also the margin it gives body content, so a bar and the page beneath line
-   * up without either being told about the other. Set it to the page's gutter
-   * where that differs.
-   * @default '16px'
+   * The default is Material Design's own margin for a top app bar, the
+   * spacing scale's `lg` step, which is also the margin it gives body
+   * content, so a bar and the page beneath line up without either being told
+   * about the other. Set it to the page's gutter where that differs.
+   * @default spacing.lg
    */
   contentInset?: string;
   /**