@editora/ui-core 0.1.18 → 0.1.20

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 (307) hide show
  1. package/dist/{ElementBase-1b301e7f.js → ElementBase-EV6mVBUV.js} +1 -1
  2. package/dist/{ElementBase-909688f3.mjs → ElementBase-YlTLMsGk.mjs} +3 -3
  3. package/dist/accordion.cjs.js +3 -3
  4. package/dist/accordion.esm.js +39 -62
  5. package/dist/alert-dialog.cjs.js +19 -19
  6. package/dist/alert-dialog.esm.js +69 -87
  7. package/dist/alert.cjs.js +1 -1
  8. package/dist/alert.esm.js +4 -7
  9. package/dist/anchor.cjs.js +2 -2
  10. package/dist/anchor.esm.js +3 -3
  11. package/dist/animated-beam.cjs.js +83 -83
  12. package/dist/animated-beam.esm.js +250 -277
  13. package/dist/animated-list.cjs.js +4 -4
  14. package/dist/animated-list.esm.js +47 -61
  15. package/dist/animated-text.cjs.js +2 -2
  16. package/dist/animated-text.esm.js +13 -24
  17. package/dist/app-header.cjs.js +3 -3
  18. package/dist/app-header.esm.js +11 -13
  19. package/dist/aspect-ratio.cjs.js +1 -1
  20. package/dist/aspect-ratio.esm.js +4 -7
  21. package/dist/avatar.cjs.js +1 -1
  22. package/dist/avatar.esm.js +7 -13
  23. package/dist/badge.cjs.js +1 -1
  24. package/dist/badge.esm.js +4 -7
  25. package/dist/block-controls.cjs.js +2 -2
  26. package/dist/block-controls.esm.js +19 -35
  27. package/dist/box.cjs.js +1 -1
  28. package/dist/box.esm.js +8 -15
  29. package/dist/breadcrumb.cjs.js +2 -2
  30. package/dist/breadcrumb.esm.js +20 -37
  31. package/dist/button.cjs.js +1 -521
  32. package/dist/button.esm.js +2 -669
  33. package/dist/{calendar-2c11b824.mjs → calendar-DLY4acgn.mjs} +293 -342
  34. package/dist/{calendar-a8735e40.js → calendar-Dkof-FTK.js} +25 -25
  35. package/dist/calendar.cjs.js +1 -1
  36. package/dist/calendar.esm.js +8 -9
  37. package/dist/card.cjs.js +4 -4
  38. package/dist/card.esm.js +13 -19
  39. package/dist/chart.cjs.js +64 -64
  40. package/dist/chart.esm.js +223 -254
  41. package/dist/checkbox.cjs.js +1 -1
  42. package/dist/checkbox.esm.js +2 -3
  43. package/dist/collapsible.cjs.js +1 -1
  44. package/dist/collapsible.esm.js +5 -9
  45. package/dist/{collection-a1aac0c6.mjs → collection-C7URGjEI.mjs} +8 -14
  46. package/dist/collection.cjs.js +1 -1
  47. package/dist/collection.esm.js +4 -7
  48. package/dist/color-picker.cjs.js +9 -9
  49. package/dist/color-picker.esm.js +189 -252
  50. package/dist/combobox.cjs.js +13 -13
  51. package/dist/combobox.esm.js +93 -126
  52. package/dist/command-palette.cjs.js +3 -3
  53. package/dist/command-palette.esm.js +19 -30
  54. package/dist/command.cjs.js +4 -4
  55. package/dist/command.esm.js +41 -53
  56. package/dist/components/ui-button.d.ts +1 -0
  57. package/dist/components/ui-button.d.ts.map +1 -1
  58. package/dist/components/ui-date-picker.d.ts.map +1 -1
  59. package/dist/components/ui-date-range-picker.d.ts.map +1 -1
  60. package/dist/components/ui-date-range-time-picker.d.ts +1 -0
  61. package/dist/components/ui-date-range-time-picker.d.ts.map +1 -1
  62. package/dist/components/ui-date-time-picker.d.ts +1 -0
  63. package/dist/components/ui-date-time-picker.d.ts.map +1 -1
  64. package/dist/components/ui-orbiter.d.ts.map +1 -1
  65. package/dist/components/ui-skeleton.d.ts.map +1 -1
  66. package/dist/components/ui-split-button.d.ts +1 -0
  67. package/dist/components/ui-split-button.d.ts.map +1 -1
  68. package/dist/components/ui-time-picker.d.ts.map +1 -1
  69. package/dist/container.cjs.js +2 -2
  70. package/dist/container.esm.js +2 -3
  71. package/dist/context-menu.cjs.js +8 -8
  72. package/dist/context-menu.esm.js +157 -219
  73. package/dist/control-group.cjs.js +1 -1
  74. package/dist/control-group.esm.js +2 -3
  75. package/dist/data-table.cjs.js +4 -4
  76. package/dist/data-table.esm.js +299 -381
  77. package/dist/date-field.cjs.js +3 -3
  78. package/dist/date-field.esm.js +68 -80
  79. package/dist/date-picker.cjs.js +30 -9
  80. package/dist/date-picker.esm.js +90 -97
  81. package/dist/date-range-picker.cjs.js +22 -3
  82. package/dist/date-range-picker.esm.js +103 -108
  83. package/dist/date-range-time-picker.cjs.js +28 -12
  84. package/dist/date-range-time-picker.esm.js +137 -150
  85. package/dist/date-time-picker.cjs.js +25 -9
  86. package/dist/date-time-picker.esm.js +139 -155
  87. package/dist/date-time-utils-Dmost5Ee.js +1 -0
  88. package/dist/date-time-utils-y1N2gvG2.mjs +268 -0
  89. package/dist/description.cjs.js +1 -1
  90. package/dist/description.esm.js +3 -5
  91. package/dist/dialog.cjs.js +12 -12
  92. package/dist/dialog.esm.js +44 -63
  93. package/dist/direction-provider.cjs.js +1 -1
  94. package/dist/direction-provider.esm.js +2 -3
  95. package/dist/{dismissable-layer-9c7e6b58.mjs → dismissable-layer-BmPIoK80.mjs} +29 -33
  96. package/dist/dismissable-layer-DNfrKA20.js +1 -0
  97. package/dist/dismissable-layer.cjs.js +2 -2
  98. package/dist/dismissable-layer.esm.js +4 -6
  99. package/dist/dock.cjs.js +5 -5
  100. package/dist/dock.esm.js +134 -155
  101. package/dist/drawer.cjs.js +2 -2
  102. package/dist/drawer.esm.js +18 -35
  103. package/dist/dropdown.cjs.js +2 -2
  104. package/dist/dropdown.esm.js +119 -149
  105. package/dist/dropzone.cjs.js +1 -1
  106. package/dist/dropzone.esm.js +0 -1
  107. package/dist/empty-state.cjs.js +1 -1
  108. package/dist/empty-state.esm.js +1 -1
  109. package/dist/field-error.cjs.js +1 -1
  110. package/dist/field-error.esm.js +3 -5
  111. package/dist/field.cjs.js +5 -5
  112. package/dist/field.esm.js +27 -34
  113. package/dist/fieldset.cjs.js +4 -4
  114. package/dist/fieldset.esm.js +19 -24
  115. package/dist/file-upload.cjs.js +4 -4
  116. package/dist/file-upload.esm.js +69 -93
  117. package/dist/flex.cjs.js +1 -1
  118. package/dist/flex.esm.js +5 -9
  119. package/dist/floating-toolbar.cjs.js +4 -4
  120. package/dist/floating-toolbar.esm.js +60 -85
  121. package/dist/focus-scope-Bwug2gDv.js +1 -0
  122. package/dist/{focus-scope-103833ee.mjs → focus-scope-CmEsG5UZ.mjs} +39 -48
  123. package/dist/focus-scope.cjs.js +2 -2
  124. package/dist/focus-scope.esm.js +15 -20
  125. package/dist/form.cjs.js +2 -2
  126. package/dist/form.esm.js +26 -53
  127. package/dist/gantt.cjs.js +43 -43
  128. package/dist/gantt.esm.js +295 -322
  129. package/dist/grid.cjs.js +1 -1
  130. package/dist/grid.esm.js +5 -9
  131. package/dist/hover-card.cjs.js +4 -4
  132. package/dist/hover-card.esm.js +22 -28
  133. package/dist/icon-cloud.cjs.js +7 -7
  134. package/dist/icon-cloud.esm.js +48 -62
  135. package/dist/icon.cjs.js +1 -1
  136. package/dist/icon.esm.js +2 -4
  137. package/dist/index.cjs.js +1 -1
  138. package/dist/index.esm.js +378 -390
  139. package/dist/inline-edit.cjs.js +11 -11
  140. package/dist/inline-edit.esm.js +32 -36
  141. package/dist/input.cjs.js +17 -17
  142. package/dist/input.esm.js +50 -63
  143. package/dist/label.cjs.js +2 -2
  144. package/dist/label.esm.js +8 -17
  145. package/dist/layout.cjs.js +2 -2
  146. package/dist/layout.esm.js +20 -26
  147. package/dist/listbox-B6QgECax.js +46 -0
  148. package/dist/listbox-DJamVeFj.mjs +200 -0
  149. package/dist/listbox.cjs.js +1 -1
  150. package/dist/listbox.esm.js +2 -4
  151. package/dist/marquee.cjs.js +5 -5
  152. package/dist/marquee.esm.js +33 -50
  153. package/dist/masonry-grid.cjs.js +1 -1
  154. package/dist/masonry-grid.esm.js +5 -9
  155. package/dist/menu.cjs.js +3 -3
  156. package/dist/menu.esm.js +106 -126
  157. package/dist/menubar.cjs.js +5 -5
  158. package/dist/menubar.esm.js +118 -164
  159. package/dist/meter.cjs.js +2 -2
  160. package/dist/meter.esm.js +4 -4
  161. package/dist/multi-select.cjs.js +4 -4
  162. package/dist/multi-select.esm.js +120 -140
  163. package/dist/navigation-menu.cjs.js +4 -4
  164. package/dist/navigation-menu.esm.js +44 -55
  165. package/dist/number-field.cjs.js +2 -2
  166. package/dist/number-field.esm.js +73 -98
  167. package/dist/number-ticker.cjs.js +3 -3
  168. package/dist/number-ticker.esm.js +22 -43
  169. package/dist/odometer.cjs.js +1 -1
  170. package/dist/odometer.esm.js +5 -9
  171. package/dist/orbiter.cjs.js +13 -13
  172. package/dist/orbiter.esm.js +79 -90
  173. package/dist/{overlayManager-5bbd4dc3.mjs → overlayManager-BJjU1VA8.mjs} +4 -5
  174. package/dist/{overlayManager-0eda4e08.js → overlayManager-CSy3fJmJ.js} +1 -1
  175. package/dist/pagination.cjs.js +2 -2
  176. package/dist/pagination.esm.js +14 -18
  177. package/dist/{panel-group-a376cc5e.mjs → panel-group-8sVNnGxg.mjs} +24 -46
  178. package/dist/panel-group-CaD0_KQf.js +36 -0
  179. package/dist/panel-group.cjs.js +1 -1
  180. package/dist/panel-group.esm.js +2 -5
  181. package/dist/panel.cjs.js +4 -4
  182. package/dist/panel.esm.js +8 -10
  183. package/dist/password-field.cjs.js +9 -9
  184. package/dist/password-field.esm.js +62 -82
  185. package/dist/pin-input.cjs.js +3 -3
  186. package/dist/pin-input.esm.js +33 -39
  187. package/dist/placement-grid.cjs.js +4 -4
  188. package/dist/placement-grid.esm.js +108 -131
  189. package/dist/plugin-panel.cjs.js +7 -7
  190. package/dist/plugin-panel.esm.js +13 -15
  191. package/dist/popover.cjs.js +2 -2
  192. package/dist/popover.esm.js +21 -31
  193. package/dist/portal-DgpQ3Jo1.js +1 -0
  194. package/dist/{portal-fe73e5cc.mjs → portal-bR42gHvG.mjs} +43 -48
  195. package/dist/portal.cjs.js +2 -2
  196. package/dist/portal.esm.js +10 -19
  197. package/dist/{positioner-e9770c66.mjs → positioner-D0VGxtYU.mjs} +189 -209
  198. package/dist/positioner-D_fqyx_j.js +1 -0
  199. package/dist/positioner.cjs.js +2 -2
  200. package/dist/positioner.esm.js +11 -18
  201. package/dist/presence.cjs.js +1 -1
  202. package/dist/presence.esm.js +7 -13
  203. package/dist/progress.cjs.js +1 -1
  204. package/dist/progress.esm.js +5 -9
  205. package/dist/quick-actions.cjs.js +6 -6
  206. package/dist/quick-actions.esm.js +52 -62
  207. package/dist/radio-group.cjs.js +13 -13
  208. package/dist/radio-group.esm.js +39 -51
  209. package/dist/radio.cjs.js +1 -1
  210. package/dist/radio.esm.js +5 -9
  211. package/dist/rating.cjs.js +1 -1
  212. package/dist/rating.esm.js +12 -23
  213. package/dist/{roving-focus-group-4350c9a7.mjs → roving-focus-group-Dbm1Jko_.mjs} +3 -6
  214. package/dist/roving-focus-group.cjs.js +1 -1
  215. package/dist/roving-focus-group.esm.js +3 -5
  216. package/dist/runtime-CTaOSmBj.js +1 -0
  217. package/dist/{runtime-161f68a2.mjs → runtime-D1gFh1fS.mjs} +338 -366
  218. package/dist/runtime.cjs.js +1 -1
  219. package/dist/runtime.esm.js +6 -6
  220. package/dist/scroll-area.cjs.js +3 -3
  221. package/dist/scroll-area.esm.js +38 -46
  222. package/dist/{scroll-lock-31da444f.mjs → scroll-lock-LfqXXqsu.mjs} +5 -9
  223. package/dist/section.cjs.js +1 -1
  224. package/dist/section.esm.js +1 -1
  225. package/dist/select.cjs.js +7 -7
  226. package/dist/select.esm.js +67 -97
  227. package/dist/selection-popup.cjs.js +1 -1
  228. package/dist/selection-popup.esm.js +8 -15
  229. package/dist/separator.cjs.js +1 -1
  230. package/dist/separator.esm.js +1 -1
  231. package/dist/sidebar.cjs.js +18 -18
  232. package/dist/sidebar.esm.js +117 -139
  233. package/dist/skeleton.cjs.js +11 -11
  234. package/dist/skeleton.esm.js +27 -24
  235. package/dist/slider.cjs.js +1 -1
  236. package/dist/slider.esm.js +6 -11
  237. package/dist/slot.cjs.js +4 -4
  238. package/dist/slot.esm.js +16 -19
  239. package/dist/sortable.cjs.js +45 -45
  240. package/dist/sortable.esm.js +421 -524
  241. package/dist/spinning-text.cjs.js +12 -12
  242. package/dist/spinning-text.esm.js +80 -92
  243. package/dist/split-button.cjs.js +4 -4
  244. package/dist/split-button.esm.js +77 -62
  245. package/dist/splitter.cjs.js +1 -1
  246. package/dist/splitter.esm.js +1 -1
  247. package/dist/stepper.cjs.js +8 -8
  248. package/dist/stepper.esm.js +32 -52
  249. package/dist/switch.cjs.js +7 -7
  250. package/dist/switch.esm.js +23 -31
  251. package/dist/table.cjs.js +2 -2
  252. package/dist/table.esm.js +46 -56
  253. package/dist/tabs.cjs.js +3 -3
  254. package/dist/tabs.esm.js +35 -55
  255. package/dist/tags-input.cjs.js +4 -4
  256. package/dist/tags-input.esm.js +45 -62
  257. package/dist/textarea.cjs.js +6 -6
  258. package/dist/textarea.esm.js +32 -41
  259. package/dist/time-field.cjs.js +4 -4
  260. package/dist/time-field.esm.js +70 -84
  261. package/dist/time-picker.cjs.js +29 -21
  262. package/dist/time-picker.esm.js +96 -110
  263. package/dist/timeline.cjs.js +1 -1
  264. package/dist/timeline.esm.js +3 -5
  265. package/dist/toast.cjs.js +2 -2
  266. package/dist/toast.esm.js +33 -47
  267. package/dist/toggle-group.cjs.js +6 -6
  268. package/dist/toggle-group.esm.js +85 -105
  269. package/dist/toggle.cjs.js +1 -1
  270. package/dist/toggle.esm.js +3 -5
  271. package/dist/toolbar.cjs.js +1 -1
  272. package/dist/toolbar.esm.js +13 -24
  273. package/dist/tooltip.cjs.js +2 -2
  274. package/dist/tooltip.esm.js +31 -42
  275. package/dist/transfer-list.cjs.js +19 -19
  276. package/dist/transfer-list.esm.js +98 -111
  277. package/dist/{tree-dcd74a4a.mjs → tree-B3kE8ESs.mjs} +55 -62
  278. package/dist/tree-Dx_kv_ih.js +39 -0
  279. package/dist/tree-item.cjs.js +2 -2
  280. package/dist/tree-item.esm.js +2 -3
  281. package/dist/tree.cjs.js +1 -1
  282. package/dist/tree.esm.js +2 -5
  283. package/dist/ui-button-Q0GNNWKC.mjs +665 -0
  284. package/dist/ui-button-rXQOS9QJ.js +521 -0
  285. package/dist/{icon-9e9da03b.js → ui-icon-BzVNC_lr.js} +4 -4
  286. package/dist/{icon-e2a85cc1.mjs → ui-icon-YI6lyuqU.mjs} +58 -65
  287. package/dist/visually-hidden.cjs.js +1 -1
  288. package/dist/visually-hidden.esm.js +1 -1
  289. package/dist/wizard.cjs.js +14 -14
  290. package/dist/wizard.esm.js +85 -105
  291. package/package.json +3 -3
  292. package/dist/date-time-utils-66480de4.js +0 -1
  293. package/dist/date-time-utils-a2c7af25.mjs +0 -307
  294. package/dist/dismissable-layer-193e3bed.js +0 -1
  295. package/dist/focus-scope-2b12b4e7.js +0 -1
  296. package/dist/listbox-308789a0.mjs +0 -210
  297. package/dist/listbox-ef2f708e.js +0 -46
  298. package/dist/panel-group-40254cdd.js +0 -36
  299. package/dist/portal-c69756c0.js +0 -1
  300. package/dist/positioner-33529bb8.js +0 -1
  301. package/dist/runtime-3f13807b.js +0 -1
  302. package/dist/tree-0a7a8d05.js +0 -39
  303. /package/dist/{collection-a2969ad2.js → collection-qv8A8rq4.js} +0 -0
  304. /package/dist/{menu-item-styles-27fdbac4.mjs → menu-item-styles-CZiPwPwl.mjs} +0 -0
  305. /package/dist/{menu-item-styles-83ad1e22.js → menu-item-styles-CbNUEwP2.js} +0 -0
  306. /package/dist/{roving-focus-group-5c059bf9.js → roving-focus-group-BdJ_4Njm.js} +0 -0
  307. /package/dist/{scroll-lock-d7b0df21.js → scroll-lock-BX6e3Ced.js} +0 -0
