@kanso-labs/kanso-ui 0.40.3 → 0.40.4

package/dist/field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","BOX_BLOCK_SIZE","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_BLOCK_SIZE","lg","fieldChromeStyles","affix","k6CgDc","kmuXW","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","affixLine","kGNEyG","k1xSpc","kOIVth","autosize","autosizeCell","kJuA4N","box","kWkggS","kZKoxP","kfdmCh","kt9PQ7","kT0f0o","kVL7Gh","kfmiAY","krdFHd","kGVxlE","kB7OPa","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kGO01o","kLKAdn","kg3NbH","kVAEAm","boxDisabled","kL6WhQ","boxError","boxErrorFocused","boxFixed","boxFloating","boxFocused","boxLabel","k87sOh","kLqNvP","ks0D6T","kVQacm","kg5iWk","boxLabelFloated","boxLabelOutlined","boxLabelOutlinedFloated","boxLeading","kZCmMZ","boxMultiline","kAzted","boxOutlined","kMwMTN","boxOutlinedDisabled","boxOutlinedError","boxOutlinedErrorFocused","boxOutlinedErrorHovered","boxOutlinedFloating","boxOutlinedFocused","boxOutlinedHovered","boxOutlinedMultiline","boxTrailing","kwRFfy","column","kzQI83","k7Eaqz","columnDisabled","columnDisabledFloating","columnFloating","counter","kcqcaj","keTefX","icon","kSGwAc","kjj79g","keoZOQ","iconDisabled","iconError","iconMultiline","k1K539","iconOutlined","input","k8Qsv1","kMzoRj","kzqmXN","kmVPX3","inputDisabled","inputUnderFloatingLabel","inputUnderLabel","label","labelDisabled","labelError","labelFocused","message","kqGvvJ","messageError","messageInset","kUOVxO","messageLine","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineFocused","outlineLeading","outlineNotch","k33iCy","outlineNotchOpen","outlineTrailing","replica","kHjlTd","segments","textArea","kHenm0","textAreaAutosize","trigger","kY2c9j","value","valuePlaceholder","valuePlaceholderHidden","groupStyles","root","kXwgrk"],"sources":["../../src/field/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Declared\n// here rather than imported from src/styles/ripple.ts, which spells the same\n// query: the StyleX compiler resolves a constant across files only out of a\n// `.stylex.ts` module, and the one this repository has is generated from the\n// design tokens, where a user-preference query does not belong beside the\n// window size classes.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// What the box is tall enough for, rather than the 56dp the text fields page\n// draws it at. The page's number is the sum of these under the default\n// tokens, and stating it instead made the box right only there: a theme with\n// a longer body line — `Editorial` in src/theming/themes.ts, at body-small\n// 20 and body-large 28 on a 10dp `sm` — needs 68, and in a fixed 56 the\n// value's line ran past the underline with nothing left beneath it.\n//\n// The filled box holds its padding twice over, the floated label's line and\n// the control's; the outlined box holds its own padding twice and the\n// control's line alone, since its label sits on the outline rather than\n// above the value. The two agree at 56 under the default tokens, which is\n// what keeps the default stories' snapshots where they are.\n//\n// The resting label's line is written against the same expressions below, so\n// one derivation feeds both the box and the label that centres in it.\nconst BOX_BLOCK_SIZE = `calc(2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight})`;\nconst BOX_OUTLINED_BLOCK_SIZE = `calc(2 * ${spacing.lg} + ${typography.bodyLargeLineHeight})`;\n\n// The chrome's styles. Apart from the parts in ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it —\n// the same reason ./root.ts gives for the root style beside it.\n//\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label floats, as the text fields page draws it: body-large and centred\n// in an empty, unfocused box, body-small at the top once the field is focused\n// or holds a value. `floatingLabel={false}` keeps it small at the top in\n// every state instead.\n//\n// Where the label sits depends on the box's state, and a child cannot select\n// on its parent's state while the box can select on its own. So the label's\n// type is set on the box and inherited: the box changes the font size and\n// line height it hands down when focus is within it, or when its control\n// shows something other than its placeholder, and the label transitions\n// between the two. Resting, the line is the box less its padding, which is\n// what centres the label without a position to move — the move to the top is\n// a change of type alone. The control sets its own type, so none of this\n// reaches it.\n//\n// The label's colour follows the control's focus the same way: the box is\n// React Aria's Group, which reports focus within it as render state, and the\n// label takes `labelFocused` from that.\n//\n// The box is a row: an icon slot at either end, if the field has one, with\n// the label and control between them. The page gives the icons 24dp, 12dp\n// from the box's edge and 16dp from the text, centred in the box's height;\n// the slot cancels the box's top padding and stretches to its full height,\n// so it centres whatever it holds — a 24dp icon, or an icon button around\n// one. The label and the control sit in a column of their own, which is\n// what the label is positioned against, so it moves past a leading icon\n// with the text.\n//\n// A prefix or suffix sits on the control's line, in the control's type and\n// the muted role, and shows only while the field is focused or holds a\n// value, as the placeholder does — at rest the label is where it would be.\n// It is the column's colour it takes, inherited, since the column can\n// select on its own focus and content and the affix cannot select on\n// either.\n//\n// The outlined variant is the page's outlined text field: no fill, a 1dp\n// outline in the outline role with 4dp corners all round, 2dp and primary\n// while focused, on surface while hovered, the error role with an error,\n// and the label cutting the outline once it floats, with the page's 4dp\n// beside it. The value is centred, 16dp from the top and bottom, and the\n// label rests on its line and moves up onto the outline — a move, where the\n// filled label only changes type.\n//\n// The outline is a fieldset laid over the box: a browser draws a fieldset's\n// border around its legend, so a legend holding a copy of the label, in the\n// label's floated type, is what cuts the outline to the label's width with\n// nothing measured. Empty, it cuts nothing, which is the closed notch.\nconst fieldChromeStyles = {\n  affix: {\n    k6CgDc: \"x12w9bfk\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  affixLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  autosize: {\n    k1xSpc: \"xrvj5dj\",\n    $$css: true\n  },\n  autosizeCell: {\n    kJuA4N: \"x1b1wf8y\",\n    $$css: true\n  },\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x1cy8zhl\",\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x4v968r\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    kT0f0o: \"x16uus16\",\n    kVL7Gh: \"xbiv7yw\",\n    kfmiAY: \"xirz1nw\",\n    krdFHd: \"xzcck0f\",\n    kGVxlE: \"x89kqus x18rfq6m\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ed109x\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kjBf7l: \"x1x84bn5\",\n    kInvED: \"x12iqurn\",\n    k3XXqK: \"xi9ts3s\",\n    kMeerF: \"x1jrff4x\",\n    kGO01o: \"x18d9i69\",\n    kLKAdn: \"xi7mcox\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxDisabled: {\n    kWkggS: \"xepofeg\",\n    kL6WhQ: \"x1fxan2a\",\n    kGVxlE: \"x1pqbjc1\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxError: {\n    kGVxlE: \"x1lxxh4i x1d6xoej\",\n    $$css: true\n  },\n  boxErrorFocused: {\n    kGVxlE: \"xb0slzl\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxFixed: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  boxFloating: {\n    kMv6JI: \"x1ps135g xnc7ww3 x16svsjw\",\n    kGuDYH: \"x52kfa xys1t9b x1848etk\",\n    k63SB2: \"xz4f7ai xn9xqko x1c52epr\",\n    kb6lSQ: \"x19wmx12 x1t00fh7 x1qn8t5l\",\n    kLWn49: \"xsv50tp x1f5c3pk x1mv3dpe\",\n    $$css: true\n  },\n  boxFocused: {\n    kGVxlE: \"xra6ydt\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxLabel: {\n    kB7OPa: \"x9f619\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x10l6tqk\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  boxLabelFloated: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  boxLabelOutlined: {\n    kLqNvP: \"x10k232c\",\n    ks0D6T: \"x35j8wb\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  boxLabelOutlinedFloated: {\n    k87sOh: \"x1qjp6zz\",\n    $$css: true\n  },\n  boxLeading: {\n    kZCmMZ: \"xwde665\",\n    $$css: true\n  },\n  boxMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"x9ep9ug\",\n    kGO01o: \"xqf7pud\",\n    $$css: true\n  },\n  boxOutlined: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xnqhc4v\",\n    kfdmCh: \"xs07zst\",\n    kT0f0o: \"x4gcak0\",\n    kVL7Gh: \"xqs30sb\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x158cnre x1sa41d3\",\n    kGO01o: \"xzfxn0k\",\n    kLKAdn: \"x1clyivc\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  boxOutlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1ldq0ta x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxOutlinedError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  boxOutlinedErrorFocused: {\n    kMwMTN: \"x4ii1qj\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedErrorHovered: {\n    kMwMTN: \"x12voer2 x16elhoc\",\n    $$css: true\n  },\n  boxOutlinedFloating: {\n    kLWn49: \"xsv50tp x1f5c3pk x1rzm7h7\",\n    $$css: true\n  },\n  boxOutlinedFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedHovered: {\n    kMwMTN: \"x158cnre x139gbkf\",\n    $$css: true\n  },\n  boxOutlinedMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"xnqs80d\",\n    $$css: true\n  },\n  boxTrailing: {\n    kwRFfy: \"xk163s\",\n    $$css: true\n  },\n  column: {\n    kMwMTN: \"x1w5n3ug\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  columnDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  columnDisabledFloating: {\n    kMwMTN: \"xspc5gk x19co3pv\",\n    $$css: true\n  },\n  columnFloating: {\n    kMwMTN: \"x1dfuzvz x6phwhp x19co3pv\",\n    $$css: true\n  },\n  counter: {\n    kmuXW: \"x2lah0s\",\n    kcqcaj: \"xss6m8b\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  icon: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kSGwAc: \"xkh2ocl\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    keoZOQ: \"x1motrhk\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  iconDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  iconError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  iconMultiline: {\n    k1K539: \"x14yxyxb\",\n    $$css: true\n  },\n  iconOutlined: {\n    k1K539: \"xs1qnrw\",\n    keoZOQ: \"x17v9ssf\",\n    $$css: true\n  },\n  input: {\n    k8Qsv1: \"x1hgeflb\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"xh8yej3\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  inputDisabled: {\n    k8Qsv1: \"x7ip5l3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  inputUnderFloatingLabel: {\n    k8Qsv1: \"x1mvm7v4 xxqzaim\",\n    $$css: true\n  },\n  inputUnderLabel: {\n    keoZOQ: \"xwuztrq\",\n    $$css: true\n  },\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    kMwMTN: \"x1w5n3ug\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xixa3zk\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  labelError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  labelFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  message: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    kqGvvJ: \"x10im51j\",\n    $$css: true\n  },\n  messageError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  messageInset: {\n    kUOVxO: \"xboopgi\",\n    $$css: true\n  },\n  messageLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    keoZOQ: \"x1y88zpp\",\n    kAzted: \"x17jz683\",\n    $$css: true\n  },\n  numeric: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    $$css: true\n  },\n  outline: {\n    k6CgDc: \"x12w9bfk\",\n    kVAM5u: \"x1r7ld26\",\n    kaIpWk: \"x1tfhd1\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kpwlN0: \"x10a8y8t\",\n    kb6lSQ: \"xwth0xh\",\n    kogj98: \"x1ghz6dp\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x1mhv0kc\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1aqzbqr\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  outlineFocused: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  outlineLeading: {\n    kZCmMZ: \"x167ah0f\",\n    $$css: true\n  },\n  outlineNotch: {\n    kZKoxP: \"xqtp20y\",\n    kB7OPa: \"x9f619\",\n    kLWn49: \"x14ju556\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kmVPX3: \"x1717udv\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  outlineNotchOpen: {\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  outlineTrailing: {\n    kwRFfy: \"x3o381d\",\n    $$css: true\n  },\n  replica: {\n    kHjlTd: \"x1mzt3pk\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"x126k92a\",\n    $$css: true\n  },\n  segments: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  textArea: {\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xysyzu8\",\n    kHenm0: \"xtt52l0\",\n    $$css: true\n  },\n  textAreaAutosize: {\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trigger: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kpwlN0: \"x10a8y8t\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x10l6tqk\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  value: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  valuePlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  valuePlaceholderHidden: {\n    kMwMTN: \"x19co3pv\",\n    $$css: true\n  }\n};\n\n// The chrome a label sitting above a group takes, rather than inside a box.\n// CheckboxGroup, ChipGroup, RadioGroup, Slider and ColorSlider each wrote both\n// of these out: the type override on the label, and the column its label and\n// control sit in.\n//\n// The label is label-large, the role a field's label takes at rest, since a\n// group has no box to float it in.\n//\n// The two sliders compose an inline size of their own on the root, since a\n// slider fills the width it is given where a group of controls does not.\nconst groupStyles = {\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    $$css: true\n  }\n};\nexport { fieldChromeStyles, groupStyles };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","BOX_BLOCK_SIZE","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_BLOCK_SIZE","lg","fieldChromeStyles","affix","k6CgDc","kmuXW","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","affixLine","kGNEyG","k1xSpc","kOIVth","autosize","autosizeCell","kJuA4N","box","kWkggS","kZKoxP","kfdmCh","kt9PQ7","kT0f0o","kVL7Gh","kfmiAY","krdFHd","kGVxlE","kB7OPa","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kGO01o","kLKAdn","kg3NbH","kVAEAm","boxDisabled","kL6WhQ","boxError","boxErrorFocused","boxFixed","boxFloating","boxFocused","boxLabel","k87sOh","kLqNvP","ks0D6T","kVQacm","kg5iWk","boxLabelFloated","boxLabelOutlined","boxLabelOutlinedFloated","boxLeading","kZCmMZ","boxMultiline","kAzted","boxOutlined","kMwMTN","boxOutlinedDisabled","boxOutlinedError","boxOutlinedErrorFocused","boxOutlinedErrorHovered","boxOutlinedFloating","boxOutlinedFocused","boxOutlinedHovered","boxOutlinedMultiline","boxTrailing","kwRFfy","column","kzQI83","k7Eaqz","columnDisabled","columnDisabledFloating","columnFloating","counter","kcqcaj","keTefX","icon","kSGwAc","kjj79g","keoZOQ","iconDisabled","iconError","iconMultiline","k1K539","iconOutlined","input","k8Qsv1","kMzoRj","kzqmXN","kmVPX3","inputDisabled","inputUnderFloatingLabel","inputUnderLabel","label","kHjlTd","labelDisabled","labelError","labelFocused","message","kqGvvJ","messageError","messageInset","kUOVxO","messageLine","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineFocused","outlineLeading","outlineNotch","k33iCy","outlineNotchOpen","outlineTrailing","replica","segments","textArea","kHenm0","textAreaAutosize","trigger","kY2c9j","value","valuePlaceholder","valuePlaceholderHidden","groupStyles","root","kXwgrk"],"sources":["../../src/field/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Declared\n// here rather than imported from src/styles/ripple.ts, which spells the same\n// query: the StyleX compiler resolves a constant across files only out of a\n// `.stylex.ts` module, and the one this repository has is generated from the\n// design tokens, where a user-preference query does not belong beside the\n// window size classes.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// What the box is tall enough for, rather than the 56dp the text fields page\n// draws it at. The page's number is the sum of these under the default\n// tokens, and stating it instead made the box right only there: a theme with\n// a longer body line — `Editorial` in src/theming/themes.ts, at body-small\n// 20 and body-large 28 on a 10dp `sm` — needs 68, and in a fixed 56 the\n// value's line ran past the underline with nothing left beneath it.\n//\n// The filled box holds its padding twice over, the floated label's line and\n// the control's; the outlined box holds its own padding twice and the\n// control's line alone, since its label sits on the outline rather than\n// above the value. The two agree at 56 under the default tokens, which is\n// what keeps the default stories' snapshots where they are.\n//\n// The resting label's line is written against the same expressions below, so\n// one derivation feeds both the box and the label that centres in it.\nconst BOX_BLOCK_SIZE = `calc(2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight})`;\nconst BOX_OUTLINED_BLOCK_SIZE = `calc(2 * ${spacing.lg} + ${typography.bodyLargeLineHeight})`;\n\n// The chrome's styles. Apart from the parts in ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it —\n// the same reason ./root.ts gives for the root style beside it.\n//\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label floats, as the text fields page draws it: body-large and centred\n// in an empty, unfocused box, body-small at the top once the field is focused\n// or holds a value. `floatingLabel={false}` keeps it small at the top in\n// every state instead.\n//\n// Where the label sits depends on the box's state, and a child cannot select\n// on its parent's state while the box can select on its own. So the label's\n// type is set on the box and inherited: the box changes the font size and\n// line height it hands down when focus is within it, or when its control\n// shows something other than its placeholder, and the label transitions\n// between the two. Resting, the line is the box less its padding, which is\n// what centres the label without a position to move — the move to the top is\n// a change of type alone. The control sets its own type, so none of this\n// reaches it.\n//\n// The label's colour follows the control's focus the same way: the box is\n// React Aria's Group, which reports focus within it as render state, and the\n// label takes `labelFocused` from that.\n//\n// The box is a row: an icon slot at either end, if the field has one, with\n// the label and control between them. The page gives the icons 24dp, 12dp\n// from the box's edge and 16dp from the text, centred in the box's height;\n// the slot cancels the box's top padding and stretches to its full height,\n// so it centres whatever it holds — a 24dp icon, or an icon button around\n// one. The label and the control sit in a column of their own, which is\n// what the label is positioned against, so it moves past a leading icon\n// with the text.\n//\n// A prefix or suffix sits on the control's line, in the control's type and\n// the muted role, and shows only while the field is focused or holds a\n// value, as the placeholder does — at rest the label is where it would be.\n// It is the column's colour it takes, inherited, since the column can\n// select on its own focus and content and the affix cannot select on\n// either.\n//\n// The outlined variant is the page's outlined text field: no fill, a 1dp\n// outline in the outline role with 4dp corners all round, 2dp and primary\n// while focused, on surface while hovered, the error role with an error,\n// and the label cutting the outline once it floats, with the page's 4dp\n// beside it. The value is centred, 16dp from the top and bottom, and the\n// label rests on its line and moves up onto the outline — a move, where the\n// filled label only changes type.\n//\n// The outline is a fieldset laid over the box: a browser draws a fieldset's\n// border around its legend, so a legend holding a copy of the label, in the\n// label's floated type, is what cuts the outline to the label's width with\n// nothing measured. Empty, it cuts nothing, which is the closed notch.\nconst fieldChromeStyles = {\n  affix: {\n    k6CgDc: \"x12w9bfk\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  affixLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  autosize: {\n    k1xSpc: \"xrvj5dj\",\n    $$css: true\n  },\n  autosizeCell: {\n    kJuA4N: \"x1b1wf8y\",\n    $$css: true\n  },\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x1cy8zhl\",\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x4v968r\",\n    kfdmCh: \"xe3zi7u\",\n    kt9PQ7: \"x15anc7y\",\n    kT0f0o: \"x16uus16\",\n    kVL7Gh: \"xbiv7yw\",\n    kfmiAY: \"xirz1nw\",\n    krdFHd: \"xzcck0f\",\n    kGVxlE: \"x89kqus x18rfq6m\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ed109x\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kjBf7l: \"x1x84bn5\",\n    kInvED: \"x12iqurn\",\n    k3XXqK: \"xi9ts3s\",\n    kMeerF: \"x1jrff4x\",\n    kGO01o: \"x18d9i69\",\n    kLKAdn: \"xi7mcox\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxDisabled: {\n    kWkggS: \"xepofeg\",\n    kL6WhQ: \"x1fxan2a\",\n    kGVxlE: \"x1pqbjc1\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxError: {\n    kGVxlE: \"x1lxxh4i x1d6xoej\",\n    $$css: true\n  },\n  boxErrorFocused: {\n    kGVxlE: \"xb0slzl\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxFixed: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  boxFloating: {\n    kMv6JI: \"x1ps135g xnc7ww3 x16svsjw\",\n    kGuDYH: \"x52kfa xys1t9b x1848etk\",\n    k63SB2: \"xz4f7ai xn9xqko x1c52epr\",\n    kb6lSQ: \"x19wmx12 x1t00fh7 x1qn8t5l\",\n    kLWn49: \"xsv50tp x1f5c3pk x1mv3dpe\",\n    $$css: true\n  },\n  boxFocused: {\n    kGVxlE: \"xra6ydt\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxLabel: {\n    kB7OPa: \"x9f619\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x10l6tqk\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  boxLabelFloated: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  boxLabelOutlined: {\n    kLqNvP: \"x10k232c\",\n    ks0D6T: \"x35j8wb\",\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  boxLabelOutlinedFloated: {\n    k87sOh: \"x1qjp6zz\",\n    $$css: true\n  },\n  boxLeading: {\n    kZCmMZ: \"xwde665\",\n    $$css: true\n  },\n  boxMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"x9ep9ug\",\n    kGO01o: \"xqf7pud\",\n    $$css: true\n  },\n  boxOutlined: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xnqhc4v\",\n    kfdmCh: \"xs07zst\",\n    kT0f0o: \"x4gcak0\",\n    kVL7Gh: \"xqs30sb\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x158cnre x1sa41d3\",\n    kGO01o: \"xzfxn0k\",\n    kLKAdn: \"x1clyivc\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  boxOutlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1ldq0ta x1bhcspo\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxOutlinedError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  boxOutlinedErrorFocused: {\n    kMwMTN: \"x4ii1qj\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedErrorHovered: {\n    kMwMTN: \"x12voer2 x16elhoc\",\n    $$css: true\n  },\n  boxOutlinedFloating: {\n    kLWn49: \"xsv50tp x1f5c3pk x1rzm7h7\",\n    $$css: true\n  },\n  boxOutlinedFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxOutlinedHovered: {\n    kMwMTN: \"x158cnre x139gbkf\",\n    $$css: true\n  },\n  boxOutlinedMultiline: {\n    kZKoxP: \"xt7dq6l\",\n    kAzted: \"xnqs80d\",\n    $$css: true\n  },\n  boxTrailing: {\n    kwRFfy: \"xk163s\",\n    $$css: true\n  },\n  column: {\n    kMwMTN: \"x1w5n3ug\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  columnDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  columnDisabledFloating: {\n    kMwMTN: \"xspc5gk x19co3pv\",\n    $$css: true\n  },\n  columnFloating: {\n    kMwMTN: \"x1dfuzvz x6phwhp x19co3pv\",\n    $$css: true\n  },\n  counter: {\n    kmuXW: \"x2lah0s\",\n    kcqcaj: \"xss6m8b\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  icon: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kSGwAc: \"xkh2ocl\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"x1pvqxga\",\n    kjj79g: \"xl56j7k\",\n    keoZOQ: \"x1motrhk\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  iconDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  iconError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  iconMultiline: {\n    k1K539: \"x14yxyxb\",\n    $$css: true\n  },\n  iconOutlined: {\n    k1K539: \"xs1qnrw\",\n    keoZOQ: \"x17v9ssf\",\n    $$css: true\n  },\n  input: {\n    k8Qsv1: \"x1hgeflb\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"xh8yej3\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  inputDisabled: {\n    k8Qsv1: \"x7ip5l3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  inputUnderFloatingLabel: {\n    k8Qsv1: \"x1mvm7v4 xxqzaim\",\n    $$css: true\n  },\n  inputUnderLabel: {\n    keoZOQ: \"xwuztrq\",\n    $$css: true\n  },\n  label: {\n    k6CgDc: \"x12w9bfk\",\n    kMwMTN: \"x1w5n3ug\",\n    kHjlTd: \"xj0a0fe\",\n    kIyJzY: \"xkzkux9\",\n    k1ekBW: \"xixa3zk\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  labelDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  labelError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  labelFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  message: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    kqGvvJ: \"x10im51j\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  messageError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  messageInset: {\n    kUOVxO: \"xboopgi\",\n    $$css: true\n  },\n  messageLine: {\n    kGNEyG: \"x1pha0wt\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    keoZOQ: \"x1y88zpp\",\n    kAzted: \"x17jz683\",\n    $$css: true\n  },\n  numeric: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    $$css: true\n  },\n  outline: {\n    k6CgDc: \"x12w9bfk\",\n    kVAM5u: \"x1r7ld26\",\n    kaIpWk: \"x1tfhd1\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kpwlN0: \"x10a8y8t\",\n    kb6lSQ: \"xwth0xh\",\n    kogj98: \"x1ghz6dp\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x1mhv0kc\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1aqzbqr\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  outlineFocused: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  outlineLeading: {\n    kZCmMZ: \"x167ah0f\",\n    $$css: true\n  },\n  outlineNotch: {\n    kZKoxP: \"xqtp20y\",\n    kB7OPa: \"x9f619\",\n    kLWn49: \"x14ju556\",\n    ks0D6T: \"x193iq5w\",\n    kVQacm: \"xb3r6kr\",\n    kmVPX3: \"x1717udv\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  outlineNotchOpen: {\n    kg3NbH: \"ximhkdq\",\n    $$css: true\n  },\n  outlineTrailing: {\n    kwRFfy: \"x3o381d\",\n    $$css: true\n  },\n  replica: {\n    kHjlTd: \"x1mzt3pk\",\n    k33iCy: \"xlshs6z\",\n    khDVqt: \"x126k92a\",\n    $$css: true\n  },\n  segments: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  textArea: {\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xysyzu8\",\n    kHenm0: \"xtt52l0\",\n    $$css: true\n  },\n  textAreaAutosize: {\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trigger: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kpwlN0: \"x10a8y8t\",\n    k3XXqK: \"x1t137rt\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x10l6tqk\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  value: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  valuePlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  valuePlaceholderHidden: {\n    kMwMTN: \"x19co3pv\",\n    $$css: true\n  }\n};\n\n// The chrome a label sitting above a group takes, rather than inside a box.\n// CheckboxGroup, ChipGroup, RadioGroup, Slider and ColorSlider each wrote both\n// of these out: the type override on the label, and the column its label and\n// control sit in.\n//\n// The label is label-large, the role a field's label takes at rest, since a\n// group has no box to float it in.\n//\n// The two sliders compose an inline size of their own on the root, since a\n// slider fills the width it is given where a group of controls does not.\nconst groupStyles = {\n  label: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    $$css: true\n  }\n};\nexport { fieldChromeStyles, groupStyles };"],"mappings":"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"}

