contain-css-svelte 1.0.0 → 1.0.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 (49) hide show
  1. package/dist/Card.svelte +26 -10
  2. package/dist/controls/Button.svelte +12 -0
  3. package/dist/controls/ButtonLink.svelte +16 -0
  4. package/dist/controls/Checkbox.svelte +4 -0
  5. package/dist/controls/Input.svelte +2 -0
  6. package/dist/controls/MiniButton.svelte +14 -0
  7. package/dist/controls/RadioButton.svelte +4 -0
  8. package/dist/controls/Select.svelte +13 -2
  9. package/dist/controls/TabItem.svelte +34 -2
  10. package/dist/controls/TabItem.svelte.d.ts +1 -1
  11. package/dist/dropdowns/DropdownMenu.svelte +44 -10
  12. package/dist/index.d.ts +3 -0
  13. package/dist/index.js +3 -0
  14. package/dist/layout/Accordion.svelte +8 -0
  15. package/dist/layout/Bar.svelte +4 -0
  16. package/dist/layout/Container.svelte +20 -10
  17. package/dist/layout/DataList.svelte +88 -0
  18. package/dist/layout/DataList.svelte.d.ts +33 -0
  19. package/dist/layout/DataListItem.svelte +456 -0
  20. package/dist/layout/DataListItem.svelte.d.ts +40 -0
  21. package/dist/layout/Fieldset.svelte +4 -0
  22. package/dist/layout/Form.svelte +2 -0
  23. package/dist/layout/Hero.svelte +4 -0
  24. package/dist/layout/MenuList.svelte +81 -17
  25. package/dist/layout/Page.svelte +22 -9
  26. package/dist/layout/Sidebar.svelte +26 -10
  27. package/dist/layout/SplitPane.svelte +24 -7
  28. package/dist/layout/TabBar.svelte +9 -1
  29. package/dist/layout/TabBar.svelte.d.ts +1 -1
  30. package/dist/layout/Table.svelte +17 -3
  31. package/dist/layout/Tile.svelte +27 -9
  32. package/dist/layout/Tile.svelte.d.ts +20 -6
  33. package/dist/misc/CodeInner.svelte +18 -0
  34. package/dist/misc/Progress.svelte +10 -0
  35. package/dist/misc/Tag.svelte +12 -0
  36. package/dist/overlays/Dialog.svelte +2 -0
  37. package/dist/overlays/Tooltip.svelte +4 -0
  38. package/dist/sass/_affordances.scss +36 -27
  39. package/dist/sass/_box.scss +10 -0
  40. package/dist/sass/_color.scss +9 -7
  41. package/dist/sass/_typography.scss +23 -0
  42. package/dist/typography/TextLayout.svelte +2 -0
  43. package/dist/vars/affordances.css +9 -0
  44. package/dist/vars/defaults.css +13 -0
  45. package/dist/vars/themes/dark.css +2 -2
  46. package/dist/vars/themes/light.css +1 -0
  47. package/dist/vars/themes/lightordark.css +6 -5
  48. package/dist/vars/typography.css +4 -0
  49. package/package.json +6 -3
package/dist/Card.svelte CHANGED
@@ -44,6 +44,8 @@ let hasFooter = $derived(Boolean(footer));
44
44
  color: var(--card-fg, var(--container-fg, var(--fg, unset)));
45
45
  --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
46
46
  --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
47
+ --fg: var(--card-fg, var(--container-fg, var(--fg, unset)));
48
+ --bg: var(--card-bg, var(--container-bg, var(--bg, unset)));
47
49
  border-radius: var(--card-border-radius, var(--container-border-radius, var(--border-radius, 0)));
48
50
  border: var(--card-border, var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
49
51
  display: flex;
@@ -148,6 +150,8 @@ let hasFooter = $derived(Boolean(footer));
148
150
  text-indent: var(--card-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
149
151
  font-variant: var(--card-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
150
152
  text-align: var(--card-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
153
+ font-size: var(--card-first-paragraph-first-paragraph-font-size, var(--container-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--card-font-size, var(--container-font-size, var(--font-size, inherit)))))))));
154
+ line-height: var(--card-first-paragraph-first-paragraph-line-height, var(--container-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--card-line-height, var(--container-line-height, var(--line-height, inherit)))))))));
151
155
  margin-block-start: var(--card-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
152
156
  }
153
157
 
@@ -215,29 +219,35 @@ let hasFooter = $derived(Boolean(footer));
215
219
  height: var(--h);
