aeico-components 0.1.3 → 0.1.5

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 (218) hide show
  1. package/dist/alert.cjs +6 -0
  2. package/dist/alert.cjs.map +1 -0
  3. package/dist/alert.js +6 -0
  4. package/dist/alert.js.map +1 -0
  5. package/dist/badge.cjs +6 -0
  6. package/dist/badge.cjs.map +1 -0
  7. package/dist/badge.js +6 -0
  8. package/dist/badge.js.map +1 -0
  9. package/dist/breadcrumb.cjs +7 -0
  10. package/dist/breadcrumb.cjs.map +1 -0
  11. package/dist/breadcrumb.js +7 -0
  12. package/dist/breadcrumb.js.map +1 -0
  13. package/dist/button-group.cjs +6 -0
  14. package/dist/button-group.cjs.map +1 -0
  15. package/dist/button-group.js +6 -0
  16. package/dist/button-group.js.map +1 -0
  17. package/dist/button.cjs +6 -0
  18. package/dist/button.cjs.map +1 -0
  19. package/dist/button.js +6 -0
  20. package/dist/button.js.map +1 -0
  21. package/dist/card.cjs +6 -0
  22. package/dist/card.cjs.map +1 -0
  23. package/dist/card.js +6 -0
  24. package/dist/card.js.map +1 -0
  25. package/dist/checkbox.cjs +6 -0
  26. package/dist/checkbox.cjs.map +1 -0
  27. package/dist/checkbox.js +6 -0
  28. package/dist/checkbox.js.map +1 -0
  29. package/dist/chunks/aeico-component.cjs +17 -0
  30. package/dist/chunks/aeico-component.cjs.map +1 -0
  31. package/dist/chunks/aeico-component.js +18 -0
  32. package/dist/chunks/aeico-component.js.map +1 -0
  33. package/dist/chunks/aeico-field.cjs +179 -0
  34. package/dist/chunks/aeico-field.cjs.map +1 -0
  35. package/dist/chunks/aeico-field.js +180 -0
  36. package/dist/chunks/aeico-field.js.map +1 -0
  37. package/dist/chunks/alert.cjs +170 -0
  38. package/dist/chunks/alert.cjs.map +1 -0
  39. package/dist/chunks/alert.js +171 -0
  40. package/dist/chunks/alert.js.map +1 -0
  41. package/dist/chunks/badge.cjs +85 -0
  42. package/dist/chunks/badge.cjs.map +1 -0
  43. package/dist/chunks/badge.js +86 -0
  44. package/dist/chunks/badge.js.map +1 -0
  45. package/dist/chunks/breadcrumb-item.cjs +261 -0
  46. package/dist/chunks/breadcrumb-item.cjs.map +1 -0
  47. package/dist/chunks/breadcrumb-item.js +262 -0
  48. package/dist/chunks/breadcrumb-item.js.map +1 -0
  49. package/dist/chunks/button-group.cjs +79 -0
  50. package/dist/chunks/button-group.cjs.map +1 -0
  51. package/dist/chunks/button-group.js +80 -0
  52. package/dist/chunks/button-group.js.map +1 -0
  53. package/dist/chunks/button.cjs +348 -0
  54. package/dist/chunks/button.cjs.map +1 -0
  55. package/dist/chunks/button.js +349 -0
  56. package/dist/chunks/button.js.map +1 -0
  57. package/dist/chunks/card.cjs +93 -0
  58. package/dist/chunks/card.cjs.map +1 -0
  59. package/dist/chunks/card.js +94 -0
  60. package/dist/chunks/card.js.map +1 -0
  61. package/dist/chunks/checkbox.cjs +73 -0
  62. package/dist/chunks/checkbox.cjs.map +1 -0
  63. package/dist/chunks/checkbox.js +74 -0
  64. package/dist/chunks/checkbox.js.map +1 -0
  65. package/dist/chunks/color.cjs +4 -0
  66. package/dist/chunks/color.cjs.map +1 -0
  67. package/dist/chunks/color.js +5 -0
  68. package/dist/chunks/color.js.map +1 -0
  69. package/dist/chunks/detail.cjs +143 -0
  70. package/dist/chunks/detail.cjs.map +1 -0
  71. package/dist/chunks/detail.js +144 -0
  72. package/dist/chunks/detail.js.map +1 -0
  73. package/dist/chunks/dialog.cjs +117 -0
  74. package/dist/chunks/dialog.cjs.map +1 -0
  75. package/dist/chunks/dialog.js +118 -0
  76. package/dist/chunks/dialog.js.map +1 -0
  77. package/dist/chunks/divider.cjs +80 -0
  78. package/dist/chunks/divider.cjs.map +1 -0
  79. package/dist/chunks/divider.js +81 -0
  80. package/dist/chunks/divider.js.map +1 -0
  81. package/dist/chunks/dropdown-button.cjs +534 -0
  82. package/dist/chunks/dropdown-button.cjs.map +1 -0
  83. package/dist/chunks/dropdown-button.js +535 -0
  84. package/dist/chunks/dropdown-button.js.map +1 -0
  85. package/dist/chunks/icon-button.cjs +35 -0
  86. package/dist/chunks/icon-button.cjs.map +1 -0
  87. package/dist/chunks/icon-button.js +36 -0
  88. package/dist/chunks/icon-button.js.map +1 -0
  89. package/dist/chunks/icon.cjs +78 -0
  90. package/dist/chunks/icon.cjs.map +1 -0
  91. package/dist/chunks/icon.js +79 -0
  92. package/dist/chunks/icon.js.map +1 -0
  93. package/dist/chunks/navbar.cjs +142 -0
  94. package/dist/chunks/navbar.cjs.map +1 -0
  95. package/dist/chunks/navbar.js +143 -0
  96. package/dist/chunks/navbar.js.map +1 -0
  97. package/dist/chunks/radio.cjs +181 -0
  98. package/dist/chunks/radio.cjs.map +1 -0
  99. package/dist/chunks/radio.js +182 -0
  100. package/dist/chunks/radio.js.map +1 -0
  101. package/dist/chunks/select.cjs +350 -0
  102. package/dist/chunks/select.cjs.map +1 -0
  103. package/dist/chunks/select.js +351 -0
  104. package/dist/chunks/select.js.map +1 -0
  105. package/dist/chunks/size.cjs +4 -0
  106. package/dist/chunks/size.cjs.map +1 -0
  107. package/dist/chunks/size.js +5 -0
  108. package/dist/chunks/size.js.map +1 -0
  109. package/dist/chunks/slider.cjs +648 -0
  110. package/dist/chunks/slider.cjs.map +1 -0
  111. package/dist/chunks/slider.js +649 -0
  112. package/dist/chunks/slider.js.map +1 -0
  113. package/dist/chunks/switch.cjs +73 -0
  114. package/dist/chunks/switch.cjs.map +1 -0
  115. package/dist/chunks/switch.js +74 -0
  116. package/dist/chunks/switch.js.map +1 -0
  117. package/dist/chunks/tab-panel.cjs +165 -0
  118. package/dist/chunks/tab-panel.cjs.map +1 -0
  119. package/dist/chunks/tab-panel.js +166 -0
  120. package/dist/chunks/tab-panel.js.map +1 -0
  121. package/dist/chunks/tag.cjs +108 -0
  122. package/dist/chunks/tag.cjs.map +1 -0
  123. package/dist/chunks/tag.js +109 -0
  124. package/dist/chunks/tag.js.map +1 -0
  125. package/dist/chunks/text-input.cjs +59 -0
  126. package/dist/chunks/text-input.cjs.map +1 -0
  127. package/dist/chunks/text-input.js +60 -0
  128. package/dist/chunks/text-input.js.map +1 -0
  129. package/dist/chunks/variables.cjs +372 -0
  130. package/dist/chunks/variables.cjs.map +1 -0
  131. package/dist/chunks/variables.js +373 -0
  132. package/dist/chunks/variables.js.map +1 -0
  133. package/dist/detail.cjs +6 -0
  134. package/dist/detail.cjs.map +1 -0
  135. package/dist/detail.js +6 -0
  136. package/dist/detail.js.map +1 -0
  137. package/dist/dialog.cjs +6 -0
  138. package/dist/dialog.cjs.map +1 -0
  139. package/dist/dialog.js +6 -0
  140. package/dist/dialog.js.map +1 -0
  141. package/dist/divider.cjs +6 -0
  142. package/dist/divider.cjs.map +1 -0
  143. package/dist/divider.js +6 -0
  144. package/dist/divider.js.map +1 -0
  145. package/dist/dropdown.cjs +7 -0
  146. package/dist/dropdown.cjs.map +1 -0
  147. package/dist/dropdown.js +7 -0
  148. package/dist/dropdown.js.map +1 -0
  149. package/dist/icon-button.cjs +6 -0
  150. package/dist/icon-button.cjs.map +1 -0
  151. package/dist/icon-button.js +6 -0
  152. package/dist/icon-button.js.map +1 -0
  153. package/dist/icon.cjs +6 -0
  154. package/dist/icon.cjs.map +1 -0
  155. package/dist/icon.js +6 -0
  156. package/dist/icon.js.map +1 -0
  157. package/dist/index.cjs +93 -4168
  158. package/dist/index.cjs.map +1 -1
  159. package/dist/index.js +92 -4167
  160. package/dist/index.js.map +1 -1
  161. package/dist/navbar.cjs +6 -0
  162. package/dist/navbar.cjs.map +1 -0
  163. package/dist/navbar.js +6 -0
  164. package/dist/navbar.js.map +1 -0
  165. package/dist/radio-group.cjs +7 -0
  166. package/dist/radio-group.cjs.map +1 -0
  167. package/dist/radio-group.js +7 -0
  168. package/dist/radio-group.js.map +1 -0
  169. package/dist/select.cjs +99 -0
  170. package/dist/select.cjs.map +1 -0
  171. package/dist/select.js +99 -0
  172. package/dist/select.js.map +1 -0
  173. package/dist/slider.cjs +6 -0
  174. package/dist/slider.cjs.map +1 -0
  175. package/dist/slider.js +6 -0
  176. package/dist/slider.js.map +1 -0
  177. package/dist/switch.cjs +6 -0
  178. package/dist/switch.cjs.map +1 -0
  179. package/dist/switch.js +6 -0
  180. package/dist/switch.js.map +1 -0
  181. package/dist/tabs.cjs +8 -0
  182. package/dist/tabs.cjs.map +1 -0
  183. package/dist/tabs.js +8 -0
  184. package/dist/tabs.js.map +1 -0
  185. package/dist/tag.cjs +5 -0
  186. package/dist/tag.cjs.map +1 -0
  187. package/dist/tag.js +5 -0
  188. package/dist/tag.js.map +1 -0
  189. package/dist/text-input.cjs +6 -0
  190. package/dist/text-input.cjs.map +1 -0
  191. package/dist/text-input.js +6 -0
  192. package/dist/text-input.js.map +1 -0
  193. package/dist/types/aeico-field.d.ts +5 -5
  194. package/dist/types/button/button.d.ts +2 -1
  195. package/dist/types/checkbox/checkbox.d.ts +5 -5
  196. package/dist/types/index.d.ts +2 -0
  197. package/dist/types/progress-bar/defines.d.ts +1 -0
  198. package/dist/types/progress-bar/index.d.ts +3 -0
  199. package/dist/types/progress-bar/progress-bar.d.ts +37 -0
  200. package/dist/types/radio-group/radio-group.d.ts +1 -1
  201. package/dist/types/select/select.d.ts +1 -1
  202. package/dist/types/switch/switch.d.ts +5 -5
  203. package/package.json +16 -4
  204. package/src/aeico-field.ts +12 -8
  205. package/src/button/button.ts +11 -13
  206. package/src/checkbox/checkbox.ts +4 -4
  207. package/src/index.ts +2 -0
  208. package/src/navbar/navbar.ts +1 -3
  209. package/src/progress-bar/defines.ts +8 -0
  210. package/src/progress-bar/index.ts +3 -0
  211. package/src/progress-bar/progress-bar.ts +80 -0
  212. package/src/radio-group/radio-group.ts +1 -1
  213. package/src/select/select.ts +1 -1
  214. package/src/styles/components/progress-bar.css +44 -0
  215. package/src/switch/switch.ts +4 -4
  216. package/src/tabs/tab.ts +1 -1
  217. package/src/tabs/tabs.ts +1 -2
  218. package/src/utils.ts +1 -0
