@kanso-labs/kanso-ui 0.43.7 → 0.44.0

package/dist/navigation/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","media","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","HOVERED_OVER_NOTHING","onSecondaryContainer","hover","FOCUSED_OVER_NOTHING","focus","PRESSED_OVER_NOTHING","pressed","HOVERED_OVER_CURRENT","secondaryContainer","FOCUSED_OVER_CURRENT","PRESSED_OVER_CURRENT","navigationItemStyles","icon","kGNEyG","k1xSpc","kGuDYH","kjj79g","$$css","itemDisabled","kMwMTN","kkrTdU","label","kVQacm","kg5iWk","khDVqt","link","kB7OPa","k3XXqK","kVAEAm","kMnn75","pill","kWkggS","kaIpWk","TARGET_SIZE","barItemStyles","badgeMark","kSGwAc","kLqNvP","keTefX","indicator","kZKoxP","kmuXW","kzqmXN","indicatorCurrent","kVAM5u","ksu8eU","kMzoRj","indicatorFocused","indicatorFocusedCurrent","indicatorHovered","indicatorHoveredCurrent","indicatorPressed","indicatorPressedCurrent","indicatorRing","kjBf7l","kInvED","kMeerF","item","k5JduY","kSy8m5","kcktkL","kwXMNM","kCS8Yb","kXwgrk","kzQI83","kOIVth","k7Eaqz","k8WAf4","kg3NbH","itemCurrent","itemFocused","itemFocusedCurrent","itemHovered","itemHoveredCurrent","itemPressed","itemPressedCurrent","itemRing","kMv6JI","k63SB2","kb6lSQ","kLWn49","ks0D6T","labelCurrent","collapsedItemStyles","expandedItemStyles","crampedBarItemStyles"],"sources":["../../src/navigation/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The destinations NavigationBar and NavigationRail both draw, in the three\n// forms the two pages give them. Apart from either component so the two\n// cannot drift, and outside `src/components` for the reason src/row gives.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the navigation bar\n// below the medium breakpoint, and the collapsed rail. A horizontal one is a\n// pill holding the icon and the label side by side, 16dp in at either end:\n// the bar at and above the medium breakpoint at 40dp with 4dp between the\n// two, and the expanded rail at 56dp with 8dp between them, in label large.\n//\n// The current destination's pill is the secondary container, with its icon\n// in on secondary container and, under the pill, its label in secondary;\n// every other is on surface variant. A label set inside the pill, as a\n// horizontal destination sets it, takes on secondary container instead — the\n// library's own call. Secondary over secondary container is not a pair a\n// scheme is held to, and the Poster scheme's came to 4:1, short of the 4.5:1\n// text needs; on secondary container is the pair every scheme guarantees.\n//\n// The hover, focus and pressed layers are the on secondary container role\n// over whatever the pill is, at the pages' 8%, 10% and 10%, drawn on the\n// pill — the indicator in a vertical destination, the whole destination in a\n// horizontal one. They are applied in that order, so where two hold the\n// later wins, as the pages draw one layer at a time. A focused destination's\n// ring goes around the same pill; ./index.tsx says whose ring it is.\n//\n// Under forced colours the mode paints the secondary container over in its\n// background, which left the current destination looking like every other.\n// The pill takes a 2px border in `Highlight` there, which the mode keeps.\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)';\n\n// The pill's ground and the layers over it, written out whole for each\n// ground, since StyleX replaces a property whole.\nconst HOVERED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), transparent)`;\nconst FOCUSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), transparent)`;\nconst PRESSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), transparent)`;\nconst HOVERED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), ${colors.secondaryContainer})`;\nconst FOCUSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), ${colors.secondaryContainer})`;\nconst PRESSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), ${colors.secondaryContainer})`;\n\n// What every destination draws whatever its form.\nconst navigationItemStyles = {\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  itemDisabled: {\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  link: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  pill: {\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The pages' least touch target, which a horizontal bar destination's 40dp\n// pill falls short of.\nconst TARGET_SIZE = '48px';\n\n// The navigation bar's destination: vertical below the medium breakpoint and\n// horizontal at it and above, so every value that differs is a pair.\nconst barItemStyles = {\n  badgeMark: {\n    kSGwAc: \"xcspwbw\",\n    kLqNvP: \"xty0069 x19sl9hu\",\n    keTefX: \"xhi6r6q\",\n    kVAEAm: \"x10l6tqk x15m4ytg\",\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97 x10qpgbh\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f x11lewyt\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4 x8jqrm0\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck xnqlxux\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su x8jqrm0\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g x8jqrm0\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf x8jqrm0\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6 x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9 x8jqrm0\",\n    $$css: true\n  },\n  indicatorRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 x1t601oj\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  item: {\n    k5JduY: \"x1ktxc2h\",\n    kSy8m5: \"xfmxh57\",\n    kcktkL: \"xb7ltuz\",\n    kwXMNM: \"x1j6awrg\",\n    kZKoxP: \"x5yr21d xiioxts\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery x1a6ly76\",\n    kXwgrk: \"xdt5ytf xapwh9g\",\n    kzQI83: \"x1iyjqo2 x10cb59y\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8 x1nouyz5\",\n    kg3NbH: \"xnjsko4 xze1m75\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"xjbqb8w x1xec0pq\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"x1xldtvv x1wx4lrg\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"xjbqb8w xdodzsd\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"xjbqb8w xnmt8re\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"xjbqb8w xdenq60\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"xjbqb8w xjq3nej\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"xjbqb8w x7fq6vu\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xjbqb8w x9wewpu\",\n    $$css: true\n  },\n  itemRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt xxgb522\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9 x16ybrrz\",\n    $$css: true\n  }\n};\n\n// The collapsed rail's destination: always vertical, the pitch from one to\n// the next the rail's 4dp gap.\nconst collapsedItemStyles = {\n  badgeMark: {\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  item: {\n    kXwgrk: \"xdt5ytf\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  itemCurrent: {\n    $$css: true\n  },\n  itemFocused: {\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    $$css: true\n  },\n  itemHovered: {\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    $$css: true\n  },\n  itemPressed: {\n    $$css: true\n  },\n  itemPressedCurrent: {\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9\",\n    $$css: true\n  }\n};\n\n// The expanded rail's destination: always horizontal, a 56dp pill as wide as\n// what it holds.\nconst expandedItemStyles = {\n  badgeMark: {\n    kSGwAc: \"xqcrz7y\",\n    kLqNvP: \"x1o0tod\",\n    keTefX: \"x18xomjl\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    $$css: true\n  },\n  indicatorHovered: {\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    $$css: true\n  },\n  indicatorPressed: {\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    $$css: true\n  },\n  item: {\n    kSGwAc: \"xqcrz7y\",\n    kZKoxP: \"xnnlda6\",\n    kaIpWk: \"x1dkaolv\",\n    kXwgrk: \"x1q0g3np\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    ks0D6T: \"x193iq5w\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  }\n};\n\n// The bar's destination when the bar is too narrow for its horizontal form\n// at a width that would otherwise draw it — see NavigationBar. Vertical at\n// every width: the bar's own vertical item, with the collapsed rail's\n// indicator, label and badge placement, which are the bar's vertical ones.\nconst crampedBarItemStyles = {\n  item: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  }\n};\nexport { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","media","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","HOVERED_OVER_NOTHING","onSecondaryContainer","hover","FOCUSED_OVER_NOTHING","focus","PRESSED_OVER_NOTHING","pressed","HOVERED_OVER_CURRENT","secondaryContainer","FOCUSED_OVER_CURRENT","PRESSED_OVER_CURRENT","navigationItemStyles","fade","kIyJzY","k1ekBW","kAMwcw","$$css","icon","kGNEyG","k1xSpc","kGuDYH","kjj79g","itemDisabled","kMwMTN","kkrTdU","label","kXHlph","kORKVm","kg5iWk","khDVqt","link","kB7OPa","k3XXqK","kVAEAm","kMnn75","pill","kWkggS","kaIpWk","navigationListStyles","item","list","kH6xsr","kogj98","kmVPX3","TARGET_SIZE","BAR_ROW","PILL","barItemStyles","badgeMark","kSGwAc","kLqNvP","keTefX","indicator","kZKoxP","kmuXW","kzqmXN","indicatorCurrent","kVAM5u","ksu8eU","kMzoRj","indicatorFocused","indicatorFocusedCurrent","indicatorHovered","indicatorHoveredCurrent","indicatorPressed","indicatorPressedCurrent","indicatorRing","kjBf7l","kInvED","kMeerF","k5JduY","kSy8m5","kcktkL","kwXMNM","kCS8Yb","kXwgrk","kzQI83","kOIVth","kqGvvJ","kAzted","k7Eaqz","k8WAf4","kg3NbH","itemCurrent","itemFocused","itemFocusedCurrent","itemHovered","itemHoveredCurrent","itemPressed","itemPressedCurrent","itemRing","kMv6JI","k63SB2","kb6lSQ","kLWn49","ks0D6T","labelCurrent","listItem","collapsedItemStyles","expandedItemStyles","crampedBarItemStyles"],"sources":["../../src/navigation/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The destinations NavigationBar and NavigationRail both draw, in the three\n// forms the two pages give them. Apart from either component so the two\n// cannot drift, and outside `src/components` for the reason src/row gives.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the navigation bar\n// below the medium breakpoint, and the collapsed rail. A horizontal one is a\n// pill holding the icon and the label side by side, 16dp in at either end:\n// the bar at and above the medium breakpoint at 40dp with 4dp between the\n// two, and the expanded rail at 56dp with 8dp between them, in label large.\n//\n// The current destination's pill is the secondary container, with its icon\n// in on secondary container and, under the pill, its label in secondary;\n// every other is on surface variant. A label set inside the pill, as a\n// horizontal destination sets it, takes on secondary container instead — the\n// library's own call. Secondary over secondary container is not a pair a\n// scheme is held to, and the Poster scheme's came to 4:1, short of the 4.5:1\n// text needs; on secondary container is the pair every scheme guarantees.\n//\n// The hover, focus and pressed layers are the on secondary container role\n// over whatever the pill is, at the pages' 8%, 10% and 10%, drawn on the\n// pill — the indicator in a vertical destination, the whole destination in a\n// horizontal one. They are applied in that order, so where two hold the\n// later wins, as the pages draw one layer at a time. A focused destination's\n// ring goes around the same pill; ./index.tsx says whose ring it is.\n//\n// A change from one of those states to another fades, over the pages' short\n// duration on the standard curve, rather than landing in one frame. A press\n// also draws the library's ripple over the pressed layer, clipped to the\n// pill: inside the indicator in a vertical destination, which positions it,\n// and across the whole destination in a horizontal one, whose indicator is\n// left unpositioned so the ripple fills the link and takes the indicator's\n// pill corner.\n//\n// Under forced colours the mode paints the secondary container over in its\n// background, which left the current destination looking like every other.\n// The pill takes a 2px border in `Highlight` there, which the mode keeps.\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)';\n\n// The pill's ground and the layers over it, written out whole for each\n// ground, since StyleX replaces a property whole.\nconst HOVERED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), transparent)`;\nconst FOCUSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), transparent)`;\nconst PRESSED_OVER_NOTHING = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), transparent)`;\nconst HOVERED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.hover} * 100%), ${colors.secondaryContainer})`;\nconst FOCUSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.focus} * 100%), ${colors.secondaryContainer})`;\nconst PRESSED_OVER_CURRENT = `color-mix(in srgb, ${colors.onSecondaryContainer} calc(${stateLayerOpacity.pressed} * 100%), ${colors.secondaryContainer})`;\n\n// What every destination draws whatever its form.\nconst navigationItemStyles = {\n  fade: {\n    kIyJzY: \"x1qno0dh x12w9bfk\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  itemDisabled: {\n    kMwMTN: \"x1gpw424 x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  label: {\n    kMwMTN: \"x1w5n3ug\",\n    kXHlph: \"x101abm8\",\n    kORKVm: \"xryxfnj\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  link: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  pill: {\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\n\n// The list a bar or a rail holds its destinations in, and the item each\n// destination sits in — see `NavigationList` in ./index.tsx. The list clears\n// the margin, padding and markers a `<ul>` comes with, and each form gives\n// the space between its destinations as its `list`. The item takes the\n// destination's place in the bar's row or the rail's column, which each form\n// gives as its `listItem`, and the link fills it.\nconst navigationListStyles = {\n  item: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  list: {\n    kB7OPa: \"x9f619\",\n    kH6xsr: \"x3ct3a4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\n\n// The pages' least touch target, which a horizontal bar destination's 40dp\n// pill falls short of.\nconst TARGET_SIZE = '48px';\n\n// The navigation bar page's 64dp row, and the 40dp pill a horizontal\n// destination draws inside it.\nconst BAR_ROW = '64px';\nconst PILL = '40px';\n\n// The navigation bar's destination: vertical below the medium breakpoint and\n// horizontal at it and above, so every value that differs is a pair.\nconst barItemStyles = {\n  badgeMark: {\n    kSGwAc: \"xcspwbw\",\n    kLqNvP: \"xty0069 x19sl9hu\",\n    keTefX: \"xhi6r6q\",\n    kVAEAm: \"x10l6tqk x15m4ytg\",\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97 x10qpgbh\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f x11lewyt\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6 xtke4eg\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4 x8jqrm0\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck xnqlxux\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su x8jqrm0\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g x8jqrm0\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf x8jqrm0\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6 x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj x8jqrm0\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9 x8jqrm0\",\n    $$css: true\n  },\n  indicatorRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 x1t601oj\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  item: {\n    k5JduY: \"x1ktxc2h\",\n    kSy8m5: \"xfmxh57\",\n    kcktkL: \"xb7ltuz\",\n    kwXMNM: \"x1j6awrg\",\n    kZKoxP: \"xiioxts\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery x1a6ly76\",\n    kXwgrk: \"xdt5ytf xapwh9g\",\n    kzQI83: \"x1iyjqo2 x10cb59y\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    kqGvvJ: \"x10im51j xap7i12\",\n    kAzted: \"x8nclml xtyuij1\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8 x1nouyz5\",\n    kg3NbH: \"xnjsko4 xze1m75\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"xjbqb8w x1xec0pq\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"x1xldtvv x1wx4lrg\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"xjbqb8w xdodzsd\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"xjbqb8w xnmt8re\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"xjbqb8w xdenq60\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"xjbqb8w xjq3nej\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"xjbqb8w x7fq6vu\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xjbqb8w x9wewpu\",\n    $$css: true\n  },\n  itemRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt xxgb522\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9 x16ybrrz\",\n    $$css: true\n  },\n  list: {\n    kOIVth: \"xxhr3t x110hqo6\",\n    $$css: true\n  },\n  listItem: {\n    kCS8Yb: \"x1r8uery x1a6ly76\",\n    kzQI83: \"x1iyjqo2 x10cb59y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  }\n};\n\n// The collapsed rail's destination: always vertical, the pitch from one to\n// the next the rail's 4dp gap.\nconst collapsedItemStyles = {\n  badgeMark: {\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x15yg21f\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  indicatorHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  indicatorPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  item: {\n    kXwgrk: \"xdt5ytf\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  itemCurrent: {\n    $$css: true\n  },\n  itemFocused: {\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    $$css: true\n  },\n  itemHovered: {\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    $$css: true\n  },\n  itemPressed: {\n    $$css: true\n  },\n  itemPressedCurrent: {\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"xzakmg9\",\n    $$css: true\n  },\n  list: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  listItem: {\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  }\n};\n\n// The expanded rail's destination: always horizontal, a 56dp pill as wide as\n// what it holds.\nconst expandedItemStyles = {\n  badgeMark: {\n    kSGwAc: \"xqcrz7y\",\n    kLqNvP: \"x1o0tod\",\n    keTefX: \"x18xomjl\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  indicator: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  indicatorCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  indicatorFocused: {\n    $$css: true\n  },\n  indicatorFocusedCurrent: {\n    $$css: true\n  },\n  indicatorHovered: {\n    $$css: true\n  },\n  indicatorHoveredCurrent: {\n    $$css: true\n  },\n  indicatorPressed: {\n    $$css: true\n  },\n  indicatorPressedCurrent: {\n    $$css: true\n  },\n  item: {\n    kSGwAc: \"xqcrz7y\",\n    kZKoxP: \"xnnlda6\",\n    kaIpWk: \"x1dkaolv\",\n    kXwgrk: \"x1q0g3np\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    ks0D6T: \"x193iq5w\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  itemCurrent: {\n    kWkggS: \"x15dekr4\",\n    kVAM5u: \"x1n2ykn\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x2h6xq1\",\n    $$css: true\n  },\n  itemFocused: {\n    kWkggS: \"x1syr9su\",\n    $$css: true\n  },\n  itemFocusedCurrent: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  itemHovered: {\n    kWkggS: \"x173luhf\",\n    $$css: true\n  },\n  itemHoveredCurrent: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  itemPressed: {\n    kWkggS: \"x1rydsgj\",\n    $$css: true\n  },\n  itemPressedCurrent: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelCurrent: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  list: {\n    $$css: true\n  },\n  listItem: {\n    kSGwAc: \"xqcrz7y\",\n    kmuXW: \"x2lah0s\",\n    ks0D6T: \"x193iq5w\",\n    $$css: true\n  }\n};\n\n// The bar's destination when the bar is too narrow for its horizontal form\n// at a width that would otherwise draw it — see NavigationBar. Vertical at\n// every width: the bar's own vertical item, with the collapsed rail's\n// indicator, label and badge placement, which are the bar's vertical ones.\nconst crampedBarItemStyles = {\n  item: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kCS8Yb: \"x1r8uery\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xzoy561\",\n    kjj79g: \"xl56j7k\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"x1t0vds8\",\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  list: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  listItem: {\n    kCS8Yb: \"x1r8uery\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  }\n};\nexport { barItemStyles, collapsedItemStyles, crampedBarItemStyles, expandedItemStyles, navigationItemStyles, navigationListStyles };"],"mappings":"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"}

