@kanso-labs/kanso-ui 0.44.0 → 0.45.0

package/dist/field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","FORCED_COLORS","DISABLED_TEXT","default","onSurface","disabledContent","surface","BOX_BLOCK_SIZE","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_BLOCK_SIZE","lg","_temp","ks0D6T","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","kVQacm","kg5iWk","boxLabelEndInset","maxInlineSize","val","undefined","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","k9l4BL","kIPbS0","k8Qsv1","kMzoRj","kzqmXN","kmVPX3","inputDisabled","inputUnderFloatingLabel","inputUnderLabel","label","kHjlTd","labelDisabled","labelError","labelFocused","leftToRight","ksoyAI","k9WMMc","message","kqGvvJ","messageDisabled","messageError","messageInset","kUOVxO","messageLine","messageLineCollapsed","messageRegion","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineEndInset","paddingInlineEnd","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// The colour of a disabled control's text: its label and the description\n// under it, from one definition so the two cannot drift apart. `GrayText`\n// under forced colours, which leaves a group's legend and a description\n// alone: they are text beside a control, not a control the mode would grey.\nconst DISABLED_TEXT = {\n  default: `color-mix(in srgb, ${colors.onSurface} calc(${stateLayerOpacity.disabledContent} * 100%), ${colors.surface})`,\n  [FORCED_COLORS]: 'GrayText'\n};\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 _temp = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\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  boxLabelEndInset: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\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    kB7OPa: \"x9f619\",\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    k9l4BL: \"x1hcrkkg\",\n    kIPbS0: \"xzwh6sb\",\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    kg5iWk: \"xlyipyv\",\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  leftToRight: {\n    ksoyAI: \"xzt5al7\",\n    k9WMMc: \"xrgu2gv\",\n    $$css: true\n  },\n  message: {\n    kB7OPa: \"x9f619\",\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  messageDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\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  messageLineCollapsed: {\n    keoZOQ: \"xdj266r\",\n    kAzted: \"x2lwn1j\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  messageRegion: {\n    k1xSpc: \"x78zum5\",\n    kVAEAm: \"x1cmy3ng\",\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  outlineEndInset: (paddingInlineEnd: string) => [{\n    kwRFfy: paddingInlineEnd != null ? \"x120eax6\" : paddingInlineEnd,\n    $$css: true\n  }, {\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(paddingInlineEnd)\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","DISABLED_TEXT","default","onSurface","disabledContent","surface","HOVERED_FILL","hover","surfaceContainerHighest","DISABLED_FILL_OPACITY","OUTLINE_WIDTH","OUTLINE_FOCUSED_WIDTH","BOX_BLOCK_SIZE","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_BLOCK_SIZE","lg","_temp","ks0D6T","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","boxErrorHovered","boxFixed","boxFloating","boxFocused","boxHovered","boxLabel","k87sOh","kLqNvP","kVQacm","kg5iWk","boxLabelEndInset","maxInlineSize","val","undefined","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","iconErrorHovered","iconMultiline","k1K539","iconOutlined","input","k9l4BL","kIPbS0","k8Qsv1","kMzoRj","knGrYV","kzqmXN","kmVPX3","inputDisabled","inputInvalid","inputUnderFloatingLabel","inputUnderLabel","label","kHjlTd","labelDisabled","labelError","labelErrorHovered","labelFocused","labelHovered","leftToRight","ksoyAI","k9WMMc","message","kqGvvJ","messageDisabled","messageError","messageIndent","messageInset","kUOVxO","messageLine","messageLineCollapsed","messageRegion","numeric","outline","kVAM5u","kaIpWk","ksu8eU","kpwlN0","kogj98","k8WAf4","kfzvcC","outlineEndInset","paddingInlineEnd","outlineFocused","outlineLeading","outlineLeadingFocused","outlineNotch","k33iCy","outlineNotchOpen","outlineTrailing","outlineTrailingFocused","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// The colour of a disabled control's text: its label and the description\n// under it, from one definition so the two cannot drift apart. `GrayText`\n// under forced colours, which leaves a group's legend and a description\n// alone: they are text beside a control, not a control the mode would grey.\nconst DISABLED_TEXT = {\n  default: `color-mix(in srgb, ${colors.onSurface} calc(${stateLayerOpacity.disabledContent} * 100%), ${colors.surface})`,\n  [FORCED_COLORS]: 'GrayText'\n};\n\n// The filled box's state layer while hovered: on surface at the hover\n// opacity, laid over the fill, as the text fields page draws it.\nconst HOVERED_FILL = `color-mix(in srgb, ${colors.onSurface} calc(${stateLayerOpacity.hover} * 100%), ${colors.surfaceContainerHighest})`;\n\n// The filled box's disabled fill, on surface at 4%. Material Design gives the\n// filled field's disabled container a third of the 12% that\n// `stateLayerOpacity.disabledContainer` holds, and no token names it, so it\n// is written once here, beside the one style that draws it.\nconst DISABLED_FILL_OPACITY = '4%';\n\n// The outline's two widths, resting and focused. The notch's inline padding\n// is measured from the border's inside edge, so each width comes off the\n// padding that puts the notch level with the label — see `outline`.\nconst OUTLINE_WIDTH = '1px';\nconst OUTLINE_FOCUSED_WIDTH = '2px';\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 _temp = {\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\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: \"x106061f\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxDisabled: {\n    kWkggS: \"x1ojo7np\",\n    kL6WhQ: \"x1fxan2a\",\n    kGVxlE: \"xgloidm\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  boxError: {\n    kGVxlE: \"x1lxxh4i x1d6xoej\",\n    $$css: true\n  },\n  boxErrorFocused: {\n    kWkggS: \"x1rrhr5q\",\n    kGVxlE: \"xb0slzl\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxErrorHovered: {\n    kWkggS: \"x13aw6e3 xpae8dx\",\n    kGVxlE: \"x1lxxh4i xryshfu\",\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    kWkggS: \"x1rrhr5q\",\n    kGVxlE: \"xra6ydt\",\n    k3XXqK: \"x815t2r\",\n    $$css: true\n  },\n  boxHovered: {\n    kWkggS: \"x13aw6e3 xpae8dx\",\n    kGVxlE: \"x89kqus x1ncb8nd\",\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  boxLabelEndInset: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\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    kB7OPa: \"x9f619\",\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  iconErrorHovered: {\n    kMwMTN: \"x16elhoc\",\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    k9l4BL: \"x1hcrkkg\",\n    kIPbS0: \"xzwh6sb\",\n    k8Qsv1: \"x1hgeflb\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    knGrYV: \"x1jie568\",\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    kg5iWk: \"xlyipyv\",\n    $$css: true\n  },\n  inputDisabled: {\n    k8Qsv1: \"x7ip5l3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  inputInvalid: {\n    knGrYV: \"x11twi6n\",\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  labelErrorHovered: {\n    kMwMTN: \"x16elhoc\",\n    $$css: true\n  },\n  labelFocused: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  labelHovered: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  leftToRight: {\n    ksoyAI: \"xzt5al7\",\n    k9WMMc: \"xrgu2gv\",\n    $$css: true\n  },\n  message: {\n    kB7OPa: \"x9f619\",\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  messageDisabled: {\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  messageError: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  messageIndent: {\n    keTefX: \"xq0p5jb\",\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  messageLineCollapsed: {\n    keoZOQ: \"xdj266r\",\n    kAzted: \"x2lwn1j\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  messageRegion: {\n    k1xSpc: \"x78zum5\",\n    kVAEAm: \"x1cmy3ng\",\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: \"xgnwbya\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1bj6kjc\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  outlineEndInset: (paddingInlineEnd: string) => [{\n    kwRFfy: paddingInlineEnd != null ? \"x120eax6\" : paddingInlineEnd,\n    $$css: true\n  }, {\n    \"--x-paddingInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(paddingInlineEnd)\n  }],\n  outlineFocused: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"x1cmmxig\",\n    $$css: true\n  },\n  outlineLeading: {\n    kZCmMZ: \"x1e4tv75\",\n    $$css: true\n  },\n  outlineLeadingFocused: {\n    kZCmMZ: \"x2e0ysr\",\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: \"xflzzte\",\n    $$css: true\n  },\n  outlineTrailingFocused: {\n    kwRFfy: \"x1gwc4xo\",\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, OUTLINE_FOCUSED_WIDTH, OUTLINE_WIDTH };"],"mappings":"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"}