216
220
  container-type: size;
217
221
  overflow-y: auto;
222
+ scrollbar-width: thin;
223
+ scrollbar-color: transparent transparent;
218
224
  }
219
225
 
220
226
  .card.fixedHeight::-webkit-scrollbar {
221
- width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md))));
222
- height: var(--card-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, var(--gap))));
227
+ width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, 6px)));
228
+ height: var(--card-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, 6px)));
223
229
  }
224
230
 
225
231
  .card.fixedHeight::-webkit-scrollbar-track {
226
- background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
232
+ background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
227
233
  }
228
234
 
229
235
  .card.fixedHeight::-webkit-scrollbar-thumb {
230
- background: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
231
- border-radius: var(--card-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
236
+ background: transparent;
237
+ border-radius: var(--card-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, 3px)));
238
+ transition: background var(--card-transition, var(--container-transition, var(--transition, 300ms)));
232
239
  }
233
240
 
234
- .card.fixedHeight::-webkit-scrollbar-thumb:hover {
235
- background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
241
+ .card.fixedHeight:hover {
242
+ scrollbar-color: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3)))) var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
236
243
  }
237
244
 
238
- .card.fixedHeight {
239
- scrollbar-width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, thin)));
240
- scrollbar-color: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
245
+ .card.fixedHeight:hover::-webkit-scrollbar-thumb {
246
+ background: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3))));
247
+ }
248
+
249
+ .card.fixedHeight:hover::-webkit-scrollbar-thumb:hover {
250
+ background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
241
251
  }
242
252
 
243
253
  header,
