@pearpages/pulp-react 0.2.1 → 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 +6 -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 +4 -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-VSDEQHG4.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-DVM37MEK.js → chunk-MF66ICX6.js} +4 -4
  66. package/dist/chunk-MF66ICX6.js.map +1 -0
  67. package/dist/{chunk-XXC34COT.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-4DER5LHM.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-2KG43BOT.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 +5 -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 +38 -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 +6 -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 +7 -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-2KG43BOT.js.map +0 -1
  202. package/dist/chunk-2PXTVZ7H.js.map +0 -1
  203. package/dist/chunk-2ZP4ZBI5.js.map +0 -1
  204. package/dist/chunk-3GWESUGD.js.map +0 -1
  205. package/dist/chunk-4DER5LHM.js.map +0 -1
  206. package/dist/chunk-6I26MMQF.js.map +0 -1
  207. package/dist/chunk-75GTNRBH.js.map +0 -1
  208. package/dist/chunk-7DS4I7OJ.js.map +0 -1
  209. package/dist/chunk-7RQQASKS.js.map +0 -1
  210. package/dist/chunk-ASNTNTJW.js.map +0 -1
  211. package/dist/chunk-ASOQ2MVR.js.map +0 -1
  212. package/dist/chunk-AWQHULJC.js.map +0 -1
  213. package/dist/chunk-DVM37MEK.js.map +0 -1
  214. package/dist/chunk-DWE374JX.js.map +0 -1
  215. package/dist/chunk-FH54XQ35.js.map +0 -1
  216. package/dist/chunk-GTTXRDXV.js.map +0 -1
  217. package/dist/chunk-GUZMLYST.js.map +0 -1
  218. package/dist/chunk-I4KC4V6A.js.map +0 -1
  219. package/dist/chunk-IDNGNQNV.js.map +0 -1
  220. package/dist/chunk-MRQWUCBA.js.map +0 -1
  221. package/dist/chunk-MXWXJZFS.js.map +0 -1
  222. package/dist/chunk-N7L66GMG.js.map +0 -1
  223. package/dist/chunk-O6OBFL3Q.js.map +0 -1
  224. package/dist/chunk-OGIQRHNF.js.map +0 -1
  225. package/dist/chunk-OUFAFINB.js.map +0 -1
  226. package/dist/chunk-OXYP34CG.js.map +0 -1
  227. package/dist/chunk-P5C2U5ZF.js.map +0 -1
  228. package/dist/chunk-T76YSNTZ.js.map +0 -1
  229. package/dist/chunk-TGMDOQCL.js.map +0 -1
  230. package/dist/chunk-UX42PQLT.js.map +0 -1
  231. package/dist/chunk-VSDEQHG4.js.map +0 -1
  232. package/dist/chunk-WDWTQKIJ.js.map +0 -1
  233. package/dist/chunk-XDVS7HX7.js.map +0 -1
  234. package/dist/chunk-XUROYTJ7.js.map +0 -1
  235. package/dist/chunk-XXC34COT.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/README.md CHANGED
@@ -83,6 +83,9 @@ The vendor's stylesheet is the one you import yourself. Put it in the `vendor` l
83
83
  @import "@pearpages/pulp-react/styles.css";
84
84
  ```
85
85
 
86
+ Every pulp stylesheet restates the layer order, so the result does not depend on which file your
87
+ bundler loads first; importing `@pearpages/pulp-css` first stays the recommended setup.
88
+
86
89
  Then mount `DialogSystem` once near the root. Without the stylesheet a dialog opens unstyled; if
87
90
  you never render a `Dialog`, skip it.
88
91
 
@@ -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/accordion/Accordion.module.css */
28
+ @layer reset, tokens, vendor, base, components, utilities;
27
29
  @layer components {
28
30
  .Accordion_accordion {
29
31
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon/Icon.module.css","../src/accordion/Accordion.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","/* Every value is a token (--accordion-*). Open state is a data attribute; the chevron rotates on it. */\n\n@layer components {\n .accordion {\n display: flex;\n flex-direction: column;\n border: var(--size-hairline) solid var(--accordion-border);\n border-radius: var(--accordion-radius);\n font-family: var(--font-family-body);\n }\n\n .item {\n border-block-end: var(--size-hairline) solid var(--accordion-border);\n\n &:last-child {\n border-block-end: none;\n }\n }\n\n .heading {\n margin: 0;\n font-size: inherit;\n font-weight: inherit;\n }\n\n .trigger {\n display: flex;\n gap: var(--accordion-trigger-gap);\n align-items: center;\n inline-size: 100%;\n padding-block: var(--accordion-trigger-padding-block);\n padding-inline: var(--accordion-trigger-padding-inline);\n border: none;\n background-color: transparent;\n color: var(--accordion-trigger-fg);\n font-size: var(--accordion-trigger-font-size);\n font-weight: var(--accordion-trigger-font-weight);\n text-align: start;\n cursor: pointer;\n transition: background-color var(--accordion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);\n outline-offset: calc(-1 * var(--accordion-focus-ring-offset));\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled) {\n background-color: var(--accordion-trigger-bg-hover);\n }\n }\n\n .label {\n flex: 1;\n }\n\n .chevron {\n color: var(--accordion-trigger-chevron);\n transition: rotate var(--accordion-duration) var(--motion-easing-standard);\n }\n\n .trigger[data-state=\"open\"] .chevron {\n rotate: 180deg;\n }\n\n .panel {\n padding-block: var(--accordion-panel-padding-block);\n padding-inline: var(--accordion-panel-padding-inline);\n color: var(--accordion-panel-fg);\n font-size: var(--accordion-panel-font-size);\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;;;AClBA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,sBAAkB,IAAI,iBAAiB,MAAM,IAAI;AAEjD,KAAC;AACC,wBAAkB;AACpB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,eAAW;AACX,iBAAa;AACf;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,iBAAa;AACb,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,sBAAsB,IAAI;AAE3D,KAAC;AACC,eAAS,IAAI,8BAA8B,MAAM,IAAI;AACrD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK;AACV,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,WAAO,IAAI;AACX,gBAAY,OAAO,IAAI,sBAAsB,IAAI;AACnD;AAEA,GAxCCF,iBAwCO,CAAC,iBAAmB,CAL3BE;AAMC,YAAQ;AACV;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AACF;","names":["icon","accordion","item","heading","trigger","label","chevron","panel"]}
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/accordion/Accordion.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","/* Every value is a token (--accordion-*). Open state is a data attribute; the chevron rotates on it. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .accordion {\n display: flex;\n flex-direction: column;\n border: var(--size-hairline) solid var(--accordion-border);\n border-radius: var(--accordion-radius);\n font-family: var(--font-family-body);\n }\n\n .item {\n border-block-end: var(--size-hairline) solid var(--accordion-border);\n\n &:last-child {\n border-block-end: none;\n }\n }\n\n .heading {\n margin: 0;\n font-size: inherit;\n font-weight: inherit;\n }\n\n .trigger {\n display: flex;\n gap: var(--accordion-trigger-gap);\n align-items: center;\n inline-size: 100%;\n padding-block: var(--accordion-trigger-padding-block);\n padding-inline: var(--accordion-trigger-padding-inline);\n border: none;\n background-color: transparent;\n color: var(--accordion-trigger-fg);\n font-size: var(--accordion-trigger-font-size);\n font-weight: var(--accordion-trigger-font-weight);\n text-align: start;\n cursor: pointer;\n transition: background-color var(--accordion-duration) var(--motion-easing-standard);\n\n &:focus-visible {\n outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring);\n outline-offset: calc(-1 * var(--accordion-focus-ring-offset));\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled) {\n background-color: var(--accordion-trigger-bg-hover);\n }\n }\n\n .label {\n flex: 1;\n }\n\n .chevron {\n color: var(--accordion-trigger-chevron);\n transition: rotate var(--accordion-duration) var(--motion-easing-standard);\n }\n\n .trigger[data-state=\"open\"] .chevron {\n rotate: 180deg;\n }\n\n .panel {\n padding-block: var(--accordion-panel-padding-block);\n padding-inline: var(--accordion-panel-padding-inline);\n color: var(--accordion-panel-fg);\n font-size: var(--accordion-panel-font-size);\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;;;ACpBA;AAEA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,sBAAkB,IAAI,iBAAiB,MAAM,IAAI;AAEjD,KAAC;AACC,wBAAkB;AACpB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,eAAW;AACX,iBAAa;AACf;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,iBAAa;AACb,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,sBAAsB,IAAI;AAE3D,KAAC;AACC,eAAS,IAAI,8BAA8B,MAAM,IAAI;AACrD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK;AACV,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,WAAO,IAAI;AACX,gBAAY,OAAO,IAAI,sBAAsB,IAAI;AACnD;AAEA,GAxCCF,iBAwCO,CAAC,iBAAmB,CAL3BE;AAMC,YAAQ;AACV;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AACF;","names":["icon","accordion","item","heading","trigger","label","chevron","panel"]}
package/dist/accordion.js CHANGED
@@ -1,6 +1,6 @@
1
- export { Accordion } from './chunk-O6OBFL3Q.js';
1
+ export { Accordion } from './chunk-W2UUZ2DC.js';
2
2
  import './chunk-I5OZ63W7.js';
3
- import './chunk-ASNTNTJW.js';
3
+ import './chunk-O5LII5XP.js';
4
4
  import './chunk-MI4QUKQS.js';
5
5
  //# sourceMappingURL=accordion.js.map
6
6
  //# sourceMappingURL=accordion.js.map
package/dist/alert.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/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;
@@ -162,6 +166,7 @@
162
166
  }
163
167
 
164
168
  /* src/icon-button/IconButton.module.css */
169
+ @layer reset, tokens, vendor, base, components, utilities;
165
170
  @layer components {
166
171
  .IconButton_iconButton[data-icon-only] {
167
172
  gap: 0;
@@ -177,6 +182,7 @@
177
182
  }
178
183
 
179
184
  /* src/alert/Alert.module.css */
185
+ @layer reset, tokens, vendor, base, components, utilities;
180
186
  @layer components {
181
187
  .Alert_alert {
182
188
  --_bg: var(--alert-info-bg);
@@ -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/alert/Alert.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 -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 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 (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n .alert {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n\n display: flex;\n align-items: flex-start;\n gap: var(--alert-gap);\n padding: var(--alert-padding);\n border: var(--alert-border-width) solid var(--_accent);\n border-inline-start-width: var(--alert-accent-width);\n border-radius: var(--alert-radius);\n background-color: var(--_bg);\n color: var(--alert-fg);\n font-size: var(--alert-font-size);\n\n &[data-tone=\"info\"] {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n }\n\n &[data-tone=\"success\"] {\n --_bg: var(--alert-success-bg);\n --_accent: var(--alert-success-accent);\n --_title: var(--alert-success-title);\n }\n\n &[data-tone=\"warning\"] {\n --_bg: var(--alert-warning-bg);\n --_accent: var(--alert-warning-accent);\n --_title: var(--alert-warning-title);\n }\n\n &[data-tone=\"error\"] {\n --_bg: var(--alert-error-bg);\n --_accent: var(--alert-error-accent);\n --_title: var(--alert-error-title);\n }\n }\n\n .icon {\n flex: none;\n color: var(--_accent);\n }\n\n .body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-1);\n min-inline-size: 0;\n }\n\n .title {\n margin: 0;\n color: var(--_title);\n font-weight: var(--alert-title-font-weight);\n }\n\n .content {\n overflow-wrap: anywhere;\n }\n\n .action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-block-start: var(--space-1);\n }\n\n .dismiss {\n flex: none;\n margin-block: calc(-1 * var(--space-1));\n margin-inline-end: calc(-1 * var(--space-2));\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss"]}
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/alert/Alert.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 (--alert-*). Tone resolves into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .alert {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n\n display: flex;\n align-items: flex-start;\n gap: var(--alert-gap);\n padding: var(--alert-padding);\n border: var(--alert-border-width) solid var(--_accent);\n border-inline-start-width: var(--alert-accent-width);\n border-radius: var(--alert-radius);\n background-color: var(--_bg);\n color: var(--alert-fg);\n font-size: var(--alert-font-size);\n\n &[data-tone=\"info\"] {\n --_bg: var(--alert-info-bg);\n --_accent: var(--alert-info-accent);\n --_title: var(--alert-info-title);\n }\n\n &[data-tone=\"success\"] {\n --_bg: var(--alert-success-bg);\n --_accent: var(--alert-success-accent);\n --_title: var(--alert-success-title);\n }\n\n &[data-tone=\"warning\"] {\n --_bg: var(--alert-warning-bg);\n --_accent: var(--alert-warning-accent);\n --_title: var(--alert-warning-title);\n }\n\n &[data-tone=\"error\"] {\n --_bg: var(--alert-error-bg);\n --_accent: var(--alert-error-accent);\n --_title: var(--alert-error-title);\n }\n }\n\n .icon {\n flex: none;\n color: var(--_accent);\n }\n\n .body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--space-1);\n min-inline-size: 0;\n }\n\n .title {\n margin: 0;\n color: var(--_title);\n font-weight: var(--alert-title-font-weight);\n }\n\n .content {\n overflow-wrap: anywhere;\n }\n\n .action {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-block-start: var(--space-1);\n }\n\n .dismiss {\n flex: none;\n margin-block: calc(-1 * var(--space-1));\n margin-inline-end: calc(-1 * var(--space-2));\n }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss"]}
package/dist/alert.js CHANGED
@@ -1,10 +1,10 @@
1
- export { Alert } from './chunk-XXC34COT.js';
2
- import './chunk-DVM37MEK.js';
3
- import './chunk-VSDEQHG4.js';
4
- import './chunk-I4KC4V6A.js';
1
+ export { Alert } from './chunk-N4C3NQIN.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=alert.js.map
10
10
  //# sourceMappingURL=alert.js.map
package/dist/badge.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/badge/Badge.module.css */
28
+ @layer reset, tokens, vendor, base, components, utilities;
27
29
  @layer components {
28
30
  .Badge_badge {
29
31
  --_bg: var(--badge-neutral-subtle-bg);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon/Icon.module.css","../src/badge/Badge.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","/* Every value is a token (--badge-*). Tone × variant resolve into private custom properties. */\n\n@layer components {\n .badge {\n --_bg: var(--badge-neutral-subtle-bg);\n --_fg: var(--badge-neutral-subtle-fg);\n\n display: inline-flex;\n align-items: center;\n gap: var(--badge-gap);\n padding-block: var(--badge-padding-block);\n padding-inline: var(--badge-padding-inline-md);\n border-radius: var(--badge-radius);\n background-color: var(--_bg);\n color: var(--_fg);\n font-size: var(--badge-font-size-md);\n font-weight: var(--badge-font-weight);\n line-height: var(--badge-line-height);\n white-space: nowrap;\n\n &[data-size=\"sm\"] {\n padding-inline: var(--badge-padding-inline-sm);\n font-size: var(--badge-font-size-sm);\n }\n\n &[data-tone=\"neutral\"][data-variant=\"solid\"] {\n --_bg: var(--badge-neutral-solid-bg);\n --_fg: var(--badge-neutral-solid-fg);\n }\n\n &[data-tone=\"neutral\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-neutral-subtle-bg);\n --_fg: var(--badge-neutral-subtle-fg);\n }\n\n &[data-tone=\"info\"][data-variant=\"solid\"] {\n --_bg: var(--badge-info-solid-bg);\n --_fg: var(--badge-info-solid-fg);\n }\n\n &[data-tone=\"info\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-info-subtle-bg);\n --_fg: var(--badge-info-subtle-fg);\n }\n\n &[data-tone=\"success\"][data-variant=\"solid\"] {\n --_bg: var(--badge-success-solid-bg);\n --_fg: var(--badge-success-solid-fg);\n }\n\n &[data-tone=\"success\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-success-subtle-bg);\n --_fg: var(--badge-success-subtle-fg);\n }\n\n &[data-tone=\"warning\"][data-variant=\"solid\"] {\n --_bg: var(--badge-warning-solid-bg);\n --_fg: var(--badge-warning-solid-fg);\n }\n\n &[data-tone=\"warning\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-warning-subtle-bg);\n --_fg: var(--badge-warning-subtle-fg);\n }\n\n &[data-tone=\"error\"][data-variant=\"solid\"] {\n --_bg: var(--badge-error-solid-bg);\n --_fg: var(--badge-error-solid-fg);\n }\n\n &[data-tone=\"error\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-error-subtle-bg);\n --_fg: var(--badge-error-subtle-fg);\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;;;AClBA;AACE,GAACC;AACC,WAAO,IAAI;AACX,WAAO,IAAI;AAEX,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa;AAEb,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AACF;AACF;","names":["icon","badge"]}
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/badge/Badge.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","/* Every value is a token (--badge-*). Tone × variant resolve into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .badge {\n --_bg: var(--badge-neutral-subtle-bg);\n --_fg: var(--badge-neutral-subtle-fg);\n\n display: inline-flex;\n align-items: center;\n gap: var(--badge-gap);\n padding-block: var(--badge-padding-block);\n padding-inline: var(--badge-padding-inline-md);\n border-radius: var(--badge-radius);\n background-color: var(--_bg);\n color: var(--_fg);\n font-size: var(--badge-font-size-md);\n font-weight: var(--badge-font-weight);\n line-height: var(--badge-line-height);\n white-space: nowrap;\n\n &[data-size=\"sm\"] {\n padding-inline: var(--badge-padding-inline-sm);\n font-size: var(--badge-font-size-sm);\n }\n\n &[data-tone=\"neutral\"][data-variant=\"solid\"] {\n --_bg: var(--badge-neutral-solid-bg);\n --_fg: var(--badge-neutral-solid-fg);\n }\n\n &[data-tone=\"neutral\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-neutral-subtle-bg);\n --_fg: var(--badge-neutral-subtle-fg);\n }\n\n &[data-tone=\"info\"][data-variant=\"solid\"] {\n --_bg: var(--badge-info-solid-bg);\n --_fg: var(--badge-info-solid-fg);\n }\n\n &[data-tone=\"info\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-info-subtle-bg);\n --_fg: var(--badge-info-subtle-fg);\n }\n\n &[data-tone=\"success\"][data-variant=\"solid\"] {\n --_bg: var(--badge-success-solid-bg);\n --_fg: var(--badge-success-solid-fg);\n }\n\n &[data-tone=\"success\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-success-subtle-bg);\n --_fg: var(--badge-success-subtle-fg);\n }\n\n &[data-tone=\"warning\"][data-variant=\"solid\"] {\n --_bg: var(--badge-warning-solid-bg);\n --_fg: var(--badge-warning-solid-fg);\n }\n\n &[data-tone=\"warning\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-warning-subtle-bg);\n --_fg: var(--badge-warning-subtle-fg);\n }\n\n &[data-tone=\"error\"][data-variant=\"solid\"] {\n --_bg: var(--badge-error-solid-bg);\n --_fg: var(--badge-error-solid-fg);\n }\n\n &[data-tone=\"error\"][data-variant=\"subtle\"] {\n --_bg: var(--badge-error-subtle-bg);\n --_fg: var(--badge-error-subtle-fg);\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;;;ACpBA;AAEA;AACE,GAACC;AACC,WAAO,IAAI;AACX,WAAO,IAAI;AAEX,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa;AAEb,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AACF;AACF;","names":["icon","badge"]}
package/dist/badge.js CHANGED
@@ -1,5 +1,5 @@
1
- export { Badge } from './chunk-6I26MMQF.js';
2
- import './chunk-ASNTNTJW.js';
1
+ export { Badge } from './chunk-737GQSOB.js';
2
+ import './chunk-O5LII5XP.js';
3
3
  import './chunk-MI4QUKQS.js';
4
4
  //# sourceMappingURL=badge.js.map
5
5
  //# sourceMappingURL=badge.js.map
package/dist/button.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/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;
@@ -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"],"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 -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"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label"]}
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"],"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"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label"]}
package/dist/button.js CHANGED
@@ -1,8 +1,8 @@
1
- export { Button } from './chunk-VSDEQHG4.js';
2
- import './chunk-I4KC4V6A.js';
1
+ export { Button } from './chunk-5TTYVQ6Q.js';
2
+ import './chunk-ZL5MMRLG.js';
3
3
  import './chunk-ZVDN3GRI.js';
4
- import './chunk-Z4PN6B2C.js';
5
- import './chunk-ASNTNTJW.js';
4
+ import './chunk-IB5UUE3S.js';
5
+ import './chunk-O5LII5XP.js';
6
6
  import './chunk-MI4QUKQS.js';
7
7
  //# sourceMappingURL=button.js.map
8
8
  //# sourceMappingURL=button.js.map
package/dist/calendar.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/calendar/Calendar.module.css */
28
+ @layer reset, tokens, vendor, base, components, utilities;
27
29
  @layer components {
28
30
  .Calendar_root {
29
31
  display: inline-flex;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon/Icon.module.css","../src/calendar/Calendar.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 (--calendar-*). React Aria writes the cell state:\n * data-selected, data-focused, data-focus-visible, data-hovered,\n * data-disabled, data-unavailable, data-today, data-outside-month.\n */\n\n@layer components {\n .root {\n display: inline-flex;\n flex-direction: column;\n gap: var(--calendar-gap);\n padding: var(--calendar-padding);\n background-color: var(--calendar-bg);\n color: var(--calendar-fg);\n font-family: var(--calendar-font-family);\n font-size: var(--calendar-font-size);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--calendar-gap);\n }\n\n .heading {\n margin: 0;\n font-size: var(--calendar-heading-font-size);\n font-weight: var(--calendar-heading-font-weight);\n }\n\n .nav {\n display: grid;\n place-items: center;\n inline-size: var(--calendar-nav-size);\n block-size: var(--calendar-nav-size);\n padding: 0;\n border: none;\n border-radius: var(--calendar-nav-radius);\n background-color: transparent;\n color: var(--calendar-nav-fg);\n cursor: pointer;\n transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n &[data-hovered] {\n background-color: var(--calendar-nav-bg-hover);\n color: var(--calendar-nav-fg-hover);\n }\n\n &[data-focus-visible] {\n outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n outline-offset: var(--calendar-focus-ring-offset);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n .grid {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n .weekday {\n inline-size: var(--calendar-cell-size);\n padding: 0;\n color: var(--calendar-weekday-fg);\n font-size: var(--calendar-weekday-font-size);\n font-weight: var(--calendar-weekday-font-weight);\n text-align: center;\n }\n\n .cell {\n display: grid;\n place-items: center;\n inline-size: var(--calendar-cell-size);\n block-size: var(--calendar-cell-size);\n border-radius: var(--calendar-cell-radius);\n color: var(--calendar-cell-fg);\n cursor: pointer;\n outline: none;\n transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n &[data-outside-month] {\n display: none;\n }\n\n &[data-today] {\n color: var(--calendar-cell-fg-today);\n font-weight: var(--calendar-heading-font-weight);\n }\n\n &[data-hovered] {\n background-color: var(--calendar-cell-bg-hover);\n }\n\n &[data-selected] {\n background-color: var(--calendar-cell-bg-selected);\n color: var(--calendar-cell-fg-selected);\n\n &[data-hovered] {\n background-color: var(--calendar-cell-bg-selected-hover);\n }\n }\n\n &[data-focus-visible] {\n outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n outline-offset: var(--calendar-focus-ring-offset);\n }\n\n &[data-unavailable] {\n color: var(--calendar-cell-fg-unavailable);\n text-decoration: line-through;\n cursor: not-allowed;\n }\n\n /* Disabled dims the days, not the month name, so the visible text keeps its contrast. */\n &[data-disabled] {\n color: var(--calendar-cell-fg-unavailable);\n cursor: not-allowed;\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;;;ACdA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,aAAS,IAAI;AACb,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,qBAAiB;AACjB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB;AAClB,WAAO,IAAI;AACX,YAAQ;AACR,gBAAY,iBAAiB,IAAI,4BAA4B,IAAI;AAEjE,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AACb;AAEA,KAAC,CAAC;AACA,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC,CAAC;AACA,cAAQ;AACR,eAAS;AACX;AACF;AAEA,GAACC;AACC,qBAAiB;AACjB,oBAAgB;AAClB;AAEA,GAACC;AACC,iBAAa,IAAI;AACjB,aAAS;AACT,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACd;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,mBAAe,IAAI;AACnB,WAAO,IAAI;AACX,YAAQ;AACR,aAAS;AACT,gBAAY,iBAAiB,IAAI,4BAA4B,IAAI;AAEjE,KAAC,CAAC;AACA,eAAS;AACX;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,mBAAa,IAAI;AACnB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AAEX,OAAC,CAAC;AACA,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC,CAAC;AACA,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,uBAAiB;AACjB,cAAQ;AACV;AAGA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AACF;AACF;","names":["icon","root","header","heading","nav","grid","weekday","cell"]}
1
+ {"version":3,"sources":["../src/icon/Icon.module.css","../src/calendar/Calendar.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 (--calendar-*). React Aria writes the cell state:\n * data-selected, data-focused, data-focus-visible, data-hovered,\n * data-disabled, data-unavailable, data-today, data-outside-month.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .root {\n display: inline-flex;\n flex-direction: column;\n gap: var(--calendar-gap);\n padding: var(--calendar-padding);\n background-color: var(--calendar-bg);\n color: var(--calendar-fg);\n font-family: var(--calendar-font-family);\n font-size: var(--calendar-font-size);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--calendar-gap);\n }\n\n .heading {\n margin: 0;\n font-size: var(--calendar-heading-font-size);\n font-weight: var(--calendar-heading-font-weight);\n }\n\n .nav {\n display: grid;\n place-items: center;\n inline-size: var(--calendar-nav-size);\n block-size: var(--calendar-nav-size);\n padding: 0;\n border: none;\n border-radius: var(--calendar-nav-radius);\n background-color: transparent;\n color: var(--calendar-nav-fg);\n cursor: pointer;\n transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n &[data-hovered] {\n background-color: var(--calendar-nav-bg-hover);\n color: var(--calendar-nav-fg-hover);\n }\n\n &[data-focus-visible] {\n outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n outline-offset: var(--calendar-focus-ring-offset);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n .grid {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n .weekday {\n inline-size: var(--calendar-cell-size);\n padding: 0;\n color: var(--calendar-weekday-fg);\n font-size: var(--calendar-weekday-font-size);\n font-weight: var(--calendar-weekday-font-weight);\n text-align: center;\n }\n\n .cell {\n display: grid;\n place-items: center;\n inline-size: var(--calendar-cell-size);\n block-size: var(--calendar-cell-size);\n border-radius: var(--calendar-cell-radius);\n color: var(--calendar-cell-fg);\n cursor: pointer;\n outline: none;\n transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n &[data-outside-month] {\n display: none;\n }\n\n &[data-today] {\n color: var(--calendar-cell-fg-today);\n font-weight: var(--calendar-heading-font-weight);\n }\n\n &[data-hovered] {\n background-color: var(--calendar-cell-bg-hover);\n }\n\n &[data-selected] {\n background-color: var(--calendar-cell-bg-selected);\n color: var(--calendar-cell-fg-selected);\n\n &[data-hovered] {\n background-color: var(--calendar-cell-bg-selected-hover);\n }\n }\n\n &[data-focus-visible] {\n outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n outline-offset: var(--calendar-focus-ring-offset);\n }\n\n &[data-unavailable] {\n color: var(--calendar-cell-fg-unavailable);\n text-decoration: line-through;\n cursor: not-allowed;\n }\n\n /* Disabled dims the days, not the month name, so the visible text keeps its contrast. */\n &[data-disabled] {\n color: var(--calendar-cell-fg-unavailable);\n cursor: not-allowed;\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;;;AChBA;AAEA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,aAAS,IAAI;AACb,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,qBAAiB;AACjB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB;AAClB,WAAO,IAAI;AACX,YAAQ;AACR,gBAAY,iBAAiB,IAAI,4BAA4B,IAAI;AAEjE,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AACb;AAEA,KAAC,CAAC;AACA,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC,CAAC;AACA,cAAQ;AACR,eAAS;AACX;AACF;AAEA,GAACC;AACC,qBAAiB;AACjB,oBAAgB;AAClB;AAEA,GAACC;AACC,iBAAa,IAAI;AACjB,aAAS;AACT,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACd;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,mBAAe,IAAI;AACnB,WAAO,IAAI;AACX,YAAQ;AACR,aAAS;AACT,gBAAY,iBAAiB,IAAI,4BAA4B,IAAI;AAEjE,KAAC,CAAC;AACA,eAAS;AACX;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,mBAAa,IAAI;AACnB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AAEX,OAAC,CAAC;AACA,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC,CAAC;AACA,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,uBAAiB;AACjB,cAAQ;AACV;AAGA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AACF;AACF;","names":["icon","root","header","heading","nav","grid","weekday","cell"]}
package/dist/calendar.js CHANGED
@@ -1,6 +1,6 @@
1
- export { Calendar } from './chunk-5SBKZS56.js';
2
- import './chunk-OXYP34CG.js';
3
- import './chunk-ASNTNTJW.js';
1
+ export { Calendar } from './chunk-W6HEBHA7.js';
2
+ import './chunk-JOGIN4SS.js';
3
+ import './chunk-O5LII5XP.js';
4
4
  import './chunk-MI4QUKQS.js';
5
5
  //# sourceMappingURL=calendar.js.map
6
6
  //# sourceMappingURL=calendar.js.map
package/dist/card.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* src/card/Card.module.css */
2
+ @layer reset, tokens, vendor, base, components, utilities;
2
3
  @layer components {
3
4
  .Card_card {
4
5
  --_pad: var(--card-padding-md);
package/dist/card.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/card/Card.module.css"],"sourcesContent":["/* Every value is a token (--card-*). Slots carry padding and dividers; the root is the surface. */\n\n@layer components {\n .card {\n --_pad: var(--card-padding-md);\n\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n border: 1px solid transparent;\n border-radius: var(--card-radius);\n background-color: var(--card-bg);\n color: var(--card-fg);\n text-decoration: none;\n transition:\n border-color var(--card-motion-duration) var(--motion-easing-standard),\n box-shadow var(--card-motion-duration) var(--motion-easing-standard),\n translate var(--card-motion-duration) var(--motion-easing-standard);\n\n &[data-padding=\"sm\"] {\n --_pad: var(--card-padding-sm);\n }\n\n &[data-padding=\"lg\"] {\n --_pad: var(--card-padding-lg);\n }\n\n &[data-variant=\"raised\"] {\n box-shadow: var(--card-shadow);\n }\n\n &[data-variant=\"outlined\"] {\n border-color: var(--card-border);\n }\n\n &[data-variant=\"sunken\"] {\n background-color: var(--card-bg-sunken);\n }\n\n &[data-interactive] {\n cursor: pointer;\n\n &:hover {\n border-color: var(--card-border-hover);\n translate: 0 -1px;\n }\n\n &:focus-visible {\n outline: var(--card-focus-ring-width) solid var(--card-focus-ring);\n outline-offset: var(--card-focus-ring-offset);\n }\n }\n }\n\n .header,\n .body,\n .footer {\n padding: var(--_pad);\n }\n\n .header {\n display: flex;\n flex-direction: column;\n gap: var(--card-gap);\n border-block-end: 1px solid var(--card-divider);\n }\n\n .body {\n flex: 1;\n }\n\n .footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--card-gap);\n border-block-start: 1px solid var(--card-divider);\n }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACjB,YAAQ,IAAI,MAAM;AAClB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,qBAAiB;AACjB;AAAA,MACE,aAAa,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACtE,WAAW,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACpE,UAAU,IAAI,wBAAwB,IAAI;AAE5C,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,cAAQ;AAER,OAAC;AACC,sBAAc,IAAI;AAClB,mBAAW,EAAE;AACf;AAEA,OAAC;AACC,iBAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,wBAAgB,IAAI;AACtB;AACF;AACF;AAEA,GAACC;AAAA,EACD,CAACC;AAAA,EACD,CAACC;AACC,aAAS,IAAI;AACf;AAEA,GANCF;AAOC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAClC;AAEA,GAZCC;AAaC,UAAM;AACR;AAEA,GAfCC;AAgBC,aAAS;AACT,eAAW;AACX,iBAAa;AACb,SAAK,IAAI;AACT,wBAAoB,IAAI,MAAM,IAAI;AACpC;AACF;","names":["card","header","body","footer"]}
1
+ {"version":3,"sources":["../src/card/Card.module.css"],"sourcesContent":["/* Every value is a token (--card-*). Slots carry padding and dividers; the root is the surface. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .card {\n --_pad: var(--card-padding-md);\n\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n border: 1px solid transparent;\n border-radius: var(--card-radius);\n background-color: var(--card-bg);\n color: var(--card-fg);\n text-decoration: none;\n transition:\n border-color var(--card-motion-duration) var(--motion-easing-standard),\n box-shadow var(--card-motion-duration) var(--motion-easing-standard),\n translate var(--card-motion-duration) var(--motion-easing-standard);\n\n &[data-padding=\"sm\"] {\n --_pad: var(--card-padding-sm);\n }\n\n &[data-padding=\"lg\"] {\n --_pad: var(--card-padding-lg);\n }\n\n &[data-variant=\"raised\"] {\n box-shadow: var(--card-shadow);\n }\n\n &[data-variant=\"outlined\"] {\n border-color: var(--card-border);\n }\n\n &[data-variant=\"sunken\"] {\n background-color: var(--card-bg-sunken);\n }\n\n &[data-interactive] {\n cursor: pointer;\n\n &:hover {\n border-color: var(--card-border-hover);\n translate: 0 -1px;\n }\n\n &:focus-visible {\n outline: var(--card-focus-ring-width) solid var(--card-focus-ring);\n outline-offset: var(--card-focus-ring-offset);\n }\n }\n }\n\n .header,\n .body,\n .footer {\n padding: var(--_pad);\n }\n\n .header {\n display: flex;\n flex-direction: column;\n gap: var(--card-gap);\n border-block-end: 1px solid var(--card-divider);\n }\n\n .body {\n flex: 1;\n }\n\n .footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--card-gap);\n border-block-start: 1px solid var(--card-divider);\n }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACjB,YAAQ,IAAI,MAAM;AAClB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,qBAAiB;AACjB;AAAA,MACE,aAAa,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACtE,WAAW,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACpE,UAAU,IAAI,wBAAwB,IAAI;AAE5C,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,cAAQ;AAER,OAAC;AACC,sBAAc,IAAI;AAClB,mBAAW,EAAE;AACf;AAEA,OAAC;AACC,iBAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,wBAAgB,IAAI;AACtB;AACF;AACF;AAEA,GAACC;AAAA,EACD,CAACC;AAAA,EACD,CAACC;AACC,aAAS,IAAI;AACf;AAEA,GANCF;AAOC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAClC;AAEA,GAZCC;AAaC,UAAM;AACR;AAEA,GAfCC;AAgBC,aAAS;AACT,eAAW;AACX,iBAAa;AACb,SAAK,IAAI;AACT,wBAAoB,IAAI,MAAM,IAAI;AACpC;AACF;","names":["card","header","body","footer"]}
package/dist/card.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Card } from './chunk-MRQWUCBA.js';
1
+ export { Card } from './chunk-LA3YBXCR.js';
2
2
  import './chunk-ZVDN3GRI.js';
3
3
  import './chunk-MI4QUKQS.js';
4
4
  //# sourceMappingURL=card.js.map
package/dist/checkbox.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/checkbox/Checkbox.module.css */
31
+ @layer reset, tokens, vendor, base, components, utilities;
30
32
  @layer components {
31
33
  .Checkbox_checkbox {
32
34
  --_size: var(--checkbox-size-md);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/field/Field.module.css","../src/checkbox/Checkbox.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 (--checkbox-*). Size and invalid state are resolved\n * into private custom properties on the root, so the input has one rule per\n * property and no selector ordering to maintain.\n */\n\n@layer components {\n .checkbox {\n --_size: var(--checkbox-size-md);\n --_border: var(--checkbox-border);\n\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_size: var(--checkbox-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--checkbox-size-lg); }\n &[data-invalid] { --_border: var(--checkbox-border-invalid); }\n }\n\n .row {\n display: flex;\n align-items: center;\n gap: var(--checkbox-gap);\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(--checkbox-radius);\n background-color: var(--checkbox-bg);\n appearance: none;\n cursor: pointer;\n transition:\n background-color var(--checkbox-motion-duration) var(--motion-easing-standard),\n border-color var(--checkbox-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) * 0.3);\n block-size: calc(var(--_size) * 0.55);\n border-style: solid;\n border-color: var(--checkbox-check);\n border-width: 0 var(--checkbox-check-width) var(--checkbox-check-width) 0;\n rotate: 45deg;\n translate: 0 -10%;\n opacity: 0;\n }\n\n &:checked,\n &:indeterminate {\n border-color: var(--checkbox-bg-checked);\n background-color: var(--checkbox-bg-checked);\n\n &::after {\n opacity: 1;\n }\n }\n\n &:indeterminate::after {\n inline-size: calc(var(--_size) * 0.55);\n block-size: 0;\n border-width: 0 0 var(--checkbox-check-width);\n rotate: 0deg;\n translate: 0 0;\n }\n\n &:focus-visible {\n outline: var(--checkbox-focus-ring-width) solid var(--checkbox-focus-ring);\n outline-offset: var(--checkbox-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :checked, :indeterminate) {\n border-color: var(--checkbox-border-hover);\n }\n\n &:hover:not(:disabled):is(:checked, :indeterminate) {\n border-color: var(--checkbox-bg-checked-hover);\n background-color: var(--checkbox-bg-checked-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;;;ACzBA;AACE,GAACC;AACC,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA4B;AAC/D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;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,gBACE,iBAAiB,IAAI,4BAA4B,IAAI,yBAAyB,EAC9E,aAAa,IAAI,4BAA4B,IAAI;AAGnD,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,oBAAc;AACd,oBAAc,IAAI;AAClB,oBAAc,EAAE,IAAI,wBAAwB,IAAI,wBAAwB;AACxE,cAAQ;AACR,iBAAW,EAAE;AACb,eAAS;AACX;AAEA,KAAC;AAAA,IACD,CAAC;AACC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AAEtB,OAAC;AACC,iBAAS;AACX;AACF;AAEA,KAAC,cAAc;AACb,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY;AACZ,oBAAc,EAAE,EAAE,IAAI;AACtB,cAAQ;AACR,iBAAW,EAAE;AACf;AAEA,KAAC;AACC,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW,UAAU;AAC/B,oBAAc,IAAI;AACpB;AAEA,KAAC,MAAM,KAAK,UAAU,IAAI,UAAU;AAClC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","checkbox","row","input"]}
1
+ {"version":3,"sources":["../src/field/Field.module.css","../src/checkbox/Checkbox.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 (--checkbox-*). Size and invalid state are resolved\n * into private custom properties on the root, so the input has one rule per\n * property and no selector ordering to maintain.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .checkbox {\n --_size: var(--checkbox-size-md);\n --_border: var(--checkbox-border);\n\n font-family: var(--font-family-body);\n\n &[data-size=\"sm\"] { --_size: var(--checkbox-size-sm); }\n &[data-size=\"lg\"] { --_size: var(--checkbox-size-lg); }\n &[data-invalid] { --_border: var(--checkbox-border-invalid); }\n }\n\n .row {\n display: flex;\n align-items: center;\n gap: var(--checkbox-gap);\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(--checkbox-radius);\n background-color: var(--checkbox-bg);\n appearance: none;\n cursor: pointer;\n transition:\n background-color var(--checkbox-motion-duration) var(--motion-easing-standard),\n border-color var(--checkbox-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) * 0.3);\n block-size: calc(var(--_size) * 0.55);\n border-style: solid;\n border-color: var(--checkbox-check);\n border-width: 0 var(--checkbox-check-width) var(--checkbox-check-width) 0;\n rotate: 45deg;\n translate: 0 -10%;\n opacity: 0;\n }\n\n &:checked,\n &:indeterminate {\n border-color: var(--checkbox-bg-checked);\n background-color: var(--checkbox-bg-checked);\n\n &::after {\n opacity: 1;\n }\n }\n\n &:indeterminate::after {\n inline-size: calc(var(--_size) * 0.55);\n block-size: 0;\n border-width: 0 0 var(--checkbox-check-width);\n rotate: 0deg;\n translate: 0 0;\n }\n\n &:focus-visible {\n outline: var(--checkbox-focus-ring-width) solid var(--checkbox-focus-ring);\n outline-offset: var(--checkbox-focus-ring-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &:hover:not(:disabled, :checked, :indeterminate) {\n border-color: var(--checkbox-border-hover);\n }\n\n &:hover:not(:disabled):is(:checked, :indeterminate) {\n border-color: var(--checkbox-bg-checked-hover);\n background-color: var(--checkbox-bg-checked-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;;;AC3BA;AAEA;AACE,GAACC;AACC,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA4B;AAC/D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;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,gBACE,iBAAiB,IAAI,4BAA4B,IAAI,yBAAyB,EAC9E,aAAa,IAAI,4BAA4B,IAAI;AAGnD,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,oBAAc;AACd,oBAAc,IAAI;AAClB,oBAAc,EAAE,IAAI,wBAAwB,IAAI,wBAAwB;AACxE,cAAQ;AACR,iBAAW,EAAE;AACb,eAAS;AACX;AAEA,KAAC;AAAA,IACD,CAAC;AACC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AAEtB,OAAC;AACC,iBAAS;AACX;AACF;AAEA,KAAC,cAAc;AACb,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY;AACZ,oBAAc,EAAE,EAAE,IAAI;AACtB,cAAQ;AACR,iBAAW,EAAE;AACf;AAEA,KAAC;AACC,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW,UAAU;AAC/B,oBAAc,IAAI;AACpB;AAEA,KAAC,MAAM,KAAK,UAAU,IAAI,UAAU;AAClC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","checkbox","row","input"]}
package/dist/checkbox.js CHANGED
@@ -1,6 +1,6 @@
1
- export { Checkbox } from './chunk-DWE374JX.js';
2
- import './chunk-BBV4L5WO.js';
3
- import './chunk-2PXTVZ7H.js';
1
+ export { Checkbox } from './chunk-Z6SS4G4V.js';
2
+ import './chunk-6BIEW4WJ.js';
3
+ import './chunk-M5VL22MY.js';
4
4
  import './chunk-ZVDN3GRI.js';
5
5
  import './chunk-MI4QUKQS.js';
6
6
  //# sourceMappingURL=checkbox.js.map
@@ -26,5 +26,5 @@ function Stack({ as = "div", gap = 3, align, justify, className, ref, children,
26
26
  Stack.displayName = "Stack";
27
27
 
28
28
  export { Stack };
29
- //# sourceMappingURL=chunk-7DS4I7OJ.js.map
30
- //# sourceMappingURL=chunk-7DS4I7OJ.js.map
29
+ //# sourceMappingURL=chunk-2E2ESMS2.js.map
30
+ //# sourceMappingURL=chunk-2E2ESMS2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/stack/Stack.module.css","../src/stack/Stack.tsx"],"names":["stack"],"mappings":";;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAKG,KAAA,EAAAA;AAAA,CAAA;;;AC4BI,SAAS,KAAA,CAAM,EAAE,EAAA,GAAK,KAAA,EAAO,GAAA,GAAM,CAAA,EAAG,KAAA,EAAO,OAAA,EAAS,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,MAAK,EAAe;AAC5G,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAA;AAAA;AAAA,MAEA,MAAM,IAAA,CAAK,IAAA,KAAS,OAAO,IAAA,IAAQ,EAAA,KAAO,OAAO,MAAA,GAAS,MAAA,CAAA;AAAA,MAC1D,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,UAAA,EAAY,GAAA;AAAA,MACZ,YAAA,EAAc,KAAA;AAAA,MACd,cAAA,EAAgB;AAAA,KAElB;AAAA,IACA;AAAA,GACF;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-2E2ESMS2.js","sourcesContent":["/* Every value is a token (--stack-gap-*). Gap, alignment and justification are data attributes. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .stack {\n display: flex;\n flex-direction: column;\n gap: var(--stack-gap-3);\n margin: 0;\n padding: 0;\n list-style: none;\n\n &[data-gap=\"1\"] { gap: var(--stack-gap-1); }\n &[data-gap=\"2\"] { gap: var(--stack-gap-2); }\n &[data-gap=\"3\"] { gap: var(--stack-gap-3); }\n &[data-gap=\"4\"] { gap: var(--stack-gap-4); }\n &[data-gap=\"5\"] { gap: var(--stack-gap-5); }\n &[data-gap=\"6\"] { gap: var(--stack-gap-6); }\n &[data-gap=\"7\"] { gap: var(--stack-gap-7); }\n &[data-gap=\"8\"] { gap: var(--stack-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 }\n}\n","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './Stack.module.css';\n\nexport type StackGap = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\nexport type StackAlign = 'start' | 'center' | 'end' | 'stretch';\nexport type StackJustify = 'start' | 'center' | 'end' | 'between';\nexport type StackElement = 'div' | 'section' | 'nav' | 'ul' | 'ol' | 'li';\n\nexport interface StackProps extends HTMLAttributes<HTMLElement> {\n /** @default 'div' */\n as?: StackElement;\n /** Step on the spacing scale (`--space-1` … `--space-8`). @default 3 */\n gap?: StackGap;\n align?: StackAlign;\n justify?: StackJustify;\n\n ref?: Ref<HTMLElement>;\n children: ReactNode;\n}\n\n/**\n * A flex column whose gap is a step on the spacing scale, so consumers\n * compose layout from tokens instead of writing padding and margins.\n * Rendered as `ul`/`ol` it keeps `role=\"list\"` explicitly, because Safari\n * stops announcing a list once `list-style` is removed.\n *\n * @status stable\n * @category Layout\n * @accessibility Layout only: no role unless rendered as `ul`/`ol`, where `role=\"list\"` is kept explicitly because Safari drops list semantics without markers.\n * @do Use `as=\"ul\"` for a list of like items so the count is announced.\n * @dont Use it to space unrelated regions; it is one flex column.\n */\nexport function Stack({ as = 'div', gap = 3, align, justify, className, ref, children, ...rest }: StackProps) {\n return createElement(\n as,\n {\n ...rest,\n ref,\n // Safari drops list semantics when list-style is none; say it explicitly.\n role: rest.role ?? (as === 'ul' || as === 'ol' ? 'list' : undefined),\n className: classes(styles.stack, className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n\n },\n children,\n );\n}\n\nStack.displayName = 'Stack';\n"]}
@@ -121,5 +121,5 @@ Tabs.Tab = TabsTab;
121
121
  Tabs.Panel = TabsPanel;