@@ -0,0 +1,373 @@
1
+ const styleVariables = `:root,
2
+ :host {
3
+ --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
4
+ "Noto Sans", "Liberation Sans", Arial, sans-serif,
5
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6
+ --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
7
+ "Liberation Mono", "Courier New", monospace;
8
+ font-family: var(--ae-font-sans-serif);
9
+ --blue: #0e639c;
10
+ --green: #28a745;
11
+ --red: #dc3545;
12
+ --yellow: #ffc107;
13
+ --cyan: #17a2b8;
14
+ --gray: #6e6e6e;
15
+ --slate: #64748b;
16
+ --dark: #343a40;
17
+ --light: #f8f9fa;
18
+ }
19
+
20
+ :root,
21
+ :host {
22
+ /* Blue */
23
+ --blue-100: color-mix(in srgb, var(--blue) 20%, white);
24
+ --blue-200: color-mix(in srgb, var(--blue) 40%, white);
25
+ --blue-300: color-mix(in srgb, var(--blue) 60%, white);
26
+ --blue-400: color-mix(in srgb, var(--blue) 80%, white);
27
+ --blue-500: var(--blue);
28
+ --blue-600: color-mix(in srgb, var(--blue) 80%, black);
29
+ --blue-700: color-mix(in srgb, var(--blue) 60%, black);
30
+ --blue-800: color-mix(in srgb, var(--blue) 40%, black);
31
+ --blue-900: color-mix(in srgb, var(--blue) 20%, black);
32
+
33
+ /* Green */
34
+ --green-100: color-mix(in srgb, var(--green) 20%, white);
35
+ --green-200: color-mix(in srgb, var(--green) 40%, white);
36
+ --green-300: color-mix(in srgb, var(--green) 60%, white);
37
+ --green-400: color-mix(in srgb, var(--green) 80%, white);
38
+ --green-500: var(--green);
39
+ --green-600: color-mix(in srgb, var(--green) 80%, black);
40
+ --green-700: color-mix(in srgb, var(--green) 60%, black);
41
+ --green-800: color-mix(in srgb, var(--green) 40%, black);
42
+ --green-900: color-mix(in srgb, var(--green) 20%, black);
43
+
44
+ /* Red */
45
+ --red-100: color-mix(in srgb, var(--red) 20%, white);
46
+ --red-200: color-mix(in srgb, var(--red) 40%, white);
47
+ --red-300: color-mix(in srgb, var(--red) 60%, white);
48
+ --red-400: color-mix(in srgb, var(--red) 80%, white);
49
+ --red-500: var(--red);
50
+ --red-600: color-mix(in srgb, var(--red) 80%, black);
51
+ --red-700: color-mix(in srgb, var(--red) 60%, black);
52
+ --red-800: color-mix(in srgb, var(--red) 40%, black);
53
+ --red-900: color-mix(in srgb, var(--red) 20%, black);
54
+
55
+ /* Yellow */
56
+ --yellow-100: color-mix(in srgb, var(--yellow) 20%, white);
57
+ --yellow-200: color-mix(in srgb, var(--yellow) 40%, white);
58
+ --yellow-300: color-mix(in srgb, var(--yellow) 60%, white);
59
+ --yellow-400: color-mix(in srgb, var(--yellow) 80%, white);
60
+ --yellow-500: var(--yellow);
61
+ --yellow-600: color-mix(in srgb, var(--yellow) 80%, black);
62
+ --yellow-700: color-mix(in srgb, var(--yellow) 60%, black);
63
+ --yellow-800: color-mix(in srgb, var(--yellow) 40%, black);
64
+ --yellow-900: color-mix(in srgb, var(--yellow) 20%, black);
65
+
66
+ /* Cyan */
67
+ --cyan-100: color-mix(in srgb, var(--cyan) 20%, white);
68
+ --cyan-200: color-mix(in srgb, var(--cyan) 40%, white);
69
+ --cyan-300: color-mix(in srgb, var(--cyan) 60%, white);
70
+ --cyan-400: color-mix(in srgb, var(--cyan) 80%, white);
71
+ --cyan-500: var(--cyan);
72
+ --cyan-600: color-mix(in srgb, var(--cyan) 80%, black);
73
+ --cyan-700: color-mix(in srgb, var(--cyan) 60%, black);
74
+ --cyan-800: color-mix(in srgb, var(--cyan) 40%, black);
75
+ --cyan-900: color-mix(in srgb, var(--cyan) 20%, black);
76
+
77
+ /* Gray (neutral — base #6e6e6e) */
78
+ --gray-100: color-mix(in srgb, var(--gray) 20%, white);
79
+ --gray-200: color-mix(in srgb, var(--gray) 40%, white);
80
+ --gray-300: color-mix(in srgb, var(--gray) 60%, white);
81
+ --gray-400: color-mix(in srgb, var(--gray) 80%, white);
82
+ --gray-500: var(--gray);
83
+ --gray-600: color-mix(in srgb, var(--gray) 80%, black);
84
+ --gray-700: color-mix(in srgb, var(--gray) 60%, black);
85
+ --gray-800: color-mix(in srgb, var(--gray) 40%, black);
86
+ --gray-900: color-mix(in srgb, var(--gray) 20%, black);
87
+
88
+ /* Slate (blue-gray — base #64748b, used for 'secondary') */
89
+ --slate-100: color-mix(in srgb, var(--slate) 20%, white);
90
+ --slate-200: color-mix(in srgb, var(--slate) 40%, white);
91
+ --slate-300: color-mix(in srgb, var(--slate) 60%, white);
92
+ --slate-400: color-mix(in srgb, var(--slate) 80%, white);
93
+ --slate-500: var(--slate);
94
+ --slate-600: color-mix(in srgb, var(--slate) 80%, black);
95
+ --slate-700: color-mix(in srgb, var(--slate) 60%, black);
96
+ --slate-800: color-mix(in srgb, var(--slate) 40%, black);
97
+ --slate-900: color-mix(in srgb, var(--slate) 20%, black);
98
+
99
+ /* Dark (base #343a40) */
100
+ --dark-100: color-mix(in srgb, var(--dark) 20%, white);
101
+ --dark-200: color-mix(in srgb, var(--dark) 40%, white);
102
+ --dark-300: color-mix(in srgb, var(--dark) 60%, white);
103
+ --dark-400: color-mix(in srgb, var(--dark) 80%, white);
104
+ --dark-500: var(--dark);
105
+ --dark-600: color-mix(in srgb, var(--dark) 80%, black);
106
+ --dark-700: color-mix(in srgb, var(--dark) 60%, black);
107
+ --dark-800: color-mix(in srgb, var(--dark) 40%, black);
108
+ --dark-900: color-mix(in srgb, var(--dark) 20%, black);
109
+
110
+ /* Light (base #f8f9fa) */
111
+ --light-100: color-mix(in srgb, var(--light) 20%, white);
112
+ --light-200: color-mix(in srgb, var(--light) 40%, white);
113
+ --light-300: color-mix(in srgb, var(--light) 60%, white);
114
+ --light-400: color-mix(in srgb, var(--light) 80%, white);
115
+ --light-500: var(--light);
116
+ --light-600: color-mix(in srgb, var(--light) 80%, black);
117
+ --light-700: color-mix(in srgb, var(--light) 60%, black);
118
+ --light-800: color-mix(in srgb, var(--light) 40%, black);
119
+ --light-900: color-mix(in srgb, var(--light) 20%, black);
120
+ }
121
+
122
+ :root,
123
+ :host {
124
+ /* Hover / active mix (light default — overridden in § 6 dark) */
125
+ --color-mix-hover: black 10%;
126
+ --color-mix-active: black 20%;
127
+
128
+ /* Primary (Blue) */
129
+ --color-primary: var(--blue-500);
130
+ --color-primary-hover: color-mix(in srgb, var(--color-primary), var(--color-mix-hover));
131
+ --color-primary-active: color-mix(in srgb, var(--color-primary), var(--color-mix-active));
132
+ --color-primary-disabled: color-mix(in srgb, var(--blue) 50%, var(--gray-500));
133
+
134
+ /* Success (Green) */
135
+ --color-success: var(--green-500);
136
+ --color-success-hover: color-mix(in srgb, var(--color-success), var(--color-mix-hover));
137
+ --color-success-active: color-mix(in srgb, var(--color-success), var(--color-mix-active));
138
+ --color-success-disabled: color-mix(in srgb, var(--green) 50%, var(--gray-500));
139
+
140
+ /* Danger (Red) */
141
+ --color-danger: var(--red-500);
142
+ --color-danger-hover: color-mix(in srgb, var(--color-danger), var(--color-mix-hover));
143
+ --color-danger-active: color-mix(in srgb, var(--color-danger), var(--color-mix-active));
144
+ --color-danger-disabled: color-mix(in srgb, var(--red) 50%, var(--gray-500));
145
+
146
+ /* Warning (Yellow) */
147
+ --color-warning: var(--yellow-500);
148
+ --color-warning-hover: color-mix(in srgb, var(--color-warning), var(--color-mix-hover));
149
+ --color-warning-active: color-mix(in srgb, var(--color-warning), var(--color-mix-active));
150
+ --color-warning-disabled: color-mix(in srgb, var(--yellow) 50%, var(--gray-500));
151
+
152
+ /* Info (Cyan) */
153
+ --color-info: var(--cyan-500);
154
+ --color-info-hover: color-mix(in srgb, var(--color-info), var(--color-mix-hover));
155
+ --color-info-active: color-mix(in srgb, var(--color-info), var(--color-mix-active));
156
+ --color-info-disabled: color-mix(in srgb, var(--cyan) 50%, var(--gray-500));
157
+
158
+ /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */
159
+ --color-secondary: var(--slate-500);
160
+ --color-secondary-hover: color-mix(in srgb, var(--color-secondary), var(--color-mix-hover));
161
+ --color-secondary-active: color-mix(in srgb, var(--color-secondary), var(--color-mix-active));
162
+ --color-secondary-text: var(--slate-700);
163
+
164
+ /* On-solid — text color on filled (saturated) backgrounds.
165
+ Fixed white: blue/green/red/cyan buttons always have white text.
166
+ Does NOT follow --color-text-main. */
167
+ --color-on-solid: white;
168
+ }
169
+
170
+
171
+ .theme-light,
172
+ :root[theme="light"],
173
+ :host([theme="light"]),
174
+ :host-context([theme="light"]),
175
+ :where(:root),
176
+ :host {
177
+ color-scheme: light;
178
+
179
+ /* Gray UI aliases — lighter palette steps for elements on white background */
180
+ --color-gray-dark: var(--gray-400);
181
+ --color-gray: var(--gray-300);
182
+ --color-gray-light: var(--gray-200);
183
+ --color-gray-lighter: var(--gray-100);
184
+ --color-gray-lightest: color-mix(in srgb, var(--gray) 10%, white);
185
+
186
+ /* Text */
187
+ --color-text-main: var(--dark-700);
188
+ --color-text-muted: var(--gray-600);
189
+ --color-text-disabled: var(--gray-300);
190
+ --color-text-link: var(--blue-500);
191
+ --color-text-link-hover: var(--blue-700);
192
+
193
+ /* Surfaces */
194
+ --surface-sunken: var(--light-500);
195
+ --surface-base: white;
196
+ --surface-raised: var(--light-500);
197
+ --surface-overlay: white;
198
+ --color-overlay: rgba(0, 0, 0, 0.4);
199
+
200
+ /* Borders */
201
+ --border-subtle: rgba(0, 0, 0, 0.08);
202
+ --border-default: rgba(0, 0, 0, 0.15);
203
+ --border-hover: rgba(0, 0, 0, 0.25);
204
+ --border-focus: var(--color-primary);
205
+ --border-disabled: rgba(0, 0, 0, 0.06);
206
+
207
+ /* Focus ring */
208
+ --focus-ring: rgb(from var(--blue) r g b / 0.30);
209
+ --focus-ring-sm: rgb(from var(--blue) r g b / 0.15);
210
+
211
+ /* Subtle intent tokens — light context */
212
+ --color-primary-bg-subtle: rgb(from var(--blue) r g b / 0.08);
213
+ --color-primary-border-subtle: rgb(from var(--blue) r g b / 0.40);
214
+ --color-primary-text-emphasis: var(--blue-700);
215
+
216
+ --color-success-bg-subtle: rgb(from var(--green) r g b / 0.08);
217
+ --color-success-border-subtle: rgb(from var(--green) r g b / 0.40);
218
+ --color-success-text-emphasis: var(--green-700);
219
+
220
+ --color-danger-bg-subtle: rgb(from var(--red) r g b / 0.08);
221
+ --color-danger-border-subtle: rgb(from var(--red) r g b / 0.40);
222
+ --color-danger-text-emphasis: var(--red-700);
223
+
224
+ --color-warning-bg-subtle: rgb(from var(--yellow) r g b / 0.08);
225
+ --color-warning-border-subtle: rgb(from var(--yellow) r g b / 0.40);
226
+ --color-warning-text-emphasis: var(--yellow-700);
227
+
228
+ --color-info-bg-subtle: rgb(from var(--cyan) r g b / 0.08);
229
+ --color-info-border-subtle: rgb(from var(--cyan) r g b / 0.40);
230
+ --color-info-text-emphasis: var(--cyan-700);
231
+
232
+ --color-secondary-bg-subtle: rgb(from var(--slate) r g b / 0.08);
233
+ --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.40);
234
+ --color-secondary-text-emphasis: var(--slate-700);
235
+
236
+ --color-light-bg-subtle: var(--gray-100); /* opaque on white: ~#e2e2e2 */
237
+ --color-light-border-subtle: var(--gray-200); /* opaque on white: ~#c4c4c4 */
238
+
239
+ --color-dark-bg-subtle: var(--dark-100); /* opaque on white: ~#d6d8d9 */
240
+ --color-dark-border-subtle: var(--dark-300); /* opaque on white: ~#85898c */
241
+
242
+ /* Component tokens — light defaults */
243
+ --action-btn-bg: var(--gray-200);
244
+ --action-btn-bg-hover: var(--color-primary);
245
+ --action-btn-color: var(--gray-600);
246
+ --action-btn-color-hover: white;
247
+
248
+ --clear-btn-bg-hover: var(--color-danger);
249
+ --clear-btn-color-hover: white;
250
+
251
+ --reset-btn-border-radius: 2px;
252
+ --reset-btn-bg: var(--action-btn-bg);
253
+ --reset-btn-bg-hover: var(--action-btn-bg-hover);
254
+ --reset-btn-color: var(--action-btn-color);
255
+ --reset-btn-color-hover: var(--action-btn-color-hover);
256
+ --reset-btn-transition: all 0.12s;
257
+
258
+ --clear-btn-border-radius: 2px;
259
+ --clear-btn-bg: var(--action-btn-bg);
260
+ --clear-btn-color: var(--action-btn-color);
261
+ --clear-btn-transition: all 0.12s;
262
+ }
263
+
264
+ :root,
265
+ :host {
266
+ --size-scale: 1;
267
+ --size-base: calc(1rem * var(--size-scale)); /* 16px */
268
+ --size-xl: round(calc(var(--size-l) * 1.125), 1px); /* 23px */
269
+ --size-l: round(calc(var(--size-m) * 1.125 * 1.125), 1px); /* 20px */
270
+ --size-m: var(--size-base); /* 16px */
271
+ --size-s: round(calc(var(--size-m) / 1.125), 1px); /* 14px */
272
+ --size-xs: round(calc(var(--size-s) / 1.125), 1px); /* 12px */
273
+ --size-2xs: round(calc(var(--size-xs) / 1.125), 1px); /* 11px */
274
+ --size-3xs: round(calc(var(--size-2xs) / 1.125), 1px); /* 10px */
275
+ }
276
+
277
+ /* Layout tokens — defined on :root so all light DOM elements can use them */
278
+ :root,
279
+ :host {
280
+ --container-max-width: 1280px;
281
+ --container-padding-x: 1.5rem;
282
+ }
283
+
284
+ .theme-dark,
285
+ :root[theme="dark"],
286
+ :host([theme="dark"]),
287
+ :host-context([theme="dark"]) {
288
+ color-scheme: dark;
289
+
290
+ /* Hover / active — slightly gentler on dark backgrounds */
291
+ --color-mix-hover: black 8%;
292
+ --color-mix-active: black 16%;
293
+
294
+ /* Gray UI aliases — darker palette steps for elements on dark background */
295
+ --color-gray-dark: var(--gray-800);
296
+ --color-gray: var(--gray-700);
297
+ --color-gray-light: var(--gray-600);
298
+ --color-gray-lighter: var(--gray-500);
299
+ --color-gray-lightest: var(--gray-400);
300
+
301
+ /* Secondary — deeper base on dark background */
302
+ --color-secondary: var(--slate-700);
303
+ --color-secondary-text: var(--slate-300);
304
+
305
+ /* Text */
306
+ --color-text-main: white;
307
+ --color-text-muted: var(--gray-200);
308
+ --color-text-disabled: var(--gray-500);
309
+ --color-text-link: var(--blue-300);
310
+ --color-text-link-hover: var(--blue-200);
311
+
312
+ /* Surfaces */
313
+ --surface-sunken: var(--gray-900);
314
+ --surface-base: color-mix(in srgb, var(--gray) 27%, black);
315
+ --surface-raised: color-mix(in srgb, var(--gray) 34%, black);
316
+ --surface-overlay: color-mix(in srgb, var(--gray) 38%, black);
317
+ --color-overlay: rgba(0, 0, 0, 0.6);
318
+
319
+ /* Borders */
320
+ --border-subtle: rgba(255, 255, 255, 0.08);
321
+ --border-default: rgba(255, 255, 255, 0.12);
322
+ --border-hover: rgba(255, 255, 255, 0.20);
323
+ --border-focus: var(--color-primary);
324
+ --border-disabled: rgba(255, 255, 255, 0.06);
325
+
326
+ /* Focus ring */
327
+ --focus-ring: rgb(from var(--blue) r g b / 0.25);
328
+ --focus-ring-sm: rgb(from var(--blue) r g b / 0.10);
329
+
330
+ /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */
331
+ --color-primary-bg-subtle: rgb(from var(--blue) r g b / 0.10);
332
+ --color-primary-border-subtle: rgb(from var(--blue) r g b / 0.30);
333
+ --color-primary-text-emphasis: var(--blue-300);
334
+
335
+ --color-success-bg-subtle: rgb(from var(--green) r g b / 0.10);
336
+ --color-success-border-subtle: rgb(from var(--green) r g b / 0.30);
337
+ --color-success-text-emphasis: var(--green-300);
338
+
339
+ --color-danger-bg-subtle: rgb(from var(--red) r g b / 0.10);
340
+ --color-danger-border-subtle: rgb(from var(--red) r g b / 0.30);
341
+ --color-danger-text-emphasis: var(--red-300);
342
+
343
+ --color-warning-bg-subtle: rgb(from var(--yellow) r g b / 0.10);
344
+ --color-warning-border-subtle: rgb(from var(--yellow) r g b / 0.30);
345
+ --color-warning-text-emphasis: var(--yellow-300);
346
+
347
+ --color-info-bg-subtle: rgb(from var(--cyan) r g b / 0.10);
348
+ --color-info-border-subtle: rgb(from var(--cyan) r g b / 0.30);
349
+ --color-info-text-emphasis: var(--cyan-300);
350
+
351
+ --color-secondary-bg-subtle: rgb(from var(--slate) r g b / 0.10);
352
+ --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.30);
353
+ --color-secondary-text-emphasis: var(--slate-300);
354
+
355
+ --color-light-bg-subtle: rgb(from var(--light) r g b / 0.20);
356
+ --color-light-border-subtle: rgb(from var(--light) r g b / 0.25);
357
+
358
+ --color-dark-bg-subtle: rgb(from var(--dark) r g b / 0.30);
359
+ --color-dark-border-subtle: rgb(from var(--dark) r g b / 0.50);
360
+
361
+ /* Component tokens — dark overrides */
362
+ --action-btn-bg: var(--color-gray);
363
+ --action-btn-bg-hover: color-mix(in srgb, var(--blue) 25%, var(--gray-800));
364
+ --action-btn-color: var(--gray-400);
365
+ --action-btn-color-hover: var(--cyan-300);
366
+ --clear-btn-bg-hover: color-mix(in srgb, var(--red) 25%, var(--gray-800));
367
+ --clear-btn-color-hover: var(--red-300);
368
+ }
369
+ `;
370
+ export {
371
+ styleVariables as s
372
+ };
373
+ //# sourceMappingURL=variables.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"variables.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const detail = require("./chunks/detail.cjs");
4
+ exports.Detail = detail.Detail;
5
+ exports.default = detail.Detail;
6
+ //# sourceMappingURL=detail.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"detail.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
package/dist/detail.js ADDED
@@ -0,0 +1,6 @@
1
+ import { D, D as D2 } from "./chunks/detail.js";
2
+ export {
3
+ D as Detail,
4
+ D2 as default
5
+ };
6
+ //# sourceMappingURL=detail.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"detail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const dialog = require("./chunks/dialog.cjs");
4
+ exports.Dialog = dialog.Dialog;
5
+ exports.default = dialog.Dialog;
6
+ //# sourceMappingURL=dialog.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dialog.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
package/dist/dialog.js ADDED
@@ -0,0 +1,6 @@
1
+ import { D, D as D2 } from "./chunks/dialog.js";
2
+ export {
3
+ D as Dialog,
4
+ D2 as default
5
+ };
6
+ //# sourceMappingURL=dialog.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const divider = require("./chunks/divider.cjs");
4
+ exports.Divider = divider.Divider;
5
+ exports.default = divider.Divider;
6
+ //# sourceMappingURL=divider.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"divider.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
@@ -0,0 +1,6 @@
1
+ import { D, D as D2 } from "./chunks/divider.js";
2
+ export {
3
+ D as Divider,
4
+ D2 as default
5
+ };
6
+ //# sourceMappingURL=divider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"divider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const dropdownButton = require("./chunks/dropdown-button.cjs");
4
+ exports.DropdownButton = dropdownButton.DropdownButton;
5
+ exports.DropdownItem = dropdownButton.DropdownItem;
6
+ exports.default = dropdownButton.Dropdown;
7
+ //# sourceMappingURL=dropdown.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdown.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,7 @@
1
+ import { D, a, b } from "./chunks/dropdown-button.js";
2
+ export {
3
+ D as DropdownButton,
4
+ a as DropdownItem,
5
+ b as default
6
+ };
7
+ //# sourceMappingURL=dropdown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const iconButton = require("./chunks/icon-button.cjs");
4
+ exports.IconButton = iconButton.IconButton;
5
+ exports.default = iconButton.IconButton;
6
+ //# sourceMappingURL=icon-button.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-button.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
@@ -0,0 +1,6 @@
1
+ import { I, I as I2 } from "./chunks/icon-button.js";
2
+ export {
3
+ I as IconButton,
4
+ I2 as default
5
+ };
6
+ //# sourceMappingURL=icon-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
package/dist/icon.cjs ADDED
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const icon = require("./chunks/icon.cjs");
4
+ exports.Icon = icon.Icon;
5
+ exports.IconRegistry = icon.IconRegistry;
6
+ //# sourceMappingURL=icon.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
package/dist/icon.js ADDED
@@ -0,0 +1,6 @@
1
+ import { I, a } from "./chunks/icon.js";
2
+ export {
3
+ I as Icon,
4
+ a as IconRegistry
5
+ };
6
+ //# sourceMappingURL=icon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}