@@ -253,6 +263,8 @@ header {
253
263
  color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
254
264
  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
255
265
  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
266
+ --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
267
+ --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
256
268
  box-sizing: border-box;
257
269
  padding: var(--card-header-padding, var(--bar-padding, var(--padding, 4px)));
258
270
  border: var(--card-header-border, var(--bar-border, var(--border, inherit)));
@@ -285,6 +297,8 @@ footer :global(h6) {
285
297
  color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
286
298
  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
287
299
  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
300
+ --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
301
+ --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
288
302
  }
289
303
 
290
304
  footer {
@@ -292,6 +306,8 @@ footer {
292
306
  color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
293
307
  --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
294
308
  --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
309
+ --fg: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
310
+ --bg: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
295
311
  box-sizing: border-box;
296
312
  padding: var(--card-footer-padding, var(--bar-padding, var(--padding, 4px)));
297
313
  border: var(--card-footer-border, var(--bar-border, var(--border, inherit)));
package/dist/controls/Button.svelte CHANGED
@@ -54,6 +54,8 @@ button {
54
54
  color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
55
55
  --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
56
56
  --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
57
+ --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
58
+ --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
57
59
  box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
58
60
  font-family: var(--button-font-family, var(--control-font-family, var(--control-font-family, inherit)));
59
61
  text-transform: var(--button-text-transform, var(--control-text-transform, var(--control-text-transform, inherit)));
@@ -100,6 +102,8 @@ button.primary {
100
102
  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
101
103
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
102
104
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
105
+ --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
106
+ --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
103
107
  font-family: var(--primary-font-family, var(--button-font-family, var(--button-font-family, inherit)));
104
108
  text-transform: var(--primary-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
105
109
  text-decoration: var(--primary-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -117,6 +121,8 @@ button.warning {
117
121
  color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
118
122
  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
119
123
  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
124
+ --fg: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
125
+ --bg: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
120
126
  font-family: var(--warning-font-family, var(--button-font-family, var(--button-font-family, inherit)));
121
127
  text-transform: var(--warning-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
122
128
  text-decoration: var(--warning-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -134,6 +140,8 @@ button.danger {
134
140
  color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
135
141
  --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
136
142
  --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
143
+ --fg: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
144
+ --bg: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
137
145
  font-family: var(--danger-font-family, var(--button-font-family, var(--button-font-family, inherit)));
138
146
  text-transform: var(--danger-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
139
147
  text-decoration: var(--danger-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -151,6 +159,8 @@ button.success {
151
159
  color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
152
160
  --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
153
161
  --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
162
+ --fg: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
163
+ --bg: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
154
164
  font-family: var(--success-font-family, var(--button-font-family, var(--button-font-family, inherit)));
155
165
  text-transform: var(--success-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
156
166
  text-decoration: var(--success-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -168,6 +178,8 @@ button.info {
168
178
  color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
169
179
  --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
170
180
  --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
181
+ --fg: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
182
+ --bg: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
171
183
  font-family: var(--info-font-family, var(--button-font-family, var(--button-font-family, inherit)));
172
184
  text-transform: var(--info-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
173
185
  text-decoration: var(--info-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
package/dist/controls/ButtonLink.svelte CHANGED
@@ -65,6 +65,8 @@ a[role=button] {
65
65
  color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
66
66
  --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
67
67
  --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
68
+ --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
69
+ --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
68
70
  box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
69
71
  font-family: var(--button-font-family, var(--control-font-family, var(--control-font-family, inherit)));
70
72
  text-transform: var(--button-text-transform, var(--control-text-transform, var(--control-text-transform, inherit)));
@@ -115,6 +117,8 @@ a[role=button]:hover {
115
117
  color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
116
118
  --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
117
119
  --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
120
+ --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
121
+ --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
118
122
  }
119
123
 
120
124
  a.primary[role=button]:hover {
@@ -122,6 +126,8 @@ a.primary[role=button]:hover {
122
126
  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
123
127
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
124
128
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
129
+ --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
130
+ --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
125
131
  }
126
132
 
127
133
  a.primary {
@@ -129,6 +135,8 @@ a.primary {
129
135
  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
130
136
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
131
137
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
138
+ --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
139
+ --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
132
140
  font-family: var(--primary-font-family, var(--a-font-family, var(--a-font-family, inherit)));
133
141
  text-transform: var(--primary-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
134
142
  text-decoration: var(--primary-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -146,6 +154,8 @@ a.warning {
146
154
  color: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
147
155
  --link-bg: var(--warning-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
148
156
  --link-fg: var(--warning-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
157
+ --fg: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
158
+ --bg: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
149
159
  font-family: var(--warning-font-family, var(--a-font-family, var(--a-font-family, inherit)));
150
160
  text-transform: var(--warning-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
151
161
  text-decoration: var(--warning-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -163,6 +173,8 @@ a.danger {
163
173
  color: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
164
174
  --link-bg: var(--danger-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
165
175
  --link-fg: var(--danger-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
176
+ --fg: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
177
+ --bg: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
166
178
  font-family: var(--danger-font-family, var(--a-font-family, var(--a-font-family, inherit)));
167
179
  text-transform: var(--danger-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
168
180
  text-decoration: var(--danger-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -180,6 +192,8 @@ a.success {
180
192
  color: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
181
193
  --link-bg: var(--success-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
182
194
  --link-fg: var(--success-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
195
+ --fg: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
196
+ --bg: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
183
197
  font-family: var(--success-font-family, var(--a-font-family, var(--a-font-family, inherit)));
184
198
  text-transform: var(--success-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
185
199
  text-decoration: var(--success-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -197,6 +211,8 @@ a.info {
197
211
  color: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
198
212
  --link-bg: var(--info-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
199
213
  --link-fg: var(--info-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
214
+ --fg: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
215
+ --bg: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
200
216
  font-family: var(--info-font-family, var(--a-font-family, var(--a-font-family, inherit)));
201
217
  text-transform: var(--info-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
202
218
  text-decoration: var(--info-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
package/dist/controls/Checkbox.svelte CHANGED
@@ -175,6 +175,8 @@ label::before {
175
175
  color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
176
176
  --link-bg: var(--checkbox-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
177
177
  --link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
178
+ --fg: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
179
+ --bg: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
178
180
  border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
179
181
  box-sizing: border-box;
180
182
  border-radius: var(--checkbox-radius, 0);
@@ -185,6 +187,8 @@ label:has(input:checked)::before {
185
187
  color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
186
188
  --link-bg: var(--checkbox-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--checkbox-link-bg, var(--checkbox-link-bg, inherit)))));
187
189
  --link-fg: var(--checkbox-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--checkbox-link-fg, var(--checkbox-link-fg, inherit)))));
190
+ --fg: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
191
+ --bg: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
188
192
  border: var(--checkbox-checked-border, var(--toggle-on-border, var(--border, checkbox)));
189
193
  box-sizing: border-box;
190
194
  }
package/dist/controls/Input.svelte CHANGED
@@ -38,6 +38,8 @@ input {
38
38
  color: var(--input-fg, var(--ui-fg, var(--fg, unset)));
39
39
  --link-bg: var(--input-link-bg, var(--ui-link-bg, var(--ui-link-bg, inherit)));
40
40
  --link-fg: var(--input-link-fg, var(--ui-link-fg, var(--ui-link-fg, inherit)));
41
+ --fg: var(--input-fg, var(--ui-fg, var(--fg, unset)));
42
+ --bg: var(--input-bg, var(--ui-bg, var(--bg, unset)));
41
43
  width: var(--input-width);
42
44
  }
43
45
 
package/dist/controls/MiniButton.svelte CHANGED
@@ -34,6 +34,8 @@ button.primary {
34
34
  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
35
35
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
36
36
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
37
+ --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
38
+ --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
37
39
  }
38
40
 
39
41
  button {
@@ -55,6 +57,8 @@ button {
55
57
  color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
56
58
  --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
57
59
  --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
60
+ --fg: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
61
+ --bg: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
58
62
  font-family: var(--button-font);
59
63
  cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
60
64
  transition: filter, transform var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
@@ -105,6 +109,8 @@ button.primary {
105
109
  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
106
110
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
107
111
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
112
+ --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
113
+ --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
108
114
  }
109
115
 
110
116
  button.warning {
@@ -112,6 +118,8 @@ button.warning {
112
118
  color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
113
119
  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
114
120
  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
121
+ --fg: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
122
+ --bg: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
115
123
  }
116
124
 
117
125
  button.danger {
@@ -119,6 +127,8 @@ button.danger {
119
127
  color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
120
128
  --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
121
129
  --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
130
+ --fg: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
131
+ --bg: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
122
132
  }
123
133
 
124
134
  button.success {
@@ -126,6 +136,8 @@ button.success {
126
136
  color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
127
137
  --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
128
138
  --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
139
+ --fg: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
140
+ --bg: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
129
141
  }
130
142
 
131
143
  button.info {
@@ -133,4 +145,6 @@ button.info {
133
145
  color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
134
146
  --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
135
147
  --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
148
+ --fg: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
149
+ --bg: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
136
150
  }</style>
package/dist/controls/RadioButton.svelte CHANGED
@@ -154,6 +154,8 @@ label.radio-item::before {
154
154
  color: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
155
155
  --link-bg: var(--radio-button-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
156
156
  --link-fg: var(--radio-button-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
157
+ --fg: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
158
+ --bg: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
157
159
  border: var(--radio-button-border, var(--border, 1px solid var(--border-color)));
158
160
  box-sizing: border-box;
159
161
  border-radius: var(--radio-button-border-radius, 50%);
@@ -165,6 +167,8 @@ label.radio-item:has(input:checked)::before {
165
167
  color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
166
168
  --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit))));
167
169
  --link-fg: var(--radio-button-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--primary-link-fg, inherit))));
170
+ --fg: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
171
+ --bg: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
168
172
  border: var(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));
169
173
  box-sizing: border-box;
170
174
  width: var(--radio-button-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
package/dist/controls/Select.svelte CHANGED
@@ -77,14 +77,20 @@ $effect(() => {
77
77
  <div class="dropdown-wrapper" style:--target-width={targetWidth}>
78
78
  <DropdownMenu>
79
79
  {#snippet label()}
80
- <span class="select-dropdown">
80
+ <span
81
+ class="select-dropdown"
82
+ style:--fg="var(--select-fg, var(--control-fg, var(--fg)))"
83
+ >
81
84
  <span class="select-dropdown-label">
82
85
  {#if activeOption}{@html activeOption.html}{:else}-{/if}
83
86
  </span>
84
87
  </span>
85
88
  {/snippet}
86
89
  {#each options as option, index}
87
- <li bind:this={optionButtons[index]}>
90
+ <li
91
+ bind:this={optionButtons[index]}
92
+ style:--fg="var(--menu-fg, var(--control-fg, var(--fg)))"
93
+ >
88
94
  <button
89
95
  type="button"
90
96
  role="menuitemradio"
@@ -132,6 +138,8 @@ select,
132
138
  color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
133
139
  --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))))));
134
140
  --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
141
+ --fg: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
142
+ --bg: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, unset))))));
135
143
  width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100vw))));
136
144
  text-overflow: ellipsis;
137
145
  font-family: var(--select-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family, unset))));
@@ -180,6 +188,9 @@ button:focus-visible {
180
188
  color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
181
189
  --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))))));
182
190
  --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
191
+ --fg: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
192
+ --bg: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, unset))))));
193
+ --menu-item-justify: var(--select-menu-item-justify, flex-start);
183
194
  }
184
195
 
185
196
  .dropdown-menu :global(.dropdown-menu) > :global(button) {
package/dist/controls/TabItem.svelte CHANGED
@@ -4,8 +4,8 @@ const { active = false, icon, children, ...restProps } = $props();
4
4
  const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "width", "height"]));
5
5
  </script>
6
6
 
7
- <div class="tab" class:active {style} {...restProps}>
8
- <Button primary={active} {icon}>
7
+ <div class="tab" class:active {style}>
8
+ <Button primary={active} {icon} {...restProps}>
9
9
  {@render children?.()}
10
10
  </Button>
11
11
  </div>
@@ -28,6 +28,8 @@ div > :global(div > button) {
28
28
  color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
29
29
  --link-bg: var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
30
30
  --link-fg: var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
31
+ --fg: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
32
+ --bg: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
31
33
  box-sizing: border-box;
32
34
  padding: var(--tab-padding, var(--button-padding, var(--control-padding, var(--secondary-padding, var(--padding, 4px)))));
33
35
  border: var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, inherit)))));
@@ -36,6 +38,20 @@ div > :global(div > button) {
36
38
  border-bottom: var(--tab-border-bottom, var(--button-border-bottom, var(--control-border-bottom, var(--secondary-border-bottom, var(--border-bottom, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
37
39
  border-left: var(--tab-border-left, var(--button-border-left, var(--control-border-left, var(--secondary-border-left, var(--border-left, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
38
40
  border-radius: var(--tab-border-radius, var(--button-border-radius, var(--control-border-radius, var(--secondary-border-radius, var(--border-radius, none)))));
41
+ font-family: var(--tab-font-family, var(--button-font-family, var(--control-font-family, var(--secondary-font-family, var(--font-family, unset)))));
42
+ text-transform: var(--tab-text-transform, var(--button-text-transform, var(--control-text-transform, var(--secondary-text-transform, var(--text-transform, unset)))));
43
+ text-decoration: var(--tab-text-decoration, var(--button-text-decoration, var(--control-text-decoration, var(--secondary-text-decoration, var(--text-decoration, unset)))));
44
+ font-size: var(--tab-font-size, var(--button-font-size, var(--control-font-size, var(--secondary-font-size, var(--font-size, unset)))));
45
+ font-weight: var(--tab-font-weight, var(--button-font-weight, var(--control-font-weight, var(--secondary-font-weight, var(--font-weight, unset)))));
46
+ line-height: var(--tab-line-height, var(--button-line-height, var(--control-line-height, var(--secondary-line-height, var(--line-height, unset)))));
47
+ letter-spacing: var(--tab-letter-spacing, var(--button-letter-spacing, var(--control-letter-spacing, var(--secondary-letter-spacing, var(--letter-spacing, unset)))));
48
+ margin-top: var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset)))));
49
+ margin-top: var(--tab-margin-top, var(--button-margin-top, var(--control-margin-top, var(--secondary-margin-top, var(--margin-top, unset)))));
50
+ margin-bottom: var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset)))));
51
+ margin-bottom: var(--tab-margin-bottom, var(--button-margin-bottom, var(--control-margin-bottom, var(--secondary-margin-bottom, var(--margin-bottom, unset)))));
52
+ text-indent: var(--tab-indent, var(--button-indent, var(--control-indent, var(--secondary-indent, var(--indent, unset)))));
53
+ font-variant: var(--tab-font-variant, var(--button-font-variant, var(--control-font-variant, var(--secondary-font-variant, var(--font-variant, unset)))));
54
+ text-align: var(--tab-text-align, var(--button-text-align, var(--control-text-align, var(--secondary-text-align, var(--text-align, unset)))));
39
55
  }
40
56
 
41
57
  div > :global(button):focus-visible,
@@ -57,4 +73,20 @@ div.active > :global(div > button) {
57
73
  color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
58
74
  --link-bg: var(--tab-active-link-bg, var(--primary-link-bg, var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))))));
59
75
  --link-fg: var(--tab-active-link-fg, var(--primary-link-fg, var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))))));
76
+ --fg: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
77
+ --bg: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
78
+ font-family: var(--tab-active-font-family, var(--tab-font-family, var(--button-font-family, var(--control-font-family, var(--secondary-font-family, var(--font-family, unset))))));
79
+ text-transform: var(--tab-active-text-transform, var(--tab-text-transform, var(--button-text-transform, var(--control-text-transform, var(--secondary-text-transform, var(--text-transform, unset))))));
80
+ text-decoration: var(--tab-active-text-decoration, var(--tab-text-decoration, var(--button-text-decoration, var(--control-text-decoration, var(--secondary-text-decoration, var(--text-decoration, unset))))));
81
+ font-size: var(--tab-active-font-size, var(--tab-font-size, var(--button-font-size, var(--control-font-size, var(--secondary-font-size, var(--font-size, unset))))));
82
+ font-weight: var(--tab-active-font-weight, var(--tab-font-weight, var(--button-font-weight, var(--control-font-weight, var(--secondary-font-weight, var(--font-weight, unset))))));
83
+ line-height: var(--tab-active-line-height, var(--tab-line-height, var(--button-line-height, var(--control-line-height, var(--secondary-line-height, var(--line-height, unset))))));
84
+ letter-spacing: var(--tab-active-letter-spacing, var(--tab-letter-spacing, var(--button-letter-spacing, var(--control-letter-spacing, var(--secondary-letter-spacing, var(--letter-spacing, unset))))));
85
+ margin-top: var(--tab-active-margin, var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset))))));
86
+ margin-top: var(--tab-active-margin-top, var(--tab-margin-top, var(--button-margin-top, var(--control-margin-top, var(--secondary-margin-top, var(--margin-top, unset))))));
87
+ margin-bottom: var(--tab-active-margin, var(--tab-margin, var(--button-margin, var(--control-margin, var(--secondary-margin, var(--margin, unset))))));
88
+ margin-bottom: var(--tab-active-margin-bottom, var(--tab-margin-bottom, var(--button-margin-bottom, var(--control-margin-bottom, var(--secondary-margin-bottom, var(--margin-bottom, unset))))));
89
+ text-indent: var(--tab-active-indent, var(--tab-indent, var(--button-indent, var(--control-indent, var(--secondary-indent, var(--indent, unset))))));
90
+ font-variant: var(--tab-active-font-variant, var(--tab-font-variant, var(--button-font-variant, var(--control-font-variant, var(--secondary-font-variant, var(--font-variant, unset))))));
91
+ text-align: var(--tab-active-text-align, var(--tab-text-align, var(--button-text-align, var(--control-text-align, var(--secondary-text-align, var(--text-align, unset))))));
60
92
  }</style>
