contain-css-svelte 1.4.1 → 1.4.3

package/dist/layout/Fieldset.svelte

@@ -80,6 +80,31 @@ const el = $derived(elementProps({
    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/layout/Form.svelte

@@ -78,6 +78,31 @@ const el = $derived(elementProps({
    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/layout/FormItem.svelte

@@ -67,6 +67,31 @@ const effectiveLayout = $derived(above ? "above" : below ? "below" : effectiveLa
    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/layout/GridLayout.svelte

@@ -48,6 +48,31 @@ const el = $derived(elementProps(restProps, "grid-layout", GRID_LAYOUT_VARS));
    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/layout/Hero.svelte

@@ -52,6 +52,31 @@ const el = $derived(elementProps(restProps, "hero", [
    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.
@@ -370,11 +395,21 @@ const el = $derived(elementProps(restProps, "hero", [
   height: var(--hero-height, 100vh);
   /* font-size: var(--hero-font-size, 2rem); */
   box-sizing: border-box;
+}
+
+/* Fade the content, not the hero itself: fading the whole block makes its
+   background flash in over the page on every load. */
+.hero > :global(*) {
   animation-name: fade-in;
   animation-duration: var(--hero-animation-duration, 1s);
   animation-timing-function: var(--hero-animation-timing-function, ease-in-out);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .hero > :global(*) {
+    animation: none;
+  }
+}
 @keyframes fade-in {
   0% {
     filter: blur(3px);

package/dist/layout/Inline.svelte

@@ -58,6 +58,31 @@ const el = $derived(elementProps({ justify, align, gap, wrap, ...restProps }, "i
    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/layout/MenuList.svelte

@@ -52,6 +52,31 @@ const el = $derived(elementProps(restProps, "menu", [
    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.
@@ -185,14 +210,14 @@ const el = $derived(elementProps(restProps, "menu", [
   filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
   transform: var(--menu-item-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(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
 }
 
 .menu :global(li):active {
   filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
   transform: var(--menu-item-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(--menu-item-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -200,7 +225,7 @@ const el = $derived(elementProps(restProps, "menu", [
   cursor: var(--menu-item-disabled-cursor, var(--disabled-cursor, not-allowed));
   transform: var(--menu-item-disabled-transform, var(--disabled-transform, none));
   filter: var(--menu-item-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(--menu-item-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -230,7 +255,7 @@ const el = $derived(elementProps(restProps, "menu", [
   filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
   transform: var(--menu-item-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(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -241,7 +266,7 @@ const el = $derived(elementProps(restProps, "menu", [
 .menu :global(li[tabindex]:not([tabindex="-1"])):active {
   filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
   transform: var(--menu-item-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(--menu-item-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -253,7 +278,7 @@ const el = $derived(elementProps(restProps, "menu", [
   cursor: var(--menu-item-disabled-cursor, var(--disabled-cursor, not-allowed));
   transform: var(--menu-item-disabled-transform, var(--disabled-transform, none));
   filter: var(--menu-item-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(--menu-item-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -265,7 +290,7 @@ const el = $derived(elementProps(restProps, "menu", [
   filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
   transform: var(--menu-item-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(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
   outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
   outline-offset: var(--focus-inset-outline-offset, -3px);
@@ -403,7 +428,7 @@ const el = $derived(elementProps(restProps, "menu", [
   filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
   transform: var(--menu-item-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(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
   outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
   outline-offset: var(--focus-inset-outline-offset, -3px);
@@ -418,14 +443,14 @@ const el = $derived(elementProps(restProps, "menu", [
   filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
   transform: var(--menu-item-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(--menu-item-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
 }
 
 .menu :global(a):active, .menu :global(button):active, .menu :global(input[type="submit"]):active, .menu :global(.button):active {
   filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
   transform: var(--menu-item-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(--menu-item-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -433,7 +458,7 @@ const el = $derived(elementProps(restProps, "menu", [
   cursor: var(--menu-item-disabled-cursor, var(--disabled-cursor, not-allowed));
   transform: var(--menu-item-disabled-transform, var(--disabled-transform, none));
   filter: var(--menu-item-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(--menu-item-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)));
 }
 

package/dist/layout/Page.svelte

@@ -115,6 +115,31 @@ onMount(() => {
    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/layout/RowContainer.svelte

@@ -47,6 +47,31 @@ const el = $derived(elementProps(restProps, "row-container", ROW_CONTAINER_VARS)
    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/layout/Sidebar.svelte

@@ -85,6 +85,31 @@ const expandedHamburger = $derived(open ?? false);
    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.
@@ -693,20 +718,20 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     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)))));
     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(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
   }
   aside.overlay > button:active {
     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%)));
+    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(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
   }
   aside.overlay > button:disabled {
     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%)));
+    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(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
   }
   aside.overlay > button:focus-visible {
@@ -1272,20 +1297,20 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     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)))));
     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(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
   }
   aside > button:active {
     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%)));
+    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(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
   }
   aside > button:disabled {
     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%)));
+    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(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
   }
   aside > button:focus-visible {

package/dist/layout/SidebarContainer.svelte

@@ -44,6 +44,31 @@ const el = $derived(elementProps(restProps, "sidebar-container", [
    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/layout/SplitPane.svelte

@@ -142,6 +142,31 @@ onMount(() => {
    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/layout/Stack.svelte

@@ -58,6 +58,31 @@ const el = $derived(elementProps({ justify, align: resolvedAlign, gap, ...restPr
    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/layout/TabBar.svelte

@@ -72,6 +72,31 @@ let lastActive = $state(active);
    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.