@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/calendar/styles.js

@@ -2,7 +2,7 @@
 const calendarStyles = {
 	cell: {
 		kGNEyG: "x6s0dn4",
-		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kZKoxP: "x1vqgdyp",
 		kaIpWk: "x16fbrrb",
 		kB7OPa: "x9f619",
@@ -27,7 +27,7 @@ const calendarStyles = {
 		$$css: true
 	},
 	cellInRange: {
-		kWkggS: "x12abq7s x41qtu3 x15dekr4 x1jzqe4",
+		kWkggS: "x15dekr4 x1jzqe4",
 		kVAM5u: "x1uajy3w x1n2ykn",
 		kaIpWk: "x2u8bby",
 		kMwMTN: "x1sawysd x1k5gbb1",
@@ -48,7 +48,7 @@ const calendarStyles = {
 		$$css: true
 	},
 	cellSelected: {
-		kWkggS: "xpky1to xyf7a0q xnety89 x1jzqe4",
+		kWkggS: "xnety89 x1jzqe4",
 		kVAM5u: "x1uajy3w x1n2ykn",
 		kMwMTN: "xwjo7ld x1k5gbb1",
 		kAXs8y: "x1g12otp",
@@ -83,6 +83,10 @@ const calendarStyles = {
 		k3aq6I: "xdg80k9 xpk2tj9",
 		$$css: true
 	},
+	chevronHidden: {
+		k33iCy: "xlshs6z",
+		$$css: true
+	},
 	grid: {
 		kLvRdT: "x1vathgz",
 		kheTzg: "x1gukg7c",
@@ -107,6 +111,11 @@ const calendarStyles = {
 		kLWn49: "xh7dzej",
 		$$css: true
 	},
+	headerGroup: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x78zum5",
+		$$css: true
+	},
 	heading: {
 		kMwMTN: "x1w5n3ug",
 		kMv6JI: "xkknnkr",
@@ -118,6 +127,89 @@ const calendarStyles = {
 		k9WMMc: "x2b8uid",
 		$$css: true
 	},
+	menuArrow: {
+		kZKoxP: "xmix8c7",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x1xp8n7a",
+		$$css: true
+	},
+	menuArrowExpanded: {
+		k3aq6I: "x19jd1h0",
+		$$css: true
+	},
+	menuButton: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kZKoxP: "x1rv7mn0",
+		kaIpWk: "x1dkaolv",
+		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1w5n3ug",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kOIVth: "xzoy561",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		kg3NbH: "xn60lsn",
+		$$css: true
+	},
+	menuCheck: {
+		kZKoxP: "xxk0z11",
+		kMwMTN: "x139gbkf",
+		kmuXW: "x2lah0s",
+		kzqmXN: "xvy4d1p",
+		$$css: true
+	},
+	menuItem: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kZKoxP: "xbg5kjn",
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kMv6JI: "x16svsjw",
+		kGuDYH: "x1848etk",
+		k63SB2: "x1c52epr",
+		kOIVth: "xxj4525",
+		kb6lSQ: "x1qn8t5l",
+		kLWn49: "xh7dzej",
+		k3XXqK: "x1t137rt",
+		kg3NbH: "x790zyz",
+		$$css: true
+	},
+	menuItemDisabled: {
+		kWkggS: "xjbqb8w",
+		kMwMTN: "x9w6zvh",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	menuItemFocused: {
+		kjBf7l: "xrgy624",
+		kInvED: "x2ssjo2",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	menuItemSelected: {
+		kWkggS: "xkrgufg",
+		$$css: true
+	},
+	menuList: {
+		kZKoxP: "x1mj9p22",
+		kLZC3w: "x12smttz",
+		kPef9Z: "x13fuv20",
+		kEafiO: "x178xt8z",
+		kB7OPa: "x9f619",
+		kUOVxO: "xnx04jz",
+		k3XXqK: "x1t137rt",
+		kORKVm: "x1odjw0f",
+		$$css: true
+	},
 	months: {
 		kGNEyG: "x7a106z",
 		k1xSpc: "x78zum5",
@@ -139,7 +231,43 @@ const calendarStyles = {
 		$$css: true
 	}
 };
+const dateLayers = {
+	inRangeHovered: {
+		kWkggS: "x3zumxv x1jzqe4",
+		$$css: true
+	},
+	inRangePressed: {
+		kWkggS: "x1as5h4c x1jzqe4",
+		$$css: true
+	},
+	plainHovered: {
+		kWkggS: "x1b18xnh",
+		$$css: true
+	},
+	plainPressed: {
+		kWkggS: "xjeeohs",
+		$$css: true
+	},
+	selectedHovered: {
+		kWkggS: "xo1ct44 x1jzqe4",
+		$$css: true
+	},
+	selectedPressed: {
+		kWkggS: "x7b25lv x1jzqe4",
+		$$css: true
+	}
+};
+const menuLayers = {
+	selectedHovered: {
+		kWkggS: "xgw93rf",
+		$$css: true
+	},
+	selectedPressed: {
+		kWkggS: "x113d7pk",
+		$$css: true
+	}
+};
 //#endregion
-export { calendarStyles };
+export { calendarStyles, dateLayers, menuLayers };
 
 //# sourceMappingURL=styles.js.map

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz","kmVPX3"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\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 calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x12abq7s x41qtu3 x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xpky1to xyf7a0q xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\nexport { calendarStyles };"],"mappings":";AA6CA,MAAMS,iBAAiB;CACrBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,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,cAAc;EACZhB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRY,QAAQ;EACRF,OAAO;CACT;CACAG,aAAa;EACXlB,QAAQ;EACRmB,QAAQ;EACRjB,QAAQ;EACRE,QAAQ;EACRa,QAAQ;EACRP,QAAQ;EACRI,QAAQ;EACRM,QAAQ;EACRL,OAAO;CACT;CACAM,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,cAAc;EACZ3B,QAAQ;EACRmB,QAAQ;EACRf,QAAQ;EACRa,QAAQ;EACRG,QAAQ;EACRL,OAAO;CACT;CACAa,WAAW;EACTT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACR1B,QAAQ;EACRW,OAAO;CACT;CACAgB,iBAAiB;EACf/B,QAAQ;EACRK,QAAQ;EACRY,QAAQ;EACRe,QAAQ;EACRjB,OAAO;CACT;CACAkB,SAAS;EACPnB,QAAQ;EACRC,OAAO;CACT;CACAmB,cAAc;EACZjC,QAAQ;EACRS,QAAQ;EACRyB,QAAQ;EACRpB,OAAO;CACT;CACAqB,sBAAsB;EACpBD,QAAQ;EACRpB,OAAO;CACT;CACAsB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACR7B,QAAQ;EACRK,OAAO;CACT;CACAyB,QAAQ;EACNzC,QAAQ;EACRO,QAAQ;EACRmC,QAAQ;EACR9B,QAAQ;EACR+B,QAAQ;EACR3B,OAAO;CACT;CACA4B,YAAY;EACV1C,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACA6B,SAAS;EACPxC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRgC,QAAQ;EACRC,QAAQ;EACR/B,OAAO;CACT;CACAgC,QAAQ;EACNhD,QAAQ;EACRO,QAAQ;EACRmC,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACAiC,MAAM;EACJhD,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACR2C,QAAQ;EACRR,QAAQ;EACR/B,QAAQ;EACRwC,QAAQ;EACRC,QAAQ;EACRpC,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","sizing","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","chevronHidden","k33iCy","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","headerGroup","heading","kogj98","k9WMMc","menuArrow","kmuXW","menuArrowExpanded","menuButton","kg3NbH","menuCheck","menuItem","k3XXqK","menuItemDisabled","menuItemFocused","kInvED","kMeerF","menuItemSelected","menuList","kLZC3w","kPef9Z","kEafiO","kORKVm","months","root","kXwgrk","k7Eaqz","kmVPX3","dateLayers","inRangeHovered","inRangePressed","plainHovered","plainPressed","selectedHovered","selectedPressed","menuLayers"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\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 calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  chevronHidden: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headerGroup: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  menuArrow: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  menuArrowExpanded: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true\n  },\n  menuButton: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  menuCheck: {\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"x139gbkf\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  menuItem: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xbg5kjn\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  menuItemDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  menuItemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  menuItemSelected: {\n    kWkggS: \"xkrgufg\",\n    $$css: true\n  },\n  menuList: {\n    kZKoxP: \"x1mj9p22\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    kUOVxO: \"xnx04jz\",\n    k3XXqK: \"x1t137rt\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\n\n// A date's hover and pressed layers, one pair per ground it sits on: nothing,\n// the range band, and the selected circle. From React Aria's render state rather than `:hover` and `:active`, for Button's\n// reasons — see its header: a hover layer stayed on after a tap, and no\n// pressed layer showed for a press made from the keyboard.\n// Each layer is written whole for its ground because StyleX replaces a\n// property whole, and the band and the circle keep their forced-colours\n// `Highlight` under the layer.\nconst dateLayers = {\n  inRangeHovered: {\n    kWkggS: \"x3zumxv x1jzqe4\",\n    $$css: true\n  },\n  inRangePressed: {\n    kWkggS: \"x1as5h4c x1jzqe4\",\n    $$css: true\n  },\n  plainHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  plainPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// A list row's hover and pressed layers over the checked row's surface\n// variant. Over nothing a row takes a date's own pair, `dateLayers.plain*`,\n// since the page gives both the same on-surface layer.\nconst menuLayers = {\n  selectedHovered: {\n    kWkggS: \"xgw93rf\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x113d7pk\",\n    $$css: true\n  }\n};\nexport { calendarStyles, dateLayers, menuLayers };"],"mappings":"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"}

package/dist/chip/index.js

@@ -1,13 +1,19 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { CheckGlyph } from "../glyphs/index.js";
-import { chipStyles } from "./styles.js";
+import { focus } from "../styles/focus.js";
+import { chipLayers, chipStyles } from "./styles.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/chip/index.tsx
 /**
-* The check a selected chip draws before its label, and nothing at all while
-* it is not selected. Returns a node rather than letting the type be
-* inferred, since `ReactNode` is a union that includes a promise and an
-* inferred one has to be `async`.
+* What a chip draws before its label: the check while it is selected, its own
+* icon while it is not, and nothing for an unselected chip with no icon.
+* Returns a node rather than letting the type be inferred, since `ReactNode`
+* is a union that includes a promise and an inferred one has to be `async`.
+*
+* The check takes the icon's place rather than joining it, as the chips page
+* draws a filter chip and as a segmented button's segments do. So a chip with
+* an icon keeps its width when it is chosen, where one without grows by the
+* slot.
 *
 * Shared rather than written at each of the two call sites: Chip and
 * ChipGroup's chip draw the same pill from `./styles`, and a check written
@@ -15,12 +21,16 @@ import { jsx } from "react/jsx-runtime";
 * library's own and not exported from the package; see `src/row` for the
 * same arrangement around a list's row.
 */
-function chipGlyph(isSelected) {
-	if (!isSelected) return null;
-	return /* @__PURE__ */ jsx("span", {
+function chipGlyph(state, icon) {
+	if (state.isSelected) return /* @__PURE__ */ jsx("span", {
 		...props(chipStyles.glyph),
 		children: /* @__PURE__ */ jsx(CheckGlyph, { ...props(chipStyles.glyphSvg) })
 	});
+	if (icon === void 0 || icon === null) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props(chipStyles.glyph, !state.isDisabled && chipStyles.icon),
+		children: icon
+	});
 }
 /**
 * The label a chip draws, in a span of its own so it can be cut short with an
@@ -34,7 +44,62 @@ function chipLabel(children) {
 		children
 	});
 }
+const CONTAINERS = {
+	elevated: {
+		disabled: chipStyles.elevatedDisabled,
+		focused: chipLayers.elevatedFocused,
+		hovered: chipLayers.elevatedHovered,
+		pressed: chipLayers.elevatedPressed
+	},
+	selected: {
+		disabled: chipStyles.disabledSelected,
+		focused: chipLayers.selectedFocused,
+		hovered: chipLayers.selectedHovered,
+		pressed: chipLayers.selectedPressed
+	},
+	unselected: {
+		disabled: chipStyles.disabledUnselected,
+		focused: chipLayers.unselectedFocused,
+		hovered: chipLayers.unselectedHovered,
+		pressed: chipLayers.unselectedPressed
+	}
+};
+/**
+* The pill's styles in the render state React Aria hands a chip's
+* `className`, for Chip's two buttons and ChipGroup's tag alike. StyleX
+* cannot target `[data-selected]` on the element it is styling, so the
+* container is chosen here rather than in CSS — which is also why an
+* uncontrolled chip styles itself without keeping a copy of its state.
+*
+* Shared for the reason `chipGlyph` is: the order is the precedence. The
+* hover, focus and pressed layers come from the render state over the
+* container — focus over hover, and a press over both — and disabled comes
+* last so it wins over all of them, since StyleX replaces a property whole.
+*
+* `elevated` raises the chip off the page on a container of its own, and
+* `kind` names which of the page's chips it is, which decides the label's
+* role. `inGroup` is a ChipGroup's chip, whose touch target reaches only
+* halfway across the gap to the next row; see `targetInGroup` in `./styles`.
+*/
+function chipPropsFor(state, { elevated = false, inGroup = false, kind = "filter" } = {}) {
+	const roles = CONTAINERS[containerOf(state.isSelected, elevated)];
+	const raised = elevated && !state.isDisabled;
+	return props(chipStyles.base, chipStyles.target, inGroup && chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, elevated && !state.isSelected && chipStyles.elevated, kind === "assist" && chipStyles.assist, raised && chipStyles.raised, state.isHovered && roles.hovered, raised && state.isHovered && chipStyles.raisedHovered, state.isFocusVisible && roles.focused, state.isPressed && roles.pressed, state.isDisabled && chipStyles.disabled, state.isDisabled && roles.disabled);
+}
+/**
+* The close target's class, from its button's own render state, so its
+* hover and pressed layers follow React Aria's report rather than `:hover`
+* and `:active` — see `chipLayers`. A function, which React Aria's
+* `className` takes alongside a string.
+*/
+function chipRemoveClassName(state) {
+	return props(chipStyles.remove, state.isHovered && chipLayers.removeHovered, state.isPressed && chipLayers.removePressed).className ?? "";
+}
+function containerOf(isSelected, elevated) {
+	if (isSelected) return "selected";
+	return elevated ? "elevated" : "unselected";
+}
 //#endregion
-export { chipGlyph, chipLabel };
+export { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName };
 
 //# sourceMappingURL=index.js.map

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","chipStyles","chipGlyph","isSelected","props","glyph","glyphSvg","chipLabel","children","label","stylex.props"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { 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}\nexport { chipGlyph, chipLabel };"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAASI,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIJ,MAAaE,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIN,MAAaE,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV;;;;;;;AAQA,SAASC,UAAUC,UAAgC;CACjD,OAAO,oBAAC,QAAD;EAAM,GAAIT,MAAaE,WAAWQ,KAAK;EAAID;CAAe,CAAA;AACnE"}
+{"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,12 +81,21 @@ const chipStyles = {
 		khDVqt: "xuxw1ft",
 		$$css: true
 	},
+	raised: {
+		kGVxlE: "x19efjv6",
+		k1ekBW: "xu8237s",
+		$$css: true
+	},
+	raisedHovered: {
+		kGVxlE: "x1os83gw",
+		$$css: true
+	},
 	remove: {
 		kgeoSG: "x1cpjm7i",
 		kFcpXp: "xtu493u",
 		kEoFBp: "x1hmns74",
 		kGNEyG: "x6s0dn4",
-		kWkggS: "xy3r1oc x15a1ka xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kZKoxP: "xmix8c7",
 		kaIpWk: "x1dkaolv",
 		kMzoRj: "xc342km",
@@ -93,7 +121,7 @@ const chipStyles = {
 		$$css: true
 	},
 	selected: {
-		kWkggS: "xnqsvhv xlizrex x15dekr4",
+		kWkggS: "x15dekr4",
 		kVAM5u: "x9r1u3d",
 		kMwMTN: "x1sawysd",
 		$$css: true
@@ -111,13 +139,59 @@ const chipStyles = {
 		$$css: true
 	},
 	unselected: {
-		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kVAM5u: "x133yhug",
 		kMwMTN: "x1w5n3ug",
 		$$css: true
 	}
 };
+const chipLayers = {
+	elevatedFocused: {
+		kWkggS: "x1drsm1c",
+		$$css: true
+	},
+	elevatedHovered: {
+		kWkggS: "x1ei6177",
+		$$css: true
+	},
+	elevatedPressed: {
+		kWkggS: "x1vt8e7r",
+		$$css: true
+	},
+	removeHovered: {
+		kWkggS: "x930l3l",
+		$$css: true
+	},
+	removePressed: {
+		kWkggS: "xsykwg8",
+		$$css: true
+	},
+	selectedFocused: {
+		kWkggS: "x1s5x49g",
+		$$css: true
+	},
+	selectedHovered: {
+		kWkggS: "x1fctxn6",
+		$$css: true
+	},
+	selectedPressed: {
+		kWkggS: "xzpauq9",
+		$$css: true
+	},
+	unselectedFocused: {
+		kWkggS: "xwqhyid",
+		$$css: true
+	},
+	unselectedHovered: {
+		kWkggS: "x1b18xnh",
+		$$css: true
+	},
+	unselectedPressed: {
+		kWkggS: "xjeeohs",
+		$$css: true
+	}
+};
 //#endregion
-export { chipStyles };
+export { chipLayers, chipStyles };
 
 //# sourceMappingURL=styles.js.map

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

package/dist/collection/index.js

@@ -1,4 +1,5 @@
 import ProgressIndicator from "../components/progress-indicator/index.js";
+import { useMessages } from "../i18n/index.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/collection/index.tsx
@@ -11,19 +12,21 @@ import { jsx } from "react/jsx-runtime";
 function CollectionLoadMore(t0) {
 	const $ = c(3);
 	const { label, size } = t0;
-	let t1;
-	if ($[0] !== label || $[1] !== size) {
-		t1 = /* @__PURE__ */ jsx(ProgressIndicator, {
-			"aria-label": label,
+	const messages = useMessages();
+	const t1 = label ?? messages.loadingMore;
+	let t2;
+	if ($[0] !== size || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ProgressIndicator, {
+			"aria-label": t1,
 			isIndeterminate: true,
 			size,
 			variant: "circular"
 		});
-		$[0] = label;
-		$[1] = size;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
+		$[0] = size;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
 }
 //#endregion
 export { CollectionLoadMore };

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ProgressIndicator","CollectionLoadMoreProps","label","size","CollectionLoadMore","t0","$","_c","t1","_c"],"sources":["../../src/collection/index.tsx"],"sourcesContent":["import ProgressIndicator from '../components/progress-indicator'\n\ntype CollectionLoadMoreProps = {\n  /** What a screen reader announces while the next page is on its way. */\n  label: string\n  /** The ring's diameter, which follows the row it sits in. */\n  size: string\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({ label, size }: CollectionLoadMoreProps) {\n  return (\n    <ProgressIndicator\n      aria-label={label}\n      isIndeterminate\n      size={size}\n      variant=\"circular\"\n    />\n  )\n}\n\nexport type { CollectionLoadMoreProps }\nexport { CollectionLoadMore }\n"],"mappings":";;;;;;;;;;AAeA,SAAAI,mBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAA4B,MAAA,EAAAL,OAAAC,SAAAE;CAAwC,IAAAG;CAAA,IAAAF,EAAA,OAAAJ,SAAAI,EAAA,OAAAH,MAAA;EAEhEK,KAAA,oBAAC,mBAAD;GACcN,cAAAA;GACZ,iBAAA;GACMC;GACE,SAAA;EAAU,CAAA;EAClBG,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OALFE;AAKE"}
+{"version":3,"file":"index.js","names":["ProgressIndicator","useMessages","CollectionLoadMoreProps","label","size","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  /**\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  /** The ring's diameter, which follows the row it sits in. */\n  size: string\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({ label, size }: CollectionLoadMoreProps) {\n  const messages = useMessages()\n\n  return (\n    <ProgressIndicator\n      aria-label={label ?? messages.loadingMore}\n      isIndeterminate\n      size={size}\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,OAAAC,SAAAE;CAC1B,MAAAG,WAAiBR,YAAY;CAIb,MAAAS,KAAAP,SAASM,SAAQE;CAAY,IAAAC;CAAA,IAAAL,EAAA,OAAAH,QAAAG,EAAA,OAAAG,IAAA;EAD3CE,KAAA,oBAAC,mBAAD;GACc,cAAAF;GACZ,iBAAA;GACMN;GACE,SAAA;EAAU,CAAA;EAClBG,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}