contain-css-svelte 1.2.0 → 1.2.1

package/dist/controls/CircleButton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">import { elementProps } from "../util";
 import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
 let { primary = false, warning = false, danger = false, success = false, info = false, type = "button", children, class: className, ...restProps } = $props();
-/* The shorthands mini-button's own CSS backs, one group per mixin it
+/* The shorthands circle-button's own CSS backs, one group per mixin it
    includes. The Props type is derived from this same array, so what the
    component accepts and what it emits cannot drift apart. */
 const CIRCLE_BUTTON_VARS = [
     ...COLOR_VARS,
     ...TYPOGRAPHY_VARS,
 ];
-const el = $derived(elementProps(restProps, "mini-button", [
+const el = $derived(elementProps(restProps, "circle-button", [
     ...CIRCLE_BUTTON_VARS,
     "padding",
     "width",
@@ -132,31 +132,37 @@ button.primary {
 }
 
 button {
-  font-family: var(--mini-button-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, unset)))));
-  text-transform: var(--mini-button-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, unset)))));
-  text-decoration: var(--mini-button-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, unset)))));
-  --_font-size: var(--mini-button-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, unset)))));
+  /* `circle-button` first, `mini-button` behind it. This component was
+     called MiniButton until it was renamed to stop people putting text in a
+     circle; its variables kept the old prefix. Every include and every
+     var() below names both, so `--circle-button-bg` is the name to reach
+     for while an existing `--mini-button-bg` -- in a theme, or in an app
+     that set one years ago -- keeps working untouched. */
+  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))))));
+  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))))));
+  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))))));
+  --_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))))));
   font-size: var(--_font-size);
-  font-weight: var(--mini-button-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, unset)))));
-  line-height: var(--mini-button-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, unset)))));
-  letter-spacing: var(--mini-button-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset)))));
-  --_margin-top: var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
-  --_margin-top: var(--mini-button-margin-top, var(--button-margin-top, var(--ui-margin-top, var(--control-margin-top, var(--margin-top, unset)))));
+  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))))));
+  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))))));
+  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))))));
+  --_margin-top: var(--circle-button-margin, var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset))))));
+  --_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))))));
   margin-top: var(--_margin-top);
-  --_margin-bottom: var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
-  --_margin-bottom: var(--mini-button-margin-bottom, var(--button-margin-bottom, var(--ui-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset)))));
+  --_margin-bottom: var(--circle-button-margin, var(--mini-button-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset))))));
+  --_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))))));
   margin-bottom: var(--_margin-bottom);
-  text-indent: var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
-  font-variant: var(--mini-button-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
-  text-align: var(--mini-button-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
-  --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
-  --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
-  --_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)))));
-  --_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%)))));
-  --_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)))));
-  --_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%)))));
-  --_bg-base: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_fg-base: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  text-indent: var(--circle-button-indent, var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset))))));
+  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))))));
+  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))))));
+  --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)))));
+  --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)))));
+  --_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))))));
+  --_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%))))));
+  --_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))))));
+  --_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%))))));
+  --_bg-base: var(--circle-button-bg, var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))))));
+  --_fg-base: var(--circle-button-fg, var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))))));
   --_background-color: color-mix(
     in srgb,
     var(--_bg-base),
@@ -233,35 +239,35 @@ button {
   );
   background-color: var(--_background-color);
   color: var(--_color);
-  cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  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))));
+  cursor: var(--circle-button-cursor, var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)))));
+  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)))));
 }
 
 button:hover {
-  filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
-  transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
+  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))))));
+  transform: var(--circle-button-hover-transform, var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)))));
   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%)));
-  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)))));
+  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))))));
 }
 
 button:active {
-  filter: var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
-  transform: var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none))));
+  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))))));
+  transform: var(--circle-button-active-transform, var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)))));
   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%)));
-  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)))));
+  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))))));
 }
 
 button:disabled {
-  cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
-  transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
-  filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
+  cursor: var(--circle-button-disabled-cursor, var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)))));
+  transform: var(--circle-button-disabled-transform, var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)))));
+  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))))));
   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%)));
-  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)))));
+  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))))));
 }
 
 button {
   --_box-shadow:
-    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)))));
+    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))))));
   box-shadow: var(--_box-shadow);
 }
 
