@pearpages/pulp-react 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (238) hide show
  1. package/README.md +3 -0
  2. package/dist/accordion.css +2 -0
  3. package/dist/accordion.css.map +1 -1
  4. package/dist/accordion.js +2 -2
  5. package/dist/alert.css +7 -0
  6. package/dist/alert.css.map +1 -1
  7. package/dist/alert.js +6 -6
  8. package/dist/badge.css +2 -0
  9. package/dist/badge.css.map +1 -1
  10. package/dist/badge.js +2 -2
  11. package/dist/button.css +5 -0
  12. package/dist/button.css.map +1 -1
  13. package/dist/button.js +4 -4
  14. package/dist/calendar.css +2 -0
  15. package/dist/calendar.css.map +1 -1
  16. package/dist/calendar.js +3 -3
  17. package/dist/card.css +1 -0
  18. package/dist/card.css.map +1 -1
  19. package/dist/card.js +1 -1
  20. package/dist/checkbox.css +2 -0
  21. package/dist/checkbox.css.map +1 -1
  22. package/dist/checkbox.js +3 -3
  23. package/dist/{chunk-7DS4I7OJ.js → chunk-2E2ESMS2.js} +2 -2
  24. package/dist/chunk-2E2ESMS2.js.map +1 -0
  25. package/dist/{chunk-FH54XQ35.js → chunk-2IYYES7V.js} +2 -2
  26. package/dist/chunk-2IYYES7V.js.map +1 -0
  27. package/dist/{chunk-GTTXRDXV.js → chunk-2NSQPN7S.js} +3 -3
  28. package/dist/chunk-2NSQPN7S.js.map +1 -0
  29. package/dist/{chunk-IDNGNQNV.js → chunk-55QUKGK2.js} +2 -2
  30. package/dist/chunk-55QUKGK2.js.map +1 -0
  31. package/dist/{chunk-TGMDOQCL.js → chunk-5PYLJQJX.js} +3 -3
  32. package/dist/chunk-5PYLJQJX.js.map +1 -0
  33. package/dist/{chunk-KPQGS4PG.js → chunk-5TTYVQ6Q.js} +4 -4
  34. package/dist/chunk-5TTYVQ6Q.js.map +1 -0
  35. package/dist/{chunk-BBV4L5WO.js → chunk-6BIEW4WJ.js} +3 -3
  36. package/dist/{chunk-BBV4L5WO.js.map → chunk-6BIEW4WJ.js.map} +1 -1
  37. package/dist/{chunk-6I26MMQF.js → chunk-737GQSOB.js} +3 -3
  38. package/dist/chunk-737GQSOB.js.map +1 -0
  39. package/dist/{chunk-WDWTQKIJ.js → chunk-BAPNIZDV.js} +5 -5
  40. package/dist/chunk-BAPNIZDV.js.map +1 -0
  41. package/dist/{chunk-ASOQ2MVR.js → chunk-BR2EH4TK.js} +2 -2
  42. package/dist/chunk-BR2EH4TK.js.map +1 -0
  43. package/dist/{chunk-YUHS5S5Y.js → chunk-DGIXNUNI.js} +2 -2
  44. package/dist/chunk-DGIXNUNI.js.map +1 -0
  45. package/dist/{chunk-OUFAFINB.js → chunk-DVZ46GQN.js} +3 -3
  46. package/dist/chunk-DVZ46GQN.js.map +1 -0
  47. package/dist/{chunk-T76YSNTZ.js → chunk-EDTA65L5.js} +3 -3
  48. package/dist/chunk-EDTA65L5.js.map +1 -0
  49. package/dist/{chunk-3GWESUGD.js → chunk-F3S5BHX2.js} +2 -2
  50. package/dist/chunk-F3S5BHX2.js.map +1 -0
  51. package/dist/{chunk-Z4PN6B2C.js → chunk-IB5UUE3S.js} +2 -2
  52. package/dist/chunk-IB5UUE3S.js.map +1 -0
  53. package/dist/{chunk-MXWXJZFS.js → chunk-IFIQLIA3.js} +3 -3
  54. package/dist/chunk-IFIQLIA3.js.map +1 -0
  55. package/dist/{chunk-4HRNRTXI.js → chunk-IRNTXAA7.js} +3 -3
  56. package/dist/{chunk-4HRNRTXI.js.map → chunk-IRNTXAA7.js.map} +1 -1
  57. package/dist/{chunk-OXYP34CG.js → chunk-JOGIN4SS.js} +3 -3
  58. package/dist/chunk-JOGIN4SS.js.map +1 -0
  59. package/dist/{chunk-MRQWUCBA.js → chunk-LA3YBXCR.js} +2 -2
  60. package/dist/chunk-LA3YBXCR.js.map +1 -0
  61. package/dist/{chunk-2ZP4ZBI5.js → chunk-LKWZZIRZ.js} +2 -2
  62. package/dist/chunk-LKWZZIRZ.js.map +1 -0
  63. package/dist/{chunk-2PXTVZ7H.js → chunk-M5VL22MY.js} +2 -2
  64. package/dist/chunk-M5VL22MY.js.map +1 -0
  65. package/dist/{chunk-FXRSZUDH.js → chunk-MF66ICX6.js} +4 -4
  66. package/dist/chunk-MF66ICX6.js.map +1 -0
  67. package/dist/{chunk-PM4YO67Q.js → chunk-N4C3NQIN.js} +4 -4
  68. package/dist/chunk-N4C3NQIN.js.map +1 -0
  69. package/dist/{chunk-XDVS7HX7.js → chunk-N6E2E2OY.js} +3 -3
  70. package/dist/chunk-N6E2E2OY.js.map +1 -0
  71. package/dist/{chunk-GUZMLYST.js → chunk-NOUUOH4R.js} +6 -6
  72. package/dist/chunk-NOUUOH4R.js.map +1 -0
  73. package/dist/{chunk-ASNTNTJW.js → chunk-O5LII5XP.js} +2 -2
  74. package/dist/chunk-O5LII5XP.js.map +1 -0
  75. package/dist/{chunk-N7L66GMG.js → chunk-OFFFRIJG.js} +2 -2
  76. package/dist/chunk-OFFFRIJG.js.map +1 -0
  77. package/dist/{chunk-OGIQRHNF.js → chunk-OFKSU77Y.js} +3 -3
  78. package/dist/chunk-OFKSU77Y.js.map +1 -0
  79. package/dist/{chunk-XUROYTJ7.js → chunk-TJJBCS3N.js} +3 -3
  80. package/dist/chunk-TJJBCS3N.js.map +1 -0
  81. package/dist/{chunk-DXOOW6Q6.js → chunk-U3N3G2UA.js} +4 -4
  82. package/dist/chunk-U3N3G2UA.js.map +1 -0
  83. package/dist/{chunk-AWQHULJC.js → chunk-VIGD7KHC.js} +2 -2
  84. package/dist/chunk-VIGD7KHC.js.map +1 -0
  85. package/dist/{chunk-K5QGGQOV.js → chunk-VQN5DQP6.js} +4 -4
  86. package/dist/chunk-VQN5DQP6.js.map +1 -0
  87. package/dist/{chunk-O6OBFL3Q.js → chunk-W2UUZ2DC.js} +3 -3
  88. package/dist/chunk-W2UUZ2DC.js.map +1 -0
  89. package/dist/{chunk-5SBKZS56.js → chunk-W6HEBHA7.js} +3 -3
  90. package/dist/{chunk-5SBKZS56.js.map → chunk-W6HEBHA7.js.map} +1 -1
  91. package/dist/{chunk-TVI5AXLE.js → chunk-WJDDKNE7.js} +3 -3
  92. package/dist/{chunk-TVI5AXLE.js.map → chunk-WJDDKNE7.js.map} +1 -1
  93. package/dist/{chunk-7RQQASKS.js → chunk-XGWFTFGR.js} +3 -3
  94. package/dist/chunk-XGWFTFGR.js.map +1 -0
  95. package/dist/{chunk-Y4TZA77G.js → chunk-XWPXW46D.js} +2 -2
  96. package/dist/chunk-XWPXW46D.js.map +1 -0
  97. package/dist/{chunk-UX42PQLT.js → chunk-Y4YVAHD2.js} +5 -5
  98. package/dist/chunk-Y4YVAHD2.js.map +1 -0
  99. package/dist/{chunk-P5C2U5ZF.js → chunk-YBECKOVP.js} +3 -3
  100. package/dist/chunk-YBECKOVP.js.map +1 -0
  101. package/dist/{chunk-75GTNRBH.js → chunk-YK2OOM56.js} +3 -3
  102. package/dist/chunk-YK2OOM56.js.map +1 -0
  103. package/dist/{chunk-DWE374JX.js → chunk-Z6SS4G4V.js} +3 -3
  104. package/dist/chunk-Z6SS4G4V.js.map +1 -0
  105. package/dist/{chunk-I4KC4V6A.js → chunk-ZL5MMRLG.js} +3 -3
  106. package/dist/chunk-ZL5MMRLG.js.map +1 -0
  107. package/dist/combobox.css +6 -0
  108. package/dist/combobox.css.map +1 -1
  109. package/dist/combobox.js +7 -7
  110. package/dist/date-picker.css +4 -0
  111. package/dist/date-picker.css.map +1 -1
  112. package/dist/date-picker.js +5 -5
  113. package/dist/dialog.css +1 -0
  114. package/dist/dialog.css.map +1 -1
  115. package/dist/dialog.js +1 -1
  116. package/dist/field.css +1 -0
  117. package/dist/field.css.map +1 -1
  118. package/dist/field.js +1 -1
  119. package/dist/heading.css +1 -0
  120. package/dist/heading.css.map +1 -1
  121. package/dist/heading.js +1 -1
  122. package/dist/icon-button.css +6 -0
  123. package/dist/icon-button.css.map +1 -1
  124. package/dist/icon-button.js +5 -5
  125. package/dist/icon.css +1 -0
  126. package/dist/icon.css.map +1 -1
  127. package/dist/icon.js +1 -1
  128. package/dist/index.css +39 -0
  129. package/dist/index.css.map +1 -1
  130. package/dist/index.js +42 -42
  131. package/dist/inline.css +1 -0
  132. package/dist/inline.css.map +1 -1
  133. package/dist/inline.js +1 -1
  134. package/dist/listbox.css +2 -0
  135. package/dist/listbox.css.map +1 -1
  136. package/dist/listbox.js +3 -3
  137. package/dist/menu.css +2 -0
  138. package/dist/menu.css.map +1 -1
  139. package/dist/menu.js +2 -2
  140. package/dist/pagination.css +7 -0
  141. package/dist/pagination.css.map +1 -1
  142. package/dist/pagination.js +6 -6
  143. package/dist/picker.css +4 -0
  144. package/dist/picker.css.map +1 -1
  145. package/dist/picker.js +5 -5
  146. package/dist/popover.css +1 -0
  147. package/dist/popover.css.map +1 -1
  148. package/dist/popover.js +1 -1
  149. package/dist/progress.css +2 -0
  150. package/dist/progress.css.map +1 -1
  151. package/dist/progress.js +2 -2
  152. package/dist/radio.css +2 -0
  153. package/dist/radio.css.map +1 -1
  154. package/dist/radio.js +2 -2
  155. package/dist/select.css +2 -0
  156. package/dist/select.css.map +1 -1
  157. package/dist/select.js +2 -2
  158. package/dist/sheet.css +2 -0
  159. package/dist/sheet.css.map +1 -1
  160. package/dist/sheet.js +2 -2
  161. package/dist/skeleton.css +1 -0
  162. package/dist/skeleton.css.map +1 -1
  163. package/dist/skeleton.js +1 -1
  164. package/dist/slider.css +2 -0
  165. package/dist/slider.css.map +1 -1
  166. package/dist/slider.js +2 -2
  167. package/dist/spinner.css +2 -0
  168. package/dist/spinner.css.map +1 -1
  169. package/dist/spinner.js +2 -2
  170. package/dist/stack.css +1 -0
  171. package/dist/stack.css.map +1 -1
  172. package/dist/stack.js +1 -1
  173. package/dist/switch.css +2 -0
  174. package/dist/switch.css.map +1 -1
  175. package/dist/switch.js +3 -3
  176. package/dist/table.css +2 -0
  177. package/dist/table.css.map +1 -1
  178. package/dist/table.js +2 -2
  179. package/dist/tabs.css +1 -0
  180. package/dist/tabs.css.map +1 -1
  181. package/dist/tabs.js +1 -1
  182. package/dist/text-field.css +2 -0
  183. package/dist/text-field.css.map +1 -1
  184. package/dist/text-field.js +2 -2
  185. package/dist/text.css +1 -0
  186. package/dist/text.css.map +1 -1
  187. package/dist/text.js +1 -1
  188. package/dist/textarea.css +2 -0
  189. package/dist/textarea.css.map +1 -1
  190. package/dist/textarea.js +2 -2
  191. package/dist/toast.css +8 -0
  192. package/dist/toast.css.map +1 -1
  193. package/dist/toast.js +7 -7
  194. package/dist/tooltip.css +1 -0
  195. package/dist/tooltip.css.map +1 -1
  196. package/dist/tooltip.js +1 -1
  197. package/dist/visually-hidden.css +1 -0
  198. package/dist/visually-hidden.css.map +1 -1
  199. package/dist/visually-hidden.js +1 -1
  200. package/package.json +3 -3
  201. package/dist/chunk-2PXTVZ7H.js.map +0 -1
  202. package/dist/chunk-2ZP4ZBI5.js.map +0 -1
  203. package/dist/chunk-3GWESUGD.js.map +0 -1
  204. package/dist/chunk-6I26MMQF.js.map +0 -1
  205. package/dist/chunk-75GTNRBH.js.map +0 -1
  206. package/dist/chunk-7DS4I7OJ.js.map +0 -1
  207. package/dist/chunk-7RQQASKS.js.map +0 -1
  208. package/dist/chunk-ASNTNTJW.js.map +0 -1
  209. package/dist/chunk-ASOQ2MVR.js.map +0 -1
  210. package/dist/chunk-AWQHULJC.js.map +0 -1
  211. package/dist/chunk-DWE374JX.js.map +0 -1
  212. package/dist/chunk-DXOOW6Q6.js.map +0 -1
  213. package/dist/chunk-FH54XQ35.js.map +0 -1
  214. package/dist/chunk-FXRSZUDH.js.map +0 -1
  215. package/dist/chunk-GTTXRDXV.js.map +0 -1
  216. package/dist/chunk-GUZMLYST.js.map +0 -1
  217. package/dist/chunk-I4KC4V6A.js.map +0 -1
  218. package/dist/chunk-IDNGNQNV.js.map +0 -1
  219. package/dist/chunk-K5QGGQOV.js.map +0 -1
  220. package/dist/chunk-KPQGS4PG.js.map +0 -1
  221. package/dist/chunk-MRQWUCBA.js.map +0 -1
  222. package/dist/chunk-MXWXJZFS.js.map +0 -1
  223. package/dist/chunk-N7L66GMG.js.map +0 -1
  224. package/dist/chunk-O6OBFL3Q.js.map +0 -1
  225. package/dist/chunk-OGIQRHNF.js.map +0 -1
  226. package/dist/chunk-OUFAFINB.js.map +0 -1
  227. package/dist/chunk-OXYP34CG.js.map +0 -1
  228. package/dist/chunk-P5C2U5ZF.js.map +0 -1
  229. package/dist/chunk-PM4YO67Q.js.map +0 -1
  230. package/dist/chunk-T76YSNTZ.js.map +0 -1
  231. package/dist/chunk-TGMDOQCL.js.map +0 -1
  232. package/dist/chunk-UX42PQLT.js.map +0 -1
  233. package/dist/chunk-WDWTQKIJ.js.map +0 -1
  234. package/dist/chunk-XDVS7HX7.js.map +0 -1
  235. package/dist/chunk-XUROYTJ7.js.map +0 -1
  236. package/dist/chunk-Y4TZA77G.js.map +0 -1
  237. package/dist/chunk-YUHS5S5Y.js.map +0 -1
  238. package/dist/chunk-Z4PN6B2C.js.map +0 -1
