@kanso-labs/kanso-ui 0.35.0 → 0.36.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,6 +1,7 @@
 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
 /**
@@ -34,7 +35,33 @@ function chipLabel(children) {
 		children
 	});
 }
+/**
+* The pill's styles in the render state React Aria hands a chip's
+* `className`, for Chip's toggle button 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 and pressed layers come from the render state over the container, a
+* press over a hover, and disabled comes last so it wins over all of them,
+* since StyleX replaces a property whole. `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, inGroup = false) {
+	return props(chipStyles.base, chipStyles.target, inGroup && chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isHovered && (state.isSelected ? chipLayers.selectedHovered : chipLayers.unselectedHovered), state.isPressed && (state.isSelected ? chipLayers.selectedPressed : chipLayers.unselectedPressed), state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+}
+/**
+* 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 ?? "";
+}
 //#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","isSelected","props","glyph","glyphSvg","chipLabel","children","label","chipPropsFor","state","isDisabled","isHovered","isPressed","inGroup","base","target","targetInGroup","ring","selected","unselected","selectedHovered","unselectedHovered","selectedPressed","unselectedPressed","disabled","disabledSelected","disabledUnselected","chipRemoveClassName","remove","removeHovered","removePressed","className","stylex.props"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { focus } from '../styles/focus';\nimport { chipLayers, chipStyles } from './styles';\n\n/**\n * The check a selected chip draws before its label, and nothing at all while\n * it is not selected. Returns a node rather than letting the type be\n * inferred, since `ReactNode` is a union that includes a promise and an\n * inferred one has to be `async`.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(isSelected: boolean): ReactNode {\n  if (!isSelected) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph)}>\n      <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n    </span>;\n}\n\n/**\n * The label a chip draws, in a span of its own so it can be cut short with an\n * ellipsis rather than wrapped out of the pill; see the header of `./styles`.\n * Shared for the reason `chipGlyph` is, by all three components that draw the\n * pill.\n */\nfunction chipLabel(children: ReactNode): ReactNode {\n  return <span {...stylex.props(chipStyles.label)}>{children}</span>;\n}\n\n/**\n * The pill's styles in the render state React Aria hands a chip's\n * `className`, for Chip's toggle button and ChipGroup's tag alike. StyleX\n * cannot target `[data-selected]` on the element it is styling, so the\n * container is chosen here rather than in CSS — which is also why an\n * uncontrolled chip styles itself without keeping a copy of its state.\n *\n * Shared for the reason `chipGlyph` is: the order is the precedence. The\n * hover and pressed layers come from the render state over the container, a\n * press over a hover, and disabled comes last so it wins over all of them,\n * since StyleX replaces a property whole. `inGroup` is a ChipGroup's\n * chip, whose touch target reaches only halfway across the gap to the next\n * row; see `targetInGroup` in `./styles`.\n */\nfunction chipPropsFor(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}, inGroup = false) {\n  return stylex.props(chipStyles.base, chipStyles.target, inGroup && chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isHovered && (state.isSelected ? chipLayers.selectedHovered : chipLayers.unselectedHovered), state.isPressed && (state.isSelected ? chipLayers.selectedPressed : chipLayers.unselectedPressed), state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n/**\n * The close target's class, from its button's own render state, so its\n * hover and pressed layers follow React Aria's report rather than `:hover`\n * and `:active` — see `chipLayers`. A function, which React Aria's\n * `className` takes alongside a string.\n */\nfunction chipRemoveClassName(state: {\n  isHovered: boolean;\n  isPressed: boolean;\n}) {\n  return stylex.props(chipStyles.remove, state.isHovered && chipLayers.removeHovered, state.isPressed && chipLayers.removePressed).className ?? '';\n}\nexport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName };"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAASM,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIN,MAAaI,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIR,MAAaI,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV;;;;;;;AAQA,SAASC,UAAUC,UAAgC;CACjD,OAAO,oBAAC,QAAD;EAAM,GAAIX,MAAaI,WAAWQ,KAAK;EAAID;CAAe,CAAA;AACnE;;;;;;;;;;;;;;;AAgBA,SAASE,aAAaC,OAKnBI,UAAU,OAAO;CAClB,OAAOlB,MAAaI,WAAWe,MAAMf,WAAWgB,QAAQF,WAAWd,WAAWiB,eAAenB,MAAMoB,MAAMR,MAAMR,aAAaF,WAAWmB,WAAWnB,WAAWoB,YAAYV,MAAME,cAAcF,MAAMR,aAAaH,WAAWsB,kBAAkBtB,WAAWuB,oBAAoBZ,MAAMG,cAAcH,MAAMR,aAAaH,WAAWwB,kBAAkBxB,WAAWyB,oBAAoBd,MAAMC,cAAcX,WAAWyB,UAAUf,MAAMC,eAAeD,MAAMR,aAAaF,WAAW0B,mBAAmB1B,WAAW2B,mBAAmB;AAC9f;;;;;;;AAQA,SAASC,oBAAoBlB,OAG1B;CACD,OAAOd,MAAaI,WAAW6B,QAAQnB,MAAME,aAAab,WAAW+B,eAAepB,MAAMG,aAAad,WAAWgC,aAAa,CAAC,CAACC,aAAa;AAChJ"}