package/dist/hooks/useBottomEdge.js

@@ -39,9 +39,10 @@ function useBottomEdgeClearance() {
 *
 * Measured from where the element is drawn, so the strip takes in whatever
 * lies between it and the edge, a safe area among them. It is measured again
-* whenever the element resizes, the window does, or an animation ends, since
-* an overlay arriving from below is drawn lower than it rests until its entry
-* has run.
+* whenever the element resizes, the window does, or an animation or a scroll
+* ends, since an overlay arriving from below is drawn lower than it rests
+* until its entry has run — a dialog's entry is an animation, and a sheet's
+* is a scroll, which is also what a swipe that lets go of it makes.
 */
 function useHoldBottomEdge(ref, isHolding) {
 	const $ = c(4);
@@ -59,10 +60,12 @@ function useHoldBottomEdge(ref, isHolding) {
 			observer.observe(element);
 			window.addEventListener("resize", measure);
 			document.addEventListener("animationend", measure, true);
+			document.addEventListener("scrollend", measure, true);
 			return () => {
 				observer.disconnect();
 				window.removeEventListener("resize", measure);
 				document.removeEventListener("animationend", measure, true);
+				document.removeEventListener("scrollend", measure, true);
 				hold(element, void 0);
 			};
 		};

package/dist/hooks/useBottomEdge.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBottomEdge.js","names":["RefObject","useLayoutEffect","useSyncExternalStore","holders","Map","Element","listeners","Set","clearance","getClearance","getServerClearance","hold","element","height","undefined","delete","set","next","Math","max","values","listener","subscribe","add","useBottomEdgeClearance","useHoldBottomEdge","ref","isHolding","$","_c","t0","t1","current","measure","ceil","window","innerHeight","getBoundingClientRect","top","observer","ResizeObserver","observe","addEventListener","document","disconnect","removeEventListener","_c"],"sources":["../../src/hooks/useBottomEdge.ts"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { useLayoutEffect, useSyncExternalStore } from 'react'\n\n// The strips of the window's bottom edge that open overlays hold with their\n// actions, keyed by the element holding each, and how far a toast has to rise\n// to clear them all.\n//\n// The snackbar sits on that edge and above every modal, which is what lets a\n// message raised from inside a dialog be read over its scrim. But a\n// full-screen dialog's action bar and a sheet's actions sit on the same edge,\n// so a toast with an action lay over them and took the taps meant for their\n// buttons — and a toast with an action stays until it is answered. The parts\n// that hold the edge say so here, and the snackbar's region rises by the\n// tallest of them.\n//\n// A store rather than a context, since the two meet nowhere in the tree: the\n// snackbar is mounted once near the root, and the overlay is portalled to the\n// end of the body from wherever it was opened.\nconst holders = new Map<Element, number>()\nconst listeners = new Set<() => void>()\nlet clearance = 0\n\nfunction getClearance() {\n  return clearance\n}\n\n// Nothing is open while a page is rendered on the server.\nfunction getServerClearance() {\n  return 0\n}\n\nfunction hold(element: Element, height: number | undefined) {\n  if (height === undefined || height <= 0) {\n    holders.delete(element)\n  } else {\n    holders.set(element, height)\n  }\n  const next = Math.max(0, ...holders.values())\n  if (next === clearance) {\n    return\n  }\n  clearance = next\n  for (const listener of listeners) {\n    listener()\n  }\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\n/**\n * How far above the window's bottom edge a toast has to sit to clear the\n * actions of every open overlay holding that edge, in pixels: `0` while none\n * is open.\n */\nfunction useBottomEdgeClearance(): number {\n  return useSyncExternalStore(subscribe, getClearance, getServerClearance)\n}\n\n/**\n * Holds the strip from the top of the element in `ref` to the bottom of the\n * window while `isHolding` is true, so a toast rises clear of it. For a part\n * whose own bottom is the window's: an overlay's actions, pinned there.\n *\n * Measured from where the element is drawn, so the strip takes in whatever\n * lies between it and the edge, a safe area among them. It is measured again\n * whenever the element resizes, the window does, or an animation ends, since\n * an overlay arriving from below is drawn lower than it rests until its entry\n * has run.\n */\nfunction useHoldBottomEdge(\n  ref: RefObject<HTMLElement | null>,\n  isHolding: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current\n    if (element === null || !isHolding) {\n      return undefined\n    }\n\n    const measure = () => {\n      hold(\n        element,\n        Math.ceil(window.innerHeight - element.getBoundingClientRect().top),\n      )\n    }\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(element)\n    window.addEventListener('resize', measure)\n    document.addEventListener('animationend', measure, true)\n\n    return () => {\n      observer.disconnect()\n      window.removeEventListener('resize', measure)\n      document.removeEventListener('animationend', measure, true)\n      hold(element, undefined)\n    }\n  }, [isHolding, ref])\n}\n\nexport { useBottomEdgeClearance, useHoldBottomEdge }\n"],"mappings":";;;AAmBA,MAAMG,0BAAU,IAAIC,IAAqB;AACzC,MAAME,4BAAY,IAAIC,IAAgB;AACtC,IAAIC,YAAY;AAEhB,SAASC,eAAe;CACtB,OAAOD;AACT;AAGA,SAASE,qBAAqB;CAC5B,OAAO;AACT;AAEA,SAASC,KAAKC,SAAkBC,QAA4B;CAC1D,IAAIA,WAAWC,KAAAA,KAAaD,UAAU,GACpCV,QAAQY,OAAOH,OAAO;MAEtBT,QAAQa,IAAIJ,SAASC,MAAM;CAE7B,MAAMI,OAAOC,KAAKC,IAAI,GAAG,GAAGhB,QAAQiB,OAAO,CAAC;CAC5C,IAAIH,SAAST,WACX;CAEFA,YAAYS;CACZ,KAAK,MAAMI,YAAYf,WACrBe,SAAS;AAEb;AAEA,SAASC,UAAUD,UAAsB;CACvCf,UAAUiB,IAAIF,QAAQ;CACtB,aAAa;EACXf,UAAUS,OAAOM,QAAQ;CAC3B;AACF;;;;;;AAOA,SAAAG,yBAAA;CAAA,OACStB,qBAAqBoB,WAAWb,cAAcC,kBAAkB;AAAC;;;;;;;;;;;;AAc1E,SAAAe,kBAAAC,KAAAC,WAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,aAAAC,EAAA,OAAAF,KAAA;EAIkBI,WAAA;GACd,MAAAlB,UAAgBc,IAAGM;GACnB,IAAIpB,YAAY,QAAZ,CAAqBe,WAAS;GAIlC,MAAAM,gBAAgB;IACdtB,KACEC,SACAM,KAAIgB,KAAMC,OAAMC,cAAexB,QAAOyB,sBAAuB,CAAC,CAAAC,GAAI,CACpE;GAAC;GAEHL,QAAQ;GACR,MAAAM,WAAiB,IAAIC,eAAeP,OAAO;GAC3CM,SAAQE,QAAS7B,OAAO;GACxBuB,OAAMO,iBAAkB,UAAUT,OAAO;GACzCU,SAAQD,iBAAkB,gBAAgBT,SAAS,IAAI;GAAC,aAEjD;IACLM,SAAQK,WAAY;IACpBT,OAAMU,oBAAqB,UAAUZ,OAAO;IAC5CU,SAAQE,oBAAqB,gBAAgBZ,SAAS,IAAI;IAC1DtB,KAAKC,SAASE,KAAAA,CAAS;GAAC;EACzB;EACAiB,KAAA,CAACJ,WAAWD,GAAG;EAACE,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAxBnB3B,gBAAgB6B,IAwBbC,EAAgB;AAAC"}
+{"version":3,"file":"useBottomEdge.js","names":["RefObject","useLayoutEffect","useSyncExternalStore","holders","Map","Element","listeners","Set","clearance","getClearance","getServerClearance","hold","element","height","undefined","delete","set","next","Math","max","values","listener","subscribe","add","useBottomEdgeClearance","useHoldBottomEdge","ref","isHolding","$","_c","t0","t1","current","measure","ceil","window","innerHeight","getBoundingClientRect","top","observer","ResizeObserver","observe","addEventListener","document","disconnect","removeEventListener","_c"],"sources":["../../src/hooks/useBottomEdge.ts"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { useLayoutEffect, useSyncExternalStore } from 'react'\n\n// The strips of the window's bottom edge that open overlays hold with their\n// actions, keyed by the element holding each, and how far a toast has to rise\n// to clear them all.\n//\n// The snackbar sits on that edge and above every modal, which is what lets a\n// message raised from inside a dialog be read over its scrim. But a\n// full-screen dialog's action bar and a sheet's actions sit on the same edge,\n// so a toast with an action lay over them and took the taps meant for their\n// buttons — and a toast with an action stays until it is answered. The parts\n// that hold the edge say so here, and the snackbar's region rises by the\n// tallest of them.\n//\n// A store rather than a context, since the two meet nowhere in the tree: the\n// snackbar is mounted once near the root, and the overlay is portalled to the\n// end of the body from wherever it was opened.\nconst holders = new Map<Element, number>()\nconst listeners = new Set<() => void>()\nlet clearance = 0\n\nfunction getClearance() {\n  return clearance\n}\n\n// Nothing is open while a page is rendered on the server.\nfunction getServerClearance() {\n  return 0\n}\n\nfunction hold(element: Element, height: number | undefined) {\n  if (height === undefined || height <= 0) {\n    holders.delete(element)\n  } else {\n    holders.set(element, height)\n  }\n  const next = Math.max(0, ...holders.values())\n  if (next === clearance) {\n    return\n  }\n  clearance = next\n  for (const listener of listeners) {\n    listener()\n  }\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\n/**\n * How far above the window's bottom edge a toast has to sit to clear the\n * actions of every open overlay holding that edge, in pixels: `0` while none\n * is open.\n */\nfunction useBottomEdgeClearance(): number {\n  return useSyncExternalStore(subscribe, getClearance, getServerClearance)\n}\n\n/**\n * Holds the strip from the top of the element in `ref` to the bottom of the\n * window while `isHolding` is true, so a toast rises clear of it. For a part\n * whose own bottom is the window's: an overlay's actions, pinned there.\n *\n * Measured from where the element is drawn, so the strip takes in whatever\n * lies between it and the edge, a safe area among them. It is measured again\n * whenever the element resizes, the window does, or an animation or a scroll\n * ends, since an overlay arriving from below is drawn lower than it rests\n * until its entry has run — a dialog's entry is an animation, and a sheet's\n * is a scroll, which is also what a swipe that lets go of it makes.\n */\nfunction useHoldBottomEdge(\n  ref: RefObject<HTMLElement | null>,\n  isHolding: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current\n    if (element === null || !isHolding) {\n      return undefined\n    }\n\n    const measure = () => {\n      hold(\n        element,\n        Math.ceil(window.innerHeight - element.getBoundingClientRect().top),\n      )\n    }\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(element)\n    window.addEventListener('resize', measure)\n    document.addEventListener('animationend', measure, true)\n    // Captured, since `scrollend` does not bubble from the element scrolled.\n    document.addEventListener('scrollend', measure, true)\n\n    return () => {\n      observer.disconnect()\n      window.removeEventListener('resize', measure)\n      document.removeEventListener('animationend', measure, true)\n      document.removeEventListener('scrollend', measure, true)\n      hold(element, undefined)\n    }\n  }, [isHolding, ref])\n}\n\nexport { useBottomEdgeClearance, useHoldBottomEdge }\n"],"mappings":";;;AAmBA,MAAMG,0BAAU,IAAIC,IAAqB;AACzC,MAAME,4BAAY,IAAIC,IAAgB;AACtC,IAAIC,YAAY;AAEhB,SAASC,eAAe;CACtB,OAAOD;AACT;AAGA,SAASE,qBAAqB;CAC5B,OAAO;AACT;AAEA,SAASC,KAAKC,SAAkBC,QAA4B;CAC1D,IAAIA,WAAWC,KAAAA,KAAaD,UAAU,GACpCV,QAAQY,OAAOH,OAAO;MAEtBT,QAAQa,IAAIJ,SAASC,MAAM;CAE7B,MAAMI,OAAOC,KAAKC,IAAI,GAAG,GAAGhB,QAAQiB,OAAO,CAAC;CAC5C,IAAIH,SAAST,WACX;CAEFA,YAAYS;CACZ,KAAK,MAAMI,YAAYf,WACrBe,SAAS;AAEb;AAEA,SAASC,UAAUD,UAAsB;CACvCf,UAAUiB,IAAIF,QAAQ;CACtB,aAAa;EACXf,UAAUS,OAAOM,QAAQ;CAC3B;AACF;;;;;;AAOA,SAAAG,yBAAA;CAAA,OACStB,qBAAqBoB,WAAWb,cAAcC,kBAAkB;AAAC;;;;;;;;;;;;;AAe1E,SAAAe,kBAAAC,KAAAC,WAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,aAAAC,EAAA,OAAAF,KAAA;EAIkBI,WAAA;GACd,MAAAlB,UAAgBc,IAAGM;GACnB,IAAIpB,YAAY,QAAZ,CAAqBe,WAAS;GAIlC,MAAAM,gBAAgB;IACdtB,KACEC,SACAM,KAAIgB,KAAMC,OAAMC,cAAexB,QAAOyB,sBAAuB,CAAC,CAAAC,GAAI,CACpE;GAAC;GAEHL,QAAQ;GACR,MAAAM,WAAiB,IAAIC,eAAeP,OAAO;GAC3CM,SAAQE,QAAS7B,OAAO;GACxBuB,OAAMO,iBAAkB,UAAUT,OAAO;GACzCU,SAAQD,iBAAkB,gBAAgBT,SAAS,IAAI;GAEvDU,SAAQD,iBAAkB,aAAaT,SAAS,IAAI;GAAC,aAE9C;IACLM,SAAQK,WAAY;IACpBT,OAAMU,oBAAqB,UAAUZ,OAAO;IAC5CU,SAAQE,oBAAqB,gBAAgBZ,SAAS,IAAI;IAC1DU,SAAQE,oBAAqB,aAAaZ,SAAS,IAAI;IACvDtB,KAAKC,SAASE,KAAAA,CAAS;GAAC;EACzB;EACAiB,KAAA,CAACJ,WAAWD,GAAG;EAACE,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CA3BnB3B,gBAAgB6B,IA2BbC,EAAgB;AAAC"}