contain-css-svelte 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/Card.svelte +156 -156
  2. package/dist/controls/Button.svelte +6 -0
  3. package/dist/controls/ButtonLink.svelte +1 -0
  4. package/dist/controls/Checkbox.svelte +1 -0
  5. package/dist/controls/CircleButton.svelte +56 -43
  6. package/dist/controls/RadioButton.svelte +1 -0
  7. package/dist/controls/Toggle.svelte +1 -0
  8. package/dist/cssprops.js +1 -0
  9. package/dist/dropdowns/DropdownMenu.svelte +2 -0
  10. package/dist/layout/Accordion.svelte +1 -0
  11. package/dist/layout/Container.svelte +156 -156
  12. package/dist/layout/DataListItem.svelte +160 -179
  13. package/dist/layout/Form.svelte +156 -156
  14. package/dist/layout/FormItem.svelte +6 -2
  15. package/dist/layout/Hero.svelte +156 -156
  16. package/dist/layout/MenuList.svelte +5 -0
  17. package/dist/layout/Sidebar.svelte +25 -24
  18. package/dist/layout/Table.svelte +157 -156
  19. package/dist/layout/Tile.svelte +157 -156
  20. package/dist/misc/Progress.svelte +156 -156
  21. package/dist/overlays/Dialog.svelte +157 -157
  22. package/dist/overlays/Tooltip.svelte +156 -156
  23. package/dist/sass/_affordances.scss +7 -2
  24. package/dist/sass/_typography.scss +15 -12
  25. package/dist/typography/TextLayout.svelte +156 -156
  26. package/dist/vars/soft-corners.css +1 -1
  27. package/dist/vars/themes/bootstrap.css +5 -5
  28. package/dist/vars/themes/material.css +5 -5
  29. package/dist/vars/themes/retro.css +5 -5
  30. package/package.json +1 -1
package/dist/controls/Button.svelte CHANGED
@@ -185,6 +185,7 @@ button {
185
185
  button:hover {
186
186
  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
187
187
  transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
188
+ color: var(--_color);
188
189
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
189
190
  box-shadow: var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
190
191
  }
@@ -317,6 +318,7 @@ button.primary {
317
318
  button.primary:hover {
318
319
  filter: var(--primary-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
319
320
  transform: var(--primary-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
321
+ color: var(--_color);
320
322
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
321
323
  box-shadow: var(--primary-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
322
324
  }
@@ -439,6 +441,7 @@ button.warning {
439
441
  button.warning:hover {
440
442
  filter: var(--warning-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
441
443
  transform: var(--warning-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
444
+ color: var(--_color);
442
445
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
443
446
  box-shadow: var(--warning-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
444
447
  }
@@ -561,6 +564,7 @@ button.danger {
561
564
  button.danger:hover {
562
565
  filter: var(--danger-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
563
566
  transform: var(--danger-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
567
+ color: var(--_color);
564
568
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
565
569
  box-shadow: var(--danger-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
566
570
  }
@@ -683,6 +687,7 @@ button.success {
683
687
  button.success:hover {
684
688
  filter: var(--success-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
685
689
  transform: var(--success-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
690
+ color: var(--_color);
686
691
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
687
692
  box-shadow: var(--success-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
688
693
  }
@@ -805,6 +810,7 @@ button.info {
805
810
  button.info:hover {
806
811
  filter: var(--info-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
807
812
  transform: var(--info-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
813
+ color: var(--_color);
808
814
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
809
815
  box-shadow: var(--info-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
810
816
  }
package/dist/controls/ButtonLink.svelte CHANGED
@@ -188,6 +188,7 @@ a[role=button] {
188
188
  a[role=button]:hover {
189
189
  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
190
190
  transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
191
+ color: var(--_color);
191
192
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
192
193
  box-shadow: var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
193
194
  }
package/dist/controls/Checkbox.svelte CHANGED
@@ -268,6 +268,7 @@ label::before {
268
268
  label:hover::before {
269
269
  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
270
270
  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
271
+ color: var(--_color);
271
272
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
272
273
  box-shadow: var(--checkbox-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
273
274
  }
package/dist/controls/CircleButton.svelte CHANGED
@@ -1,14 +1,14 @@
1
1
  <script lang="ts">import { elementProps } from "../util";
2
2
  import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
3
3
  let { primary = false, warning = false, danger = false, success = false, info = false, type = "button", children, class: className, ...restProps } = $props();
4
- /* The shorthands mini-button's own CSS backs, one group per mixin it
4
+ /* The shorthands circle-button's own CSS backs, one group per mixin it
5
5
  includes. The Props type is derived from this same array, so what the
6
6
  component accepts and what it emits cannot drift apart. */
7
7
  const CIRCLE_BUTTON_VARS = [
8
8
  ...COLOR_VARS,
9
9
  ...TYPOGRAPHY_VARS,
10
10
  ];
11
- const el = $derived(elementProps(restProps, "mini-button", [
11
+ const el = $derived(elementProps(restProps, "circle-button", [
12
12
  ...CIRCLE_BUTTON_VARS,
13
13
  "padding",
14
14
  "width",
@@ -132,31 +132,37 @@ button.primary {
132
132
  }
133
133
 
134
134
  button {
135
- font-family: var(--mini-button-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, unset)))));
136
- text-transform: var(--mini-button-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, unset)))));
137
- text-decoration: var(--mini-button-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, unset)))));
138
- --_font-size: var(--mini-button-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, unset)))));
135
+ /* `circle-button` first, `mini-button` behind it. This component was
136
+ called MiniButton until it was renamed to stop people putting text in a
137
+ circle; its variables kept the old prefix. Every include and every
138
+ var() below names both, so `--circle-button-bg` is the name to reach
139
+ for while an existing `--mini-button-bg` -- in a theme, or in an app
140
+ that set one years ago -- keeps working untouched. */
141
+ font-family: var(--circle-button-font-family, var(--mini-button-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, unset))))));
142
+ text-transform: var(--circle-button-text-transform, var(--mini-button-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, unset))))));
143
+ text-decoration: var(--circle-button-text-decoration, var(--mini-button-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, unset))))));
144
+ --_font-size: var(--circle-button-font-size, var(--mini-button-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, unset))))));
139
145
  font-size: var(--_font-size);