package/dist/chip/styles.js

@@ -67,7 +67,7 @@ const chipStyles = {
 		kFcpXp: "xtu493u",
 		kEoFBp: "x1hmns74",
 		kGNEyG: "x6s0dn4",
-		kWkggS: "xy3r1oc x15a1ka xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kZKoxP: "xmix8c7",
 		kaIpWk: "x1dkaolv",
 		kMzoRj: "xc342km",
@@ -93,7 +93,7 @@ const chipStyles = {
 		$$css: true
 	},
 	selected: {
-		kWkggS: "xnqsvhv xlizrex x15dekr4",
+		kWkggS: "x15dekr4",
 		kVAM5u: "x9r1u3d",
 		kMwMTN: "x1sawysd",
 		$$css: true
@@ -111,13 +111,39 @@ const chipStyles = {
 		$$css: true
 	},
 	unselected: {
-		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kWkggS: "xjbqb8w",
 		kVAM5u: "x133yhug",
 		kMwMTN: "x1w5n3ug",
 		$$css: true
 	}
 };
+const chipLayers = {
+	removeHovered: {
+		kWkggS: "x930l3l",
+		$$css: true
+	},
+	removePressed: {
+		kWkggS: "xsykwg8",
+		$$css: true
+	},
+	selectedHovered: {
+		kWkggS: "x1fctxn6",
+		$$css: true
+	},
+	selectedPressed: {
+		kWkggS: "xzpauq9",
+		$$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","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","chipStyles","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","ks0D6T","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","label","kVQacm","kg5iWk","khDVqt","remove","kgeoSG","kFcpXp","kEoFBp","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kVAEAm","removeGlyph","selected","target","kGOzcv","kpsdNU","targetInGroup","unselected","chipLayers","removeHovered","removePressed","selectedHovered","selectedPressed","unselectedHovered","unselectedPressed"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own; ChipGroup's chip, which is one of\n// a set that can also be removed; and TokenField's token, which takes `base`\n// and `unselected` alone — a token is not selectable, so it reaches for\n// neither the selected container nor the check below. The measurements and\n// roles are the page's filter chip — a 32dp container with an 8dp corner and\n// 16dp of inline padding, an outline variant border while unselected, the\n// secondary container pair once selected.\n//\n// **A label with no room on one line is cut short, never wrapped.** The\n// container is a fixed 32dp, so a second line has nowhere to go but out of\n// the pill: a chip or a token in a room narrower than its label drew the\n// rest below its own edge, and a chip in a group's row ran past the row's\n// end instead. The pill is held to the room it is in, and the label sits in\n// a span of its own that ends in an ellipsis where the pill does — a span,\n// because a flex container ignores `text-overflow`, which is also why\n// Material's own chips carry one. The whole label stays in the DOM, so a\n// screen reader still reads all of it.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\n// The press area the chips page requires around its 32dp chip. A literal for\n// the reason IconButton's `TARGET_SIZE` gives.\nconst TARGET_SIZE = '48px';\nconst chipStyles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  remove: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"xtu493u\",\n    kEoFBp: \"x1hmns74\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  target: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xouqwce\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  targetInGroup: {\n    kGOzcv: \"x1xkszu9\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The hover and pressed layers, applied from React Aria's render state rather\n// than from `:hover` and `:active`, for Button's reasons — see its header: a\n// hover layer stayed on after a tap, and no pressed layer showed for a press\n// made from the keyboard. One pair per container, the pressed after the\n// hovered so a press wins, and one for the close target, whose own render\n// state is its button's. A token in a TokenField draws none of them: React\n// Aria reports neither state for one, since it is text the caret moves\n// through rather than a control a press acts on.\nconst chipLayers = {\n  removeHovered: {\n    kWkggS: \"x930l3l\",\n    $$css: true\n  },\n  removePressed: {\n    kWkggS: \"xsykwg8\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  unselectedHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  unselectedPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  }\n};\nexport { chipLayers, chipStyles };"],"mappings":";AA2DA,MAAMS,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRjB,QAAQ;EACRe,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL5B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRmB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR/B,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACAY,OAAO;EACL5B,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRxC,QAAQ;EACRyB,QAAQ;EACRxB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRkB,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPqB,QAAQ;EACRC,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,aAAa;EACX/C,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACA4B,UAAU;EACRxB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACA6B,QAAQ;EACNZ,QAAQ;EACRa,QAAQ;EACRC,QAAQ;EACRZ,QAAQ;EACRO,QAAQ;EACR1B,OAAO;CACT;CACAgC,eAAe;EACbF,QAAQ;EACR9B,OAAO;CACT;CACAiC,YAAY;EACV7B,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF;AAUA,MAAMkC,aAAa;CACjBC,eAAe;EACb/B,QAAQ;EACRJ,OAAO;CACT;CACAoC,eAAe;EACbhC,QAAQ;EACRJ,OAAO;CACT;CACAqC,iBAAiB;EACfjC,QAAQ;EACRJ,OAAO;CACT;CACAsC,iBAAiB;EACflC,QAAQ;EACRJ,OAAO;CACT;CACAuC,mBAAmB;EACjBnC,QAAQ;EACRJ,OAAO;CACT;CACAwC,mBAAmB;EACjBpC,QAAQ;EACRJ,OAAO;CACT;AACF"}

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"}

package/dist/color-scheme.d.ts

@@ -0,0 +1,29 @@
+//#region src/color-scheme.d.ts
+/**
+ * The classes that pin the library's colours to its light or its dark
+ * scheme, whatever the reader's OS asks for — for an app with a theme switch
+ * of its own. Put one on the `<html>` element, where overlays portalled to
+ * the body still sit inside it; with neither there, the colours follow the
+ * OS as they always have.
+ *
+ * Shaped as next-themes takes its class names:
+ *
+ * ```tsx
+ * import { ThemeProvider } from 'next-themes'
+ * import { colorScheme } from '@kanso-labs/kanso-ui'
+ *
+ * <ThemeProvider attribute="class" value={colorScheme}>
+ *   {children}
+ * </ThemeProvider>
+ * ```
+ *
+ * A `--kui-color-*` override still applies under either, declared on the
+ * same element or above it.
+ */
+declare const colorScheme: {
+  dark: string;
+  light: string;
+};
+//#endregion
+export { colorScheme };
+//# sourceMappingURL=color-scheme.d.ts.map

package/dist/color-scheme.js

@@ -0,0 +1,32 @@
+import { props } from "./node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { colorsDarkTheme, colorsLightTheme } from "./tokens/design.tokens.stylex.js";
+//#region src/color-scheme.ts
+/**
+* The classes that pin the library's colours to its light or its dark
+* scheme, whatever the reader's OS asks for — for an app with a theme switch
+* of its own. Put one on the `<html>` element, where overlays portalled to
+* the body still sit inside it; with neither there, the colours follow the
+* OS as they always have.
+*
+* Shaped as next-themes takes its class names:
+*
+* ```tsx
+* import { ThemeProvider } from 'next-themes'
+* import { colorScheme } from '@kanso-labs/kanso-ui'
+*
+* <ThemeProvider attribute="class" value={colorScheme}>
+*   {children}
+* </ThemeProvider>
+* ```
+*
+* A `--kui-color-*` override still applies under either, declared on the
+* same element or above it.
+*/
+const colorScheme = {
+	dark: props(colorsDarkTheme).className ?? "",
+	light: props(colorsLightTheme).className ?? ""
+};
+//#endregion
+export { colorScheme };
+
+//# sourceMappingURL=color-scheme.js.map

package/dist/color-scheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-scheme.js","names":["stylex","colorsDarkTheme","colorsLightTheme","colorScheme","dark","props","className","light","stylex.props"],"sources":["../src/color-scheme.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport { colorsDarkTheme, colorsLightTheme } from './tokens/design.tokens.stylex';\n\n// The library's colours follow the reader's OS through `prefers-color-scheme`\n// unless something says otherwise, and these are what say otherwise. Both\n// classes have always been generated and shipped in the stylesheet, for\n// Storybook's Theme control; nothing in the package named them, so an app\n// with a switch of its own had to restate every colour token under its own\n// selector, twice — dark for a light OS, light for a dark one.\n//\n// A server module like the entry, since it is two strings.\n\n/**\n * The classes that pin the library's colours to its light or its dark\n * scheme, whatever the reader's OS asks for — for an app with a theme switch\n * of its own. Put one on the `<html>` element, where overlays portalled to\n * the body still sit inside it; with neither there, the colours follow the\n * OS as they always have.\n *\n * Shaped as next-themes takes its class names:\n *\n * ```tsx\n * import { ThemeProvider } from 'next-themes'\n * import { colorScheme } from '@kanso-labs/kanso-ui'\n *\n * <ThemeProvider attribute=\"class\" value={colorScheme}>\n *   {children}\n * </ThemeProvider>\n * ```\n *\n * A `--kui-color-*` override still applies under either, declared on the\n * same element or above it.\n */\nconst colorScheme = {\n  dark: stylex.props(colorsDarkTheme).className ?? '',\n  light: stylex.props(colorsLightTheme).className ?? ''\n};\nexport { colorScheme };"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMG,cAAc;CAClBC,MAAMJ,MAAaC,eAAe,CAAC,CAACK,aAAa;CACjDC,OAAOP,MAAaE,gBAAgB,CAAC,CAACI,aAAa;AACrD"}

package/dist/components/avatar/index.js

@@ -5,6 +5,7 @@ import { mergeStyles } from "../../styles/merge.js";
 import { useImageLoadingStatus } from "../../hooks/useImageLoadingStatus.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
+import { useLocale } from "react-aria-components";
 //#region src/components/avatar/index.tsx
 const styles = {
 	base: {
@@ -71,11 +72,12 @@ const styles = {
 	}
 };
 function Avatar(t0) {
-	const $ = c(17);
+	const $ = c(18);
 	const { name, render, size: t1, src, tone: t2, ...props$1 } = t0;
 	const size = t1 === void 0 ? "md" : t1;
 	const tone = t2 === void 0 ? "primary" : t2;
 	const status = useImageLoadingStatus(src);
+	const { locale } = useLocale();
 	let t3;
 	if ($[0] !== name) {
 		t3 = name.trim();
@@ -95,49 +97,60 @@ function Avatar(t0) {
 		$[4] = t5;
 	} else t5 = $[4];
 	let t6;
-	if ($[5] !== name || $[6] !== src || $[7] !== status) {
+	if ($[5] !== locale || $[6] !== name || $[7] !== src || $[8] !== status) {
 		t6 = status === "loaded" ? /* @__PURE__ */ jsx("img", {
 			alt: "",
 			src,
 			className: "x5yr21d xh8yej3 xl1xv1r"
-		}) : initialsFrom(name);
-		$[5] = name;
-		$[6] = src;
-		$[7] = status;
-		$[8] = t6;
-	} else t6 = $[8];
+		}) : initialsFrom(name, locale);
+		$[5] = locale;
+		$[6] = name;
+		$[7] = src;
+		$[8] = status;
+		$[9] = t6;
+	} else t6 = $[9];
 	const t7 = mergeStyles(props(styles.base, styles[size], styles[tone]), props$1);
 	let t8;
-	if ($[9] !== props$1 || $[10] !== t5 || $[11] !== t6 || $[12] !== t7) {
+	if ($[10] !== props$1 || $[11] !== t5 || $[12] !== t6 || $[13] !== t7) {
 		t8 = {
 			...t5,
 			...props$1,
 			children: t6,
 			...t7
 		};
-		$[9] = props$1;
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = t7;
-		$[13] = t8;
-	} else t8 = $[13];
+		$[10] = props$1;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
 	let t9;
-	if ($[14] !== render || $[15] !== t8) {
+	if ($[15] !== render || $[16] !== t8) {
 		t9 = {
 			defaultTagName: t4,
 			props: t8,
 			render
 		};
-		$[14] = render;
-		$[15] = t8;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[15] = render;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
 	return useRender(t9);
 }
-function initialsFrom(name) {
+function initialsFrom(name, locale) {
 	const words = name.split(/\s+/u).filter(Boolean);
 	if (words.length === 0) return "";
-	return `${Array.from(words[0] ?? "")[0] ?? ""}${words.length > 1 ? Array.from(words.at(-1) ?? "")[0] ?? "" : ""}`.toLocaleUpperCase();
+	return `${firstGrapheme(words[0] ?? "", locale)}${words.length > 1 ? firstGrapheme(words.at(-1) ?? "", locale) : ""}`.toLocaleUpperCase(locale);
+}
+const segmenters = /* @__PURE__ */ new Map();
+function firstGrapheme(word, locale) {
+	let segmenter = segmenters.get(locale);
+	if (segmenter === void 0) {
+		segmenter = new Intl.Segmenter(locale, { granularity: "grapheme" });
+		segmenters.set(locale, segmenter);
+	}
+	for (const { segment } of segmenter.segment(word)) return segment;
+	return "";
 }
 //#endregion
 export { Avatar as default };