contain-css-svelte 1.4.1 → 1.4.3

package/dist/Card.svelte

@@ -67,6 +67,31 @@ let hasFooter = $derived(Boolean(footer));
    text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
    has to happen where the real element is, in the global consumer rule; only
    the VALUES move to context vars here. */
+/* Text reset for an overlay's root element: a tooltip, popover menu or dialog
+   that sits in the DOM wherever its trigger was placed.
+
+   The top layer changes how an element paints and where it is positioned, not
+   what it inherits. A popover declared inside a `white-space: nowrap` table
+   cell is nowrap too, and one inside a bold, uppercase, centred header is
+   bold, uppercase and centred -- styles that belong to the trigger's context,
+   not to the overlay. typography-props() doesn't stop that: its chains end in
+   `unset`, which for an inherited property means "take the parent's value".
+
+   So this re-declares every inherited text property with a real default at
+   the end of the same variable chain. The vars still win (--tooltip-*, then
+   the category, then the global), and custom properties still inherit --
+   that is how theming reaches an overlay -- but when nothing is set, the
+   overlay gets its own defaults instead of its host's.
+
+   INCLUDE IT AFTER typography-props() / typography-container-props() in the
+   same rule: it has to beat their `unset` fallbacks by source order.
+
+   Deliberately left inheriting:
+   - direction, writing-mode: the document's script direction is the
+     overlay's too.
+   - visibility: a hidden subtree should not be able to show an overlay.
+   - font-family: every theme defines --font-family at :root, and there is no
+     neutral value to fall back to that would beat "the page's font". */
 /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.

package/dist/controls/Button.svelte

@@ -62,6 +62,31 @@ const el = $derived(elementProps(restProps, "button", [
    text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
    has to happen where the real element is, in the global consumer rule; only
    the VALUES move to context vars here. */
+/* Text reset for an overlay's root element: a tooltip, popover menu or dialog
+   that sits in the DOM wherever its trigger was placed.
+
+   The top layer changes how an element paints and where it is positioned, not
+   what it inherits. A popover declared inside a `white-space: nowrap` table
+   cell is nowrap too, and one inside a bold, uppercase, centred header is
+   bold, uppercase and centred -- styles that belong to the trigger's context,
+   not to the overlay. typography-props() doesn't stop that: its chains end in
+   `unset`, which for an inherited property means "take the parent's value".
+
+   So this re-declares every inherited text property with a real default at
+   the end of the same variable chain. The vars still win (--tooltip-*, then
+   the category, then the global), and custom properties still inherit --
+   that is how theming reaches an overlay -- but when nothing is set, the
+   overlay gets its own defaults instead of its host's.
+
+   INCLUDE IT AFTER typography-props() / typography-container-props() in the
+   same rule: it has to beat their `unset` fallbacks by source order.
+
+   Deliberately left inheriting:
+   - direction, writing-mode: the document's script direction is the
+     overlay's too.
+   - visibility: a hidden subtree should not be able to show an overlay.
+   - font-family: every theme defines --font-family at :root, and there is no
+     neutral value to fall back to that would beat "the page's font". */
 /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
@@ -224,14 +249,14 @@ button:hover {
   filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
   transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   box-shadow: var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
 }
 
 button:active {
   filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   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%)));
+  background-color: color-mix(in oklab, 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(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
 }
 
@@ -239,7 +264,7 @@ button:disabled {
   cursor: var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
   transform: var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
   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%)));
+  background-color: color-mix(in oklab, 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(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))));
 }
 
@@ -357,14 +382,14 @@ button.primary:hover {
   filter: var(--primary-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
   transform: var(--primary-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   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)))));
 }
 
 button.primary:active {
   filter: var(--primary-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
   transform: var(--primary-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%)));