package/dist/controls/TabItem.svelte.d.ts CHANGED
@@ -5,7 +5,7 @@ type Props = {
5
5
  active?: boolean;
6
6
  icon?: Snippet;
7
7
  children?: Snippet;
8
- } & BaseStyleProps & HTMLAttributes<HTMLDivElement>;
8
+ } & BaseStyleProps & HTMLAttributes<HTMLButtonElement>;
9
9
  declare const TabItem: import("svelte").Component<Props, {}, "">;
10
10
  type TabItem = ReturnType<typeof TabItem>;
11
11
  export default TabItem;
package/dist/dropdowns/DropdownMenu.svelte CHANGED
@@ -166,6 +166,8 @@ button {
166
166
  color: var(--menu-fg, var(--button-fg, var(--container-fg, var(--fg, unset))));
167
167
  --link-bg: var(--menu-link-bg, var(--button-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
168
168
  --link-fg: var(--menu-link-fg, var(--button-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
169
+ --fg: var(--menu-fg, var(--button-fg, var(--container-fg, var(--fg, unset))));
170
+ --bg: var(--menu-bg, var(--button-bg, var(--container-bg, var(--bg, unset))));
169
171
  box-sizing: border-box;
170
172
  border: var(--menu-border, var(--button-border, var(--container-border, var(--border, inherit))));
171
173
  border-top: var(--menu-border-top, var(--button-border-top, var(--container-border-top, var(--border-top, var(--menu-border, var(--button-border, var(--container-border, var(--border, none))))))));
@@ -209,6 +211,8 @@ button {
209
211
  color: var(--menu-fg, var(--container-fg, var(--fg, unset)));
210
212
  --link-bg: var(--menu-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
211
213
  --link-fg: var(--menu-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
214
+ --fg: var(--menu-fg, var(--container-fg, var(--fg, unset)));
215
+ --bg: var(--menu-bg, var(--container-bg, var(--bg, unset)));
212
216
  box-sizing: border-box;
213
217
  padding: var(--menu-padding, var(--padding, 4px));
214
218
  border: var(--menu-border, var(--border, inherit));
@@ -280,29 +284,39 @@ button {
280
284
  pointer-events: none;
281
285
  transition: var(--dropdown-transition, 150ms) opacity;
282
286
  overflow-y: auto;
287
+ scrollbar-width: thin;
288
+ scrollbar-color: transparent transparent;
283
289
  }
284
290
 
285
291
  .dropdown-container::-webkit-scrollbar {
286
- width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, var(--space-md))));
287
- height: var(--dropdown-menu-scrollbar-height, var(--menu-scrollbar-height, var(--scrollbar-height, var(--gap))));
292
+ width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, 6px)));
293
+ height: var(--dropdown-menu-scrollbar-height, var(--menu-scrollbar-height, var(--scrollbar-height, 6px)));
288
294
  }
289
295
 
290
296
  .dropdown-container::-webkit-scrollbar-track {
291
- background: var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
297
+ background: var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
292
298
  }
293
299
 
294
300
  .dropdown-container::-webkit-scrollbar-thumb {
295
- background: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
296
- border-radius: var(--dropdown-menu-scrollbar-thumb-radius, var(--menu-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
301
+ background: transparent;
302
+ border-radius: var(--dropdown-menu-scrollbar-thumb-radius, var(--menu-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, 3px)));
303
+ transition: background var(--dropdown-menu-transition, var(--menu-transition, var(--transition, 300ms)));
297
304
  }
298
305
 
299
- .dropdown-container::-webkit-scrollbar-thumb:hover {
300
- background: var(--dropdown-menu-scrollbar-thumb-hover-bg, var(--menu-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
306
+ .dropdown-container:hover {
307
+ scrollbar-color: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3)))) var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
308
+ }
309
+
310
+ .dropdown-container:hover::-webkit-scrollbar-thumb {
311
+ background: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3))));
312
+ }
313
+
314
+ .dropdown-container:hover::-webkit-scrollbar-thumb:hover {
315
+ background: var(--dropdown-menu-scrollbar-thumb-hover-bg, var(--menu-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
301
316
  }
302
317
 
303
318
  .dropdown-container {
304
- scrollbar-width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, thin)));
305
- scrollbar-color: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
319
+ overflow-x: hidden;
306
320
  }