package/dist/overlay/modal.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region src/overlay/modal.ts
+const InsideModalContext = createContext(false);
+//#endregion
+export { InsideModalContext };
+
+//# sourceMappingURL=modal.js.map

package/dist/overlay/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","names":["createContext","InsideModalContext"],"sources":["../../src/overlay/modal.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Whether a modal is open around what reads it. Every modal draws its own\n// scrim across the whole window, so one opened from inside another laid a\n// second over the first: the page darkened twice over, and the first modal's\n// own surface was dimmed with it. A modal set inside another reads this as\n// true and draws its scrim without a fill, leaving the first modal's as the\n// one the page is dimmed by. Its scrim is still there, empty, since it is\n// what React Aria reads a press outside the modal from.\n//\n// Set by a modal around its content rather than by `OverlayScope`, which\n// popovers set too: a modal opened from a popover is over a modal only if the\n// popover is inside one, and the context reaching it through the popover from\n// further out says exactly that. Apart from the components so their modules\n// export components alone, which is what keeps fast refresh working for them.\nconst InsideModalContext = createContext(false)\n\nexport { InsideModalContext }\n"],"mappings":";;AAeA,MAAMC,qBAAqBD,cAAc,KAAK"}

package/dist/row/index.js

@@ -1,6 +1,6 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { hasContent } from "../render/content.js";
-import { rowStyles } from "./styles.js";
+import { rowStyles, supportingTone } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/row/index.tsx
@@ -16,7 +16,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * the same arrangement around a field.
 */
 function RowContent(t0) {
-	const $ = c(29);
+	const $ = c(34);
 	const { children, isDisabled: t1, isEmphasized: t2, isSelected: t3, leading, overline, supporting, trailing, variant: t4 } = t0;
 	const isDisabled = t1 === void 0 ? false : t1;
 	const isEmphasized = t2 === void 0 ? false : t2;
@@ -24,107 +24,110 @@ function RowContent(t0) {
 	const variant = t4 === void 0 ? "list" : t4;
 	const label = variant === "drawer" || variant === "menu";
 	let t5;
-	if ($[0] !== isDisabled || $[1] !== isSelected || $[2] !== variant) {
-		t5 = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);
-		$[0] = isDisabled;
-		$[1] = isSelected;
-		$[2] = variant;
-		$[3] = t5;
-	} else t5 = $[3];
-	const supportingTone = t5;
 	let t6;
-	if ($[4] !== leading) {
-		t6 = !hasContent(leading) ? null : /* @__PURE__ */ jsx("span", {
-			...props(rowStyles.slot),
-			children: leading
-		});
-		$[4] = leading;
-		$[5] = t6;
-	} else t6 = $[5];
 	let t7;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = props(rowStyles.main);
-		$[6] = t7;
-	} else t7 = $[6];
 	let t8;