140
- font-weight: var(--mini-button-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, unset)))));
141
- line-height: var(--mini-button-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, unset)))));
142
- letter-spacing: var(--mini-button-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset)))));
143
- --_margin-top: var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
144
- --_margin-top: var(--mini-button-margin-top, var(--button-margin-top, var(--ui-margin-top, var(--control-margin-top, var(--margin-top, unset)))));
146
+ font-weight: var(--circle-button-font-weight, var(--mini-button-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, unset))))));
147
+ line-height: var(--circle-button-line-height, var(--mini-button-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, unset))))));
148
+ letter-spacing: var(--circle-button-letter-spacing, var(--mini-button-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset))))));
149
+ --_margin-top: var(--circle-button-margin, var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset))))));
150
+ --_margin-top: var(--circle-button-margin-top, var(--mini-button-margin-top, var(--button-margin-top, var(--ui-margin-top, var(--control-margin-top, var(--margin-top, unset))))));
145
151
  margin-top: var(--_margin-top);
146
- --_margin-bottom: var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
147
- --_margin-bottom: var(--mini-button-margin-bottom, var(--button-margin-bottom, var(--ui-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset)))));
152
+ --_margin-bottom: var(--circle-button-margin, var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset))))));
153
+ --_margin-bottom: var(--circle-button-margin-bottom, var(--mini-button-margin-bottom, var(--button-margin-bottom, var(--ui-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset))))));
148
154
  margin-bottom: var(--_margin-bottom);
149
- text-indent: var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
150
- font-variant: var(--mini-button-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
151
- text-align: var(--mini-button-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
152
- --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
153
- --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
154
- --_bg-mix-color: var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
155
- --_bg-mix-amount: var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
156
- --_fg-mix-color: var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
157
- --_fg-mix-amount: var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
158
- --_bg-base: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
159
- --_fg-base: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
155
+ text-indent: var(--circle-button-indent, var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset))))));
156
+ font-variant: var(--circle-button-font-variant, var(--mini-button-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset))))));
157
+ text-align: var(--circle-button-text-align, var(--mini-button-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset))))));
158
+ --link-bg: var(--circle-button-link-bg, var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)))));
159
+ --link-fg: var(--circle-button-link-fg, var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)))));
160
+ --_bg-mix-color: var(--circle-button-bg-mix-color, var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))))));
161
+ --_bg-mix-amount: var(--circle-button-bg-mix-amount, var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))))));
162
+ --_fg-mix-color: var(--circle-button-fg-mix-color, var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))))));
163
+ --_fg-mix-amount: var(--circle-button-fg-mix-amount, var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))))));
164
+ --_bg-base: var(--circle-button-bg, var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))))));
165
+ --_fg-base: var(--circle-button-fg, var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))))));
160
166
  --_background-color: color-mix(
161
167
  in srgb,
162
168
  var(--_bg-base),
@@ -233,35 +239,36 @@ button {
233
239
  );
234
240
  background-color: var(--_background-color);
235
241
  color: var(--_color);
236
- cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
237
- transition: filter var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
242
+ cursor: var(--circle-button-cursor, var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)))));
243
+ transition: filter var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), background-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), border-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), box-shadow var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))))), transform var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))));
238
244
  }
239
245
 
240
246
  button:hover {
241
- filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
242
- transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
247
+ filter: var(--circle-button-hover-filter, var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))))));
248
+ transform: var(--circle-button-hover-transform, var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)))));
249
+ color: var(--_color);
243
250
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
244
- box-shadow: var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
251
+ box-shadow: var(--circle-button-hover-box-shadow, var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
245
252
  }