307
321
 
308
322
  .dropdown-container:popover-open {
@@ -310,10 +324,12 @@ button {
310
324
  pointer-events: all;
311
325
  position: fixed;
312
326
  inset: unset;
327
+ overflow-y: auto;
328
+ overflow-x: hidden;
313
329
  }
314
330
 
315
331
  .dropdown-content {
316
- width: var(--dropdown-menu-width, 12em);
332
+ width: max(var(--dropdown-menu-min-width, 12em), var(--dropdown-menu-width, 12em));
317
333
  min-width: var(--dropdown-menu-min-width, 12em);
318
334
  box-shadow: var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space)))) var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space)))) var(--dropdown-menu-shadow-blur, var(--dropdown-shadow-blur, var(--shadow-blur, var(--space)))) var(--dropdown-menu-shadow-color, var(--dropdown-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
319
335
  box-sizing: border-box;
@@ -339,6 +355,24 @@ button {
339
355
  padding: 0;
340
356
  }
341
357
 
358
+ .dropdown-content :global(button),
359
+ .dropdown-content :global(a) {
360
+ white-space: var(--dropdown-wrap-mode, wrap);
361
+ min-width: 0;
362
+ }
363
+
364
+ .dropdown-content :global([style*="--dropdown-wrap-mode: nowrap"] button),
365
+ .dropdown-content :global([style*="--dropdown-wrap-mode: nowrap"] a) {
366
+ text-overflow: ellipsis;
367
+ overflow: hidden;
368
+ }
369
+
370
+ .dropdown-content :global(button span),
371
+ .dropdown-content :global(a span) {
372
+ white-space: var(--dropdown-wrap-mode, wrap);
373
+ min-width: 0;
374
+ }
375
+
342
376
  nav {
343
377
  position: relative;
344
378
  }
package/dist/index.d.ts CHANGED
@@ -14,6 +14,8 @@ import Bar from "./layout/Bar.svelte";
14
14
  import Column from "./layout/Column.svelte";
15
15
  import Columns from "./layout/Columns.svelte";
16
16
  import Container from "./layout/Container.svelte";
17
+ import DataList from "./layout/DataList.svelte";
18
+ import DataListItem from "./layout/DataListItem.svelte";
17
19
  import Fieldset from "./layout/Fieldset.svelte";
18
20
  import Form from "./layout/Form.svelte";
19
21
  import FormItem from "./layout/FormItem.svelte";
@@ -44,6 +46,7 @@ export { Button, ButtonLink, Checkbox, Input, Slider, RadioButton, MiniButton, S
44
46
  export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
45
47
  export { TextLayout, Code, Accordion };
46
48
  export { Card, Tile, Form, FormItem, FormProvider, Fieldset };
49
+ export { DataList, DataListItem };
47
50
  export { Row, Column, Columns, SplitPane, Sidebar };
48
51
  export { Dialog };
49
52
  export { Progress, Tooltip };
package/dist/index.js CHANGED
@@ -15,6 +15,8 @@ import Bar from "./layout/Bar.svelte";
15
15
  import Column from "./layout/Column.svelte";
16
16
  import Columns from "./layout/Columns.svelte";
17
17
  import Container from "./layout/Container.svelte";
18
+ import DataList from "./layout/DataList.svelte";
19
+ import DataListItem from "./layout/DataListItem.svelte";
18
20
  import Fieldset from "./layout/Fieldset.svelte";
19
21
  import Form from "./layout/Form.svelte";
20
22
  import FormItem from "./layout/FormItem.svelte";
@@ -44,6 +46,7 @@ export { Button, ButtonLink, Checkbox, Input, Slider, RadioButton, MiniButton, S
44
46
  export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
45
47
  export { TextLayout, Code, Accordion };
46
48
  export { Card, Tile, Form, FormItem, FormProvider, Fieldset };
49
+ export { DataList, DataListItem };
47
50
  export { Row, Column, Columns, SplitPane, Sidebar };
48
51
  export { Dialog };
49
52
  export { Progress, Tooltip };
package/dist/layout/Accordion.svelte CHANGED
@@ -54,6 +54,8 @@ div {
54
54
  color: var(--accordion-fg, var(--container-fg, var(--fg, unset)));
55
55
  --link-bg: var(--accordion-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
56
56
  --link-fg: var(--accordion-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
57
+ --fg: var(--accordion-fg, var(--container-fg, var(--fg, unset)));
58
+ --bg: var(--accordion-bg, var(--container-bg, var(--bg, unset)));
57
59
  font-family: var(--accordion-font-family, var(--header-font-family, var(--font-family, unset)));
58
60
  text-transform: var(--accordion-text-transform, var(--header-text-transform, var(--text-transform, unset)));
59
61
  text-decoration: var(--accordion-text-decoration, var(--header-text-decoration, var(--text-decoration, unset)));
@@ -98,6 +100,8 @@ div :global(details > summary) {
98
100
  color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
99
101
  --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
100
102
  --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
103
+ --fg: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
104
+ --bg: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
101
105
  box-sizing: border-box;
102
106
  border: var(--accordion-summary-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
103
107
  /* border-top: fn.var-with-fallbacks(--border-top,
@@ -163,6 +167,8 @@ div :global(details[open] > summary) {
163
167
  color: var(--accordion-summary-open-fg, var(--primary-fg, var(--fg, unset)));
164
168
  --link-bg: var(--accordion-summary-open-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit)));
165
169
  --link-fg: var(--accordion-summary-open-link-fg, var(--primary-link-fg, var(--primary-link-fg, inherit)));
170
+ --fg: var(--accordion-summary-open-fg, var(--primary-fg, var(--fg, unset)));
171
+ --bg: var(--accordion-summary-open-bg, var(--primary-bg, var(--bg, unset)));
166
172
  font-family: var(--accordion-summary-open-font-family, var(--accordion-summary-font-family, var(--accordion-summary-font-family, inherit)));
167
173
  text-transform: var(--accordion-summary-open-text-transform, var(--accordion-summary-text-transform, var(--accordion-summary-text-transform, inherit)));
168
174
  text-decoration: var(--accordion-summary-open-text-decoration, var(--accordion-summary-text-decoration, var(--accordion-summary-text-decoration, inherit)));
@@ -202,6 +208,8 @@ div :global(summary) {
202
208
  color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
203
209
  --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
204
210
  --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
211
+ --fg: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
212
+ --bg: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
205
213
  box-sizing: border-box;
206
214
  border: var(--accordion-summary-border, var(--container-border, var(--border, inherit)));
207
215
  border-top: var(--accordion-summary-border-top, var(--container-border-top, var(--border-top, var(--accordion-summary-border, var(--container-border, var(--border, none))))));