-	if ($[7] !== overline || $[8] !== supportingTone) {
-		t8 = !hasContent(overline) ? null : /* @__PURE__ */ jsx("span", {
-			...props(rowStyles.overline, supportingTone),
-			children: overline
-		});
-		$[7] = overline;
-		$[8] = supportingTone;
-		$[9] = t8;
-	} else t8 = $[9];
 	let t9;
-	if ($[10] !== isEmphasized || $[11] !== label) {
-		t9 = props(label ? rowStyles.headlineMenu : rowStyles.headlineList, isEmphasized && rowStyles.headlineEmphasis);
-		$[10] = isEmphasized;
-		$[11] = label;
-		$[12] = t9;
-	} else t9 = $[12];
-	let t10;
-	if ($[13] !== children || $[14] !== t9) {
-		t10 = /* @__PURE__ */ jsx("span", {
-			...t9,
-			children
+	if ($[0] !== children || $[1] !== isDisabled || $[2] !== isEmphasized || $[3] !== isSelected || $[4] !== label || $[5] !== leading || $[6] !== overline || $[7] !== supporting || $[8] !== variant) {
+		const tone = supportingTone(variant, {
+			isDisabled,
+			isSelected
 		});
-		$[13] = children;
-		$[14] = t9;
-		$[15] = t10;
-	} else t10 = $[15];
-	let t11;
-	if ($[16] !== supporting || $[17] !== supportingTone) {
-		t11 = !hasContent(supporting) ? null : /* @__PURE__ */ jsx("span", {
-			...props(rowStyles.supporting, supportingTone),
+		if ($[14] !== leading) {
+			t9 = !hasContent(leading) ? null : /* @__PURE__ */ jsx("span", {
+				...props(rowStyles.slot),
+				children: leading
+			});
+			$[14] = leading;
+			$[15] = t9;
+		} else t9 = $[15];
+		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = props(rowStyles.main);
+			$[16] = t5;
+		} else t5 = $[16];
+		t6 = !hasContent(overline) ? null : /* @__PURE__ */ jsx("span", {
+			...props(rowStyles.overline, tone),
+			children: overline
+		});
+		let t10;
+		if ($[17] !== isEmphasized || $[18] !== label) {
+			t10 = props(label ? rowStyles.headlineMenu : rowStyles.headlineList, isEmphasized && rowStyles.headlineEmphasis);
+			$[17] = isEmphasized;
+			$[18] = label;
+			$[19] = t10;
+		} else t10 = $[19];
+		if ($[20] !== children || $[21] !== t10) {
+			t7 = /* @__PURE__ */ jsx("span", {
+				...t10,
+				children
+			});
+			$[20] = children;
+			$[21] = t10;
+			$[22] = t7;
+		} else t7 = $[22];
+		t8 = !hasContent(supporting) ? null : /* @__PURE__ */ jsx("span", {
+			...props(rowStyles.supporting, tone),
 			children: supporting
 		});
-		$[16] = supporting;
-		$[17] = supportingTone;
-		$[18] = t11;
-	} else t11 = $[18];
-	let t12;
-	if ($[19] !== t10 || $[20] !== t11 || $[21] !== t8) {
-		t12 = /* @__PURE__ */ jsxs("span", {
-			...t7,
+		$[0] = children;
+		$[1] = isDisabled;
+		$[2] = isEmphasized;
+		$[3] = isSelected;
+		$[4] = label;
+		$[5] = leading;
+		$[6] = overline;
+		$[7] = supporting;
+		$[8] = variant;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+		$[13] = t9;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+		t7 = $[11];
+		t8 = $[12];
+		t9 = $[13];
+	}
+	let t10;
+	if ($[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8) {
+		t10 = /* @__PURE__ */ jsxs("span", {
+			...t5,
 			children: [
-				t8,
-				t10,
-				t11
+				t6,
+				t7,
+				t8
 			]
 		});
-		$[19] = t10;
-		$[20] = t11;
-		$[21] = t8;
-		$[22] = t12;
-	} else t12 = $[22];
-	let t13;
-	if ($[23] !== trailing) {
-		t13 = !hasContent(trailing) ? null : /* @__PURE__ */ jsx("span", {
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== trailing) {
+		t11 = !hasContent(trailing) ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.slot),
 			children: trailing
 		});
-		$[23] = trailing;
-		$[24] = t13;
-	} else t13 = $[24];
-	let t14;
-	if ($[25] !== t12 || $[26] !== t13 || $[27] !== t6) {
-		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t6,
-			t12,
-			t13
+		$[28] = trailing;
+		$[29] = t11;
+	} else t11 = $[29];
+	let t12;
+	if ($[30] !== t10 || $[31] !== t11 || $[32] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t9,
+			t10,
+			t11
 		] });
-		$[25] = t12;
-		$[26] = t13;
-		$[27] = t6;
-		$[28] = t14;
-	} else t14 = $[28];
-	return t14;
-}
-function selectedSupportingTone(variant) {
-	if (variant === "drawer") return rowStyles.supportingSelectedDrawer;
-	if (variant === "menu") return rowStyles.supportingSelectedMenu;
-	return rowStyles.supportingSelectedList;
+		$[30] = t10;
+		$[31] = t11;
+		$[32] = t9;
+		$[33] = t12;
+	} else t12 = $[33];
+	return t12;
 }
 //#endregion
 export { RowContent };

package/dist/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","hasContent","rowStyles","RowContentProps","children","isDisabled","isEmphasized","isSelected","leading","overline","supporting","trailing","variant","RowVariant","RowContent","t0","$","_c","t1","t2","t3","t4","undefined","label","t5","supportingInherit","selectedSupportingTone","supportingTone","t6","props","slot","t7","Symbol","for","main","t8","t9","headlineMenu","headlineList","headlineEmphasis","t10","t11","t12","t13","t14","supportingSelectedDrawer","supportingSelectedMenu","supportingSelectedList","_c","stylex.props"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { hasContent } from '../render/content';\nimport { rowStyles } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Whether the row is disabled. The supporting line takes the row's own\n   * faded colour when it is, rather than staying at full strength in the\n   * muted role.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the headline is drawn heavier than its variant's own weight, for\n   * a row marked without the container a selected one takes. The navigation\n   * drawer's trail to the current row is what asks for it.\n   * @default false\n   */\n  isEmphasized?: boolean;\n  /**\n   * Whether the row is selected. The supporting line takes the selected\n   * container's own content role when it is, rather than staying in the\n   * muted role it draws on the surface.\n   * @default false\n   */\n  isSelected?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n  /**\n   * Which spec page's row this is. A list item's headline is body-large; a\n   * menu item's label and a navigation drawer row's are label-large. The\n   * element around the content applies the matching `rowStyles.list`,\n   * `rowStyles.menu` or `rowStyles.drawer` beside `rowStyles.base`.\n   * @default 'list'\n   */\n  variant?: RowVariant;\n}\ntype RowVariant = 'drawer' | 'list' | 'menu';\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base`, the variant's own style, and whichever states\n * apply; this is what every one of them puts inside it, so a list, a menu, a\n * tree and a drawer draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isEmphasized = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list'\n}: RowContentProps) {\n  // The drawer's label is the menu's, so the two share the headline style;\n  // what they do not share is the container a selected row brings, which is\n  // why the tone below still asks which variant this is.\n  const label = variant === 'drawer' || variant === 'menu';\n  // Disabled first: a disabled row's own colour is already the faded one, so\n  // it wins over the selected container's content role.\n  const supportingTone = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);\n  return <>\n      {!hasContent(leading) ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        {!hasContent(overline) ? null : <span {...stylex.props(rowStyles.overline, supportingTone)}>\n            {overline}\n          </span>}\n        <span {...stylex.props(label ? rowStyles.headlineMenu : rowStyles.headlineList, isEmphasized && rowStyles.headlineEmphasis)}>\n          {children}\n        </span>\n        {!hasContent(supporting) ? null : <span {...stylex.props(rowStyles.supporting, supportingTone)}>\n            {supporting}\n          </span>}\n      </span>\n      {!hasContent(trailing) ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\n\n// Which on-colour a supporting line takes over a selected row's own\n// container. Each variant's container is a different colour family, and the\n// muted role is not guaranteed to be readable over any of them.\nfunction selectedSupportingTone(variant: RowVariant) {\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport type { RowContentProps, RowVariant };\nexport { RowContent };"],"mappings":";;;;;;;;;;;;;;;;;AA6DA,SAAAe,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAb,UAAAC,YAAAa,IAAAZ,cAAAa,IAAAZ,YAAAa,IAAAZ,SAAAC,UAAAC,YAAAC,UAAAC,SAAAS,OAAAN;CAElB,MAAAV,aAAAa,OAAAI,KAAAA,IAAA,QAAAJ;CACA,MAAAZ,eAAAa,OAAAG,KAAAA,IAAA,QAAAH;CACA,MAAAZ,aAAAa,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAR,UAAAS,OAAAC,KAAAA,IAAA,SAAAD;CAKA,MAAAE,QAAcX,YAAY,YAAYA,YAAY;CAAO,IAAAY;CAAA,IAAAR,EAAA,OAAAX,cAAAW,EAAA,OAAAT,cAAAS,EAAA,OAAAJ,SAAA;EAGlCY,KAAAnB,aAAaH,UAASuB,oBAAqBlB,cAAcmB,uBAAuBd,OAAO;EAACI,EAAA,KAAAX;EAAAW,EAAA,KAAAT;EAAAS,EAAA,KAAAJ;EAAAI,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAA/G,MAAAW,iBAAuBH;CAAyF,IAAAI;CAAA,IAAAZ,EAAA,OAAAR,SAAA;EAE3GoB,KAAA,CAAC3B,WAAWO,OAAO,IAAnB,OAA8B,oBAAA,QAAA;GAAwD,GAA9CR,MAAaE,UAAS4B,IAAK;GAAItB,UAAAA;EAAe,CAAA;EAAAQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAgB,OAAAC,IAAA,2BAAA,GAAA;EAC7EF,KAAA/B,MAAaE,UAASgC,IAAK;EAAClB,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,OAAAP,YAAAO,EAAA,OAAAW,gBAAA;EACnCQ,KAAA,CAAClC,WAAWQ,QAAQ,IAApB,OAA+B,oBAAA,QAAA;GAEvB,GAFiCT,MAAaE,UAASO,UAAWkB,cAAc;GACpFlB,UAAAA;EACI,CAAA;EAAAO,EAAA,KAAAP;EAAAO,EAAA,KAAAW;EAAAX,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAV,gBAAAU,EAAA,QAAAO,OAAA;EACCa,KAAApC,MAAauB,QAAQrB,UAASmC,eAAgBnC,UAASoC,cAAehC,gBAAgBJ,UAASqC,gBAAiB;EAACvB,EAAA,MAAAV;EAAAU,EAAA,MAAAO;EAAAP,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAwB;CAAA,IAAAxB,EAAA,QAAAZ,YAAAY,EAAA,QAAAoB,IAAA;EAA3HI,MAAA,oBAAA,QAAA;GAEO,GAFGJ;GACPhC;EACI,CAAA;EAAAY,EAAA,MAAAZ;EAAAY,EAAA,MAAAoB;EAAApB,EAAA,MAAAwB;CAAA,OAAAA,MAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAN,cAAAM,EAAA,QAAAW,gBAAA;EACNc,MAAA,CAACxC,WAAWS,UAAU,IAAtB,OAAiC,oBAAA,QAAA;GAEzB,GAFmCV,MAAaE,UAASQ,YAAaiB,cAAc;GACxFjB,UAAAA;EACI,CAAA;EAAAM,EAAA,MAAAN;EAAAM,EAAA,MAAAW;EAAAX,EAAA,MAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAwB,OAAAxB,EAAA,QAAAyB,OAAAzB,EAAA,QAAAmB,IAAA;EATXO,MAAA,qBAAA,QAAA;GAUO,GAVGX;GAAV,UAAA;IACGI;IAGDK;IAGCC;GAGI;;EAAAzB,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;EAAAzB,EAAA,MAAAmB;EAAAnB,EAAA,MAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAL,UAAA;EACNgC,MAAA,CAAC1C,WAAWU,QAAQ,IAApB,OAA+B,oBAAA,QAAA;GAAyD,GAA/CX,MAAaE,UAAS4B,IAAK;GAAInB,UAAAA;EAAgB,CAAA;EAAAK,EAAA,MAAAL;EAAAK,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,IAAA4B;CAAA,IAAA5B,EAAA,QAAA0B,OAAA1B,EAAA,QAAA2B,OAAA3B,EAAA,QAAAY,IAAA;EAbtFgB,MAAA,qBAAA,UAAA,EAAA,UAAA;GACFhB;GACDc;GAWCC;EAAwF,EAAA,CAAA;EACxF3B,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;EAAA3B,EAAA,MAAAY;EAAAZ,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAAA,OAdE4B;AAcF;AAMP,SAASlB,uBAAuBd,SAAqB;CACnD,IAAIA,YAAY,UACd,OAAOV,UAAU2C;CAEnB,IAAIjC,YAAY,QACd,OAAOV,UAAU4C;CAEnB,OAAO5C,UAAU6C;AACnB"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","hasContent","rowStyles","supportingTone","RowContentProps","children","isDisabled","isEmphasized","isSelected","leading","overline","supporting","trailing","variant","RowVariant","RowContent","t0","$","_c","t1","t2","t3","t4","undefined","label","t5","t6","t7","t8","t9","tone","props","slot","Symbol","for","main","t10","headlineMenu","headlineList","headlineEmphasis","t11","t12","_c","stylex.props"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { hasContent } from '../render/content';\nimport { rowStyles, supportingTone } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Whether the row is disabled. The supporting line takes the row's own\n   * faded colour when it is, rather than staying at full strength in the\n   * muted role.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the headline is drawn heavier than its variant's own weight, for\n   * a row marked without the container a selected one takes. The navigation\n   * drawer's trail to the current row is what asks for it.\n   * @default false\n   */\n  isEmphasized?: boolean;\n  /**\n   * Whether the row is selected. The supporting line takes the selected\n   * container's own content role when it is, rather than staying in the\n   * muted role it draws on the surface.\n   * @default false\n   */\n  isSelected?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n  /**\n   * Which spec page's row this is. A list item's headline is body-large; a\n   * menu item's label and a navigation drawer row's are label-large. The\n   * element around the content applies the matching `rowStyles.list`,\n   * `rowStyles.menu` or `rowStyles.drawer` beside `rowStyles.base`.\n   * @default 'list'\n   */\n  variant?: RowVariant;\n}\ntype RowVariant = 'drawer' | 'list' | 'menu';\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base`, the variant's own style, and whichever states\n * apply; this is what every one of them puts inside it, so a list, a menu, a\n * tree and a drawer draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isEmphasized = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list'\n}: RowContentProps) {\n  // The drawer's label is the menu's, so the two share the headline style;\n  // what they do not share is the container a selected row brings, which is\n  // why the tone below still asks which variant this is.\n  const label = variant === 'drawer' || variant === 'menu';\n  const tone = supportingTone(variant, {\n    isDisabled,\n    isSelected\n  });\n  return <>\n      {!hasContent(leading) ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        {!hasContent(overline) ? null : <span {...stylex.props(rowStyles.overline, tone)}>{overline}</span>}\n        <span {...stylex.props(label ? rowStyles.headlineMenu : rowStyles.headlineList, isEmphasized && rowStyles.headlineEmphasis)}>\n          {children}\n        </span>\n        {!hasContent(supporting) ? null : <span {...stylex.props(rowStyles.supporting, tone)}>\n            {supporting}\n          </span>}\n      </span>\n      {!hasContent(trailing) ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\nexport type { RowContentProps, RowVariant };\nexport { RowContent };"],"mappings":"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"}