122
122
 
123
123
  export { Tabs };
124
- //# sourceMappingURL=chunk-FH54XQ35.js.map
125
- //# sourceMappingURL=chunk-FH54XQ35.js.map
124
+ //# sourceMappingURL=chunk-2IYYES7V.js.map
125
+ //# sourceMappingURL=chunk-2IYYES7V.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tabs/Tabs.module.css","../src/tabs/Tabs.tsx"],"names":["root","list","tab","panel"],"mappings":"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","file":"chunk-2IYYES7V.js","sourcesContent":["/* Every value is a token (--tabs-*). The indicator is a logical border on the active tab, so vertical orientation just flips the side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n .root {\n display: flex;\n flex-direction: column;\n gap: 0;\n\n &[data-orientation=\"vertical\"] {\n flex-direction: row;\n }\n }\n\n .list {\n display: flex;\n gap: var(--tabs-gap);\n border-block-end: 1px solid var(--tabs-list-border);\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column;\n border-block-end: none;\n border-inline-end: 1px solid var(--tabs-list-border);\n }\n }\n\n .tab {\n position: relative;\n padding-block: var(--tabs-tab-padding-block);\n padding-inline: var(--tabs-tab-padding-inline);\n border: none;\n border-radius: var(--tabs-tab-radius) var(--tabs-tab-radius) 0 0;\n background-color: transparent;\n color: var(--tabs-tab-fg);\n font-size: var(--tabs-tab-font-size);\n font-weight: var(--tabs-tab-font-weight);\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition:\n color var(--tabs-motion-duration) var(--motion-easing-standard),\n background-color var(--tabs-motion-duration) var(--motion-easing-standard);\n\n /* Indicator: a transparent border always present, coloured when active, so nothing shifts. */\n border-block-end: 2px solid transparent;\n\n &:focus-visible {\n outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n outline-offset: calc(-1 * var(--tabs-focus-ring-offset));\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n &[data-state=\"active\"] {\n color: var(--tabs-tab-fg-active);\n border-block-end-color: var(--tabs-tab-indicator);\n }\n\n &:hover:not(:disabled, [data-state=\"active\"]) {\n color: var(--tabs-tab-fg-hover);\n background-color: var(--tabs-tab-bg-hover);\n }\n }\n\n .list[data-orientation=\"vertical\"] .tab {\n border-radius: var(--tabs-tab-radius) 0 0 var(--tabs-tab-radius);\n border-block-end: none;\n border-inline-end: 2px solid transparent;\n text-align: start;\n\n &[data-state=\"active\"] {\n border-inline-end-color: var(--tabs-tab-indicator);\n }\n }\n\n .panel {\n padding-block: var(--tabs-panel-padding-block);\n color: var(--tabs-panel-fg);\n\n &:focus-visible {\n outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n outline-offset: var(--tabs-focus-ring-offset);\n }\n }\n\n .root[data-orientation=\"vertical\"] .panel {\n padding-block: 0;\n padding-inline-start: var(--tabs-tab-padding-inline);\n }\n}\n","import {\n createContext,\n useCallback,\n useContext,\n useId,\n useState,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type ReactNode,\n type Ref,\n} from 'react';\nimport { classes } from '../internal/classes';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Tabs.module.css';\n\nexport type TabsOrientation = 'horizontal' | 'vertical';\nexport type TabsActivation = 'automatic' | 'manual';\n\ninterface TabsContextValue {\n value: string;\n setValue: (value: string) => void;\n orientation: TabsOrientation;\n activation: TabsActivation;\n baseId: string;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabs(component: string): TabsContextValue {\n const context = useContext(TabsContext);\n if (!context) throw new Error(`${component} must be rendered inside <Tabs>`);\n return context;\n}\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n /** Controlled selected tab. */\n value?: string;\n /** Initially selected tab when uncontrolled. */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** Layout and arrow-key axis. @default 'horizontal' */\n orientation?: TabsOrientation;\n /**\n * `automatic` selects a tab when it receives focus (arrow keys); `manual`\n * moves focus only and selects on Enter, Space or click.\n * @default 'automatic'\n */\n activation?: TabsActivation;\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\n/**\n * Tabbed sections following the WAI-ARIA Tabs pattern. Compose with\n * `Tabs.List`, `Tabs.Tab` and `Tabs.Panel`; ids and ARIA relationships are\n * wired automatically. One tab stop: arrows move between tabs, Home and End\n * jump to the ends, disabled tabs are skipped. State on the DOM:\n * `data-orientation`, `data-state=\"active|inactive\"`.\n *\n * @status stable\n * @category Navigation\n * @accessibility The WAI-ARIA Tabs pattern: `tablist` with `aria-orientation`, `tab`s carrying `aria-selected` and `aria-controls`, `tabpanel`s labelled by their tab. One tab stop: arrows move (and select with automatic activation), Home/End jump, disabled tabs are skipped.\n * @do Use `activation=\"manual\"` when switching a tab is expensive.\n * Name the `Tabs.List` with `aria-label`.\n * @dont Use tabs for sequential steps; use a stepper pattern.\n * Put a link inside a tab.\n */\nexport function Tabs({\n value,\n defaultValue,\n onValueChange,\n orientation = 'horizontal',\n activation = 'automatic',\n className,\n ref,\n children,\n ...rest\n}: TabsProps) {\n const [uncontrolled, setUncontrolled] = useState(defaultValue ?? '');\n const controlled = value !== undefined;\n const current = controlled ? value : uncontrolled;\n const setValue = useCallback(\n (next: string) => {\n if (!controlled) setUncontrolled(next);\n onValueChange?.(next);\n },\n [controlled, onValueChange],\n );\n const baseId = useId();\n\n return (\n <TabsContext.Provider value={{ value: current, setValue, orientation, activation, baseId }}>\n <div {...rest} ref={ref} className={classes(styles.root, className)} data-orientation={orientation}>\n {children}\n </div>\n </TabsContext.Provider>\n );\n}\n\ninterface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\nfunction TabsList({ className, ref, onKeyDown, children, ...rest }: TabsListProps) {\n const { orientation, activation, setValue } = useTabs('Tabs.List');\n const rove = useRovingFocus({\n orientation,\n selector: '[role=\"tab\"]',\n onFocusItem: (item) => {\n if (activation === 'automatic' && item.dataset.value !== undefined) setValue(item.dataset.value);\n },\n });\n return (\n <div\n {...rest}\n ref={ref}\n role=\"tablist\"\n aria-orientation={orientation}\n className={classes(styles.list, className)}\n data-orientation={orientation}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (!event.defaultPrevented) rove(event);\n }}\n >\n {children}\n </div>\n );\n}\n\ninterface TabsTabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n /** Identifies the tab; the panel with the same value belongs to it. */\n value: string;\n ref?: Ref<HTMLButtonElement>;\n children: ReactNode;\n}\n\nfunction TabsTab({ value, disabled, className, onClick, ref, children, ...rest }: TabsTabProps) {\n const tabs = useTabs('Tabs.Tab');\n const selected = tabs.value === value;\n return (\n <button\n {...rest}\n ref={ref}\n type=\"button\"\n role=\"tab\"\n id={`${tabs.baseId}-tab-${value}`}\n aria-selected={selected}\n aria-controls={`${tabs.baseId}-panel-${value}`}\n tabIndex={selected ? 0 : -1}\n disabled={disabled}\n className={classes(styles.tab, className)}\n data-value={value}\n data-state={selected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) tabs.setValue(value);\n }}\n >\n {children}\n </button>\n );\n}\n\ninterface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n ref?: Ref<HTMLDivElement>;\n children?: ReactNode;\n}\n\nfunction TabsPanel({ value, className, ref, children, ...rest }: TabsPanelProps) {\n const tabs = useTabs('Tabs.Panel');\n const selected = tabs.value === value;\n return (\n <div\n {...rest}\n ref={ref}\n role=\"tabpanel\"\n id={`${tabs.baseId}-panel-${value}`}\n aria-labelledby={`${tabs.baseId}-tab-${value}`}\n hidden={!selected}\n tabIndex={0}\n className={classes(styles.panel, className)}\n data-state={selected ? 'active' : 'inactive'}\n >\n {children}\n </div>\n );\n}\n\nTabs.displayName = 'Tabs';\nTabsList.displayName = 'Tabs.List';\nTabsTab.displayName = 'Tabs.Tab';\nTabsPanel.displayName = 'Tabs.Panel';\n\nTabs.List = TabsList;\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\n"]}
@@ -2,7 +2,7 @@ import { useRovingFocus } from './chunk-I5OZ63W7.js';
2
2
  import { useDismiss } from './chunk-NAYFLTK6.js';