246
253
 
247
254
  button:active {
248
- filter: var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
249
- transform: var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none))));
255
+ filter: var(--circle-button-active-filter, var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))))));
256
+ transform: var(--circle-button-active-transform, var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)))));
250
257
  background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
251
- box-shadow: var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
258
+ box-shadow: var(--circle-button-active-box-shadow, var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
252
259
  }
253
260
 
254
261
  button:disabled {
255
- cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
256
- transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
257
- filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
262
+ cursor: var(--circle-button-disabled-cursor, var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)))));
263
+ transform: var(--circle-button-disabled-transform, var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)))));
264
+ filter: var(--circle-button-disabled-filter, var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))))));
258
265
  background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
259
- box-shadow: var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
266
+ box-shadow: var(--circle-button-disabled-box-shadow, var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
260
267
  }
261
268
 
262
269
  button {
263
270
  --_box-shadow:
264
- var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space))))) var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space))))) var(--mini-button-shadow-blur, var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space))))) var(--mini-button-shadow-color, var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4)))));
271
+ var(--circle-button-shadow-distance, var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))))) var(--circle-button-shadow-distance, var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))))) var(--circle-button-shadow-blur, var(--mini-button-shadow-blur, var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))))) var(--circle-button-shadow-color, var(--mini-button-shadow-color, var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))))));
265
272
  box-shadow: var(--_box-shadow);
266
273
  }
267
274
 
@@ -273,13 +280,19 @@ button:focus-visible {
273
280
 
274
281
  button {
275
282
  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
276
- width: var(--mini-button-size, var(--icon-size, 1em));
277
- height: var(--mini-button-size, var(--icon-size, 1em));
283
+ width: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
284
+ height: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
278
285
  /* Make sure we don't shrink in a flex container */
279
- min-width: var(--mini-button-size, var(--icon-size, 1em));
280
- min-height: var(--mini-button-size, var(--icon-size, 1em));
281
- border-radius: var(--mini-button-radius, 50%);
282
- border: var(--mini-button-border, button-border, none);
286
+ min-width: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
287
+ min-height: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
288
+ border-radius: var(--circle-button-radius, var(--mini-button-radius, 50%));
289
+ /* var-with-fallbacks, not var: this was
290
+ `var(--mini-button-border, button-border, none)`, which reads as
291
+ `--mini-button-border` with the fallback "button-border, none". That is
292
+ not a valid border, so `--button-border` was never consulted and an
293
+ unset chain produced `none` only by accident (invalid at
294
+ computed-value time -> the initial `medium none`). */
295
+ border: var(--circle-button-border, var(--mini-button-border, var(--button-border, var(--border, none))));
283
296
  display: inline-grid;
284
297
  place-content: center;
285
298
  line-height: 1;
package/dist/controls/RadioButton.svelte CHANGED
@@ -247,6 +247,7 @@ label.radio-item::before {
247
247
  label.radio-item:hover::before {
248
248
  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
249
249
  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
250
+ color: var(--_color);
250
251
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
251
252
  box-shadow: var(--radio-button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
252
253
  }
package/dist/controls/Toggle.svelte CHANGED
@@ -222,6 +222,7 @@ input[type=checkbox] {
222
222
  .toggle:hover .toggle-track {
223
223
  filter: var(--toggle-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
224
224
  transform: var(--toggle-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
225
+ color: var(--_color);
225
226
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
226
227
  box-shadow: var(--toggle-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
227
228
  }
package/dist/cssprops.js CHANGED
@@ -126,6 +126,7 @@ export const cssProperties = Array.from(new Set([
126
126
  const components = [
127
127
  ...[
128
128
  "button",
129
+ "circle-button",
129
130
  "mini-button",
130
131
  "menu",
131
132
  "menu-trigger",
package/dist/dropdowns/DropdownMenu.svelte CHANGED
@@ -406,6 +406,7 @@ button {
406
406
  button:hover {
407
407
  filter: var(--menu-trigger-hover-filter, var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05))))));
408
408
  transform: var(--menu-trigger-hover-transform, var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none)))));
409
+ color: var(--_color);
409
410
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
410
411
  box-shadow: var(--menu-trigger-hover-box-shadow, var(--menu-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
411
412
  }
@@ -544,6 +545,7 @@ button {
544
545
  .dropdown-content :global(.menu):hover {
545
546
  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));
546
547
  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
548
+ color: var(--_color);
547
549
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
548
550
  box-shadow: var(--menu-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
549
551
  }
package/dist/layout/Accordion.svelte CHANGED
@@ -291,6 +291,7 @@ div :global(details > summary) {
291
291
  div :global(details > summary):hover {
292
292
  filter: var(--accordion-hover-filter, var(--hover-filter, brightness(1.05)));
293
293
  transform: var(--accordion-hover-transform, var(--hover-transform, none));
294
+ color: var(--_color);
294
295
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
295
296
  box-shadow: var(--accordion-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
296
297
  }