package/dist/row/styles.js

@@ -37,6 +37,12 @@ const rowStyles = {
 		kAzted: "xyax5pk",
 		$$css: true
 	},
+	drawerSurface: {
+		kaIpWk: "x1dkaolv",
+		kB7OPa: "x9f619",
+		k1xSpc: "xjp7ctv",
+		$$css: true
+	},
 	dropTarget: {
 		kKwaWg: "xu73ib2",
 		kjBf7l: "xrgy624 x1x84bn5",
@@ -183,7 +189,24 @@ const rowStyles = {
 		$$css: true
 	}
 };
+/**
+* The tone a row's muted text takes over its own muted style: the supporting
+* line and the overline, and a menu item's shortcut. Nothing while the row is
+* drawn on the surface, where the muted style's on surface variant holds;
+* the selected container's own on-colour while selected; and the row's own
+* colour while disabled. Disabled is asked first, since a disabled row's own
+* colour is already the faded one and so wins over the selected container's
+* content role. One function for every caller, so a shortcut and the
+* supporting line beside it cannot come to disagree.
+*/
+function supportingTone(variant, { isDisabled, isSelected }) {
+	if (isDisabled) return rowStyles.supportingInherit;
+	if (!isSelected) return null;
+	if (variant === "drawer") return rowStyles.supportingSelectedDrawer;
+	if (variant === "menu") return rowStyles.supportingSelectedMenu;
+	return rowStyles.supportingSelectedList;
+}
 //#endregion