+  background-color: color-mix(in oklab, 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(--primary-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -372,7 +397,7 @@ button.primary:disabled {
   cursor: var(--primary-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
   transform: var(--primary-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
   filter: var(--primary-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%)));
+  background-color: color-mix(in oklab, 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(--primary-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -480,14 +505,14 @@ button.warning:hover {
   filter: var(--warning-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
   transform: var(--warning-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   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)))));
 }
 
 button.warning:active {
   filter: var(--warning-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
   transform: var(--warning-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%)));
+  background-color: color-mix(in oklab, 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(--warning-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -495,7 +520,7 @@ button.warning:disabled {
   cursor: var(--warning-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
   transform: var(--warning-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
   filter: var(--warning-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%)));
+  background-color: color-mix(in oklab, 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(--warning-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -603,14 +628,14 @@ button.danger:hover {
   filter: var(--danger-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
   transform: var(--danger-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   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)))));
 }
 
 button.danger:active {
   filter: var(--danger-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
   transform: var(--danger-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%)));
+  background-color: color-mix(in oklab, 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(--danger-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -618,7 +643,7 @@ button.danger:disabled {
   cursor: var(--danger-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
   transform: var(--danger-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
   filter: var(--danger-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%)));
+  background-color: color-mix(in oklab, 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(--danger-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -726,14 +751,14 @@ button.success:hover {
   filter: var(--success-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
   transform: var(--success-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   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)))));
 }
 
 button.success:active {
   filter: var(--success-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
   transform: var(--success-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%)));
+  background-color: color-mix(in oklab, 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(--success-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -741,7 +766,7 @@ button.success:disabled {
   cursor: var(--success-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
   transform: var(--success-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
   filter: var(--success-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%)));
+  background-color: color-mix(in oklab, 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(--success-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -849,14 +874,14 @@ button.info:hover {
   filter: var(--info-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
   transform: var(--info-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   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)))));
 }
 
 button.info:active {
   filter: var(--info-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
   transform: var(--info-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%)));
+  background-color: color-mix(in oklab, 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(--info-active-box-shadow, var(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
 }
 
@@ -864,7 +889,7 @@ button.info:disabled {
   cursor: var(--info-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
   transform: var(--info-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
   filter: var(--info-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%)));
+  background-color: color-mix(in oklab, 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(--info-disabled-box-shadow, var(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
 }
 

package/dist/controls/ButtonLink.svelte

@@ -64,6 +64,31 @@ const iconSlotted = $derived(Boolean(icon));
    text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
    has to happen where the real element is, in the global consumer rule; only
    the VALUES move to context vars here. */
+/* Text reset for an overlay's root element: a tooltip, popover menu or dialog
+   that sits in the DOM wherever its trigger was placed.
+
+   The top layer changes how an element paints and where it is positioned, not
+   what it inherits. A popover declared inside a `white-space: nowrap` table
+   cell is nowrap too, and one inside a bold, uppercase, centred header is
+   bold, uppercase and centred -- styles that belong to the trigger's context,
+   not to the overlay. typography-props() doesn't stop that: its chains end in
+   `unset`, which for an inherited property means "take the parent's value".
+
+   So this re-declares every inherited text property with a real default at
+   the end of the same variable chain. The vars still win (--tooltip-*, then
+   the category, then the global), and custom properties still inherit --
+   that is how theming reaches an overlay -- but when nothing is set, the
+   overlay gets its own defaults instead of its host's.
+
+   INCLUDE IT AFTER typography-props() / typography-container-props() in the
+   same rule: it has to beat their `unset` fallbacks by source order.
+
+   Deliberately left inheriting:
+   - direction, writing-mode: the document's script direction is the
+     overlay's too.
+   - visibility: a hidden subtree should not be able to show an overlay.
+   - font-family: every theme defines --font-family at :root, and there is no
+     neutral value to fall back to that would beat "the page's font". */
 /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
@@ -227,14 +252,14 @@ a[role=button]:hover {
   filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
   transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   box-shadow: var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
 }
 
 a[role=button]:active {
   filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   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%)));
+  background-color: color-mix(in oklab, 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(--button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
 }
 
@@ -242,7 +267,7 @@ a[role=button]:disabled {
   cursor: var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
   transform: var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
   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%)));
+  background-color: color-mix(in oklab, 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(--button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))));
 }
 
@@ -259,95 +284,9 @@ a[role=button] {
 
 a[role=button]:hover {
   text-decoration: none;
-  /* Override other link styles that may be outside
-  us */
-  /* @include color-props(button, control, secondary); */
-}
-
-a.primary[role=button]:hover {
-  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
-  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
-  --_bg-mix-color: var(--primary-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(--primary-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(--primary-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(--primary-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(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
-  --_background-color: color-mix(
-    in srgb,
-    var(--_bg-base),
-    var(--_bg-mix-color) var(--_bg-mix-amount)
-  );
-  --_color: color-mix(
-    in srgb,
-    var(--_fg-base),
-    var(--_fg-mix-color) var(--_fg-mix-amount)
-  );
-  --muted-color: var(--muted-color-override, var(--_background-color));
-  --primary-text-fg: var(
-    --primary-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--primary-color)
-        var(--primary-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --secondary-text-fg: var(
-    --secondary-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--secondary-color)
-        var(--secondary-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --info-text-fg: var(
-    --info-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--info-color)
-        var(--info-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --success-text-fg: var(
-    --success-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--success-color)
-        var(--success-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --warning-text-fg: var(
-    --warning-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--warning-color)
-        var(--warning-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --danger-text-fg: var(
-    --danger-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--danger-color)
-        var(--danger-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --muted-text-fg: var(
-    --muted-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--muted-color)
-        var(--muted-text-amount, var(--text-amount, 50%))
-    )
-  );
-  background-color: var(--_background-color);
+  /* Override other link styles that may be outside us. Text color only:
+     re-applying the full color-props here (as a primary-only rule used
+     to) resets background-color and cancels the clickable hover. */
   color: var(--_color);
 }
 

package/dist/controls/Checkbox.svelte

@@ -90,6 +90,31 @@ let ref = $state(null);
    text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
    has to happen where the real element is, in the global consumer rule; only
    the VALUES move to context vars here. */
+/* Text reset for an overlay's root element: a tooltip, popover menu or dialog
+   that sits in the DOM wherever its trigger was placed.
+
+   The top layer changes how an element paints and where it is positioned, not
+   what it inherits. A popover declared inside a `white-space: nowrap` table
+   cell is nowrap too, and one inside a bold, uppercase, centred header is
+   bold, uppercase and centred -- styles that belong to the trigger's context,
+   not to the overlay. typography-props() doesn't stop that: its chains end in
+   `unset`, which for an inherited property means "take the parent's value".
+
+   So this re-declares every inherited text property with a real default at
+   the end of the same variable chain. The vars still win (--tooltip-*, then
+   the category, then the global), and custom properties still inherit --
+   that is how theming reaches an overlay -- but when nothing is set, the
+   overlay gets its own defaults instead of its host's.
+
+   INCLUDE IT AFTER typography-props() / typography-container-props() in the
+   same rule: it has to beat their `unset` fallbacks by source order.
+
+   Deliberately left inheriting:
+   - direction, writing-mode: the document's script direction is the
+     overlay's too.
+   - visibility: a hidden subtree should not be able to show an overlay.
+   - font-family: every theme defines --font-family at :root, and there is no
+     neutral value to fall back to that would beat "the page's font". */
 /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
@@ -303,18 +328,23 @@ label::before {
   border-radius: var(--checkbox-radius, 0);
 }
 
-label:hover::before {
+/* The :has(:checked) variants are needed because the checked rule below
+   outranks a bare label:hover::before and would swallow the hover; the mix
+   still reads the checked colors through --_background-color. */
+label:hover::before,
+label:has(input:checked):hover::before {
   filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
   transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   box-shadow: var(--checkbox-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
 }
 
-label:active::before {
+label:active::before,
+label:has(input:checked):active::before {
   filter: var(--checkbox-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   transform: var(--checkbox-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%)));
+  background-color: color-mix(in oklab, 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(--checkbox-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
 }
 

package/dist/controls/CircleButton.svelte

@@ -55,6 +55,31 @@ const el = $derived(elementProps(restProps, "circle-button", [
    text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
    has to happen where the real element is, in the global consumer rule; only
    the VALUES move to context vars here. */
+/* Text reset for an overlay's root element: a tooltip, popover menu or dialog
+   that sits in the DOM wherever its trigger was placed.
+
+   The top layer changes how an element paints and where it is positioned, not
+   what it inherits. A popover declared inside a `white-space: nowrap` table
+   cell is nowrap too, and one inside a bold, uppercase, centred header is
+   bold, uppercase and centred -- styles that belong to the trigger's context,
+   not to the overlay. typography-props() doesn't stop that: its chains end in
+   `unset`, which for an inherited property means "take the parent's value".
+
+   So this re-declares every inherited text property with a real default at
+   the end of the same variable chain. The vars still win (--tooltip-*, then
+   the category, then the global), and custom properties still inherit --
+   that is how theming reaches an overlay -- but when nothing is set, the
+   overlay gets its own defaults instead of its host's.
+
+   INCLUDE IT AFTER typography-props() / typography-container-props() in the
+   same rule: it has to beat their `unset` fallbacks by source order.
+
+   Deliberately left inheriting:
+   - direction, writing-mode: the document's script direction is the
+     overlay's too.
+   - visibility: a hidden subtree should not be able to show an overlay.
+   - font-family: every theme defines --font-family at :root, and there is no
+     neutral value to fall back to that would beat "the page's font". */
 /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
    one value (both sides equal) or two (start end), so there is no separate
    "which side" prop to remember and no 4-value shorthand order to get wrong.
@@ -82,93 +107,6 @@ const el = $derived(elementProps(restProps, "circle-button", [
   container queries don't get their styles overridden by large media queries.
   */
 /* Convenience groupings */
-button.primary {
-  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
-  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
-  --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
-  --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
-  --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
-  --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
-  --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
-  --_background-color: color-mix(
-    in srgb,
-    var(--_bg-base),
-    var(--_bg-mix-color) var(--_bg-mix-amount)
-  );
-  --_color: color-mix(
-    in srgb,
-    var(--_fg-base),
-    var(--_fg-mix-color) var(--_fg-mix-amount)
-  );
-  --muted-color: var(--muted-color-override, var(--_background-color));
-  --primary-text-fg: var(
-    --primary-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--primary-color)
-        var(--primary-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --secondary-text-fg: var(
-    --secondary-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--secondary-color)
-        var(--secondary-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --info-text-fg: var(
-    --info-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--info-color)
-        var(--info-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --success-text-fg: var(
-    --success-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--success-color)
-        var(--success-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --warning-text-fg: var(
-    --warning-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--warning-color)
-        var(--warning-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --danger-text-fg: var(
-    --danger-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--danger-color)
-        var(--danger-text-amount, var(--text-amount, 50%))
-    )
-  );
-  --muted-text-fg: var(
-    --muted-text-fg-override,
-    color-mix(
-      in srgb,
-      var(--_color),
-      var(--muted-color)
-        var(--muted-text-amount, var(--text-amount, 50%))
-    )
-  );
-  background-color: var(--_background-color);
-  color: var(--_color);
-}
-
 button {
   /* `circle-button` first, `mini-button` behind it. This component was
      called MiniButton until it was renamed to stop people putting text in a
@@ -285,14 +223,14 @@ button:hover {
   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)))));
   color: var(--_color);
-  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%)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
   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(--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%)));
+  background-color: color-mix(in oklab, 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(--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))))));
 }
 
@@ -300,7 +238,7 @@ button:disabled {
   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%)));
+  background-color: color-mix(in oklab, 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(--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))))));
 }
 
@@ -337,7 +275,10 @@ button {
   flex-shrink: 0; /* Don't shrink any more */
 }
 
-button.primary {
+/* Variants go through :where() so they only choose which colors apply.
+   As plain `button.primary` they tied with the clickable mixin's
+   `button:hover` and, coming later, cancelled the hover background. */
+button:where(.primary) {
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
   --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
@@ -424,7 +365,7 @@ button.primary {
   color: var(--_color);
 }
 
-button.warning {
+button:where(.warning) {
   --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
   --_bg-mix-color: var(--warning-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
@@ -511,7 +452,7 @@ button.warning {
   color: var(--_color);
 }
 
-button.danger {
+button:where(.danger) {
   --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
   --_bg-mix-color: var(--danger-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
@@ -598,7 +539,7 @@ button.danger {
   color: var(--_color);
 }
 
-button.success {
+button:where(.success) {
   --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
   --_bg-mix-color: var(--success-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
@@ -685,7 +626,7 @@ button.success {
   color: var(--_color);
 }
 
-button.info {
+button:where(.info) {
   --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
   --_bg-mix-color: var(--info-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));