package/dist/index.js CHANGED
@@ -1,50 +1,50 @@
1
- export { Text } from './chunk-2ZP4ZBI5.js';
2
- export { Tabs } from './chunk-FH54XQ35.js';
3
- export { Card } from './chunk-MRQWUCBA.js';
4
- export { TextField } from './chunk-MXWXJZFS.js';
5
- export { Checkbox } from './chunk-DWE374JX.js';
6
- export { Inline } from './chunk-AWQHULJC.js';
7
- export { Stack } from './chunk-7DS4I7OJ.js';
8
- export { Heading } from './chunk-3GWESUGD.js';
9
- export { ToastProvider, useToast } from './chunk-DXOOW6Q6.js';
10
- export { Alert } from './chunk-PM4YO67Q.js';
11
- export { Badge } from './chunk-6I26MMQF.js';
12
- export { Select } from './chunk-OGIQRHNF.js';
13
- export { Textarea } from './chunk-TGMDOQCL.js';
14
- export { Radio, RadioGroup } from './chunk-XDVS7HX7.js';
15
- export { Switch } from './chunk-OUFAFINB.js';
16
- import './chunk-BBV4L5WO.js';
17
- export { Field, useField } from './chunk-2PXTVZ7H.js';
18
- export { Listbox } from './chunk-TVI5AXLE.js';
19
- export { Combobox } from './chunk-GUZMLYST.js';
20
- export { Menu } from './chunk-GTTXRDXV.js';
21
- export { Accordion } from './chunk-O6OBFL3Q.js';
1
+ export { Text } from './chunk-LKWZZIRZ.js';
2
+ export { Tabs } from './chunk-2IYYES7V.js';
3
+ export { Card } from './chunk-LA3YBXCR.js';
4
+ export { TextField } from './chunk-IFIQLIA3.js';
5
+ export { Checkbox } from './chunk-Z6SS4G4V.js';
6
+ export { Inline } from './chunk-VIGD7KHC.js';
7
+ export { Stack } from './chunk-2E2ESMS2.js';
8
+ export { Heading } from './chunk-F3S5BHX2.js';
9
+ export { ToastProvider, useToast } from './chunk-U3N3G2UA.js';
10
+ export { Alert } from './chunk-N4C3NQIN.js';
11
+ export { Badge } from './chunk-737GQSOB.js';
12
+ export { Select } from './chunk-OFKSU77Y.js';
13
+ export { Textarea } from './chunk-5PYLJQJX.js';
14
+ export { Radio, RadioGroup } from './chunk-N6E2E2OY.js';
15
+ export { Switch } from './chunk-DVZ46GQN.js';
16
+ import './chunk-6BIEW4WJ.js';
17
+ export { Field, useField } from './chunk-M5VL22MY.js';
18
+ export { Listbox } from './chunk-WJDDKNE7.js';
19
+ export { Combobox } from './chunk-NOUUOH4R.js';
20
+ export { Menu } from './chunk-2NSQPN7S.js';
21
+ export { Accordion } from './chunk-W2UUZ2DC.js';
22
22
  import './chunk-I5OZ63W7.js';
23
- export { Popover } from './chunk-N7L66GMG.js';
23
+ export { Popover } from './chunk-OFFFRIJG.js';
24
24
  import './chunk-NAYFLTK6.js';
25
- export { Tooltip } from './chunk-Y4TZA77G.js';
25
+ export { Tooltip } from './chunk-XWPXW46D.js';
26
26
  import './chunk-U6QRAD73.js';
27
- export { Skeleton } from './chunk-ASOQ2MVR.js';
28
- export { Progress } from './chunk-75GTNRBH.js';
29
- export { Sheet } from './chunk-XUROYTJ7.js';
30
- export { Dialog, DialogSystem } from './chunk-IDNGNQNV.js';
31
- export { Pagination, paginationRange } from './chunk-K5QGGQOV.js';
32
- export { IconButton } from './chunk-FXRSZUDH.js';
33
- export { Button } from './chunk-KPQGS4PG.js';
34
- export { Spinner } from './chunk-I4KC4V6A.js';
27
+ export { Skeleton } from './chunk-BR2EH4TK.js';
28
+ export { Progress } from './chunk-YK2OOM56.js';
29
+ export { Sheet } from './chunk-TJJBCS3N.js';
30
+ export { Dialog, DialogSystem } from './chunk-55QUKGK2.js';
31
+ export { Pagination, paginationRange } from './chunk-VQN5DQP6.js';
32
+ export { IconButton } from './chunk-MF66ICX6.js';
33
+ export { Button } from './chunk-5TTYVQ6Q.js';
34
+ export { Spinner } from './chunk-ZL5MMRLG.js';
35
35
  import './chunk-ZVDN3GRI.js';
36
- export { Table } from './chunk-7RQQASKS.js';
36
+ export { Table } from './chunk-XGWFTFGR.js';
37
37
  import './chunk-CZBCGLEM.js';