-export { rowStyles };
+export { rowStyles, supportingTone };
 
 //# sourceMappingURL=styles.js.map

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","HOVER_CAPABLE","FORCED_COLORS","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","kMnn75","$$css","disabled","kkrTdU","kAXs8y","dragging","kKwaWg","kGVxlE","kY2c9j","drawer","kaIpWk","kUOVxO","kAzted","dropTarget","kjBf7l","kInvED","k3XXqK","kMeerF","focusVisible","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","kHjlTd","headlineMenu","hovered","interactive","kVVagm","interactiveLayers","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","pressed","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\n\n// A pointer that can hover, for `interactiveLayers` — a plain element with no\n// render state, so its hover layer is a pseudo-class, and Chromium leaves\n// `:hover` on whatever a touch last tapped. Inside this query a touch screen\n// draws no hover at all; a touchscreen laptop still matches it for its\n// trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\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 rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf xs5hli\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  dragging: {\n    kWkggS: \"x14s9m32\",\n    kKwaWg: \"xdiex0u\",\n    kGVxlE: \"x4r79n0\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x1dkaolv\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  dropTarget: {\n    kKwaWg: \"xu73ib2\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  focusVisible: {\n    kKwaWg: \"x17vw94z\",\n    kjBf7l: \"xrgy624 x1v8yhc2\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  headlineEmphasis: {\n    k63SB2: \"x1sfltvt\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  hovered: {\n    kKwaWg: \"xbmfk57\",\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  interactiveLayers: {\n    kWkggS: \"x83qkoq x1yl1wq7 xjqqt44 xjbqb8w\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1ddmzdj\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  pressed: {\n    kKwaWg: \"xdiex0u\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xp89om9 x1jzqe4\",\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xs6yvni x1jzqe4\",\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"x1bt55z4\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x304zwk\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAiDA,MAAMU,YAAY;CAChBC,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,OAAO;CACT;CACAC,UAAU;EACRb,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,UAAU;EACRhB,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,QAAQ;EACNC,QAAQ;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,YAAY;EACVP,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAiB,cAAc;EACZZ,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACAkB,kBAAkB;EAChBC,QAAQ;EACRnB,OAAO;CACT;CACAoB,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA0B,cAAc;EACZL,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA2B,SAAS;EACPtB,QAAQ;EACRH,QAAQ;EACRF,OAAO;CACT;CACA4B,aAAa;EACX1B,QAAQ;EACR2B,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACA8B,mBAAmB;EACjB1C,QAAQ;EACRY,OAAO;CACT;CACA+B,MAAM;EACJpB,QAAQ;EACRX,OAAO;CACT;CACAgC,MAAM;EACJxC,QAAQ;EACRyC,QAAQ;EACRC,QAAQ;EACRzC,QAAQ;EACR0C,QAAQ;EACRnC,OAAO;CACT;CACAoC,MAAM;EACJzB,QAAQ;EACRX,OAAO;CACT;CACAqC,UAAU;EACR9C,QAAQ;EACR8B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACAsC,SAAS;EACPjC,QAAQ;EACRL,OAAO;CACT;CACAuC,gBAAgB;EACdnD,QAAQ;EACRG,QAAQ;EACRY,QAAQ;EACRH,OAAO;CACT;CACAwC,cAAc;EACZpD,QAAQ;EACRG,QAAQ;EACRY,QAAQ;EACRH,OAAO;CACT;CACAyC,cAAc;EACZrD,QAAQ;EACRG,QAAQ;EACRY,QAAQ;EACRH,OAAO;CACT;CACA0C,MAAM;EACJvD,QAAQ;EACRK,QAAQ;EACRmD,OAAO;EACP3C,OAAO;CACT;CACA4C,YAAY;EACVrD,QAAQ;EACR8B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA6C,mBAAmB;EACjBtD,QAAQ;EACRS,OAAO;CACT;CACA8C,0BAA0B;EACxBvD,QAAQ;EACRS,OAAO;CACT;CACA+C,wBAAwB;EACtBxD,QAAQ;EACRS,OAAO;CACT;CACAgD,wBAAwB;EACtBzD,QAAQ;EACRS,OAAO;CACT;CACAiD,WAAW;EACT9D,QAAQ;EACRwB,QAAQ;EACRX,OAAO;CACT;CACAkD,SAAS;EACPvC,QAAQ;EACRX,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","RowVariant","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","HOVER_CAPABLE","FORCED_COLORS","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","kMnn75","$$css","disabled","kkrTdU","kAXs8y","dragging","kKwaWg","kGVxlE","kY2c9j","drawer","kaIpWk","kUOVxO","kAzted","drawerSurface","dropTarget","kjBf7l","kInvED","k3XXqK","kMeerF","focusVisible","headlineEmphasis","k63SB2","headlineList","kMv6JI","kGuDYH","kb6lSQ","kLWn49","kHjlTd","headlineMenu","hovered","interactive","kVVagm","interactiveLayers","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","pressed","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine","supportingTone","variant","isDisabled","isSelected"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RowVariant } from '.';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\n\n// A pointer that can hover, for `interactiveLayers` — a plain element with no\n// render state, so its hover layer is a pseudo-class, and Chromium leaves\n// `:hover` on whatever a touch last tapped. Inside this query a touch screen\n// draws no hover at all; a touchscreen laptop still matches it for its\n// trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\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 rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf xs5hli\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  dragging: {\n    kWkggS: \"x14s9m32\",\n    kKwaWg: \"xdiex0u\",\n    kGVxlE: \"x4r79n0\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x1dkaolv\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  drawerSurface: {\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  dropTarget: {\n    kKwaWg: \"xu73ib2\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  focusVisible: {\n    kKwaWg: \"x17vw94z\",\n    kjBf7l: \"xrgy624 x1v8yhc2\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  headlineEmphasis: {\n    k63SB2: \"x1sfltvt\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  hovered: {\n    kKwaWg: \"xbmfk57\",\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  interactiveLayers: {\n    kWkggS: \"x83qkoq x1yl1wq7 xjqqt44 xjbqb8w\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1ddmzdj\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  pressed: {\n    kKwaWg: \"xdiex0u\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xp89om9 x1jzqe4\",\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xs6yvni x1jzqe4\",\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa x1k5gbb1\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg x1k5gbb1\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"x1bt55z4\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x304zwk\",\n    $$css: true\n  }\n};\n\n/**\n * The tone a row's muted text takes over its own muted style: the supporting\n * line and the overline, and a menu item's shortcut. Nothing while the row is\n * drawn on the surface, where the muted style's on surface variant holds;\n * the selected container's own on-colour while selected; and the row's own\n * colour while disabled. Disabled is asked first, since a disabled row's own\n * colour is already the faded one and so wins over the selected container's\n * content role. One function for every caller, so a shortcut and the\n * supporting line beside it cannot come to disagree.\n */\nfunction supportingTone(variant: RowVariant, {\n  isDisabled,\n  isSelected\n}: {\n  isDisabled: boolean;\n  isSelected: boolean;\n}) {\n  if (isDisabled) {\n    return rowStyles.supportingInherit;\n  }\n  if (!isSelected) {\n    return null;\n  }\n  // Each variant's container is a different colour family, and the muted\n  // role is not guaranteed to be readable over any of them.\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport { rowStyles, supportingTone };"],"mappings":"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"}

