@kanso-labs/kanso-ui 0.43.7 → 0.44.1

package/dist/chip/styles.js

@@ -65,15 +65,35 @@ const chipStyles = {
 		keTefX: "xxuhe3a",
 		$$css: true
 	},
+	glyphFolded: {
+		kzqmXN: "xnalus7",
+		k71WvV: "x1kfc2zf",
+		keTefX: "x1lziwak",
+		kSiTet: "xg01cxk",
+		$$css: true
+	},
+	glyphOpening: {
+		k6CgDc: "x12w9bfk",
+		kVQacm: "xb3r6kr",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "x17vvy08",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
 	glyphSvg: {
-		kZKoxP: "x5yr21d",
-		kzqmXN: "xh8yej3",
+		kZKoxP: "xmix8c7",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x1xp8n7a",
 		$$css: true
 	},
 	icon: {
 		kMwMTN: "x1mxwv8y",
 		$$css: true
 	},
+	inert: {
+		kkrTdU: "xt0e3qv",
+		$$css: true
+	},
 	label: {
 		kB7OPa: "x9f619",
 		kVQacm: "xb3r6kr",
@@ -115,6 +135,10 @@ const chipStyles = {
 		kVAEAm: "x1n2onr6",
 		$$css: true
 	},
+	removeDisabled: {
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
 	removeGlyph: {
 		kZKoxP: "xmix8c7",
 		kzqmXN: "x1xp8n7a",
@@ -126,6 +150,12 @@ const chipStyles = {
 		kMwMTN: "x1sawysd",
 		$$css: true
 	},
+	surfaceCorners: {
+		kaIpWk: "x5a2xki",
+		kB7OPa: "x9f619",
+		k1xSpc: "xjp7ctv",
+		$$css: true
+	},
 	target: {
 		kgeoSG: "x1cpjm7i",
 		kGOzcv: "x1xkszu9",

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","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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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","chipStyles","assist","kMwMTN","$$css","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","ks0D6T","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","disabled","disabledSelected","kWkggS","disabledUnselected","kVAM5u","elevated","elevatedDisabled","kGVxlE","glyph","kzqmXN","kjj79g","keTefX","glyphFolded","k71WvV","kSiTet","glyphOpening","kVQacm","glyphSvg","icon","inert","label","kg5iWk","khDVqt","raised","raisedHovered","remove","kgeoSG","kFcpXp","kEoFBp","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kVAEAm","removeDisabled","removeGlyph","selected","surfaceCorners","target","kGOzcv","kpsdNU","unselected","chipLayers","elevatedFocused","elevatedHovered","elevatedPressed","removeHovered","removePressed","selectedFocused","selectedHovered","selectedPressed","unselectedFocused","unselectedHovered","unselectedPressed"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own or one of the page's two action\n// chips; ChipGroup's chip, which is one of a set that can also be removed;\n// and TokenField's token, which takes `base` and `unselected` alone — a token\n// is not selectable, so it reaches for neither the selected container nor\n// the check below. The measurements and roles are the page's filter chip — a\n// 32dp container with an 8dp corner and 16dp of inline padding, an outline\n// variant border while unselected, the secondary container pair once\n// selected.\n//\n// The assist and suggestion chips are that unselected pill, never selected.\n// The page's only difference between them is the label: on surface on an\n// assist chip, on surface variant on a suggestion chip as on a filter one.\n//\n// **An elevated chip trades the outline for a container**, surface container\n// low at the page's elevation 1, raised to 2 under a hovering pointer. A\n// selected one keeps the secondary container and takes the shadow with it.\n// Its 1px border stays, transparent, as every chip's does: a forced-colours\n// mode paints a transparent border in its text colour and drops the shadow\n// and the fill, so the border is the boundary left there.\n//\n// **A label with no room on one line is cut short, never wrapped.** The\n// container is a fixed 32dp, so a second line has nowhere to go but out of\n// the pill: a chip or a token in a room narrower than its label drew the\n// rest below its own edge, and a chip in a group's row ran past the row's\n// end instead. The pill is held to the room it is in, and the label sits in\n// a span of its own that ends in an ellipsis where the pill does — a span,\n// because a flex container ignores `text-overflow`, which is also why\n// Material's own chips carry one. The whole label stays in the DOM, so a\n// screen reader still reads all of it.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across. A chip given an icon does not widen, since the check takes the\n// icon's place in the same slot.\n//\n// **The widening is animated rather than taken in one frame.** A chip with\n// no icon keeps its slot mounted while unselected, folded to nothing, and\n// selecting it opens the slot over the chip's own short duration while the\n// check fades in, so the chips after it in a wrapped row glide rather than\n// jump 18dp. Reduced motion takes the change at once, as it does the\n// colours. A chip that can never be selected, an assist or suggestion chip\n// or one in a group that does not select, has no slot to open.\n//\n// **The press ripple takes the chip's corner from here** wherever the chip\n// is a ChipGroup's. The ripple clips itself to its host's corner by\n// inheriting it, and React Aria puts a cell between a group's chip and its\n// content, so what the ripple would inherit is the cell's square corner.\n// `surfaceCorners` restates the chip's own corner on a box the ripple sits\n// in, less the 1px border every chip keeps, since the ripple fills the\n// inside of that border.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\n// The press area the chips page requires around its 32dp chip. A literal for\n// the reason IconButton's `TARGET_SIZE` gives.\nconst TARGET_SIZE = '48px';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst chipStyles = {\n  assist: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"x9r1u3d\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphFolded: {\n    kzqmXN: \"xnalus7\",\n    k71WvV: \"x1kfc2zf\",\n    keTefX: \"x1lziwak\",\n    kSiTet: \"xg01cxk\",\n    $$css: true\n  },\n  glyphOpening: {\n    k6CgDc: \"x12w9bfk\",\n    kVQacm: \"xb3r6kr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x17vvy08\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  icon: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  inert: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  raised: {\n    kGVxlE: \"x19efjv6\",\n    k1ekBW: \"xu8237s\",\n    $$css: true\n  },\n  raisedHovered: {\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  remove: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"xtu493u\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  removeDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  surfaceCorners: {\n    kaIpWk: \"x5a2xki\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  target: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1xkszu9\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The hover and pressed layers, applied from React Aria's render state rather\n// than from `:hover` and `:active`, for Button's reasons — see its header: a\n// hover layer stayed on after a tap, and no pressed layer showed for a press\n// made from the keyboard. One pair per container, the pressed after the\n// hovered so a press wins, and one for the close target, whose own render\n// state is its button's. A token in a TokenField draws none of them: React\n// Aria reports neither state for one, since it is text the caret moves\n// through rather than a control a press acts on.\nconst chipLayers = {\n  elevatedFocused: {\n    kWkggS: \"x1drsm1c\",\n    $$css: true\n  },\n  elevatedHovered: {\n    kWkggS: \"x1ei6177\",\n    $$css: true\n  },\n  elevatedPressed: {\n    kWkggS: \"x1vt8e7r\",\n    $$css: true\n  },\n  removeHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  removePressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  },\n  selectedFocused: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  unselectedFocused: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  },\n  unselectedHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  unselectedPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  }\n};\nexport { chipLayers, chipStyles };"],"mappings":"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"}

package/dist/collection/text.js

@@ -1,15 +1,36 @@
 //#region src/collection/text.ts
+function flatText(node) {
+	if (typeof node === "string") return node;
+	if (typeof node === "number" || typeof node === "bigint") return String(node);
+	if (node === null || node === void 0 || typeof node === "boolean") return "";
+	if (!isNodeArray(node)) return;
+	let text = "";
+	for (const part of node) {
+		const partText = flatText(part);
+		if (partText === void 0) return;
+		text += partText;
+	}
+	return text;
+}
+function isNodeArray(node) {
+	return Array.isArray(node);
+}
 /**
 * What a collection item is worth as text: what React Aria matches typeahead
 * on, what a combo box filters by, what a select shows once an option is
 * chosen, and what names a chip. React Aria reads it off an item's children
 * when they are a string and finds nothing when they are not — and an item
 * here is always an element, since it wraps its text in one of its own. So
-* plain-string children become the text value, and anything else has to say
-* what it is worth through `textValue`.
+* this reads it instead, from children made of text alone: a string, a
+* number, or an array of those, which is what JSX hands over for
+* `Label {3}`. The parts join as React renders them, and `null`, `undefined`
+* and booleans count for nothing, as they draw nothing. Anything holding an
+* element is worth no text here, so it has to say what it is worth through
+* `textValue`.
 */
 function textOf(children) {
-	return typeof children === "string" ? children : void 0;
+	const text = flatText(children);
+	return text === "" ? void 0 : text;
 }
 //#endregion
 export { textOf };

package/dist/collection/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":["ReactNode","textOf","children","undefined"],"sources":["../../src/collection/text.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement ./styles.ts has.\n\n/**\n * What a collection item is worth as text: what React Aria matches typeahead\n * on, what a combo box filters by, what a select shows once an option is\n * chosen, and what names a chip. React Aria reads it off an item's children\n * when they are a string and finds nothing when they are not — and an item\n * here is always an element, since it wraps its text in one of its own. So\n * plain-string children become the text value, and anything else has to say\n * what it is worth through `textValue`.\n */\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined\n}\n\nexport { textOf }\n"],"mappings":";;;;;;;;;;AAcA,SAASC,OAAOC,UAAqB;CACnC,OAAO,OAAOA,aAAa,WAAWA,WAAWC,KAAAA;AACnD"}
+{"version":3,"file":"text.js","names":["ReactNode","flatText","node","String","undefined","isNodeArray","text","part","partText","Array","isArray","textOf","children"],"sources":["../../src/collection/text.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement ./styles.ts has.\n\n// The text children render as, or `undefined` once any part is not text.\nfunction flatText(node: ReactNode): string | undefined {\n  if (typeof node === 'string') {\n    return node\n  }\n  if (typeof node === 'number' || typeof node === 'bigint') {\n    return String(node)\n  }\n  if (node === null || node === undefined || typeof node === 'boolean') {\n    return ''\n  }\n  if (!isNodeArray(node)) {\n    return undefined\n  }\n  let text = ''\n  for (const part of node) {\n    const partText = flatText(part)\n    if (partText === undefined) {\n      return undefined\n    }\n    text += partText\n  }\n  return text\n}\n\n// `Array.isArray` narrows to `any[]`, which says nothing about the parts.\nfunction isNodeArray(node: ReactNode): node is readonly ReactNode[] {\n  return Array.isArray(node)\n}\n\n/**\n * What a collection item is worth as text: what React Aria matches typeahead\n * on, what a combo box filters by, what a select shows once an option is\n * chosen, and what names a chip. React Aria reads it off an item's children\n * when they are a string and finds nothing when they are not — and an item\n * here is always an element, since it wraps its text in one of its own. So\n * this reads it instead, from children made of text alone: a string, a\n * number, or an array of those, which is what JSX hands over for\n * `Label {3}`. The parts join as React renders them, and `null`, `undefined`\n * and booleans count for nothing, as they draw nothing. Anything holding an\n * element is worth no text here, so it has to say what it is worth through\n * `textValue`.\n */\nfunction textOf(children: ReactNode) {\n  const text = flatText(children)\n  return text === '' ? undefined : text\n}\n\nexport { textOf }\n"],"mappings":";AAMA,SAASC,SAASC,MAAqC;CACrD,IAAI,OAAOA,SAAS,UAClB,OAAOA;CAET,IAAI,OAAOA,SAAS,YAAY,OAAOA,SAAS,UAC9C,OAAOC,OAAOD,IAAI;CAEpB,IAAIA,SAAS,QAAQA,SAASE,KAAAA,KAAa,OAAOF,SAAS,WACzD,OAAO;CAET,IAAI,CAACG,YAAYH,IAAI,GACnB;CAEF,IAAII,OAAO;CACX,KAAK,MAAMC,QAAQL,MAAM;EACvB,MAAMM,WAAWP,SAASM,IAAI;EAC9B,IAAIC,aAAaJ,KAAAA,GACf;EAEFE,QAAQE;CACV;CACA,OAAOF;AACT;AAGA,SAASD,YAAYH,MAA+C;CAClE,OAAOO,MAAMC,QAAQR,IAAI;AAC3B;;;;;;;;;;;;;;AAeA,SAASS,OAAOC,UAAqB;CACnC,MAAMN,OAAOL,SAASW,QAAQ;CAC9B,OAAON,SAAS,KAAKF,KAAAA,IAAYE;AACnC"}

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

@@ -20,8 +20,10 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
    * 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.
+   * headline and the subtitle move up into the row the slots sit in and take
+   * the small bar's type roles, which fit both lines in its 64px, and the
+   * slots never leave that row: they stay where they are while the bar
+   * shrinks under them.
    *
    * 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
@@ -99,8 +101,9 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   scrolled?: boolean;
   /**
    * Height and headline size, as steps of the library's size scale. `sm` is
-   * Material Design's small bar, a fixed 64px; `md` and `lg` are its medium
-   * and large flexible bars, which hug their text.
+   * Material Design's small bar, a fixed 64px row; `md` and `lg` are its
+   * medium and large flexible bars, which put the text in a row of its own
+   * under the slots and hug it.
    * @default 'sm'
    */
   size?: 'lg' | 'md' | 'sm';
@@ -115,7 +118,8 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
  *
  * Three sizes. `sm` is a fixed 64px bar for a page whose title is a label;
  * `md` and `lg` are the flexible bars, which give the headline a larger
- * type role and grow to fit a subtitle or a headline that wraps.
+ * type role in a row of its own under the slots, and grow to fit a subtitle
+ * or a headline that wraps.
  *
  * It paints its own surface, unlike the layout components, because separating
  * itself from the content beneath is the job — which is also why `scrolled`