38
- export { VisuallyHidden } from './chunk-Z4PN6B2C.js';
39
- export { Slider } from './chunk-P5C2U5ZF.js';
40
- export { DatePicker } from './chunk-UX42PQLT.js';
41
- export { Calendar } from './chunk-5SBKZS56.js';
42
- import './chunk-OXYP34CG.js';
43
- export { Picker } from './chunk-WDWTQKIJ.js';
44
- import './chunk-T76YSNTZ.js';
45
- import './chunk-4HRNRTXI.js';
46
- import './chunk-YUHS5S5Y.js';
47
- export { Icon } from './chunk-ASNTNTJW.js';
38
+ export { VisuallyHidden } from './chunk-IB5UUE3S.js';
39
+ export { Slider } from './chunk-YBECKOVP.js';
40
+ export { DatePicker } from './chunk-Y4YVAHD2.js';
41
+ export { Calendar } from './chunk-W6HEBHA7.js';
42
+ import './chunk-JOGIN4SS.js';
43
+ export { Picker } from './chunk-BAPNIZDV.js';
44
+ import './chunk-EDTA65L5.js';
45
+ import './chunk-IRNTXAA7.js';
46
+ import './chunk-DGIXNUNI.js';
47
+ export { Icon } from './chunk-O5LII5XP.js';
48
48
  import './chunk-MI4QUKQS.js';
49
49
  //# sourceMappingURL=index.js.map
50
50
  //# sourceMappingURL=index.js.map