package/dist/styles/overlay.d.ts

@@ -2,8 +2,12 @@ import { PopoverRenderProps } from "react-aria-components";
 //#region src/styles/overlay.d.ts
 /** Where along that side it lines up with the anchor. */
 type OverlayAlign = 'center' | 'end' | 'start';
-/** Which side of the anchor a surface opens on. */
-type OverlaySide = 'bottom' | 'left' | 'right' | 'top';
+/**
+ * Which side of the anchor a surface opens on. `start` and `end` are the
+ * inline sides by the writing direction, the right and the left in a
+ * right-to-left layout; `left` and `right` stay where they are in either.
+ */
+type OverlaySide = 'bottom' | 'end' | 'left' | 'right' | 'start' | 'top';
 //#endregion
 export type { OverlayAlign, OverlaySide };
 //# sourceMappingURL=overlay.d.ts.map

package/dist/styles/overlay.js

@@ -65,6 +65,11 @@ const overlay = {
 		kVAEAm: "xixxii4",
 		kY2c9j: "x125h2g0",
 		$$css: true
+	},
+	scrimOverModal: {
+		kKVMdj: "x1a5igra",
+		kWkggS: "xjbqb8w",
+		$$css: true
 	}
 };
 const origins = {
@@ -78,7 +83,10 @@ const origins = {
 * React Aria's placement, from the side and the alignment a call site names.
 * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and
 * `start`/`end` on the block ones; a call site should not have to know which
-* of the two it is asking for, so this maps one onto the other.
+* of the two it is asking for, so this maps one onto the other. The inline
+* sides take in `start` and `end`, which React Aria turns into the left or
+* the right by the locale's direction as it places the surface, so what it
+* reports, and what `popupOrigin` reads, is always a physical side.
 *
 * Shared by every anchored overlay rather than kept in one, since which side
 * a surface opens on is the same question for a popover, a menu and a

package/dist/styles/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","layers","FORCED_COLORS","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalBodyRing","kjBf7l","kInvED","k3XXqK","kMeerF","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","kAzted","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kGVxlE","kMwMTN","kORKVm","kZeWKH","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","kY2c9j","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport './layers.stylex';\nimport { layers } from './layers.stylex';\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)';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Portalled to the end of the body, an element with no `z-index` paints level\n// with the page's own unlayered content, so a modal's scrim takes a layer\n// from src/styles/layers.stylex.ts, which sets the order every overlay\n// stacks in over the page.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalBodyRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kAzted: \"x2lwn1j\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k x1u6grsq\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kVAM5u: \"x1w1tqly\",\n    kaIpWk: \"x62ce2h\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    kZeWKH: \"xish69e\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    kY2c9j: \"x125h2g0\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover, a menu and a\n * tooltip.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AA+CA,MAAMW,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,eAAe;EACbC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,QAAQ;EACRP,OAAO;CACT;CACAe,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,aAAa;EACXjB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRgB,QAAQ;EACR7B,OAAO;CACT;CACA8B,OAAO;EACLd,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRoB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRjC,OAAO;CACT;AACF;AAOA,MAAMkC,UAAU;CACdC,QAAQtC,QAAQM;CAChBiC,QAAQvC,QAAQM;CAChBkC,MAAMxC,QAAQK;CACdoC,OAAOzC,QAAQI;CACfsC,KAAK1C,QAAQC;AACf;;;;;;;;;;;AAkBA,SAAS4C,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}
+{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","layers","FORCED_COLORS","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalBodyRing","kjBf7l","kInvED","k3XXqK","kMeerF","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","kAzted","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kGVxlE","kMwMTN","kORKVm","kZeWKH","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","kY2c9j","scrimOverModal","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport './layers.stylex';\nimport { layers } from './layers.stylex';\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)';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Portalled to the end of the body, an element with no `z-index` paints level\n// with the page's own unlayered content, so a modal's scrim takes a layer\n// from src/styles/layers.stylex.ts, which sets the order every overlay\n// stacks in over the page.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalBodyRing: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kAzted: \"x2lwn1j\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k x1u6grsq\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kVAM5u: \"x1w1tqly\",\n    kaIpWk: \"x62ce2h\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    kZeWKH: \"xish69e\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    kY2c9j: \"x125h2g0\",\n    $$css: true\n  },\n  scrimOverModal: {\n    kKVMdj: \"x1a5igra\",\n    kWkggS: \"xjbqb8w\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/**\n * Which side of the anchor a surface opens on. `start` and `end` are the\n * inline sides by the writing direction, the right and the left in a\n * right-to-left layout; `left` and `right` stay where they are in either.\n */\ntype OverlaySide = 'bottom' | 'end' | 'left' | 'right' | 'start' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other. The inline\n * sides take in `start` and `end`, which React Aria turns into the left or\n * the right by the locale's direction as it places the surface, so what it\n * reports, and what `popupOrigin` reads, is always a physical side.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover, a menu and a\n * tooltip.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AA+CA,MAAMW,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,eAAe;EACbC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,QAAQ;EACRP,OAAO;CACT;CACAe,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACA4B,aAAa;EACXjB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRgB,QAAQ;EACR7B,OAAO;CACT;CACA8B,OAAO;EACLd,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRoB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRjC,OAAO;CACT;CACAkC,gBAAgB;EACdjB,QAAQ;EACRE,QAAQ;EACRnB,OAAO;CACT;AACF;AAOA,MAAMmC,UAAU;CACdC,QAAQvC,QAAQM;CAChBkC,QAAQxC,QAAQM;CAChBmC,MAAMzC,QAAQK;CACdqC,OAAO1C,QAAQI;CACfuC,KAAK3C,QAAQC;AACf;;;;;;;;;;;;;;AAyBA,SAAS6C,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}