@@ -273,13 +279,19 @@ button:focus-visible {
 
 button {
   margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
-  width: var(--mini-button-size, var(--icon-size, 1em));
-  height: var(--mini-button-size, var(--icon-size, 1em));
+  width: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
+  height: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
   /* Make sure we don't shrink in a flex container */
-  min-width: var(--mini-button-size, var(--icon-size, 1em));
-  min-height: var(--mini-button-size, var(--icon-size, 1em));
-  border-radius: var(--mini-button-radius, 50%);
-  border: var(--mini-button-border, button-border, none);
+  min-width: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
+  min-height: var(--circle-button-size, var(--mini-button-size, var(--icon-size, 1em)));
+  border-radius: var(--circle-button-radius, var(--mini-button-radius, 50%));
+  /* var-with-fallbacks, not var: this was
+     `var(--mini-button-border, button-border, none)`, which reads as
+     `--mini-button-border` with the fallback "button-border, none". That is
+     not a valid border, so `--button-border` was never consulted and an
+     unset chain produced `none` only by accident (invalid at
+     computed-value time -> the initial `medium none`). */
+  border: var(--circle-button-border, var(--mini-button-border, var(--button-border, var(--border, none))));
   display: inline-grid;
   place-content: center;
   line-height: 1;

package/dist/cssprops.js

@@ -126,6 +126,7 @@ export const cssProperties = Array.from(new Set([
 const components = [
     ...[
         "button",
+        "circle-button",
         "mini-button",
         "menu",
         "menu-trigger",

package/dist/layout/FormItem.svelte

@@ -61,8 +61,12 @@ const effectiveLayout = $derived(above ? "above" : below ? "below" : effectiveLa
   align-items: var(--form-label-align, baseline);
   justify-content: var(--form-label-justify, flex-start);
   gap: var(--form-label-horizontal-gap, var(--padding));
-  padding-top: var(--padding, form-item, 8px);
-  padding-bottom: var(--padding, form-item, 8px);
+  /* var-with-fallbacks, not var: `var(--padding, form-item, 8px)` asks for
+     `--padding` with the fallback "form-item, 8px", which is not a length --
+     so `--form-item-padding` was never consulted and an unset `--padding`
+     collapsed the padding to 0 rather than 8px. */
+  padding-top: var(--form-item-padding, var(--padding, 8px));
+  padding-bottom: var(--form-item-padding, var(--padding, 8px));
   font-family: var(--form-item-font-family, var(--ui-font-family, var(--font-family, unset)));
   text-transform: var(--form-item-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
   text-decoration: var(--form-item-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));

package/dist/layout/Sidebar.svelte

@@ -598,20 +598,20 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     position: absolute;
     top: var(--padding);
     left: 0;
-    border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
+    border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border: var(--mini-button-border);
+    border: var(--circle-button-border, var(--mini-button-border));
     width: var(--_sidebar-expander-width);
     height: var(--_sidebar-expander-height);
-    --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
-    --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
-    --_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)))));
-    --_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%)))));
-    --_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)))));
-    --_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%)))));
-    --_bg-base: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-    --_fg-base: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+    --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)))));
+    --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)))));
+    --_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))))));
+    --_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%))))));
+    --_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))))));
+    --_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%))))));
+    --_bg-base: var(--circle-button-bg, var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))))));
+    --_fg-base: var(--circle-button-fg, var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))))));
     --_background-color: color-mix(
       in srgb,
       var(--_bg-base),
@@ -688,27 +688,27 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     );
     background-color: var(--_background-color);
     color: var(--_color);
-    cursor: var(--mini-button-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
-    transition: filter var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
+    cursor: var(--circle-button-cursor, var(--mini-button-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer)))));
+    transition: filter var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), background-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), border-color var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), box-shadow var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), transform var(--circle-button-transition, var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))));
   }
   aside > button:hover {
-    filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));
-    transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
+    filter: var(--circle-button-hover-filter, var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05))))));
+    transform: var(--circle-button-hover-transform, var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none)))));
     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%)));
-    box-shadow: var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
+    box-shadow: var(--circle-button-hover-box-shadow, var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
   }
   aside > button:active {
-    filter: var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
-    transform: var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
+    filter: var(--circle-button-active-filter, var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9))))));
+    transform: var(--circle-button-active-transform, var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none)))));
     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%)));