@@ -1,521 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("./ElementBase-1b301e7f.js"),F=`
2
- :host {
3
- --ui-btn-radius: var(--ui-control-radius, var(--ui-radius, 4px));
4
- --ui-btn-min-height: var(--ui-control-min-height, var(--base-button-height-md, 40px));
5
- --ui-btn-padding-inline: var(--ui-control-padding-inline, 14px);
6
- --ui-btn-gap: var(--ui-control-gap, var(--ui-default-gap, 8px));
7
- --ui-btn-font-size: var(--ui-control-font-size, var(--ui-default-font-size, var(--ui-font-size-md, var(--font-size-2, 14px))));
8
- --ui-btn-font-weight: 400;
9
- --ui-btn-letter-spacing: var(--ui-default-letter-spacing, var(--letter-spacing-2, 0em));
10
- --ui-btn-duration: var(--ui-motion-base, 160ms);
11
- --ui-btn-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
12
-
13
- --ui-btn-accent: var(--ui-color-primary, #2563eb);
14
- --ui-btn-accent-strong: color-mix(in srgb, var(--ui-btn-accent) 82%, #0f172a 18%);
15
- --ui-btn-accent-soft: color-mix(in srgb, var(--ui-btn-accent) 10%, var(--ui-color-surface, #ffffff));
16
-
17
- --ui-btn-surface: var(--ui-color-surface, #ffffff);
18
- --ui-btn-surface-alt: var(--ui-color-surface-alt, #f8fafc);
19
- --ui-btn-text: var(--ui-color-text, #0f172a);
20
- --ui-btn-muted: var(--ui-color-muted, #64748b);
21
- --ui-btn-ring: var(--ui-color-focus-ring, #2563eb);
22
-
23
- display: inline-flex;
24
- vertical-align: middle;
25
- box-sizing: border-box;
26
- color-scheme: light dark;
27
- font-family: var(--ui-font-family, var(--default-font-family, system-ui, sans-serif));
28
- }
29
-
30
- :host([block]) {
31
- display: flex;
32
- inline-size: 100%;
33
- }
34
-
35
- :host([tone="neutral"]) {
36
- --ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
37
- }
38
-
39
- :host([tone="info"]) {
40
- --ui-btn-accent: var(--ui-color-primary, #2563eb);
41
- }
42
-
43
- :host([tone="success"]) {
44
- --ui-btn-accent: var(--ui-color-success, #16a34a);
45
- }
46
-
47
- :host([tone="warning"]) {
48
- --ui-btn-accent: var(--ui-color-warning, #d97706);
49
- }
50
-
51
- :host([tone="danger"]) {
52
- --ui-btn-accent: var(--ui-color-danger, #dc2626);
53
- }
54
-
55
- :host([state="error"]) {
56
- --ui-btn-accent: var(--ui-color-danger, #dc2626);
57
- }
58
-
59
- :host([state="success"]) {
60
- --ui-btn-accent: var(--ui-color-success, #16a34a);
61
- }
62
-
63
- :host([theme="dark"]) {
64
- --ui-btn-surface: color-mix(in srgb, var(--ui-color-surface, #0f172a) 88%, #020617 12%);
65
- --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-surface) 86%, #111827 14%);
66
- --ui-btn-text: var(--ui-color-text, #e2e8f0);
67
- --ui-btn-muted: var(--ui-color-muted, #94a3b8);
68
- }
69
-
70
- :host([theme="brand"]) {
71
- --ui-btn-accent: color-mix(in srgb, var(--ui-color-primary, #2563eb) 78%, #0ea5e9 22%);
72
- }
73
-
74
- :host([recipe="classic"]) .btn:not([disabled]) {
75
- background-image: linear-gradient(180deg, color-mix(in srgb, white 18%, transparent), color-mix(in srgb, black 10%, transparent));
76
- box-shadow:
77
- inset 0 1px 0 color-mix(in srgb, white 52%, transparent),
78
- inset 0 -1px 0 color-mix(in srgb, black 22%, transparent),
79
- 0 1px 2px rgba(15, 23, 42, 0.08),
80
- 0 8px 18px color-mix(in srgb, var(--ui-btn-accent) 22%, transparent);
81
- }
82
-
83
- :host([recipe="solid"]) .btn {
84
- background-image: none;
85
- }
86
-
87
- :host([recipe="soft"]) {
88
- --ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, white);
89
- --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, white);
90
- }
91
-
92
- :host([recipe="soft"]) .btn--secondary {
93
- border-color: transparent;
94
- box-shadow: none;
95
- }
96
-
97
- :host([recipe="surface"]) {
98
- --ui-btn-surface: var(--color-panel-solid, var(--ui-color-surface));
99
- --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 5%, var(--color-panel-solid, var(--ui-color-surface)));
100
- }
101
-
102
- :host([recipe="surface"]) .btn--secondary {
103
- border-color: color-mix(in srgb, var(--ui-btn-accent) 28%, var(--ui-color-border));
104
- box-shadow: var(--shadow-1);
105
- }
106
-
107
- :host([recipe="outline"]) {
108
- --ui-btn-surface: transparent;
109
- --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 6%, transparent);
110
- }
111
-
112
- :host([recipe="outline"]) .btn--secondary {
113
- border-width: 1px;
114
- border-style: solid;
115
- border-color: color-mix(in srgb, var(--ui-btn-accent) 42%, var(--ui-color-border));
116
- box-shadow: none;
117
- }
118
-
119
- :host([recipe="ghost"]) {
120
- --ui-btn-surface: transparent;
121
- --ui-btn-surface-alt: transparent;
122
- }
123
-
124
- :host([shape="none"]) {
125
- --ui-btn-radius: 0px;
126
- }
127
-
128
- :host([shape="sm"]) {
129
- --ui-btn-radius: 4px;
130
- }
131
-
132
- :host([shape="md"]) {
133
- --ui-btn-radius: 8px;
134
- }
135
-
136
- :host([shape="lg"]) {
137
- --ui-btn-radius: 12px;
138
- }
139
-
140
- :host([shape="full"]) {
141
- --ui-btn-radius: 999px;
142
- }
143
-
144
- :host([scale="1"]) {
145
- --ui-btn-min-height: 30px;
146
- --ui-btn-padding-inline: 10px;
147
- --ui-btn-font-size: 14px;
148
- --ui-btn-gap: 6px;
149
- }
150
-
151
- :host([scale="2"]) {
152
- --ui-btn-min-height: 36px;
153
- --ui-btn-padding-inline: 14px;
154
- --ui-btn-font-size: 14px;
155
- --ui-btn-gap: 8px;
156
- }
157
-
158
- :host([scale="3"]) {
159
- --ui-btn-min-height: 44px;
160
- --ui-btn-padding-inline: 18px;
161
- --ui-btn-font-size: 16px;
162
- --ui-btn-gap: 8px;
163
- }
164
-
165
- :host([scale="4"]) {
166
- --ui-btn-min-height: 56px;
167
- --ui-btn-padding-inline: 24px;
168
- --ui-btn-font-size: 18px;
169
- --ui-btn-gap: 10px;
170
- }
171
-
172
- .btn {
173
- position: relative;
174
- isolation: isolate;
175
- box-sizing: border-box;
176
- inline-size: auto;
177
- min-block-size: var(--ui-btn-min-height);
178
- padding-inline: var(--ui-btn-padding-inline);
179
- border-radius: var(--ui-btn-radius);
180
- border: 1px solid transparent;
181
- margin: 0;
182
- appearance: none;
183
- -webkit-appearance: none;
184
- font: inherit;
185
- font-size: var(--ui-btn-font-size);
186
- font-weight: var(--ui-btn-font-weight);
187
- letter-spacing: var(--ui-btn-letter-spacing);
188
- line-height: var(--ui-default-line-height, 20px);
189
- display: inline-flex;
190
- align-items: center;
191
- justify-content: center;
192
- gap: var(--ui-btn-gap);
193
- white-space: nowrap;
194
- cursor: pointer;
195
- user-select: none;
196
- -webkit-tap-highlight-color: transparent;
197
- transition:
198
- transform var(--ui-btn-duration) var(--ui-btn-easing),
199
- box-shadow var(--ui-btn-duration) var(--ui-btn-easing),
200
- background-color var(--ui-btn-duration) var(--ui-btn-easing),
201
- color var(--ui-btn-duration) var(--ui-btn-easing),
202
- border-color var(--ui-btn-duration) var(--ui-btn-easing),
203
- opacity var(--ui-btn-duration) var(--ui-btn-easing);
204
- }
205
-
206
- :host([block]) .btn {
207
- inline-size: 100%;
208
- }
209
-
210
- .btn:focus-visible {
211
- outline: 2px solid color-mix(in srgb, var(--ui-btn-ring) 70%, transparent);
212
- outline-offset: 2px;
213
- }
214
-
215
- .btn::after {
216
- content: '';
217
- position: absolute;
218
- inset: 0;
219
- border-radius: inherit;
220
- background: currentColor;
221
- opacity: 0;
222
- pointer-events: none;
223
- transition: opacity 140ms var(--ui-btn-easing);
224
- }
225
-
226
- .btn:active::after {
227
- opacity: 0.08;
228
- }
229
-
230
- .btn--primary {
231
- background: var(--ui-btn-accent);
232
- color: #ffffff;
233
- border-color: color-mix(in srgb, var(--ui-btn-accent) 74%, #0f172a 26%);
234
- box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-btn-accent) 22%, transparent);
235
- }
236
-
237
- .btn--primary:hover:not([disabled]) {
238
- background: var(--ui-btn-accent-strong);
239
- }
240
-
241
- .btn--secondary {
242
- background: var(--ui-btn-surface);
243
- color: color-mix(in srgb, var(--ui-btn-accent) 78%, var(--ui-btn-text) 22%);
244
- border-color: color-mix(in srgb, var(--ui-btn-accent) 22%, var(--ui-btn-muted));
245
- box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
246
- }
247
-
248
- .btn--secondary:hover:not([disabled]) {
249
- background: color-mix(in srgb, var(--ui-btn-accent) 8%, var(--ui-btn-surface-alt));
250
- }
251
-
252
- .btn--ghost {
253
- background: transparent;
254
- color: color-mix(in srgb, var(--ui-btn-accent) 80%, var(--ui-btn-text) 20%);
255
- border-color: transparent;
256
- box-shadow: none;
257
- }
258
-
259
- .btn--ghost:hover:not([disabled]) {
260
- background: var(--ui-btn-accent-soft);
261
- }
262
-
263
- .btn--danger {
264
- background: var(--ui-color-danger, #dc2626);
265
- color: #ffffff;
266
- border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 72%, #0f172a 28%);
267
- box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-danger, #dc2626) 22%, transparent);
268
- }
269
-
270
- .btn--danger:hover:not([disabled]) {
271
- background: color-mix(in srgb, var(--ui-color-danger, #dc2626) 86%, #0f172a 14%);
272
- }
273
-
274
- .btn--success {
275
- background: var(--ui-color-success, #16a34a);
276
- color: #ffffff;
277
- border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 70%, #0f172a 30%);
278
- box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #16a34a) 20%, transparent);
279
- }
280
-
281
- .btn--success:hover:not([disabled]) {
282
- background: color-mix(in srgb, var(--ui-color-success, #16a34a) 86%, #0f172a 14%);
283
- }
284
-
285
- .btn--warning {
286
- background: var(--ui-color-warning, #d97706);
287
- color: #ffffff;
288
- border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 70%, #0f172a 30%);
289
- box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #d97706) 18%, transparent);
290
- }
291
-
292
- .btn--warning:hover:not([disabled]) {
293
- background: color-mix(in srgb, var(--ui-color-warning, #d97706) 86%, #0f172a 14%);
294
- }
295
-
296
- :host([size="sm"]) {
297
- --ui-btn-font-size: var(--ui-font-size-sm, var(--font-size-1, 12px));
298
- --ui-btn-min-height: var(--base-button-height-sm, 32px);
299
- --ui-btn-padding-inline: 10px;
300
- --ui-btn-gap: 6px;
301
- }
302
-
303
- :host([size="lg"]) {
304
- --ui-btn-font-size: var(--ui-font-size-lg, var(--font-size-3, 16px));
305
- --ui-btn-min-height: var(--base-button-height-lg, 44px);
306
- --ui-btn-padding-inline: 18px;
307
- --ui-btn-gap: 10px;
308
- }
309
-
310
- :host([state="loading"]) .btn,
311
- :host([loading]) .btn,
312
- :host([aria-busy="true"]) .btn {
313
- cursor: progress;
314
- }
315
-
316
- :host([state="error"]) .btn:not([disabled]) {
317
- box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-danger, #dc2626) 38%, transparent), 0 8px 18px rgba(127, 29, 29, 0.14);
318
- }
319
-
320
- :host([state="success"]) .btn:not([disabled]) {
321
- box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
322
- }
323
-
324
- :host([data-animation]) .btn:not([disabled]):hover {
325
- transform: translateY(-1px);
326
- box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
327
- }
328
-
329
- :host([data-animation]) .btn:not([disabled]):active {
330
- transform: translateY(0) scale(0.99);
331
- }
332
-
333
- :host([data-animation="scale"]) .btn:not([disabled]):hover {
334
- transform-origin: center;
335
- transform: translate3d(0, -2px, 0) scale(1.02);
336
- z-index: 1;
337
- backface-visibility: hidden;
338
- }
339
-
340
- :host([data-animation="pulse"]) .btn:not([disabled]):hover {
341
- animation: ui-btn-pulse 900ms ease-in-out infinite;
342
- }
343
-
344
- :host([data-animation="none"]) .btn:not([disabled]) {
345
- transition: none;
346
- animation: none;
347
- }
348
-
349
- :host([headless]) .btn {
350
- all: unset;
351
- box-sizing: border-box;
352
- display: inline-flex;
353
- align-items: center;
354
- justify-content: center;
355
- gap: var(--ui-btn-gap);
356
- cursor: pointer;
357
- border-radius: inherit;
358
- color: inherit;
359
- font: inherit;
360
- line-height: inherit;
361
- padding: inherit;
362
- border: inherit;
363
- background: inherit;
364
- }
365
-
366
- :host([headless][block]) .btn {
367
- inline-size: 100%;
368
- }
369
-
370
- .slot {
371
- display: inline-flex;
372
- align-items: center;
373
- justify-content: center;
374
- min-inline-size: 0;
375
- max-inline-size: 100%;
376
- }
377
-
378
- .slot--label {
379
- display: inline-flex;
380
- align-items: center;
381
- line-height: inherit;
382
- overflow: hidden;
383
- text-overflow: ellipsis;
384
- }
385
-
386
- .slot--prefix,
387
- .slot--suffix {
388
- line-height: 0;
389
- }
390
-
391
- .slot--prefix ::slotted(*),
392
- .slot--suffix ::slotted(*) {
393
- display: inline-flex;
394
- align-items: center;
395
- justify-content: center;
396
- line-height: 0;
397
- vertical-align: middle;
398
- }
399
-
400
- .slot--label ::slotted(*) {
401
- line-height: inherit;
402
- vertical-align: middle;
403
- }
404
-
405
- .icon {
406
- width: 16px;
407
- min-width: 16px;
408
- height: 16px;
409
- display: inline-flex;
410
- align-items: center;
411
- justify-content: center;
412
- line-height: 0;
413
- vertical-align: middle;
414
- pointer-events: none;
415
- }
416
-
417
- .spinner {
418
- width: 14px;
419
- min-width: 14px;
420
- height: 14px;
421
- border-radius: 999px;
422
- border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
423
- border-top-color: currentColor;
424
- animation: ui-btn-spin 700ms linear infinite;
425
- }
426
-
427
- .sr-only {
428
- border: 0;
429
- clip: rect(0 0 0 0);
430
- height: 1px;
431
- margin: -1px;
432
- overflow: hidden;
433
- padding: 0;
434
- position: absolute;
435
- width: 1px;
436
- white-space: nowrap;
437
- }
438
-
439
- .btn[disabled] {
440
- opacity: 0.56;
441
- cursor: not-allowed;
442
- box-shadow: none;
443
- transform: none !important;
444
- }
445
-
446
- @keyframes ui-btn-spin {
447
- to {
448
- transform: rotate(360deg);
449
- }
450
- }
451
-
452
- @keyframes ui-btn-pulse {
453
- 0% {
454
- transform: translateY(0);
455
- }
456
- 50% {
457
- transform: translateY(-2px);
458
- }
459
- 100% {
460
- transform: translateY(0);
461
- }
462
- }
463
-
464
- @media (prefers-reduced-motion: reduce) {
465
- .btn,
466
- .btn::after,
467
- .spinner {
468
- animation: none !important;
469
- transition: none !important;
470
- }
471
- }
472
-
473
- @media (prefers-contrast: more) {
474
- .btn {
475
- border-width: 2px;
476
- border-color: currentColor;
477
- box-shadow: none !important;
478
- }
479
- }
480
-
481
- @media (forced-colors: active) {
482
- :host {
483
- --ui-btn-accent: Highlight;
484
- --ui-btn-surface: Canvas;
485
- --ui-btn-text: CanvasText;
486
- --ui-btn-ring: Highlight;
487
- }
488
-
489
- .btn {
490
- forced-color-adjust: auto;
491
- border-color: ButtonText;
492
- color: ButtonText;
493
- background: ButtonFace;
494
- }
495
-
496
- .btn--primary,
497
- .btn--danger,
498
- .btn--success,
499
- .btn--warning {
500
- background: Highlight;
501
- color: HighlightText;
502
- }
503
- }
504
- `;function C(t){return t!==null&&t.toLowerCase()!=="false"&&t!=="0"}function I(t){return t==="secondary"||t==="ghost"||t==="danger"||t==="success"||t==="warning"?t:"primary"}function U(t){return t==="sm"||t==="lg"?t:"md"}function S(t){return t==="scale"||t==="pulse"||t==="none"?t:null}function N(t){return t==="neutral"||t==="info"||t==="success"||t==="warning"||t==="danger"?t:null}function G(t){return t==="loading"||t==="error"||t==="success"?t:"idle"}function $(t){return t==="submit"||t==="reset"?t:"button"}function J(t){return t==="classic"||t==="solid"||t==="soft"||t==="surface"||t==="outline"||t==="ghost"?t:null}function K(t){return t==="none"||t==="sm"||t==="md"||t==="lg"||t==="full"?t:null}function Q(t){return t==="1"||t==="2"||t==="3"||t==="4"?t:null}function V(t){if(!t)return null;const n=t.trim();return n?n==="full"?"999px":/^-?\d+(\.\d+)?$/.test(n)?`${n}px`:n:null}function r(t,n){const e=t.getAttribute(n);if(e!=null)return e;const i=t[n];return typeof i=="string"&&i.length>0?i:null}function c(t,n){const e=t.getAttribute(n);if(e!=null)return C(e);const i=t[n];return typeof i=="boolean"?i:typeof i=="string"?C(i):!1}function u(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function L(t,n){return!!t.querySelector(`[slot="${n}"]`)}function W(t,n){if(n==="button")return;const e=t.closest("form");if(!e)return;if(n==="reset"){e.reset();return}if(typeof e.requestSubmit=="function"){e.requestSubmit();return}const i=new Event("submit",{bubbles:!0,cancelable:!0});e.dispatchEvent(i)}class E extends D.ElementBase{constructor(){super(),this._slots=[],this._contentObserver=null,this._onRootClick=this._onRootClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onContentMutations=this._onContentMutations.bind(this)}static get observedAttributes(){return["disabled","variant","size","headless","loading","icon","block","animation","theme","tone","state","type","recipe","shape","radius","scale","loading-label","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this._contentObserver=new MutationObserver(this._onContentMutations),this._contentObserver.observe(this,{childList:!0,subtree:!1,characterData:!0})}disconnectedCallback(){var n;this.root.removeEventListener("click",this._onRootClick),(n=this._contentObserver)==null||n.disconnect(),this._contentObserver=null,this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(n,e,i){if(e!==i){if(n==="animation"){const o=S(i);o?this.setAttribute("data-animation",o):this.removeAttribute("data-animation")}this.isConnected&&this.requestRender()}}_onRootClick(n){const e=n.target,i=e==null?void 0:e.closest('button[data-ui-button="true"]');if(!i||i.disabled)return;const o=$(i.getAttribute("data-request-type"));queueMicrotask(()=>{n.defaultPrevented||W(this,o)})}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(n=>n.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(n=>n.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this.requestRender()}_onContentMutations(){this.requestRender()}render(){const n=c(this,"disabled"),e=c(this,"loading"),i=r(this,"state"),o=G(i),s=e||o==="loading",l=r(this,"icon"),q=I(r(this,"variant")),b=r(this,"size"),d=U(b),h=S(r(this,"animation")),a=r(this,"theme"),p=a==="dark"||a==="brand"?a:null,f=r(this,"tone"),g=N(f),M=c(this,"block"),T=c(this,"headless"),R=$(r(this,"type")),m=J(r(this,"recipe")),x=r(this,"shape"),v=K(x),B=r(this,"radius"),y=V(B),w=Q(r(this,"scale")),k=r(this,"aria-label"),j=r(this,"loading-label")||"Loading";h?this.setAttribute("data-animation",h):this.removeAttribute("data-animation"),M?this.setAttribute("block",""):this.removeAttribute("block"),T?this.setAttribute("headless",""):this.removeAttribute("headless"),f!=null&&(g?this.setAttribute("tone",g):this.removeAttribute("tone")),b!=null&&(d==="md"?this.removeAttribute("size"):this.setAttribute("size",d)),a!=null&&(p?this.setAttribute("theme",p):this.removeAttribute("theme")),i!=null&&(o==="idle"?this.removeAttribute("state"):this.setAttribute("state",o)),m?this.setAttribute("recipe",m):this.removeAttribute("recipe"),x!=null&&(v?this.setAttribute("shape",v):this.removeAttribute("shape")),y?this.style.setProperty("--ui-btn-radius",y):this.style.removeProperty("--ui-btn-radius"),w?this.setAttribute("scale",w):this.removeAttribute("scale");const z=n||s;z?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),s?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const O=L(this,"prefix"),H=L(this,"suffix"),A=!s&&l?`<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>`:"",_=s?'<span class="spinner" aria-hidden="true" part="spinner"></span>':"",P=_||A||O?`<span class="slot slot--prefix" part="prefix">${_}${A}${s?"":'<slot name="prefix"></slot>'}</span>`:"",Y=H?'<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>':"";this.setContent(`
505
- <style>${F}</style>
506
- <button
507
- class="btn btn--${q}"
508
- part="button"
509
- type="button"
510
- data-ui-button="true"
511
- data-request-type="${R}"
512
- aria-busy="${s?"true":"false"}"
513
- ${k?`aria-label="${u(k)}"`:""}
514
- ${z?"disabled":""}
515
- >
516
- ${P}
517
- <span class="slot slot--label" part="label"><slot></slot></span>
518
- ${Y}
519
- ${s?`<span class="sr-only">${u(j)}</span>`:""}
520
- </button>
521
- `),this._attachSlotListeners()}}typeof customElements<"u"&&!customElements.get("ui-button")&&customElements.define("ui-button",E);exports.UIButton=E;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ui-button-rXQOS9QJ.js");exports.UIButton=e.UIButton;