package/dist/inline.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/inline/Inline.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Inline_inline {
4
5
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/inline/Inline.module.css"],"sourcesContent":["/* Every value is a token (--inline-gap-*). Gap, alignment and justification are data attributes. */\n\n@layer components {\n .inline {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--inline-gap-3);\n margin: 0;\n padding: 0;\n list-style: none;\n\n &[data-gap=\"1\"] { gap: var(--inline-gap-1); }\n &[data-gap=\"2\"] { gap: var(--inline-gap-2); }\n &[data-gap=\"3\"] { gap: var(--inline-gap-3); }\n &[data-gap=\"4\"] { gap: var(--inline-gap-4); }\n &[data-gap=\"5\"] { gap: var(--inline-gap-5); }\n &[data-gap=\"6\"] { gap: var(--inline-gap-6); }\n &[data-gap=\"7\"] { gap: var(--inline-gap-7); }\n &[data-gap=\"8\"] { gap: var(--inline-gap-8); }\n &[data-align=\"start\"] { align-items: flex-start; }\n &[data-align=\"center\"] { align-items: center; }\n &[data-align=\"end\"] { align-items: flex-end; }\n &[data-align=\"stretch\"] { align-items: stretch; }\n &[data-justify=\"start\"] { justify-content: flex-start; }\n &[data-justify=\"center\"] { justify-content: center; }\n &[data-justify=\"end\"] { justify-content: flex-end; }\n &[data-justify=\"between\"] { justify-content: space-between; }\n &[data-wrap] { flex-wrap: wrap; }\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,eAAW,IAAI;AACf,SAAK,IAAI;AACT,YAAQ;AACR,aAAS;AACT,gBAAY;AAEZ,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAsB,mBAAa;AAAY;AACjD,KAAC,CAAC;AAAuB,mBAAa;AAAQ;AAC9C,KAAC,CAAC;AAAoB,mBAAa;AAAU;AAC7C,KAAC,CAAC;AAAwB,mBAAa;AAAS;AAChD,KAAC,CAAC;AAAwB,uBAAiB;AAAY;AACvD,KAAC,CAAC;AAAyB,uBAAiB;AAAQ;AACpD,KAAC,CAAC;AAAsB,uBAAiB;AAAU;AACnD,KAAC,CAAC;AAA0B,uBAAiB;AAAe;AAC5D,KAAC,CAAC;AAAa,iBAAW;AAAM;AAClC;AACF;","names":["inline"]}
1
+ {"version":3,"sources":["../src/inline/Inline.module.css"],"sourcesContent":["/* Every value is a token (--inline-gap-*). Gap, alignment and justification are data attributes. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .inline {\n display: flex;\n flex-flow: row nowrap;\n gap: var(--inline-gap-3);\n margin: 0;\n padding: 0;\n list-style: none;\n\n &[data-gap=\"1\"] { gap: var(--inline-gap-1); }\n &[data-gap=\"2\"] { gap: var(--inline-gap-2); }\n &[data-gap=\"3\"] { gap: var(--inline-gap-3); }\n &[data-gap=\"4\"] { gap: var(--inline-gap-4); }\n &[data-gap=\"5\"] { gap: var(--inline-gap-5); }\n &[data-gap=\"6\"] { gap: var(--inline-gap-6); }\n &[data-gap=\"7\"] { gap: var(--inline-gap-7); }\n &[data-gap=\"8\"] { gap: var(--inline-gap-8); }\n &[data-align=\"start\"] { align-items: flex-start; }\n &[data-align=\"center\"] { align-items: center; }\n &[data-align=\"end\"] { align-items: flex-end; }\n &[data-align=\"stretch\"] { align-items: stretch; }\n &[data-justify=\"start\"] { justify-content: flex-start; }\n &[data-justify=\"center\"] { justify-content: center; }\n &[data-justify=\"end\"] { justify-content: flex-end; }\n &[data-justify=\"between\"] { justify-content: space-between; }\n &[data-wrap] { flex-wrap: wrap; }\n }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,eAAW,IAAI;AACf,SAAK,IAAI;AACT,YAAQ;AACR,aAAS;AACT,gBAAY;AAEZ,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAiB;AAC5C,KAAC,CAAC;AAAsB,mBAAa;AAAY;AACjD,KAAC,CAAC;AAAuB,mBAAa;AAAQ;AAC9C,KAAC,CAAC;AAAoB,mBAAa;AAAU;AAC7C,KAAC,CAAC;AAAwB,mBAAa;AAAS;AAChD,KAAC,CAAC;AAAwB,uBAAiB;AAAY;AACvD,KAAC,CAAC;AAAyB,uBAAiB;AAAQ;AACpD,KAAC,CAAC;AAAsB,uBAAiB;AAAU;AACnD,KAAC,CAAC;AAA0B,uBAAiB;AAAe;AAC5D,KAAC,CAAC;AAAa,iBAAW;AAAM;AAClC;AACF;","names":["inline"]}
package/dist/inline.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Inline } from './chunk-AWQHULJC.js';
1
+ export { Inline } from './chunk-VIGD7KHC.js';
2
2
  import './chunk-MI4QUKQS.js';
3
3
  //# sourceMappingURL=inline.js.map
4
4
  //# sourceMappingURL=inline.js.map
package/dist/listbox.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/icon/Icon.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Icon_icon {
4
5
  display: inline-flex;
@@ -24,6 +25,7 @@
24
25
  }
25
26
 
26
27
  /* src/listbox/Listbox.module.css */
28
+ @layer reset, tokens, vendor, base, components, utilities;
27
29
  @layer components {
28
30
  .Listbox_list {
29
31
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon/Icon.module.css","../src/listbox/Listbox.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer components {\n .list {\n display: flex;\n flex-direction: column;\n max-block-size: var(--listbox-max-height);\n padding: var(--listbox-padding);\n overflow: auto;\n border: var(--size-hairline) solid var(--listbox-border);\n border-radius: var(--listbox-radius);\n background-color: var(--listbox-bg);\n color: var(--listbox-fg);\n font-family: var(--listbox-font-family);\n font-size: var(--listbox-font-size);\n outline: none;\n\n &[data-focus-visible] {\n outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n outline-offset: var(--listbox-focus-ring-offset);\n }\n }\n\n .check {\n flex: none;\n visibility: hidden;\n color: var(--listbox-item-check);\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--listbox-item-gap);\n padding-block: var(--listbox-item-padding-block);\n padding-inline: var(--listbox-item-padding-inline);\n border-radius: var(--listbox-item-radius);\n color: var(--listbox-item-fg);\n cursor: default;\n outline: none;\n\n &[data-hovered],\n &[data-focused] {\n background-color: var(--listbox-item-bg-focus);\n }\n\n &[data-selected] {\n background-color: var(--listbox-item-bg-selected);\n\n .check {\n visibility: visible;\n }\n }\n\n &[data-disabled] {\n color: var(--listbox-item-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .itemBody {\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n }\n\n .itemLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .itemDescription {\n color: var(--listbox-item-fg-muted);\n font-size: var(--listbox-item-description-font-size);\n }\n\n .empty {\n padding: var(--listbox-empty-padding);\n color: var(--listbox-empty-fg);\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACbA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,oBAAgB,IAAI;AACpB,aAAS,IAAI;AACb,cAAU;AACV,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,aAAS;AAET,KAAC,CAAC;AACA,eAAS,IAAI,4BAA4B,MAAM,IAAI;AACnD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,UAAM;AACN,gBAAY;AACZ,WAAO,IAAI;AACb;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,WAAO,IAAI;AACX,YAAQ;AACR,aAAS;AAET,KAAC,CAAC;AAAA,IACF,CAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AAEtB,OAzBHD;AA0BK,oBAAY;AACd;AACF;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AACF;AAEA,GAACE;AACC,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACnB;AAEA,GAACC;AACC,cAAU;AACV,mBAAe;AACf,iBAAa;AACf;AAEA,GAACC;AACC,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,aAAS,IAAI;AACb,WAAO,IAAI;AACb;AACF;","names":["icon","list","check","item","itemBody","itemLabel","itemDescription","empty"]}
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/listbox/Listbox.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .list {\n display: flex;\n flex-direction: column;\n max-block-size: var(--listbox-max-height);\n padding: var(--listbox-padding);\n overflow: auto;\n border: var(--size-hairline) solid var(--listbox-border);\n border-radius: var(--listbox-radius);\n background-color: var(--listbox-bg);\n color: var(--listbox-fg);\n font-family: var(--listbox-font-family);\n font-size: var(--listbox-font-size);\n outline: none;\n\n &[data-focus-visible] {\n outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n outline-offset: var(--listbox-focus-ring-offset);\n }\n }\n\n .check {\n flex: none;\n visibility: hidden;\n color: var(--listbox-item-check);\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--listbox-item-gap);\n padding-block: var(--listbox-item-padding-block);\n padding-inline: var(--listbox-item-padding-inline);\n border-radius: var(--listbox-item-radius);\n color: var(--listbox-item-fg);\n cursor: default;\n outline: none;\n\n &[data-hovered],\n &[data-focused] {\n background-color: var(--listbox-item-bg-focus);\n }\n\n &[data-selected] {\n background-color: var(--listbox-item-bg-selected);\n\n .check {\n visibility: visible;\n }\n }\n\n &[data-disabled] {\n color: var(--listbox-item-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .itemBody {\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n }\n\n .itemLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .itemDescription {\n color: var(--listbox-item-fg-muted);\n font-size: var(--listbox-item-description-font-size);\n }\n\n .empty {\n padding: var(--listbox-empty-padding);\n color: var(--listbox-empty-fg);\n }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACfA;AAEA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,oBAAgB,IAAI;AACpB,aAAS,IAAI;AACb,cAAU;AACV,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,aAAS;AAET,KAAC,CAAC;AACA,eAAS,IAAI,4BAA4B,MAAM,IAAI;AACnD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,UAAM;AACN,gBAAY;AACZ,WAAO,IAAI;AACb;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,WAAO,IAAI;AACX,YAAQ;AACR,aAAS;AAET,KAAC,CAAC;AAAA,IACF,CAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AAEtB,OAzBHD;AA0BK,oBAAY;AACd;AACF;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AACF;AAEA,GAACE;AACC,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACnB;AAEA,GAACC;AACC,cAAU;AACV,mBAAe;AACf,iBAAa;AACf;AAEA,GAACC;AACC,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,aAAS,IAAI;AACb,WAAO,IAAI;AACb;AACF;","names":["icon","list","check","item","itemBody","itemLabel","itemDescription","empty"]}
package/dist/listbox.js CHANGED
@@ -1,7 +1,7 @@
1
- export { Listbox } from './chunk-TVI5AXLE.js';
1
+ export { Listbox } from './chunk-WJDDKNE7.js';
2
2
  import './chunk-CZBCGLEM.js';
3
- import './chunk-T76YSNTZ.js';
4
- import './chunk-ASNTNTJW.js';
3
+ import './chunk-EDTA65L5.js';
4
+ import './chunk-O5LII5XP.js';
5
5
  import './chunk-MI4QUKQS.js';
6
6
  //# sourceMappingURL=listbox.js.map
7
7
  //# sourceMappingURL=listbox.js.map
package/dist/menu.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/icon/Icon.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Icon_icon {
4
5
  display: inline-flex;
@@ -27,6 +28,7 @@
27
28
  @property --_gap { syntax: "<length>"; inherits: false; initial-value: 0px; }
28
29
 
29
30
  /* src/menu/Menu.module.css */
31
+ @layer reset, tokens, vendor, base, components, utilities;
30
32
  @layer components {
31
33
  .Menu_content {
32
34
  --_gap: var(--menu-gap);
package/dist/menu.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/floating.css","../src/menu/Menu.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/*\n * Registers the gap the floating hook reads. An unregistered custom property\n * computes to its specified text (\"calc(0.25rem * 2)\"), which no number\n * parser can use; a registered <length> computes to pixels (\"8px\"). Browsers\n * without @property (Firefox before 128) fall back to a gap of 0.\n * Outside the components layer on purpose: registration is not cascaded.\n */\n\n@property --_gap {\n syntax: \"<length>\";\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- a registered <length> needs a unit in its initial value */\n initial-value: 0px;\n}\n","/* Every value is a token (--menu-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n .content {\n --_gap: var(--menu-gap);\n\n position: fixed;\n z-index: var(--menu-layer);\n inset-block-start: var(--_y);\n inset-inline-start: var(--_x);\n display: flex;\n flex-direction: column;\n min-inline-size: var(--menu-min-width);\n max-inline-size: calc(100vw - 2 * var(--space-4));\n padding: var(--menu-padding);\n border: var(--size-hairline) solid var(--menu-border);\n border-radius: var(--menu-radius);\n background-color: var(--menu-bg);\n color: var(--menu-fg);\n font-family: var(--font-family-body);\n box-shadow: var(--menu-shadow);\n animation: fade var(--menu-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring);\n outline-offset: var(--menu-focus-ring-offset);\n }\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n inline-size: 100%;\n padding-block: var(--menu-item-padding-block);\n padding-inline: var(--menu-item-padding-inline);\n border: none;\n border-radius: var(--menu-item-radius);\n background-color: transparent;\n color: var(--menu-item-fg);\n font-size: var(--menu-item-font-size);\n text-align: start;\n cursor: pointer;\n\n &[data-tone=\"danger\"] {\n color: var(--menu-item-fg-danger);\n }\n\n &[data-disabled] {\n color: var(--menu-item-fg-muted);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: none;\n background-color: var(--menu-item-bg-active);\n }\n\n &:hover:not([data-disabled]) {\n background-color: var(--menu-item-bg-active);\n }\n }\n\n .label {\n flex: 1;\n }\n\n .separator {\n block-size: var(--size-hairline);\n margin-block: var(--menu-padding);\n background-color: var(--menu-separator);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .content {\n animation: none;\n }\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACZA,UAAU,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EAEf,aAAa,EAAE,GAAG;;;ACVpB;AACE,GAACC;AACC,YAAQ,IAAI;AAEZ,cAAU;AACV,aAAS,IAAI;AACb,uBAAmB,IAAI;AACvB,wBAAoB,IAAI;AACxB,aAAS;AACT,oBAAgB;AAChB,qBAAiB,IAAI;AACrB,qBAAiB,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI;AACtC,aAAS,IAAI;AACb,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,eAAW,UAAK,IAAI,iBAAiB,IAAI;AAEzC,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBAAY;AACZ,YAAQ;AAER,KAAC,CAAC;AACA,aAAO,IAAI;AACb;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AAEA,KAAC;AACC,eAAS;AACT,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,CAAC;AACX,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,gBAAY,IAAI;AAChB,kBAAc,IAAI;AAClB,sBAAkB,IAAI;AACxB;AAEA,aApDaC;AAqDX;AACE,eAAS;AACX;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA7EDJ;AA8EG,iBAAW;AACb;AACF;AACF;","names":["icon","content","item","label","separator","fade"]}
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/floating.css","../src/menu/Menu.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/*\n * Registers the gap the floating hook reads. An unregistered custom property\n * computes to its specified text (\"calc(0.25rem * 2)\"), which no number\n * parser can use; a registered <length> computes to pixels (\"8px\"). Browsers\n * without @property (Firefox before 128) fall back to a gap of 0.\n * Outside the components layer on purpose: registration is not cascaded.\n */\n\n@property --_gap {\n syntax: \"<length>\";\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- a registered <length> needs a unit in its initial value */\n initial-value: 0px;\n}\n","/* Every value is a token (--menu-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .content {\n --_gap: var(--menu-gap);\n\n position: fixed;\n z-index: var(--menu-layer);\n inset-block-start: var(--_y);\n inset-inline-start: var(--_x);\n display: flex;\n flex-direction: column;\n min-inline-size: var(--menu-min-width);\n max-inline-size: calc(100vw - 2 * var(--space-4));\n padding: var(--menu-padding);\n border: var(--size-hairline) solid var(--menu-border);\n border-radius: var(--menu-radius);\n background-color: var(--menu-bg);\n color: var(--menu-fg);\n font-family: var(--font-family-body);\n box-shadow: var(--menu-shadow);\n animation: fade var(--menu-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring);\n outline-offset: var(--menu-focus-ring-offset);\n }\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n inline-size: 100%;\n padding-block: var(--menu-item-padding-block);\n padding-inline: var(--menu-item-padding-inline);\n border: none;\n border-radius: var(--menu-item-radius);\n background-color: transparent;\n color: var(--menu-item-fg);\n font-size: var(--menu-item-font-size);\n text-align: start;\n cursor: pointer;\n\n &[data-tone=\"danger\"] {\n color: var(--menu-item-fg-danger);\n }\n\n &[data-disabled] {\n color: var(--menu-item-fg-muted);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: none;\n background-color: var(--menu-item-bg-active);\n }\n\n &:hover:not([data-disabled]) {\n background-color: var(--menu-item-bg-active);\n }\n }\n\n .label {\n flex: 1;\n }\n\n .separator {\n block-size: var(--size-hairline);\n margin-block: var(--menu-padding);\n background-color: var(--menu-separator);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .content {\n animation: none;\n }\n }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACdA,UAAU,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EAEf,aAAa,EAAE,GAAG;;;ACVpB;AAEA;AACE,GAACC;AACC,YAAQ,IAAI;AAEZ,cAAU;AACV,aAAS,IAAI;AACb,uBAAmB,IAAI;AACvB,wBAAoB,IAAI;AACxB,aAAS;AACT,oBAAgB;AAChB,qBAAiB,IAAI;AACrB,qBAAiB,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI;AACtC,aAAS,IAAI;AACb,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,eAAW,UAAK,IAAI,iBAAiB,IAAI;AAEzC,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBAAY;AACZ,YAAQ;AAER,KAAC,CAAC;AACA,aAAO,IAAI;AACb;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AAEA,KAAC;AACC,eAAS;AACT,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,CAAC;AACX,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,gBAAY,IAAI;AAChB,kBAAc,IAAI;AAClB,sBAAkB,IAAI;AACxB;AAEA,aApDaC;AAqDX;AACE,eAAS;AACX;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA7EDJ;AA8EG,iBAAW;AACb;AACF;AACF;","names":["icon","content","item","label","separator","fade"]}
package/dist/menu.js CHANGED
@@ -1,9 +1,9 @@
1
- export { Menu } from './chunk-GTTXRDXV.js';
1
+ export { Menu } from './chunk-2NSQPN7S.js';
2
2
  import './chunk-I5OZ63W7.js';
3
3
  import './chunk-NAYFLTK6.js';
4
4
  import './chunk-U6QRAD73.js';
5
5
  import './chunk-ZVDN3GRI.js';
6
- import './chunk-ASNTNTJW.js';
6
+ import './chunk-O5LII5XP.js';
7
7
  import './chunk-MI4QUKQS.js';
8
8
  //# sourceMappingURL=menu.js.map
9
9
  //# sourceMappingURL=menu.js.map
@@ -1,4 +1,5 @@
1
1
  /* src/icon/Icon.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Icon_icon {
4
5
  display: inline-flex;
@@ -24,6 +25,7 @@
24
25
  }
25
26
 
26
27
  /* src/visually-hidden/VisuallyHidden.module.css */
28
+ @layer reset, tokens, vendor, base, components, utilities;
27
29
  @layer components {
28
30
  .VisuallyHidden_root {
29
31
  position: absolute;
@@ -39,6 +41,7 @@
39
41
  }
40
42
 
41
43
  /* src/spinner/Spinner.module.css */
44
+ @layer reset, tokens, vendor, base, components, utilities;
42
45
  @layer components {
43
46
  .Spinner_spinner {
44
47
  --_size: var(--spinner-size-md);
@@ -84,6 +87,7 @@
84
87
  }
85
88
 
86
89
  /* src/button/Button.module.css */
90
+ @layer reset, tokens, vendor, base, components, utilities;
87
91
  @layer components {
88
92
  .Button_button {
89
93
  display: inline-flex;
@@ -102,6 +106,7 @@
102
106
  text-decoration: none;
103
107
  white-space: nowrap;
104
108
  cursor: pointer;
109
+ -webkit-user-select: none;
105
110
  user-select: none;
106
111
  transition:
107
112
  background-color var(--button-motion-duration) var(--motion-easing-standard),
@@ -161,6 +166,7 @@
161
166
  }
162
167
 
163
168
  /* src/icon-button/IconButton.module.css */
169
+ @layer reset, tokens, vendor, base, components, utilities;
164
170
  @layer components {
165
171
  .IconButton_iconButton[data-icon-only] {
166
172
  gap: 0;
@@ -176,6 +182,7 @@
176
182
  }
177
183
 
178
184
  /* src/pagination/Pagination.module.css */
185
+ @layer reset, tokens, vendor, base, components, utilities;
179
186
  @layer components {
180
187
  .Pagination_root {
181
188
  --_size: var(--pagination-ellipsis-size-md);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/pagination/Pagination.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n","/* Every value is a token (--pagination-*). The controls are Buttons; this file lays them out. */\n\n@layer components {\n .root {\n --_size: var(--pagination-ellipsis-size-md);\n --_font-size: var(--pagination-font-size-md);\n\n font-family: var(--pagination-font-family);\n\n &[data-size=\"sm\"] {\n --_size: var(--pagination-ellipsis-size-sm);\n --_font-size: var(--pagination-font-size-sm);\n }\n }\n\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pagination-gap);\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .page {\n min-inline-size: var(--_size);\n padding-inline: 0;\n font-variant-numeric: tabular-nums;\n }\n\n .ellipsis {\n display: grid;\n place-items: center;\n min-inline-size: var(--_size);\n block-size: var(--_size);\n color: var(--pagination-ellipsis-fg);\n font-size: var(--_font-size);\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","root","list","page","ellipsis"]}
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/pagination/Pagination.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .spinner {\n --_size: var(--spinner-size-md);\n --_track: var(--spinner-track);\n --_indicator: var(--spinner-indicator);\n\n display: inline-flex;\n flex: none;\n inline-size: var(--_size);\n block-size: var(--_size);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n &[data-size=\"inherit\"] { --_size: 1em; }\n\n &[data-tone=\"inherit\"] {\n --_track: transparent;\n --_indicator: currentcolor;\n }\n }\n\n .ring {\n inline-size: 100%;\n block-size: 100%;\n border: var(--spinner-width) solid var(--_track);\n border-block-start-color: var(--_indicator);\n border-radius: var(--radius-full);\n animation: spin var(--spinner-duration) linear infinite;\n }\n\n @keyframes spin {\n to {\n rotate: 1turn;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ring {\n animation: none;\n }\n }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--button-gap);\n min-block-size: var(--button-height-md);\n padding-block: 0;\n padding-inline: var(--button-padding-inline-md);\n border: 1px solid transparent;\n border-radius: var(--button-radius);\n font-family: var(--button-font-family);\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n transition:\n background-color var(--button-motion-duration) var(--motion-easing-standard),\n border-color var(--button-motion-duration) var(--motion-easing-standard),\n color var(--button-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n outline-offset: var(--button-focus-ring-offset);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-loading] {\n cursor: progress;\n }\n\n &[data-size=\"sm\"] {\n min-block-size: var(--button-height-sm);\n padding-inline: var(--button-padding-inline-sm);\n font-size: var(--button-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n min-block-size: var(--button-height-lg);\n padding-inline: var(--button-padding-inline-lg);\n font-size: var(--button-font-size-lg);\n }\n\n &[data-variant=\"primary\"] {\n background-color: var(--button-primary-bg);\n color: var(--button-primary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-hover);\n }\n\n &:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-primary-bg-active);\n }\n }\n\n &[data-variant=\"secondary\"] {\n background-color: var(--button-secondary-bg);\n border-color: var(--button-secondary-border);\n color: var(--button-secondary-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-secondary-bg-hover);\n }\n }\n\n &[data-variant=\"ghost\"] {\n background-color: transparent;\n color: var(--button-ghost-fg);\n\n &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--button-ghost-bg-hover);\n }\n }\n }\n\n .label {\n display: inline-block;\n }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .iconButton[data-icon-only] {\n gap: 0;\n inline-size: var(--icon-button-size-md);\n padding-inline: 0;\n\n &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n }\n}\n","/* Every value is a token (--pagination-*). The controls are Buttons; this file lays them out. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .root {\n --_size: var(--pagination-ellipsis-size-md);\n --_font-size: var(--pagination-font-size-md);\n\n font-family: var(--pagination-font-family);\n\n &[data-size=\"sm\"] {\n --_size: var(--pagination-ellipsis-size-sm);\n --_font-size: var(--pagination-font-size-sm);\n }\n }\n\n .list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pagination-gap);\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .page {\n min-inline-size: var(--_size);\n padding-inline: 0;\n font-variant-numeric: tabular-nums;\n }\n\n .ellipsis {\n display: grid;\n place-items: center;\n min-inline-size: var(--_size);\n block-size: var(--_size);\n color: var(--pagination-ellipsis-fg);\n font-size: var(--_font-size);\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","root","list","page","ellipsis"]}
@@ -1,10 +1,10 @@
1
- export { Pagination, paginationRange } from './chunk-K5QGGQOV.js';
2
- import './chunk-FXRSZUDH.js';
3
- import './chunk-KPQGS4PG.js';
4
- import './chunk-I4KC4V6A.js';
1
+ export { Pagination, paginationRange } from './chunk-VQN5DQP6.js';
2
+ import './chunk-MF66ICX6.js';
3
+ import './chunk-5TTYVQ6Q.js';
4
+ import './chunk-ZL5MMRLG.js';
5
5
  import './chunk-ZVDN3GRI.js';
6
- import './chunk-Z4PN6B2C.js';
7
- import './chunk-ASNTNTJW.js';
6
+ import './chunk-IB5UUE3S.js';
7
+ import './chunk-O5LII5XP.js';
8
8
  import './chunk-MI4QUKQS.js';
9
9
  //# sourceMappingURL=pagination.js.map
10
10
  //# sourceMappingURL=pagination.js.map
package/dist/picker.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/icon/Icon.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Icon_icon {
4
5
  display: inline-flex;
@@ -24,6 +25,7 @@
24
25
  }
25
26
 
26
27
  /* src/internal/AriaField.module.css */
28
+ @layer reset, tokens, vendor, base, components, utilities;
27
29
  @layer components {
28
30
  .AriaField_field {
29
31
  display: flex;
@@ -53,6 +55,7 @@
53
55
  }
54
56
 
55
57
  /* src/listbox/Listbox.module.css */
58
+ @layer reset, tokens, vendor, base, components, utilities;
56
59
  @layer components {
57
60
  .Listbox_list {
58
61
  display: flex;
@@ -123,6 +126,7 @@
123
126
  }
124
127
 
125
128
  /* src/picker/Picker.module.css */
129
+ @layer reset, tokens, vendor, base, components, utilities;
126
130
  @layer components {
127
131
  .Picker_root {
128
132
  --_height: var(--picker-height-md);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/picker/Picker.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer components {\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n font-family: var(--font-family-body);\n }\n\n .label {\n font-size: var(--field-label-font-size);\n font-weight: var(--field-label-font-weight);\n color: var(--field-label-fg);\n }\n\n .required {\n margin-inline-start: var(--field-required-gap);\n color: var(--field-required-fg);\n }\n\n .description {\n margin: 0;\n font-size: var(--field-description-font-size);\n color: var(--field-description-fg);\n }\n\n .error {\n margin: 0;\n font-size: var(--field-error-font-size);\n color: var(--field-error-fg);\n }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer components {\n .list {\n display: flex;\n flex-direction: column;\n max-block-size: var(--listbox-max-height);\n padding: var(--listbox-padding);\n overflow: auto;\n border: var(--size-hairline) solid var(--listbox-border);\n border-radius: var(--listbox-radius);\n background-color: var(--listbox-bg);\n color: var(--listbox-fg);\n font-family: var(--listbox-font-family);\n font-size: var(--listbox-font-size);\n outline: none;\n\n &[data-focus-visible] {\n outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n outline-offset: var(--listbox-focus-ring-offset);\n }\n }\n\n .check {\n flex: none;\n visibility: hidden;\n color: var(--listbox-item-check);\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--listbox-item-gap);\n padding-block: var(--listbox-item-padding-block);\n padding-inline: var(--listbox-item-padding-inline);\n border-radius: var(--listbox-item-radius);\n color: var(--listbox-item-fg);\n cursor: default;\n outline: none;\n\n &[data-hovered],\n &[data-focused] {\n background-color: var(--listbox-item-bg-focus);\n }\n\n &[data-selected] {\n background-color: var(--listbox-item-bg-selected);\n\n .check {\n visibility: visible;\n }\n }\n\n &[data-disabled] {\n color: var(--listbox-item-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .itemBody {\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n }\n\n .itemLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .itemDescription {\n color: var(--listbox-item-fg-muted);\n font-size: var(--listbox-item-description-font-size);\n }\n\n .empty {\n padding: var(--listbox-empty-padding);\n color: var(--listbox-empty-fg);\n }\n}\n","/*\n * Every value is a token (--picker-*); the options read --listbox-*. The\n * trigger is a button drawn like a text field. The popover is positioned by\n * React Aria; the gap is its own padding and --trigger-width (vendor) sizes it.\n */\n\n@layer components {\n .root {\n --_height: var(--picker-height-md);\n --_font-size: var(--picker-font-size-md);\n --_border: var(--picker-border-default);\n\n font-family: var(--picker-font-family);\n\n &[data-size=\"sm\"] {\n --_height: var(--picker-height-sm);\n --_font-size: var(--picker-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n --_height: var(--picker-height-lg);\n --_font-size: var(--picker-font-size-lg);\n }\n\n &[data-invalid] { --_border: var(--picker-border-invalid); }\n }\n\n .trigger {\n display: flex;\n align-items: center;\n gap: var(--picker-gap);\n inline-size: 100%;\n min-block-size: var(--_height);\n padding-block: 0;\n padding-inline: var(--picker-padding-inline);\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--picker-radius);\n background-color: var(--picker-bg);\n color: var(--picker-fg);\n font-family: inherit;\n font-size: var(--_font-size);\n text-align: start;\n cursor: pointer;\n transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);\n\n &[data-focus-visible] {\n border-color: var(--picker-border-focus);\n outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);\n outline-offset: var(--picker-focus-ring-offset);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-hovered]:not([data-focus-visible], [data-disabled]) {\n border-color: var(--picker-border-hover);\n }\n }\n\n .value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-placeholder] {\n color: var(--picker-placeholder);\n }\n }\n\n .chevron {\n flex: none;\n color: var(--picker-icon);\n }\n\n .popover {\n inline-size: var(--trigger-width);\n padding-block-start: var(--picker-gap);\n animation: fade var(--picker-popover-duration) var(--motion-easing-standard);\n\n &[data-placement=\"top\"] {\n padding-block: 0 var(--picker-gap);\n }\n }\n\n .list {\n box-shadow: var(--picker-popover-shadow);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .popover {\n animation: none;\n }\n }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","trigger","value","chevron","popover","list","fade"]}
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/picker/Picker.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .icon {\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n font-size: var(--icon-size-md);\n vertical-align: middle;\n\n &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n &[data-size=\"inherit\"] { font-size: inherit; }\n\n & > * {\n inline-size: 100%;\n block-size: 100%;\n }\n }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n font-family: var(--font-family-body);\n }\n\n .label {\n font-size: var(--field-label-font-size);\n font-weight: var(--field-label-font-weight);\n color: var(--field-label-fg);\n }\n\n .required {\n margin-inline-start: var(--field-required-gap);\n color: var(--field-required-fg);\n }\n\n .description {\n margin: 0;\n font-size: var(--field-description-font-size);\n color: var(--field-description-fg);\n }\n\n .error {\n margin: 0;\n font-size: var(--field-error-font-size);\n color: var(--field-error-fg);\n }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .list {\n display: flex;\n flex-direction: column;\n max-block-size: var(--listbox-max-height);\n padding: var(--listbox-padding);\n overflow: auto;\n border: var(--size-hairline) solid var(--listbox-border);\n border-radius: var(--listbox-radius);\n background-color: var(--listbox-bg);\n color: var(--listbox-fg);\n font-family: var(--listbox-font-family);\n font-size: var(--listbox-font-size);\n outline: none;\n\n &[data-focus-visible] {\n outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n outline-offset: var(--listbox-focus-ring-offset);\n }\n }\n\n .check {\n flex: none;\n visibility: hidden;\n color: var(--listbox-item-check);\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--listbox-item-gap);\n padding-block: var(--listbox-item-padding-block);\n padding-inline: var(--listbox-item-padding-inline);\n border-radius: var(--listbox-item-radius);\n color: var(--listbox-item-fg);\n cursor: default;\n outline: none;\n\n &[data-hovered],\n &[data-focused] {\n background-color: var(--listbox-item-bg-focus);\n }\n\n &[data-selected] {\n background-color: var(--listbox-item-bg-selected);\n\n .check {\n visibility: visible;\n }\n }\n\n &[data-disabled] {\n color: var(--listbox-item-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .itemBody {\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n }\n\n .itemLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .itemDescription {\n color: var(--listbox-item-fg-muted);\n font-size: var(--listbox-item-description-font-size);\n }\n\n .empty {\n padding: var(--listbox-empty-padding);\n color: var(--listbox-empty-fg);\n }\n}\n","/*\n * Every value is a token (--picker-*); the options read --listbox-*. The\n * trigger is a button drawn like a text field. The popover is positioned by\n * React Aria; the gap is its own padding and --trigger-width (vendor) sizes it.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .root {\n --_height: var(--picker-height-md);\n --_font-size: var(--picker-font-size-md);\n --_border: var(--picker-border-default);\n\n font-family: var(--picker-font-family);\n\n &[data-size=\"sm\"] {\n --_height: var(--picker-height-sm);\n --_font-size: var(--picker-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n --_height: var(--picker-height-lg);\n --_font-size: var(--picker-font-size-lg);\n }\n\n &[data-invalid] { --_border: var(--picker-border-invalid); }\n }\n\n .trigger {\n display: flex;\n align-items: center;\n gap: var(--picker-gap);\n inline-size: 100%;\n min-block-size: var(--_height);\n padding-block: 0;\n padding-inline: var(--picker-padding-inline);\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--picker-radius);\n background-color: var(--picker-bg);\n color: var(--picker-fg);\n font-family: inherit;\n font-size: var(--_font-size);\n text-align: start;\n cursor: pointer;\n transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);\n\n &[data-focus-visible] {\n border-color: var(--picker-border-focus);\n outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);\n outline-offset: var(--picker-focus-ring-offset);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-hovered]:not([data-focus-visible], [data-disabled]) {\n border-color: var(--picker-border-hover);\n }\n }\n\n .value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-placeholder] {\n color: var(--picker-placeholder);\n }\n }\n\n .chevron {\n flex: none;\n color: var(--picker-icon);\n }\n\n .popover {\n inline-size: var(--trigger-width);\n padding-block-start: var(--picker-gap);\n animation: fade var(--picker-popover-duration) var(--motion-easing-standard);\n\n &[data-placement=\"top\"] {\n padding-block: 0 var(--picker-gap);\n }\n }\n\n .list {\n box-shadow: var(--picker-popover-shadow);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .popover {\n animation: none;\n }\n }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","trigger","value","chevron","popover","list","fade"]}
package/dist/picker.js CHANGED
@@ -1,8 +1,8 @@
1
- export { Picker } from './chunk-WDWTQKIJ.js';
2
- import './chunk-T76YSNTZ.js';
3
- import './chunk-4HRNRTXI.js';
4
- import './chunk-YUHS5S5Y.js';
5
- import './chunk-ASNTNTJW.js';
1
+ export { Picker } from './chunk-BAPNIZDV.js';
2
+ import './chunk-EDTA65L5.js';
3
+ import './chunk-IRNTXAA7.js';
4
+ import './chunk-DGIXNUNI.js';
5
+ import './chunk-O5LII5XP.js';
6
6
  import './chunk-MI4QUKQS.js';
7
7
  //# sourceMappingURL=picker.js.map
8
8
  //# sourceMappingURL=picker.js.map
package/dist/popover.css CHANGED
@@ -2,6 +2,7 @@
2
2
  @property --_gap { syntax: "<length>"; inherits: false; initial-value: 0px; }
3
3
 
4
4
  /* src/popover/Popover.module.css */
5
+ @layer reset, tokens, vendor, base, components, utilities;
5
6
  @layer components {
6
7
  .Popover_content {
7
8
  --_gap: var(--popover-gap);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/internal/floating.css","../src/popover/Popover.module.css"],"sourcesContent":["/*\n * Registers the gap the floating hook reads. An unregistered custom property\n * computes to its specified text (\"calc(0.25rem * 2)\"), which no number\n * parser can use; a registered <length> computes to pixels (\"8px\"). Browsers\n * without @property (Firefox before 128) fall back to a gap of 0.\n * Outside the components layer on purpose: registration is not cascaded.\n */\n\n@property --_gap {\n syntax: \"<length>\";\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- a registered <length> needs a unit in its initial value */\n initial-value: 0px;\n}\n","/* Every value is a token (--popover-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n .content {\n --_gap: var(--popover-gap);\n\n position: fixed;\n z-index: var(--popover-layer);\n inset-block-start: var(--_y);\n inset-inline-start: var(--_x);\n display: flex;\n flex-direction: column;\n gap: var(--popover-gap);\n inline-size: var(--popover-width);\n max-inline-size: calc(100vw - 2 * var(--space-4));\n padding: var(--popover-padding);\n border: var(--size-hairline) solid var(--popover-border);\n border-radius: var(--popover-radius);\n background-color: var(--popover-bg);\n color: var(--popover-fg);\n font-family: var(--font-family-body);\n box-shadow: var(--popover-shadow);\n animation: fade var(--popover-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--popover-focus-ring-width) solid var(--popover-focus-ring);\n outline-offset: var(--popover-focus-ring-offset);\n }\n }\n\n .title {\n margin: 0;\n font-family: var(--font-family-display);\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n line-height: var(--font-line-height-tight);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .content {\n animation: none;\n }\n }\n}\n"],"mappings":";AAQA,UAAU,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EAEf,aAAa,EAAE,GAAG;;;ACVpB;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,cAAU;AACV,aAAS,IAAI;AACb,uBAAmB,IAAI;AACvB,wBAAoB,IAAI;AACxB,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa,IAAI;AACjB,qBAAiB,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI;AACtC,aAAS,IAAI;AACb,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,eAAW,aAAK,IAAI,oBAAoB,IAAI;AAE5C,KAAC;AACC,eAAS,IAAI,4BAA4B,MAAM,IAAI;AACnD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACnB;AAEA,aAhBaC;AAiBX;AACE,eAAS;AACX;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA1CDF;AA2CG,iBAAW;AACb;AACF;AACF;","names":["content","title","fade"]}
1
+ {"version":3,"sources":["../src/internal/floating.css","../src/popover/Popover.module.css"],"sourcesContent":["/*\n * Registers the gap the floating hook reads. An unregistered custom property\n * computes to its specified text (\"calc(0.25rem * 2)\"), which no number\n * parser can use; a registered <length> computes to pixels (\"8px\"). Browsers\n * without @property (Firefox before 128) fall back to a gap of 0.\n * Outside the components layer on purpose: registration is not cascaded.\n */\n\n@property --_gap {\n syntax: \"<length>\";\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- a registered <length> needs a unit in its initial value */\n initial-value: 0px;\n}\n","/* Every value is a token (--popover-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .content {\n --_gap: var(--popover-gap);\n\n position: fixed;\n z-index: var(--popover-layer);\n inset-block-start: var(--_y);\n inset-inline-start: var(--_x);\n display: flex;\n flex-direction: column;\n gap: var(--popover-gap);\n inline-size: var(--popover-width);\n max-inline-size: calc(100vw - 2 * var(--space-4));\n padding: var(--popover-padding);\n border: var(--size-hairline) solid var(--popover-border);\n border-radius: var(--popover-radius);\n background-color: var(--popover-bg);\n color: var(--popover-fg);\n font-family: var(--font-family-body);\n box-shadow: var(--popover-shadow);\n animation: fade var(--popover-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--popover-focus-ring-width) solid var(--popover-focus-ring);\n outline-offset: var(--popover-focus-ring-offset);\n }\n }\n\n .title {\n margin: 0;\n font-family: var(--font-family-display);\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n line-height: var(--font-line-height-tight);\n }\n\n @keyframes fade {\n from {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .content {\n animation: none;\n }\n }\n}\n"],"mappings":";AAQA,UAAU,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EAEf,aAAa,EAAE,GAAG;;;ACVpB;AAEA;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,cAAU;AACV,aAAS,IAAI;AACb,uBAAmB,IAAI;AACvB,wBAAoB,IAAI;AACxB,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa,IAAI;AACjB,qBAAiB,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI;AACtC,aAAS,IAAI;AACb,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,eAAW,aAAK,IAAI,oBAAoB,IAAI;AAE5C,KAAC;AACC,eAAS,IAAI,4BAA4B,MAAM,IAAI;AACnD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACnB;AAEA,aAhBaC;AAiBX;AACE,eAAS;AACX;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA1CDF;AA2CG,iBAAW;AACb;AACF;AACF;","names":["content","title","fade"]}
package/dist/popover.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Popover } from './chunk-N7L66GMG.js';
1
+ export { Popover } from './chunk-OFFFRIJG.js';
2
2
  import './chunk-NAYFLTK6.js';
3
3
  import './chunk-U6QRAD73.js';
4
4
  import './chunk-ZVDN3GRI.js';
package/dist/progress.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/visually-hidden/VisuallyHidden.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .VisuallyHidden_root {
4
5
  position: absolute;
@@ -14,6 +15,7 @@
14
15
  }
15
16
 
16
17
  /* src/progress/Progress.module.css */
18
+ @layer reset, tokens, vendor, base, components, utilities;
17
19
  @layer components {
18
20
  .Progress_progress {
19
21
  --_height: var(--progress-height-md);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/progress/Progress.module.css"],"sourcesContent":["/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--progress-*). The fill width is the per-instance --_value custom property. */\n\n@layer components {\n .progress {\n --_height: var(--progress-height-md);\n --_indicator: var(--progress-indicator-primary);\n\n display: flex;\n flex-direction: column;\n gap: var(--progress-gap);\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_height: var(--progress-height-sm); }\n &[data-tone=\"success\"] { --_indicator: var(--progress-indicator-success); }\n &[data-tone=\"warning\"] { --_indicator: var(--progress-indicator-warning); }\n &[data-tone=\"error\"] { --_indicator: var(--progress-indicator-error); }\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--progress-label-font-size);\n }\n\n .label {\n color: var(--progress-label-fg);\n }\n\n .value {\n color: var(--progress-value-fg);\n font-variant-numeric: tabular-nums;\n }\n\n .track {\n overflow: hidden;\n block-size: var(--_height);\n border-radius: var(--progress-radius);\n background-color: var(--progress-track);\n }\n\n .indicator {\n block-size: 100%;\n inline-size: var(--_value, 0%);\n border-radius: var(--progress-radius);\n background-color: var(--_indicator);\n transition: inline-size var(--progress-duration) var(--motion-easing-standard);\n }\n\n .progress[data-indeterminate] .indicator {\n inline-size: 40%;\n animation: slide calc(4 * var(--progress-duration)) var(--motion-easing-standard) infinite;\n }\n\n @keyframes slide {\n from {\n translate: -100% 0;\n }\n\n to {\n translate: 250% 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .progress[data-indeterminate] .indicator {\n inline-size: 50%;\n animation: none;\n }\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AACF;;;ACZA;AACE,GAACC;AACC,eAAW,IAAI;AACf,kBAAc,IAAI;AAElB,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAuB;AAC1D,KAAC,CAAC;AAAuB,oBAAc,IAAI;AAA+B;AAC1E,KAAC,CAAC;AAAuB,oBAAc,IAAI;AAA+B;AAC1E,KAAC,CAAC;AAAqB,oBAAc,IAAI;AAA6B;AACxE;AAEA,GAACC;AACC,aAAS;AACT,qBAAiB;AACjB,SAAK,IAAI;AACT,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,WAAO,IAAI;AACb;AAEA,GAACC;AACC,WAAO,IAAI;AACX,0BAAsB;AACxB;AAEA,GAACC;AACC,cAAU;AACV,gBAAY,IAAI;AAChB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACxB;AAEA,GAACC;AACC,gBAAY;AACZ,iBAAa,IAAI,QAAQ,EAAE;AAC3B,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY,YAAY,IAAI,qBAAqB,IAAI;AACvD;AAEA,GA9CCL,iBA8CQ,CAAC,oBAAoB,CAR7BK;AASC,iBAAa;AACb,eAAW,eAAM,KAAK,EAAE,EAAE,IAAI,sBAAsB,IAAI,0BAA0B;AACpF;AAEA,aAHaC;AAIX;AACE,iBAAW,MAAM;AACnB;AAEA;AACE,iBAAW,KAAK;AAClB;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA9DDN,iBA8DU,CAAC,oBAAoB,CAxB/BK;AAyBG,mBAAa;AACb,iBAAW;AACb;AACF;AACF;","names":["root","progress","header","label","value","track","indicator","slide"]}
1
+ {"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/progress/Progress.module.css"],"sourcesContent":["/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .root {\n position: absolute;\n inline-size: var(--visually-hidden-size);\n block-size: var(--visually-hidden-size);\n padding: 0;\n margin: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n","/* Every value is a token (--progress-*). The fill width is the per-instance --_value custom property. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .progress {\n --_height: var(--progress-height-md);\n --_indicator: var(--progress-indicator-primary);\n\n display: flex;\n flex-direction: column;\n gap: var(--progress-gap);\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_height: var(--progress-height-sm); }\n &[data-tone=\"success\"] { --_indicator: var(--progress-indicator-success); }\n &[data-tone=\"warning\"] { --_indicator: var(--progress-indicator-warning); }\n &[data-tone=\"error\"] { --_indicator: var(--progress-indicator-error); }\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--progress-label-font-size);\n }\n\n .label {\n color: var(--progress-label-fg);\n }\n\n .value {\n color: var(--progress-value-fg);\n font-variant-numeric: tabular-nums;\n }\n\n .track {\n overflow: hidden;\n block-size: var(--_height);\n border-radius: var(--progress-radius);\n background-color: var(--progress-track);\n }\n\n .indicator {\n block-size: 100%;\n inline-size: var(--_value, 0%);\n border-radius: var(--progress-radius);\n background-color: var(--_indicator);\n transition: inline-size var(--progress-duration) var(--motion-easing-standard);\n }\n\n .progress[data-indeterminate] .indicator {\n inline-size: 40%;\n animation: slide calc(4 * var(--progress-duration)) var(--motion-easing-standard) infinite;\n }\n\n @keyframes slide {\n from {\n translate: -100% 0;\n }\n\n to {\n translate: 250% 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .progress[data-indeterminate] .indicator {\n inline-size: 50%;\n animation: none;\n }\n }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AACF;;;ACdA;AAEA;AACE,GAACC;AACC,eAAW,IAAI;AACf,kBAAc,IAAI;AAElB,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAuB;AAC1D,KAAC,CAAC;AAAuB,oBAAc,IAAI;AAA+B;AAC1E,KAAC,CAAC;AAAuB,oBAAc,IAAI;AAA+B;AAC1E,KAAC,CAAC;AAAqB,oBAAc,IAAI;AAA6B;AACxE;AAEA,GAACC;AACC,aAAS;AACT,qBAAiB;AACjB,SAAK,IAAI;AACT,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,WAAO,IAAI;AACb;AAEA,GAACC;AACC,WAAO,IAAI;AACX,0BAAsB;AACxB;AAEA,GAACC;AACC,cAAU;AACV,gBAAY,IAAI;AAChB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACxB;AAEA,GAACC;AACC,gBAAY;AACZ,iBAAa,IAAI,QAAQ,EAAE;AAC3B,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY,YAAY,IAAI,qBAAqB,IAAI;AACvD;AAEA,GA9CCL,iBA8CQ,CAAC,oBAAoB,CAR7BK;AASC,iBAAa;AACb,eAAW,eAAM,KAAK,EAAE,EAAE,IAAI,sBAAsB,IAAI,0BAA0B;AACpF;AAEA,aAHaC;AAIX;AACE,iBAAW,MAAM;AACnB;AAEA;AACE,iBAAW,KAAK;AAClB;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA9DDN,iBA8DU,CAAC,oBAAoB,CAxB/BK;AAyBG,mBAAa;AACb,iBAAW;AACb;AACF;AACF;","names":["root","progress","header","label","value","track","indicator","slide"]}
package/dist/progress.js CHANGED
@@ -1,5 +1,5 @@
1
- export { Progress } from './chunk-75GTNRBH.js';
2
- import './chunk-Z4PN6B2C.js';
1
+ export { Progress } from './chunk-YK2OOM56.js';
2
+ import './chunk-IB5UUE3S.js';
3
3
  import './chunk-MI4QUKQS.js';
4
4
  //# sourceMappingURL=progress.js.map
5
5
  //# sourceMappingURL=progress.js.map
package/dist/radio.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/field/Field.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Field_field {
4
5
  display: flex;
@@ -27,6 +28,7 @@
27
28
  }
28
29
 
29
30
  /* src/radio/Radio.module.css */
31
+ @layer reset, tokens, vendor, base, components, utilities;
30
32
  @layer components {
31
33
  .Radio_group {
32
34
  --_size: var(--radio-size-md);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/field/Field.module.css","../src/radio/Radio.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n }\n\n .label {\n font-size: var(--field-label-font-size);\n font-weight: var(--field-label-font-weight);\n color: var(--field-label-fg);\n }\n\n .required {\n margin-inline-start: var(--field-required-gap);\n color: var(--field-required-fg);\n }\n\n .description {\n margin: 0;\n font-size: var(--field-description-font-size);\n color: var(--field-description-fg);\n }\n\n .error {\n margin: 0;\n font-size: var(--field-error-font-size);\n color: var(--field-error-fg);\n }\n}\n","/* Every value is a token (--radio-*). The input draws itself; the dot is its ::after. */\n\n@layer components {\n .group {\n --_size: var(--radio-size-md);\n --_border: var(--radio-border);\n\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_size: var(--radio-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--radio-size-lg); }\n &[data-invalid] { --_border: var(--radio-border-invalid); }\n }\n\n .items {\n display: flex;\n flex-direction: column;\n gap: var(--radio-group-gap);\n\n &[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n gap: var(--radio-group-gap) var(--space-4);\n }\n }\n\n .radio {\n display: inline-flex;\n align-items: center;\n gap: var(--radio-gap);\n cursor: pointer;\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n }\n\n .label {\n font-size: var(--field-label-font-size);\n color: var(--field-label-fg);\n }\n\n .input {\n display: grid;\n flex: none;\n place-content: center;\n inline-size: var(--_size);\n block-size: var(--_size);\n margin: 0;\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--radio-radius);\n background-color: var(--radio-bg);\n appearance: none;\n cursor: inherit;\n transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);\n\n /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n &::after {\n content: \"\";\n inline-size: calc(var(--_size) / 2);\n block-size: calc(var(--_size) / 2);\n border-radius: var(--radio-radius);\n background-color: var(--radio-dot);\n scale: 0;\n transition: scale var(--radio-motion-duration) var(--motion-easing-standard);\n }\n\n &:checked {\n border-color: var(--radio-border-checked);\n\n &::after {\n scale: 1;\n }\n }\n\n &:focus-visible {\n outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);\n outline-offset: var(--radio-focus-ring-offset);\n }\n\n &:disabled {\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :checked) {\n border-color: var(--radio-border-hover);\n }\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;AC7BA;AACE,GAACC;AACC,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAkB;AACnD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAkB;AACnD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAAyB;AAC5D;AAEA,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AAET,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,WAAK,IAAI,mBAAmB,IAAI;AAClC;AACF;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,YAAQ;AAER,KAAC,CAAC;AACA,cAAQ;AACV;AACF;AAEA,GAACC;AACC,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,mBAAe;AACf,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBAAY,aAAa,IAAI,yBAAyB,IAAI;AAG1D,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,qBAAe,IAAI;AACnB,wBAAkB,IAAI;AACtB,aAAO;AACP,kBAAY,MAAM,IAAI,yBAAyB,IAAI;AACrD;AAEA,KAAC;AACC,oBAAc,IAAI;AAElB,OAAC;AACC,eAAO;AACT;AACF;AAEA,KAAC;AACC,eAAS,IAAI,0BAA0B,MAAM,IAAI;AACjD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AACF;","names":["field","label","required","description","error","group","items","radio","label","input"]}
1
+ {"version":3,"sources":["../src/field/Field.module.css","../src/radio/Radio.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n }\n\n .label {\n font-size: var(--field-label-font-size);\n font-weight: var(--field-label-font-weight);\n color: var(--field-label-fg);\n }\n\n .required {\n margin-inline-start: var(--field-required-gap);\n color: var(--field-required-fg);\n }\n\n .description {\n margin: 0;\n font-size: var(--field-description-font-size);\n color: var(--field-description-fg);\n }\n\n .error {\n margin: 0;\n font-size: var(--field-error-font-size);\n color: var(--field-error-fg);\n }\n}\n","/* Every value is a token (--radio-*). The input draws itself; the dot is its ::after. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .group {\n --_size: var(--radio-size-md);\n --_border: var(--radio-border);\n\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_size: var(--radio-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--radio-size-lg); }\n &[data-invalid] { --_border: var(--radio-border-invalid); }\n }\n\n .items {\n display: flex;\n flex-direction: column;\n gap: var(--radio-group-gap);\n\n &[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n gap: var(--radio-group-gap) var(--space-4);\n }\n }\n\n .radio {\n display: inline-flex;\n align-items: center;\n gap: var(--radio-gap);\n cursor: pointer;\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n }\n\n .label {\n font-size: var(--field-label-font-size);\n color: var(--field-label-fg);\n }\n\n .input {\n display: grid;\n flex: none;\n place-content: center;\n inline-size: var(--_size);\n block-size: var(--_size);\n margin: 0;\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--radio-radius);\n background-color: var(--radio-bg);\n appearance: none;\n cursor: inherit;\n transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);\n\n /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n &::after {\n content: \"\";\n inline-size: calc(var(--_size) / 2);\n block-size: calc(var(--_size) / 2);\n border-radius: var(--radio-radius);\n background-color: var(--radio-dot);\n scale: 0;\n transition: scale var(--radio-motion-duration) var(--motion-easing-standard);\n }\n\n &:checked {\n border-color: var(--radio-border-checked);\n\n &::after {\n scale: 1;\n }\n }\n\n &:focus-visible {\n outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);\n outline-offset: var(--radio-focus-ring-offset);\n }\n\n &:disabled {\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :checked) {\n border-color: var(--radio-border-hover);\n }\n }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;AC/BA;AAEA;AACE,GAACC;AACC,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAkB;AACnD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAkB;AACnD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAAyB;AAC5D;AAEA,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AAET,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,WAAK,IAAI,mBAAmB,IAAI;AAClC;AACF;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,YAAQ;AAER,KAAC,CAAC;AACA,cAAQ;AACV;AACF;AAEA,GAACC;AACC,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,mBAAe;AACf,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBAAY,aAAa,IAAI,yBAAyB,IAAI;AAG1D,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,qBAAe,IAAI;AACnB,wBAAkB,IAAI;AACtB,aAAO;AACP,kBAAY,MAAM,IAAI,yBAAyB,IAAI;AACrD;AAEA,KAAC;AACC,oBAAc,IAAI;AAElB,OAAC;AACC,eAAO;AACT;AACF;AAEA,KAAC;AACC,eAAS,IAAI,0BAA0B,MAAM,IAAI;AACjD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AACF;","names":["field","label","required","description","error","group","items","radio","label","input"]}
package/dist/radio.js CHANGED
@@ -1,5 +1,5 @@
1
- export { Radio, RadioGroup } from './chunk-XDVS7HX7.js';
2
- import './chunk-2PXTVZ7H.js';
1
+ export { Radio, RadioGroup } from './chunk-N6E2E2OY.js';
2
+ import './chunk-M5VL22MY.js';
3
3
  import './chunk-ZVDN3GRI.js';
4
4
  import './chunk-MI4QUKQS.js';
5
5
  //# sourceMappingURL=radio.js.map
package/dist/select.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/field/Field.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Field_field {
4
5
  display: flex;
@@ -27,6 +28,7 @@
27
28
  }
28
29
 
29
30
  /* src/select/Select.module.css */
31
+ @layer reset, tokens, vendor, base, components, utilities;
30
32
  @layer components {
31
33
  .Select_field {
32
34
  --_height: var(--select-height-md);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/field/Field.module.css","../src/select/Select.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n }\n\n .label {\n font-size: var(--field-label-font-size);\n font-weight: var(--field-label-font-weight);\n color: var(--field-label-fg);\n }\n\n .required {\n margin-inline-start: var(--field-required-gap);\n color: var(--field-required-fg);\n }\n\n .description {\n margin: 0;\n font-size: var(--field-description-font-size);\n color: var(--field-description-fg);\n }\n\n .error {\n margin: 0;\n font-size: var(--field-error-font-size);\n color: var(--field-error-fg);\n }\n}\n","/*\n * Every value is a token (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer components {\n .field {\n --_height: var(--select-height-md);\n --_font-size: var(--select-font-size-md);\n --_border: var(--select-border-default);\n\n font-family: var(--select-font-family);\n\n &[data-size=\"sm\"] {\n --_height: var(--select-height-sm);\n --_font-size: var(--select-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n --_height: var(--select-height-lg);\n --_font-size: var(--select-font-size-lg);\n }\n\n &[data-invalid] { --_border: var(--select-border-invalid); }\n }\n\n .control {\n display: grid;\n align-items: center;\n\n & > * {\n grid-area: 1 / 1;\n }\n\n &::after {\n content: \"\";\n inline-size: var(--space-2);\n block-size: var(--space-2);\n margin-inline-end: var(--select-chevron-inset);\n border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n justify-self: end;\n rotate: 45deg;\n translate: 0 -25%;\n pointer-events: none;\n grid-area: 1 / 1;\n }\n }\n\n .select {\n inline-size: 100%;\n min-block-size: var(--_height);\n padding-block: 0;\n padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--select-radius);\n background-color: var(--select-bg);\n color: var(--select-fg);\n font-size: var(--_font-size);\n appearance: none;\n cursor: pointer;\n transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n border-color: var(--select-border-focus);\n outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n outline-offset: var(--select-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :focus-visible) {\n border-color: var(--select-border-hover);\n }\n\n &:has(option[value=\"\"]:checked) {\n color: var(--select-placeholder);\n }\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;ACzBA;AACE,GAACC;AACC,eAAW,IAAI;AACf,kBAAc,IAAI;AAClB,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA0B;AAC7D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AAEb,MAAE,EAAE;AACF,iBAAW,EAAE,EAAE;AACjB;AAEA,KAAC;AACC,eAAS;AACT,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,yBAAmB,IAAI;AACvB,yBAAmB,IAAI,wBAAwB,MAAM,IAAI;AACzD,wBAAkB,IAAI,wBAAwB,MAAM,IAAI;AACxD,oBAAc;AACd,cAAQ;AACR,iBAAW,EAAE;AACb,sBAAgB;AAChB,iBAAW,EAAE,EAAE;AACjB;AACF;AAEA,GAACC;AACC,iBAAa;AACb,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI,yBAAyB,IAAI;AACjD,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBAAY;AACZ,YAAQ;AACR,gBAAY,aAAa,IAAI,0BAA0B,IAAI;AAE3D,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AAEA,KAAC,KAAK,MAAM,CAAC,SAAS;AACpB,aAAO,IAAI;AACb;AACF;AACF;","names":["field","label","required","description","error","field","control","select"]}
1
+ {"version":3,"sources":["../src/field/Field.module.css","../src/select/Select.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--field-gap);\n }\n\n .label {\n font-size: var(--field-label-font-size);\n font-weight: var(--field-label-font-weight);\n color: var(--field-label-fg);\n }\n\n .required {\n margin-inline-start: var(--field-required-gap);\n color: var(--field-required-fg);\n }\n\n .description {\n margin: 0;\n font-size: var(--field-description-font-size);\n color: var(--field-description-fg);\n }\n\n .error {\n margin: 0;\n font-size: var(--field-error-font-size);\n color: var(--field-error-fg);\n }\n}\n","/*\n * Every value is a token (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .field {\n --_height: var(--select-height-md);\n --_font-size: var(--select-font-size-md);\n --_border: var(--select-border-default);\n\n font-family: var(--select-font-family);\n\n &[data-size=\"sm\"] {\n --_height: var(--select-height-sm);\n --_font-size: var(--select-font-size-sm);\n }\n\n &[data-size=\"lg\"] {\n --_height: var(--select-height-lg);\n --_font-size: var(--select-font-size-lg);\n }\n\n &[data-invalid] { --_border: var(--select-border-invalid); }\n }\n\n .control {\n display: grid;\n align-items: center;\n\n & > * {\n grid-area: 1 / 1;\n }\n\n &::after {\n content: \"\";\n inline-size: var(--space-2);\n block-size: var(--space-2);\n margin-inline-end: var(--select-chevron-inset);\n border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n justify-self: end;\n rotate: 45deg;\n translate: 0 -25%;\n pointer-events: none;\n grid-area: 1 / 1;\n }\n }\n\n .select {\n inline-size: 100%;\n min-block-size: var(--_height);\n padding-block: 0;\n padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n border: var(--size-hairline) solid var(--_border);\n border-radius: var(--select-radius);\n background-color: var(--select-bg);\n color: var(--select-fg);\n font-size: var(--_font-size);\n appearance: none;\n cursor: pointer;\n transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n border-color: var(--select-border-focus);\n outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n outline-offset: var(--select-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :focus-visible) {\n border-color: var(--select-border-hover);\n }\n\n &:has(option[value=\"\"]:checked) {\n color: var(--select-placeholder);\n }\n }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;AC3BA;AAEA;AACE,GAACC;AACC,eAAW,IAAI;AACf,kBAAc,IAAI;AAClB,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA0B;AAC7D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AAEb,MAAE,EAAE;AACF,iBAAW,EAAE,EAAE;AACjB;AAEA,KAAC;AACC,eAAS;AACT,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,yBAAmB,IAAI;AACvB,yBAAmB,IAAI,wBAAwB,MAAM,IAAI;AACzD,wBAAkB,IAAI,wBAAwB,MAAM,IAAI;AACxD,oBAAc;AACd,cAAQ;AACR,iBAAW,EAAE;AACb,sBAAgB;AAChB,iBAAW,EAAE,EAAE;AACjB;AACF;AAEA,GAACC;AACC,iBAAa;AACb,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI,yBAAyB,IAAI;AACjD,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBAAY;AACZ,YAAQ;AACR,gBAAY,aAAa,IAAI,0BAA0B,IAAI;AAE3D,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AAEA,KAAC,KAAK,MAAM,CAAC,SAAS;AACpB,aAAO,IAAI;AACb;AACF;AACF;","names":["field","label","required","description","error","field","control","select"]}