-    box-shadow: var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
+    box-shadow: var(--circle-button-active-box-shadow, var(--mini-button-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
   }
   aside > button:disabled {
-    cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed))));
-    transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
-    filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
+    cursor: var(--circle-button-disabled-cursor, var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed)))));
+    transform: var(--circle-button-disabled-transform, var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none)))));
+    filter: var(--circle-button-disabled-filter, var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5))))));
     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%)));
-    box-shadow: var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
+    box-shadow: var(--circle-button-disabled-box-shadow, var(--mini-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
   }
   aside > button:focus-visible {
     outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
@@ -716,12 +716,12 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
   }
   aside > button::after {
-    color: var(--mini-button-fg, currentColor);
+    color: var(--circle-button-fg, var(--mini-button-fg, currentColor));
     filter: var(--sidebar-mobile-icon-filter, none);
   }
   aside > button.close {
     left: calc(var(--sidebar-width) - var(--_sidebar-expander-width) + var(--padding));
-    border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
+    border-radius: var(--circle-button-radius, var(--mini-button-radius, var(--button-radius, var(--radius, 50%))));
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }

package/dist/overlays/Dialog.svelte

@@ -99,7 +99,7 @@ let ref;
 .close-bar {
   position: sticky;
   top: var(--padding, 1rem);
-  height: var(--dialog-padding, var(--mini-button-size, var(--icon-size, 32px)));
+  height: var(--dialog-padding, var(--circle-button-size, var(--mini-button-size, var(--icon-size, 32px))));
   display: flex;
   justify-content: flex-end;
 }

package/dist/vars/soft-corners.css

@@ -3,7 +3,7 @@
   --square-radius: 0;
 
   --button-border-radius: 999px;
-  --mini-button-radius: 999px;
+  --circle-button-radius: 999px;
 
   --card-border-radius: 1rem;
   --fieldset-border-radius: 1.125rem;

package/dist/vars/themes/bootstrap.css

@@ -47,11 +47,11 @@
   --button-bg: #6c757d;
   --button-fg: #ffffff;
   --button-border: 1px solid #6c757d;
-  --mini-button-bg: #6c757d;
-  --mini-button-fg: #ffffff;
-  --mini-button-border: 1px solid #6c757d;
-  --mini-button-radius: 0.375rem;
-  --mini-button-size: calc(1.5em + 0.75rem);
+  --circle-button-bg: #6c757d;
+  --circle-button-fg: #ffffff;
+  --circle-button-border: 1px solid #6c757d;
+  --circle-button-radius: 0.375rem;
+  --circle-button-size: calc(1.5em + 0.75rem);
   --card-bg: #ffffff;
   --card-fg: #212529;
   --card-header-bg: #f8f9fa;

package/dist/vars/themes/material.css

@@ -81,15 +81,15 @@
   --button-border: none;
   --button-padding: 0.625rem 1rem;
   --button-border-radius: 999px;
-  --mini-button-bg: color-mix(
+  --circle-button-bg: color-mix(
     in srgb,
     var(--surface-bg, #ffffff) 82%,
     var(--surface-fg, var(--material-color-blue-grey-900)) 18%
   );
-  --mini-button-fg: var(--surface-fg, var(--material-color-blue-grey-900));
-  --mini-button-border: none;
-  --mini-button-radius: 999px;
-  --mini-button-size: 2rem;
+  --circle-button-fg: var(--surface-fg, var(--material-color-blue-grey-900));
+  --circle-button-border: none;
+  --circle-button-radius: 999px;
+  --circle-button-size: 2rem;
 
   --card-bg: #ffffff;
   --card-fg: var(--material-color-blue-grey-900);

package/dist/vars/themes/retro.css

@@ -78,11 +78,11 @@
   --button-border: 2px outset #c0c0c0;
   --button-padding: 0.3rem 0.75rem;
   --button-border-radius: 0;
-  --mini-button-bg: #c0c0c0;
-  --mini-button-fg: #000000;
-  --mini-button-border: 2px outset #c0c0c0;
-  --mini-button-radius: 0;
-  --mini-button-size: 1.8rem;
+  --circle-button-bg: #c0c0c0;
+  --circle-button-fg: #000000;
+  --circle-button-border: 2px outset #c0c0c0;
+  --circle-button-radius: 0;
+  --circle-button-size: 1.8rem;
 
   --card-bg: #c0c0c0;
   --card-fg: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",