package/dist/indicator/index.js

@@ -1,4 +1,5 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { hasContent } from "../render/content.js";
 import { indicatorStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,7 +20,7 @@ const ACTIVE_TONES = {
 function IndicatorLabels(t0) {
 	const $ = c(8);
 	const { label, value } = t0;
-	if (label === void 0 && value === void 0) return null;
+	if (!hasContent(label) && !hasContent(value)) return null;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = props(indicatorStyles.labels);
@@ -27,8 +28,8 @@ function IndicatorLabels(t0) {
 	} else t1 = $[0];
 	let t2;
 	if ($[1] !== label) {
-		t2 = label === void 0 ? null : /* @__PURE__ */ jsx(Label, {
-			...props(indicatorStyles.label),
+		t2 = !hasContent(label) ? null : /* @__PURE__ */ jsx(Label, {
+			...props(indicatorStyles.label, indicatorStyles.labelText),
 			children: label
 		});
 		$[1] = label;
@@ -36,8 +37,8 @@ function IndicatorLabels(t0) {
 	} else t2 = $[2];
 	let t3;
 	if ($[3] !== value) {
-		t3 = value === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...props(indicatorStyles.label),
+		t3 = !hasContent(value) ? null : /* @__PURE__ */ jsx("span", {
+			...props(indicatorStyles.label, indicatorStyles.value),
 			children: value
 		});
 		$[3] = value;

package/dist/indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","Label","IndicatorTone","indicatorStyles","ACTIVE_TONES","inherit","inheritActive","negative","negativeActive","positive","positiveActive","primary","const","IndicatorLabels","t0","$","_c","label","value","undefined","t1","Symbol","for","props","labels","t2","t3","t4","IndicatorLine","activeStyle","children","percentage","tone","active","solid","line","activeAt","track","trackSolid","inheritTrack","t5","t6","stop","t7","t8","_c","stylex.props"],"sources":["../../src/indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label } from 'react-aria-components';\nimport type { IndicatorTone } from './styles';\nimport { indicatorStyles } from './styles';\n\n// The two pieces a linear indicator is drawn from, shared by\n// ProgressIndicator and Meter. The styles they use are in ./styles.ts.\n\n// What each tone draws the active indicator and the stop indicator in.\n// `primary` is the style they already carry, so it adds nothing.\nconst ACTIVE_TONES = {\n  inherit: indicatorStyles.inheritActive,\n  negative: indicatorStyles.negativeActive,\n  positive: indicatorStyles.positiveActive,\n  primary: null\n} as const;\n\n/**\n * The label and, optionally, the value, on a line above the indicator.\n * React Aria's `Label` reads the surrounding context, so the same element\n * names a progress bar and a meter alike. Renders nothing when there is\n * neither to show.\n */\nexport function IndicatorLabels({\n  label,\n  value\n}: {\n  label: ReactNode;\n  value: ReactNode;\n}) {\n  if (label === undefined && value === undefined) {\n    return null;\n  }\n  return <div {...stylex.props(indicatorStyles.labels)}>\n      {label === undefined ? null : <Label {...stylex.props(indicatorStyles.label)}>{label}</Label>}\n      {value === undefined ? null : <span {...stylex.props(indicatorStyles.label)}>{value}</span>}\n    </div>;\n}\n\n/**\n * The page's line: the active indicator at its share of the width, the track\n * taking what is left, and the stop indicator at the end. Anything passed as\n * `children` is drawn inside the track, which is what the progress\n * indicator's buffer fills it with; with none the track is solid.\n * `activeStyle` is applied to the active indicator last, which is how the\n * progress indicator fades it under a wave.\n */\nexport function IndicatorLine({\n  activeStyle,\n  children,\n  percentage,\n  tone\n}: {\n  activeStyle?: stylex.StyleXStyles;\n  children?: ReactNode;\n  percentage: number;\n  tone: IndicatorTone;\n}) {\n  const active = ACTIVE_TONES[tone];\n  const solid = children === undefined;\n  return <div {...stylex.props(indicatorStyles.line)}>\n      <span {...stylex.props(indicatorStyles.active, indicatorStyles.activeAt(percentage), active, activeStyle)} />\n      <span {...stylex.props(indicatorStyles.track, solid && indicatorStyles.trackSolid, solid && tone === 'inherit' && indicatorStyles.inheritTrack)}>\n        {children}\n      </span>\n      <span {...stylex.props(indicatorStyles.stop, active)} />\n    </div>;\n}"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","Label","IndicatorTone","hasContent","indicatorStyles","ACTIVE_TONES","inherit","inheritActive","negative","negativeActive","positive","positiveActive","primary","const","IndicatorLabels","t0","$","_c","label","value","t1","Symbol","for","props","labels","t2","labelText","t3","t4","IndicatorLine","activeStyle","children","percentage","tone","active","solid","undefined","line","activeAt","track","trackSolid","inheritTrack","t5","t6","stop","t7","t8","_c","stylex.props"],"sources":["../../src/indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label } from 'react-aria-components';\nimport type { IndicatorTone } from './styles';\nimport { hasContent } from '../render/content';\nimport { indicatorStyles } from './styles';\n\n// The two pieces a linear indicator is drawn from, shared by\n// ProgressIndicator and Meter. The styles they use are in ./styles.ts.\n\n// What each tone draws the active indicator and the stop indicator in.\n// `primary` is the style they already carry, so it adds nothing.\nconst ACTIVE_TONES = {\n  inherit: indicatorStyles.inheritActive,\n  negative: indicatorStyles.negativeActive,\n  positive: indicatorStyles.positiveActive,\n  primary: null\n} as const;\n\n/**\n * The label and, optionally, the value, on a line above the indicator.\n * React Aria's `Label` reads the surrounding context, so the same element\n * names a progress bar and a meter alike. Renders nothing when there is\n * neither to show.\n */\nexport function IndicatorLabels({\n  label,\n  value\n}: {\n  label: ReactNode;\n  value: ReactNode;\n}) {\n  if (!hasContent(label) && !hasContent(value)) {\n    return null;\n  }\n  return <div {...stylex.props(indicatorStyles.labels)}>\n      {!hasContent(label) ? null : <Label {...stylex.props(indicatorStyles.label, indicatorStyles.labelText)}>\n          {label}\n        </Label>}\n      {!hasContent(value) ? null : <span {...stylex.props(indicatorStyles.label, indicatorStyles.value)}>\n          {value}\n        </span>}\n    </div>;\n}\n\n/**\n * The page's line: the active indicator at its share of the width, the track\n * taking what is left, and the stop indicator at the end. Anything passed as\n * `children` is drawn inside the track, which is what the progress\n * indicator's buffer fills it with; with none the track is solid.\n * `activeStyle` is applied to the active indicator last, which is how the\n * progress indicator fades it under a wave.\n */\nexport function IndicatorLine({\n  activeStyle,\n  children,\n  percentage,\n  tone\n}: {\n  activeStyle?: stylex.StyleXStyles;\n  children?: ReactNode;\n  percentage: number;\n  tone: IndicatorTone;\n}) {\n  const active = ACTIVE_TONES[tone];\n  const solid = children === undefined;\n  return <div {...stylex.props(indicatorStyles.line)}>\n      <span {...stylex.props(indicatorStyles.active, indicatorStyles.activeAt(percentage), active, activeStyle)} />\n      <span {...stylex.props(indicatorStyles.track, solid && indicatorStyles.trackSolid, solid && tone === 'inherit' && indicatorStyles.inheritTrack)}>\n        {children}\n      </span>\n      <span {...stylex.props(indicatorStyles.stop, active)} />\n    </div>;\n}"],"mappings":"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"}

package/dist/indicator/styles.js

@@ -45,6 +45,11 @@ const indicatorStyles = {
 		kjj79g: "x1qughib",
 		$$css: true
 	},
+	labelText: {
+		k7Eaqz: "xeuugli",
+		kHjlTd: "xj0a0fe",
+		$$css: true
+	},
 	line: {
 		kGNEyG: "x6s0dn4",
 		kZKoxP: "xqu0tyb",
@@ -96,6 +101,12 @@ const indicatorStyles = {
 	trackSolid: {
 		kWkggS: "x15dekr4",
 		$$css: true
+	},
+	value: {
+		kmuXW: "x2lah0s",
+		keTefX: "xvc5jky",
+		khDVqt: "xuxw1ft",
+		$$css: true
 	}
 };
 //#endregion

package/dist/indicator/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","typography","THICKNESS","GAP","DETERMINATE_EASING","IndicatorTone","FORCED_COLORS","_temp","kzqmXN","indicatorStyles","active","k6CgDc","kWkggS","kZKoxP","kaIpWk","kB7OPa","kmuXW","kIyJzY","k1ekBW","kAMwcw","$$css","activeAt","percentage","val","undefined","inheritActive","kjVXCG","inheritTrack","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","labels","kGNEyG","k1xSpc","kOIVth","kjj79g","line","negativeActive","positiveActive","root","kXwgrk","stop","track","kzQI83","k7Eaqz","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","trackSolid"],"sources":["../../src/indicator/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The line the progress indicators page draws, and the label row above it,\n// shared by the two components that draw one: ProgressIndicator, which adds\n// the ring and the two indeterminate presentations on top, and Meter, which\n// is this and nothing else.\n//\n// The page's anatomy names three parts — the active indicator in primary,\n// the track in secondary container, and the stop indicator in primary at the\n// end — at 4dp thick with 4dp between them. The row is a flex line and the\n// two gaps are its `gap`. The active indicator takes the value's share of\n// what the two gaps and the stop leave, and the track takes the rest, so the\n// stop ends the row at every value.\n//\n// Under forced colours every part here is a background, which that mode\n// paints in a system colour, so the line drew nothing at all. The active\n// indicator and the stop take `Highlight` there, as the slider's filled part\n// does, and the track keeps a `CanvasText` edge, drawn as an outline inside\n// it so it takes no room from the line.\n//\n// `tone` is the line's colour. `primary` is the page's own pair, and it is\n// what a progress indicator draws. `negative` and `positive` swap the active\n// indicator and the stop indicator alone, leaving the track in secondary\n// container, so a column of meters reads as one scale with bars of different\n// colours rather than as several unrelated gauges. `inherit` instead takes\n// the colour around it for both, and gives the track a quarter of it, which\n// is what makes a ring legible inside a filled button, where the page's\n// primary is the button's own fill.\n//\n// Apart from ./index.tsx so that file exports components alone, which is\n// what keeps fast refresh working for it.\n\n/** The thickness of every part, and the room the page leaves between them. */\nexport const THICKNESS = 4;\nexport const GAP = 4;\n\n/**\n * What the page gives a value that changes to move over. The duration is the\n * motion scale's own step rather than a constant beside it — src/tokens/\n * values.ts keeps a number in JS only where one has to reach\n * `element.animate()` or a timer, and nothing here does.\n */\nexport const DETERMINATE_EASING = 'cubic-bezier(0.4, 0, 0.6, 1)';\nexport type IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary';\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 _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nexport const indicatorStyles = {\n  active: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x1j4rzew\",\n    kAMwcw: \"x16pyfke\",\n    $$css: true\n  },\n  activeAt: (percentage: number) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc((100% - ${GAP * 2 + THICKNESS}px) * ${percentage / 100})`)\n  }],\n  inheritActive: {\n    kWkggS: \"xtwfq29 x1jzqe4\",\n    kjVXCG: \"x73je2i xbabvq0\",\n    $$css: true\n  },\n  inheritTrack: {\n    kWkggS: \"xtp5tyh\",\n    kjVXCG: \"xy3ggvv x8jos32\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labels: {\n    kGNEyG: \"x1pha0wt\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  line: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xqu0tyb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x1jnr06f\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  negativeActive: {\n    kWkggS: \"xmjwayr x1jzqe4\",\n    $$css: true\n  },\n  positiveActive: {\n    kWkggS: \"x1xov01w x1jzqe4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  stop: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"xqu0tyb\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x51ohtg\",\n    $$css: true\n  },\n  track: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kjBf7l: \"x3teovq\",\n    kInvED: \"xvr1dqx\",\n    k3XXqK: \"x815t2r\",\n    kMeerF: \"xcthrzx\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trackSolid: {\n    kWkggS: \"x15dekr4\",\n    $$css: true\n  }\n};"],"mappings":";AAoDA,MAAMW,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAaC,kBAAkB;CAC7BC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,WAAWC,eAAuB,CAACf,OAAO,EACxC,oBAAmBgB,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,wBAA4CF,aAAa,IAAG,EAAG,EACjK,CAAC;CACDG,eAAe;EACbb,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAO,cAAc;EACZf,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAQ,OAAO;EACLb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,QAAQ;EACNC,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,MAAM;EACJJ,QAAQ;EACRvB,QAAQ;EACRE,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACAqB,gBAAgB;EACd7B,QAAQ;EACRQ,OAAO;CACT;CACAsB,gBAAgB;EACd9B,QAAQ;EACRQ,OAAO;CACT;CACAuB,MAAM;EACJ5B,QAAQ;EACRsB,QAAQ;EACRO,QAAQ;EACRN,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACAyB,MAAM;EACJjC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPR,QAAQ;EACRY,OAAO;CACT;CACA0B,OAAO;EACLjC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRjC,OAAO;CACT;CACAkC,YAAY;EACV1C,QAAQ;EACRQ,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","typography","THICKNESS","GAP","DETERMINATE_EASING","IndicatorTone","FORCED_COLORS","_temp","kzqmXN","indicatorStyles","active","k6CgDc","kWkggS","kZKoxP","kaIpWk","kB7OPa","kmuXW","kIyJzY","k1ekBW","kAMwcw","$$css","activeAt","percentage","val","undefined","inheritActive","kjVXCG","inheritTrack","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","labels","kGNEyG","k1xSpc","kOIVth","kjj79g","labelText","k7Eaqz","kHjlTd","line","negativeActive","positiveActive","root","kXwgrk","stop","track","kzQI83","kjBf7l","kInvED","k3XXqK","kMeerF","kVQacm","trackSolid","value","keTefX","khDVqt"],"sources":["../../src/indicator/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The line the progress indicators page draws, and the label row above it,\n// shared by the two components that draw one: ProgressIndicator, which adds\n// the ring and the two indeterminate presentations on top, and Meter, which\n// is this and nothing else.\n//\n// The page's anatomy names three parts — the active indicator in primary,\n// the track in secondary container, and the stop indicator in primary at the\n// end — at 4dp thick with 4dp between them. The row is a flex line and the\n// two gaps are its `gap`. The active indicator takes the value's share of\n// what the two gaps and the stop leave, and the track takes the rest, so the\n// stop ends the row at every value.\n//\n// Under forced colours every part here is a background, which that mode\n// paints in a system colour, so the line drew nothing at all. The active\n// indicator and the stop take `Highlight` there, as the slider's filled part\n// does, and the track keeps a `CanvasText` edge, drawn as an outline inside\n// it so it takes no room from the line.\n//\n// `tone` is the line's colour. `primary` is the page's own pair, and it is\n// what a progress indicator draws. `negative` and `positive` swap the active\n// indicator and the stop indicator alone, leaving the track in secondary\n// container, so a column of meters reads as one scale with bars of different\n// colours rather than as several unrelated gauges. `inherit` instead takes\n// the colour around it for both, and gives the track a quarter of it, which\n// is what makes a ring legible inside a filled button, where the page's\n// primary is the button's own fill.\n//\n// Apart from ./index.tsx so that file exports components alone, which is\n// what keeps fast refresh working for it.\n\n/** The thickness of every part, and the room the page leaves between them. */\nexport const THICKNESS = 4;\nexport const GAP = 4;\n\n/**\n * What the page gives a value that changes to move over. The duration is the\n * motion scale's own step rather than a constant beside it — src/tokens/\n * values.ts keeps a number in JS only where one has to reach\n * `element.animate()` or a timer, and nothing here does.\n */\nexport const DETERMINATE_EASING = 'cubic-bezier(0.4, 0, 0.6, 1)';\nexport type IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary';\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 _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nexport const indicatorStyles = {\n  active: {\n    k6CgDc: \"x12w9bfk\",\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x1j4rzew\",\n    kAMwcw: \"x16pyfke\",\n    $$css: true\n  },\n  activeAt: (percentage: number) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc((100% - ${GAP * 2 + THICKNESS}px) * ${percentage / 100})`)\n  }],\n  inheritActive: {\n    kWkggS: \"xtwfq29 x1jzqe4\",\n    kjVXCG: \"x73je2i xbabvq0\",\n    $$css: true\n  },\n  inheritTrack: {\n    kWkggS: \"xtp5tyh\",\n    kjVXCG: \"xy3ggvv x8jos32\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labels: {\n    kGNEyG: \"x1pha0wt\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  labelText: {\n    k7Eaqz: \"xeuugli\",\n    kHjlTd: \"xj0a0fe\",\n    $$css: true\n  },\n  line: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xqu0tyb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x1jnr06f\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  negativeActive: {\n    kWkggS: \"xmjwayr x1jzqe4\",\n    $$css: true\n  },\n  positiveActive: {\n    kWkggS: \"x1xov01w x1jzqe4\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  stop: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kZKoxP: \"xqu0tyb\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x51ohtg\",\n    $$css: true\n  },\n  track: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kjBf7l: \"x3teovq\",\n    kInvED: \"xvr1dqx\",\n    k3XXqK: \"x815t2r\",\n    kMeerF: \"xcthrzx\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trackSolid: {\n    kWkggS: \"x15dekr4\",\n    $$css: true\n  },\n  value: {\n    kmuXW: \"x2lah0s\",\n    keTefX: \"xvc5jky\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};"],"mappings":";AAoDA,MAAMW,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAaC,kBAAkB;CAC7BC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,WAAWC,eAAuB,CAACf,OAAO,EACxC,oBAAmBgB,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,wBAA4CF,aAAa,IAAG,EAAG,EACjK,CAAC;CACDG,eAAe;EACbb,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAO,cAAc;EACZf,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAQ,OAAO;EACLb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,QAAQ;EACNC,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRtB,OAAO;CACT;CACAuB,MAAM;EACJP,QAAQ;EACRvB,QAAQ;EACRE,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACAwB,gBAAgB;EACdhC,QAAQ;EACRQ,OAAO;CACT;CACAyB,gBAAgB;EACdjC,QAAQ;EACRQ,OAAO;CACT;CACA0B,MAAM;EACJ/B,QAAQ;EACRsB,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACR9B,QAAQ;EACRY,OAAO;CACT;CACA4B,MAAM;EACJpC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPR,QAAQ;EACRY,OAAO;CACT;CACA6B,OAAO;EACLpC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRa,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnC,OAAO;CACT;CACAoC,YAAY;EACV5C,QAAQ;EACRQ,OAAO;CACT;CACAqC,OAAO;EACLzC,OAAO;EACP0C,QAAQ;EACRC,QAAQ;EACRvC,OAAO;CACT;AACF"}

package/dist/render/content.js

@@ -0,0 +1,16 @@
+//#region src/render/content.ts
+/**
+* Whether a slot was handed anything to draw. React draws nothing for
+* `null`, `false`, `true` or an empty string, and a call site passes them
+* for "nothing here" — `leading={user.avatar && <Avatar />}`, or a note that
+* is `null` — so a slot that asked only whether it was `undefined` drew an
+* empty wrapper for them, and a row counted a line it never showed. `0` is
+* content, since React draws it, and so is a string of spaces.
+*/
+function hasContent(node) {
+	return node !== void 0 && node !== null && node !== false && node !== true && node !== "";
+}
+//#endregion
+export { hasContent };
+
+//# sourceMappingURL=content.js.map

package/dist/render/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":["ReactNode","hasContent","node","undefined"],"sources":["../../src/render/content.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\n/**\n * Whether a slot was handed anything to draw. React draws nothing for\n * `null`, `false`, `true` or an empty string, and a call site passes them\n * for \"nothing here\" — `leading={user.avatar && <Avatar />}`, or a note that\n * is `null` — so a slot that asked only whether it was `undefined` drew an\n * empty wrapper for them, and a row counted a line it never showed. `0` is\n * content, since React draws it, and so is a string of spaces.\n */\nfunction hasContent(node: ReactNode): boolean {\n  return (\n    node !== undefined &&\n    node !== null &&\n    node !== false &&\n    node !== true &&\n    node !== ''\n  )\n}\n\nexport { hasContent }\n"],"mappings":";;;;;;;;;AAUA,SAASC,WAAWC,MAA0B;CAC5C,OACEA,SAASC,KAAAA,KACTD,SAAS,QACTA,SAAS,SACTA,SAAS,QACTA,SAAS;AAEb"}

package/dist/row/index.js

@@ -1,4 +1,5 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { hasContent } from "../render/content.js";
 import { rowStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -33,7 +34,7 @@ function RowContent(t0) {
 	const supportingTone = t5;
 	let t6;
 	if ($[4] !== leading) {
-		t6 = leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		t6 = !hasContent(leading) ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.slot),
 			children: leading
 		});
@@ -47,7 +48,7 @@ function RowContent(t0) {
 	} else t7 = $[6];
 	let t8;
 	if ($[7] !== overline || $[8] !== supportingTone) {
-		t8 = overline === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		t8 = !hasContent(overline) ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.overline, supportingTone),
 			children: overline
 		});
@@ -74,7 +75,7 @@ function RowContent(t0) {
 	} else t10 = $[15];
 	let t11;
 	if ($[16] !== supporting || $[17] !== supportingTone) {
-		t11 = supporting === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		t11 = !hasContent(supporting) ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.supporting, supportingTone),
 			children: supporting
 		});
@@ -99,7 +100,7 @@ function RowContent(t0) {
 	} else t12 = $[22];
 	let t13;
 	if ($[23] !== trailing) {
-		t13 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		t13 = !hasContent(trailing) ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.slot),
 			children: trailing
 		});

package/dist/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","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 { 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      {leading === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        {overline === undefined ? 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        {supporting === undefined ? null : <span {...stylex.props(rowStyles.supporting, supportingTone)}>\n            {supporting}\n          </span>}\n      </span>\n      {trailing === undefined ? 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":"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"}
+{"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":"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"}

package/dist/row/styles.js

@@ -62,6 +62,7 @@ const rowStyles = {
 		k63SB2: "x1c52epr",
 		kb6lSQ: "x1qn8t5l",
 		kLWn49: "xh7dzej",
+		kHjlTd: "xj0a0fe",
 		$$css: true
 	},
 	headlineMenu: {
@@ -70,6 +71,7 @@ const rowStyles = {
 		k63SB2: "x1v9cpvo",
 		kb6lSQ: "x155f00i",
 		kLWn49: "x1lz68p4",
+		kHjlTd: "xj0a0fe",
 		$$css: true
 	},
 	hovered: {
@@ -113,6 +115,7 @@ const rowStyles = {
 		k63SB2: "x1su64ma",
 		kb6lSQ: "xdlnduh",
 		kLWn49: "xaomhve",
+		kHjlTd: "xj0a0fe",
 		$$css: true
 	},
 	pressed: {
@@ -150,6 +153,7 @@ const rowStyles = {
 		k63SB2: "x1hews6w",
 		kb6lSQ: "xn43zvd",
 		kLWn49: "xv61bfh",
+		kHjlTd: "xj0a0fe",
 		$$css: true
 	},
 	supportingInherit: {

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","$$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","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\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\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    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\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    $$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    $$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,OAAO;CACT;CACAC,UAAU;EACRZ,QAAQ;EACRG,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,UAAU;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,QAAQ;EACNC,QAAQ;EACRd,QAAQ;EACRe,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;EACRxB,OAAO;CACT;CACAyB,cAAc;EACZJ,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRxB,OAAO;CACT;CACA0B,SAAS;EACPrB,QAAQ;EACRH,QAAQ;EACRF,OAAO;CACT;CACA2B,aAAa;EACXzB,QAAQ;EACR0B,QAAQ;EACRf,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRhB,OAAO;CACT;CACA6B,mBAAmB;EACjBxC,QAAQ;EACRW,OAAO;CACT;CACA8B,MAAM;EACJnB,QAAQ;EACRX,OAAO;CACT;CACA+B,MAAM;EACJtC,QAAQ;EACRuC,QAAQ;EACRC,QAAQ;EACRvC,QAAQ;EACRwC,QAAQ;EACRlC,OAAO;CACT;CACAmC,MAAM;EACJxB,QAAQ;EACRX,OAAO;CACT;CACAoC,UAAU;EACR5C,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRxB,OAAO;CACT;CACAqC,SAAS;EACPhC,QAAQ;EACRL,OAAO;CACT;CACAsC,gBAAgB;EACdjD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAuC,cAAc;EACZlD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAwC,cAAc;EACZnD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAyC,MAAM;EACJrD,QAAQ;EACRK,QAAQ;EACRiD,OAAO;EACP1C,OAAO;CACT;CACA2C,YAAY;EACVnD,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRxB,OAAO;CACT;CACA4C,mBAAmB;EACjBpD,QAAQ;EACRQ,OAAO;CACT;CACA6C,0BAA0B;EACxBrD,QAAQ;EACRQ,OAAO;CACT;CACA8C,wBAAwB;EACtBtD,QAAQ;EACRQ,OAAO;CACT;CACA+C,wBAAwB;EACtBvD,QAAQ;EACRQ,OAAO;CACT;CACAgD,WAAW;EACT5D,QAAQ;EACRuB,QAAQ;EACRX,OAAO;CACT;CACAiD,SAAS;EACPtC,QAAQ;EACRX,OAAO;CACT;AACF"}
+{"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","$$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\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\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,OAAO;CACT;CACAC,UAAU;EACRZ,QAAQ;EACRG,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,UAAU;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,QAAQ;EACNC,QAAQ;EACRd,QAAQ;EACRe,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;EACjBzC,QAAQ;EACRW,OAAO;CACT;CACA+B,MAAM;EACJpB,QAAQ;EACRX,OAAO;CACT;CACAgC,MAAM;EACJvC,QAAQ;EACRwC,QAAQ;EACRC,QAAQ;EACRxC,QAAQ;EACRyC,QAAQ;EACRnC,OAAO;CACT;CACAoC,MAAM;EACJzB,QAAQ;EACRX,OAAO;CACT;CACAqC,UAAU;EACR7C,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACAsC,SAAS;EACPjC,QAAQ;EACRL,OAAO;CACT;CACAuC,gBAAgB;EACdlD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAwC,cAAc;EACZnD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACAyC,cAAc;EACZpD,QAAQ;EACRG,QAAQ;EACRW,QAAQ;EACRH,OAAO;CACT;CACA0C,MAAM;EACJtD,QAAQ;EACRK,QAAQ;EACRkD,OAAO;EACP3C,OAAO;CACT;CACA4C,YAAY;EACVpD,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRH,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA6C,mBAAmB;EACjBrD,QAAQ;EACRQ,OAAO;CACT;CACA8C,0BAA0B;EACxBtD,QAAQ;EACRQ,OAAO;CACT;CACA+C,wBAAwB;EACtBvD,QAAQ;EACRQ,OAAO;CACT;CACAgD,wBAAwB;EACtBxD,QAAQ;EACRQ,OAAO;CACT;CACAiD,WAAW;EACT7D,QAAQ;EACRuB,QAAQ;EACRX,OAAO;CACT;CACAkD,SAAS;EACPvC,QAAQ;EACRX,OAAO;CACT;AACF"}

package/dist/styles.css

@@ -1785,8 +1785,8 @@
     grid-column-start: 2;
   }
 
-  .x1pmbctz {
-    grid-template-columns: auto 1fr;
+  .x1rkzygb {
+    grid-template-columns: auto minmax(0, 1fr);
   }
 
   .x1mkdm3x {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.40.3",
+  "version": "0.40.4",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",