3
3
  import { useFloatingPosition } from './chunk-U6QRAD73.js';
4
4
  import { renderAsChild } from './chunk-ZVDN3GRI.js';
5
- import { Icon } from './chunk-ASNTNTJW.js';
5
+ import { Icon } from './chunk-O5LII5XP.js';
6
6
  import { classes } from './chunk-MI4QUKQS.js';
7
7
  import { createContext, useState, useCallback, useId, useRef, useEffect, useContext } from 'react';
8
8
  import { createPortal } from 'react-dom';
@@ -177,5 +177,5 @@ Menu.Item = MenuItem;
177
177
  Menu.Separator = MenuSeparator;
178
178
 
179
179
  export { Menu };
180
- //# sourceMappingURL=chunk-GTTXRDXV.js.map
181
- //# sourceMappingURL=chunk-GTTXRDXV.js.map
180
+ //# sourceMappingURL=chunk-2NSQPN7S.js.map
181
+ //# sourceMappingURL=chunk-2NSQPN7S.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu/Menu.module.css","../src/menu/Menu.tsx"],"names":["content","item","label","separator"],"mappings":"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","file":"chunk-2NSQPN7S.js","sourcesContent":["/* 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","import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { Icon } from '../icon';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport { useFloatingPosition, type FloatingPlacement } from '../internal/floating';\nimport { useDismiss } from '../internal/useDismiss';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Menu.module.css';\n\nexport type MenuPlacement = FloatingPlacement;\ntype FocusTarget = 'first' | 'last' | null;\n\ninterface MenuContextValue {\n open: boolean;\n setOpen: (open: boolean, focus?: FocusTarget) => void;\n focusTarget: FocusTarget;\n triggerId: string;\n contentId: string;\n floating: ReturnType<typeof useFloatingPosition>;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nfunction useMenu(part: string): MenuContextValue {\n const context = useContext(MenuContext);\n if (!context) throw new Error(`${part} must be rendered inside <Menu>`);\n return context;\n}\n\nexport interface MenuProps {\n open?: boolean;\n /** @default false */\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** @default 'bottom-start' */\n placement?: MenuPlacement;\n children: ReactNode;\n}\n\n/**\n * A list of actions opened from a button, following the WAI-ARIA menu\n * button pattern: Down/Up arrow on the trigger opens and focuses the first\n * or last item, arrows move with wraparound, Home and End jump, typing\n * jumps to the next item starting with that letter, Enter, Space or click\n * selects and closes, Escape and Tab close and return focus. Compose with\n * `Menu.Trigger`, `Menu.Content`, `Menu.Item` and `Menu.Separator`.\n *\n * @status stable\n * @category Overlays\n * @accessibility The WAI-ARIA menu button pattern: the trigger has `aria-haspopup=\"menu\"` and `aria-expanded`; the popup is `role=\"menu\"` named by the trigger with `menuitem` children. Down/Up opens to the first/last item, arrows wrap, Home/End jump, typing jumps, Enter/Space/click select and close, Escape and Tab close and return focus.\n * @do Use `tone=\"danger\"` for destructive items and put them after a separator.\n * @dont Put form controls or links that navigate inside a menu; those want Popover or a navigation list.\n * Use it for navigation between pages.\n */\nexport function Menu({ open, defaultOpen = false, onOpenChange, placement = 'bottom-start', children }: MenuProps) {\n const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n const [focusTarget, setFocusTarget] = useState<FocusTarget>(null);\n const controlled = open !== undefined;\n const isOpen = controlled ? open : uncontrolled;\n const setOpen = useCallback(\n (next: boolean, focus: FocusTarget = null) => {\n setFocusTarget(next ? focus : null);\n if (!controlled) setUncontrolled(next);\n onOpenChange?.(next);\n },\n [controlled, onOpenChange],\n );\n const id = useId();\n const floating = useFloatingPosition({ open: isOpen, placement });\n\n return (\n <MenuContext.Provider value={{ open: isOpen, setOpen, focusTarget, triggerId: `${id}-trigger`, contentId: `${id}-menu`, floating }}>\n {children}\n </MenuContext.Provider>\n );\n}\n\nfunction mergeRefs<T>(a: Ref<T> | undefined, b: (node: T | null) => void) {\n return (node: T | null) => {\n b(node);\n if (typeof a === 'function') a(node);\n else if (a) a.current = node;\n };\n}\n\ninterface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n ref?: Ref<HTMLButtonElement>;\n children: ReactNode;\n}\n\nfunction MenuTrigger({ asChild = false, onClick, onKeyDown, ref, children, ...rest }: MenuTriggerProps) {\n const menu = useMenu('Menu.Trigger');\n const props = {\n ...rest,\n id: menu.triggerId,\n 'aria-haspopup': 'menu' as const,\n 'aria-expanded': menu.open,\n 'aria-controls': menu.open ? menu.contentId : undefined,\n onClick: (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n if (!event.defaultPrevented) menu.setOpen(!menu.open, 'first');\n },\n onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n menu.setOpen(true, event.key === 'ArrowDown' ? 'first' : 'last');\n }\n },\n };\n const setRef = mergeRefs(ref, menu.floating.refs.setReference);\n // eslint-disable-next-line react-hooks/refs -- forwarded to the reference element, not read\n if (asChild) return renderAsChild('Menu.Trigger', children, { ...props, ref: setRef });\n return (\n <button type=\"button\" {...props} ref={setRef}>\n {children}\n </button>\n );\n}\n\ninterface MenuContentProps extends HTMLAttributes<HTMLDivElement> {\n ref?: Ref<HTMLDivElement>;\n children: ReactNode;\n}\n\nfunction MenuContent({ className, onKeyDown, ref, children, ...rest }: MenuContentProps) {\n const menu = useMenu('Menu.Content');\n const { refs, positionStyle, placement } = menu.floating;\n const contentRef = useRef<HTMLDivElement | null>(null);\n const rove = useRovingFocus({ orientation: 'vertical', selector: '[role=\"menuitem\"]' });\n\n useDismiss({\n open: menu.open,\n onDismiss: () => menu.setOpen(false),\n inside: () => [refs.reference.current as Element | null, refs.floating.current],\n });\n\n useEffect(() => {\n if (!menu.open) return;\n const content = contentRef.current;\n if (!content) return;\n const items = Array.from(content.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])'));\n const target = menu.focusTarget === 'last' ? items.at(-1) : items[0];\n (target ?? content).focus();\n return () => {\n const reference = refs.reference.current as HTMLElement | null;\n if (content.contains(document.activeElement) || document.activeElement === document.body) reference?.focus();\n };\n }, [menu.open, menu.focusTarget, refs.reference]);\n\n const typeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return false;\n const items = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])'));\n const current = items.indexOf(document.activeElement as HTMLElement);\n const ordered = [...items.slice(current + 1), ...items.slice(0, current + 1)];\n const match = ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(event.key.toLowerCase()));\n if (!match) return false;\n event.preventDefault();\n match.focus();\n return true;\n };\n\n if (!menu.open) return null;\n return createPortal(\n <div\n {...rest}\n ref={mergeRefs(ref, (node) => {\n contentRef.current = node;\n refs.setFloating(node);\n })}\n id={menu.contentId}\n role=\"menu\"\n aria-labelledby={menu.triggerId}\n tabIndex={-1}\n className={classes(styles.content, className)}\n data-placement={placement}\n // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts\n style={positionStyle}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n if (event.key === 'Tab') {\n menu.setOpen(false);\n return;\n }\n if (typeahead(event)) return;\n rove(event);\n }}\n >\n {children}\n </div>,\n document.body,\n );\n}\n\nexport type MenuItemTone = 'default' | 'danger';\n\ninterface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {\n /** Called when the item is chosen; the menu closes afterwards. */\n onSelect?: () => void;\n /** @default 'default' */\n tone?: MenuItemTone;\n /** Leading glyph, decorative. */\n icon?: ReactNode;\n ref?: Ref<HTMLButtonElement>;\n children: ReactNode;\n}\n\nfunction MenuItem({ onSelect, tone = 'default', icon, disabled, className, onClick, ref, children, ...rest }: MenuItemProps) {\n const menu = useMenu('Menu.Item');\n return (\n <button\n {...rest}\n ref={ref}\n type=\"button\"\n role=\"menuitem\"\n tabIndex={-1}\n aria-disabled={disabled || undefined}\n className={classes(styles.item, className)}\n data-tone={tone}\n data-disabled={disabled ? '' : undefined}\n onClick={(event) => {\n onClick?.(event);\n if (event.defaultPrevented || disabled) return;\n onSelect?.();\n menu.setOpen(false);\n }}\n >\n {icon && <Icon size=\"inherit\">{icon}</Icon>}\n <span className={styles.label}>{children}</span>\n </button>\n );\n}\n\nfunction MenuSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {\n return <div {...rest} role=\"separator\" className={classes(styles.separator, className)} />;\n}\n\nMenu.displayName = 'Menu';\nMenuTrigger.displayName = 'Menu.Trigger';\nMenuContent.displayName = 'Menu.Content';\nMenuItem.displayName = 'Menu.Item';\nMenuSeparator.displayName = 'Menu.Separator';\n\nMenu.Trigger = MenuTrigger;\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.Separator = MenuSeparator;\n"]}
@@ -37,5 +37,5 @@ Dialog.Body = ModalBody;
37
37
  Dialog.Footer = ModalFooter;
38
38
 
39
39
  export { Dialog, DialogSystem };
40
- //# sourceMappingURL=chunk-IDNGNQNV.js.map
41
- //# sourceMappingURL=chunk-IDNGNQNV.js.map
40
+ //# sourceMappingURL=chunk-55QUKGK2.js.map
41
+ //# sourceMappingURL=chunk-55QUKGK2.js.map