contain-css-svelte 1.4.1 → 1.4.3

package/dist/layout/Table.svelte

@@ -1,4 +1,6 @@
-<script lang="ts">/* No attribute pass-through, deliberately: the sticky variant renders the
+<script lang="ts">import { BROWSER, DEV } from "esm-env";
+import { onDestroy } from "svelte";
+/* No attribute pass-through, deliberately: the sticky variant renders the
    header twice -- once as the visible sticky <table>, once collapsed inside
    the body table so the browser sizes the columns from it. Spreading a
    caller's `id` would emit it twice, which is invalid. Set attributes on the
@@ -36,7 +38,6 @@ let columnCount = $state(0);
 let overhang = $state(0);
 let resizeObserver = $state(null);
 let tableWidth = $state(null);
-import { onDestroy } from "svelte";
 onDestroy(() => {
     resizeObserver?.disconnect();
     resizeObserver = null;
@@ -139,25 +140,60 @@ $effect(() => {
    accessibility tree, with no effect on layout.
 
    The thead is the caller's markup, rendered from their snippet, so it
-   cannot carry the attributes in the template. Watch the table's direct
-   children instead, in case the caller's snippet swaps its <thead> out. */
+   cannot carry the attributes in the template. Watch both tables' direct
+   children in case a snippet swaps its group out.
+
+   Older consumers sometimes supplied bare <tr>s in these named snippets.
+   Reparenting Svelte-owned nodes into a new <thead>/<tbody> is unsafe, but
+   sticky mode can still degrade safely: the visible table tells us how many
+   direct rows belong to the header, so mark the same leading rows in the
+   body table as its collapsed measuring copy. Bare tbody rows remain where
+   Svelte put them and visible. Warn in development so callers can restore
+   the semantic row groups without shipping a doubled header meanwhile. */
+let warnedBareThead = false;
+let warnedBareTbody = false;
 $effect(() => {
-    if (!bodyTable)
+    if (!sticky || !headTable || !bodyTable)
         return;
-    const table = bodyTable;
+    const directRows = (table) => Array.from(table.children).filter((child) => child.tagName === "TR");
     const mark = () => {
-        for (const head of table.querySelectorAll(":scope > thead")) {
+        for (const head of bodyTable.querySelectorAll(":scope > thead")) {
             if (!head.hasAttribute("inert"))
                 head.setAttribute("inert", "");
             if (head.getAttribute("aria-hidden") !== "true")
                 head.setAttribute("aria-hidden", "true");
         }
+        const visibleBareHeadRows = directRows(headTable);
+        const bodyBareRows = directRows(bodyTable);
+        for (const row of bodyBareRows) {
+            row.removeAttribute("data-contain-implicit-table-head");
+            row.removeAttribute("inert");
+            row.removeAttribute("aria-hidden");
+        }
+        for (const row of bodyBareRows.slice(0, visibleBareHeadRows.length)) {
+            row.setAttribute("data-contain-implicit-table-head", "");
+            row.setAttribute("inert", "");
+            row.setAttribute("aria-hidden", "true");
+        }
+        if (BROWSER && DEV && visibleBareHeadRows.length && !warnedBareThead) {
+            warnedBareThead = true;
+            console.warn("<Table sticky>: the thead snippet must render a <thead> containing its rows. Bare <tr> children are tolerated for compatibility, but are not semantic table markup.");
+        }
+        if (BROWSER &&
+            DEV &&
+            tbody &&
+            bodyBareRows.length > visibleBareHeadRows.length &&
+            !warnedBareTbody) {
+            warnedBareTbody = true;
+            console.warn("<Table sticky>: the tbody snippet must render a <tbody> containing its rows. Bare <tr> children are tolerated for compatibility, but are not semantic table markup.");
+        }
     };
     mark();
     if (typeof MutationObserver === "undefined")
         return;
     const observer = new MutationObserver(mark);
-    observer.observe(table, { childList: true });
+    observer.observe(headTable, { childList: true });
+    observer.observe(bodyTable, { childList: true });
     return () => observer.disconnect();
 });
 /* Keep columns in sync as the table changes underneath us.
@@ -309,6 +345,31 @@ function observeColumns() {
    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.
@@ -1129,6 +1190,10 @@ table :global(tr > th:first-child:has(~ td)) {
   visibility: collapse;
 }
 
+.scrolling-table-body > :global(tr[data-contain-implicit-table-head]) {
+  visibility: collapse;
+}
+
 /* One cell per column, so widths can be read off directly. Collapsed for
    zero height, and stripped of padding and borders so it can never be the
    thing that decides a column's minimum width. */
@@ -1171,7 +1236,7 @@ table :global(td[tabindex]:focus-visible) {
   filter: var(--hover-filter, brightness(1.05));
   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(--hover-box-shadow, var(--_box-shadow, none));
 }
 
@@ -1181,7 +1246,7 @@ table :global(th[tabindex]:active),
 table :global(td[tabindex]:active) {
   filter: var(--active-filter, brightness(0.9));
   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(--active-box-shadow, var(--_box-shadow, none));
 }
 

package/dist/layout/Tile.svelte

@@ -97,6 +97,31 @@ const className = $derived(props.class);
    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.
@@ -448,7 +473,7 @@ label.tile:hover {
   filter: var(--tile-hover-filter, var(--hover-filter, brightness(1.05)));
   transform: var(--tile-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(--tile-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -456,7 +481,7 @@ button.tile:active,
 label.tile:active {
   filter: var(--tile-active-filter, var(--active-filter, brightness(0.9)));
   transform: var(--tile-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(--tile-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)));
 }
 
@@ -465,7 +490,7 @@ label.tile:disabled {
   cursor: var(--tile-disabled-cursor, var(--disabled-cursor, not-allowed));
   transform: var(--tile-disabled-transform, var(--disabled-transform, none));
   filter: var(--tile-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(--tile-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)));
 }
 

package/dist/misc/CodeInner.svelte

@@ -42,6 +42,31 @@ let highlightedCode = $derived.by(() => {
    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.
@@ -89,6 +114,30 @@ div > :global(pre) {
 .code :global(code[class*="language-"]),
 .code :global(pre[class*="language-"]) {
   tab-size: var(--code-tab-size, 2em);
+  font-family: var(--code-font-family, var(--surface-font-family, var(--font-family, unset)));
+  text-transform: var(--code-text-transform, var(--surface-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--code-text-decoration, var(--surface-text-decoration, var(--text-decoration, unset)));
+  --_font-size: var(--code-font-size, var(--surface-font-size, var(--font-size, unset)));
+  font-size: var(--_font-size);
+  font-weight: var(--code-font-weight, var(--surface-font-weight, var(--font-weight, unset)));
+  line-height: var(--code-line-height, var(--surface-line-height, var(--line-height, unset)));
+  letter-spacing: var(--code-letter-spacing, var(--surface-letter-spacing, var(--letter-spacing, unset)));
+  --_margin-top: var(--code-margin, var(--surface-margin, var(--margin, unset)));
+  --_margin-top: var(--code-margin-top, var(--surface-margin-top, var(--margin-top, unset)));
+  margin-top: var(--_margin-top);
+  --_margin-bottom: var(--code-margin, var(--surface-margin, var(--margin, unset)));
+  --_margin-bottom: var(--code-margin-bottom, var(--surface-margin-bottom, var(--margin-bottom, unset)));
+  margin-bottom: var(--_margin-bottom);
+  text-indent: var(--code-indent, var(--surface-indent, var(--indent, unset)));
+  font-variant: var(--code-font-variant, var(--surface-font-variant, var(--font-variant, unset)));
+  text-align: var(--code-text-align, var(--surface-text-align, var(--text-align, unset)));
+}
+
+/* Colors live on the block only. Giving the <code> inside the <pre> its
+   own background paints line-by-line patches wherever the two resolve
+   differently (e.g. no --code-bg: the <pre> fell back to transparent while
+   the <code> took --surface-bg). */
+.code :global(pre[class*="language-"]) {
   --link-bg: var(--code-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--code-link-fg, var(--surface-link-fg, inherit));
   --_bg-mix-color: var(--code-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
@@ -173,28 +222,6 @@ div > :global(pre) {
   );
   background-color: var(--_background-color);
   color: var(--_color);
-  font-family: var(--code-font-family, var(--surface-font-family, var(--font-family, unset)));
-  text-transform: var(--code-text-transform, var(--surface-text-transform, var(--text-transform, unset)));
-  text-decoration: var(--code-text-decoration, var(--surface-text-decoration, var(--text-decoration, unset)));
-  --_font-size: var(--code-font-size, var(--surface-font-size, var(--font-size, unset)));
-  font-size: var(--_font-size);
-  font-weight: var(--code-font-weight, var(--surface-font-weight, var(--font-weight, unset)));
-  line-height: var(--code-line-height, var(--surface-line-height, var(--line-height, unset)));
-  letter-spacing: var(--code-letter-spacing, var(--surface-letter-spacing, var(--letter-spacing, unset)));
-  --_margin-top: var(--code-margin, var(--surface-margin, var(--margin, unset)));
-  --_margin-top: var(--code-margin-top, var(--surface-margin-top, var(--margin-top, unset)));
-  margin-top: var(--_margin-top);
-  --_margin-bottom: var(--code-margin, var(--surface-margin, var(--margin, unset)));
-  --_margin-bottom: var(--code-margin-bottom, var(--surface-margin-bottom, var(--margin-bottom, unset)));
-  margin-bottom: var(--_margin-bottom);
-  text-indent: var(--code-indent, var(--surface-indent, var(--indent, unset)));
-  font-variant: var(--code-font-variant, var(--surface-font-variant, var(--font-variant, unset)));
-  text-align: var(--code-text-align, var(--surface-text-align, var(--text-align, unset)));
-}
-
-.code :global(pre[class*="language-"]) {
-  background: var(--code-bg);
-  color: var(--code-fg);
   padding: 1em;
   border-radius: 0.3em;
   --_box-shadow:

package/dist/misc/Progress.svelte

@@ -89,6 +89,31 @@ let halfFull = $derived(fillFraction > 0.5);
    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/misc/Tag.svelte

@@ -56,6 +56,31 @@ const el = $derived(elementProps(restProps, "tag", TAG_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/overlays/Dialog.svelte

@@ -103,6 +103,31 @@ let ref;
    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.
@@ -442,9 +467,42 @@ dialog {
   --_h6-text-indent: var(--dialog-heading-6-indent, var(--top-heading-6-indent, var(--surface-heading-6-indent, var(--block-heading-6-indent, var(--dialog-heading-minor-indent, var(--top-heading-minor-indent, var(--surface-heading-minor-indent, var(--block-heading-minor-indent, var(--dialog-heading-indent, var(--top-heading-indent, var(--surface-heading-indent, var(--block-heading-indent, var(--heading-6-indent, var(--heading-minor-indent, var(--heading-indent, var(--indent, revert))))))))))))))));
   --_h6-font-variant: var(--dialog-heading-6-font-variant, var(--top-heading-6-font-variant, var(--surface-heading-6-font-variant, var(--block-heading-6-font-variant, var(--dialog-heading-minor-font-variant, var(--top-heading-minor-font-variant, var(--surface-heading-minor-font-variant, var(--block-heading-minor-font-variant, var(--dialog-heading-font-variant, var(--top-heading-font-variant, var(--surface-heading-font-variant, var(--block-heading-font-variant, var(--heading-6-font-variant, var(--heading-minor-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))))))))));
   --_h6-text-align: var(--dialog-heading-6-text-align, var(--top-heading-6-text-align, var(--surface-heading-6-text-align, var(--block-heading-6-text-align, var(--dialog-heading-minor-text-align, var(--top-heading-minor-text-align, var(--surface-heading-minor-text-align, var(--block-heading-minor-text-align, var(--dialog-heading-text-align, var(--top-heading-text-align, var(--surface-heading-text-align, var(--block-heading-text-align, var(--heading-6-text-align, var(--heading-minor-text-align, var(--heading-text-align, var(--text-align, revert))))))))))))))));
+  /* A <dialog> is a DOM child of wherever it was declared -- a table cell,
+     a bold header, a clickable card -- and would inherit its text styles
+     and cursor. Must follow typography-container-props. */
+  --_font-size: var(--dialog-font-size, var(--top-font-size, var(--surface-font-size, var(--block-font-size, var(--font-size, 1rem)))));
+  font-size: var(--_font-size);
+  font-weight: var(--dialog-font-weight, var(--top-font-weight, var(--surface-font-weight, var(--block-font-weight, var(--font-weight, normal)))));
+  font-style: var(--dialog-font-style, var(--top-font-style, var(--surface-font-style, var(--block-font-style, var(--font-style, normal)))));
+  font-variant: var(--dialog-font-variant, var(--top-font-variant, var(--surface-font-variant, var(--block-font-variant, var(--font-variant, normal)))));
+  font-feature-settings: normal;
+  text-transform: var(--dialog-text-transform, var(--top-text-transform, var(--surface-text-transform, var(--block-text-transform, var(--text-transform, none)))));
+  letter-spacing: var(--dialog-letter-spacing, var(--top-letter-spacing, var(--surface-letter-spacing, var(--block-letter-spacing, var(--letter-spacing, normal)))));
+  word-spacing: normal;
+  line-height: var(--dialog-line-height, var(--top-line-height, var(--surface-line-height, var(--block-line-height, var(--line-height, normal)))));
+  text-indent: var(--dialog-indent, var(--top-indent, var(--surface-indent, var(--block-indent, var(--indent, 0)))));
+  text-align: var(--dialog-text-align, var(--top-text-align, var(--surface-text-align, var(--block-text-align, var(--text-align, start)))));
+  text-shadow: none;
+  /* An overlay is capped by a max-width; its text has to wrap inside it. */
+  white-space: var(--dialog-white-space, var(--top-white-space, var(--surface-white-space, var(--block-white-space, var(--white-space, normal)))));
+  word-break: normal;
+  overflow-wrap: var(--dialog-overflow-wrap, var(--top-overflow-wrap, var(--surface-overflow-wrap, var(--block-overflow-wrap, var(--overflow-wrap, break-word)))));
+  hyphens: manual;
+  /* Not the trigger's pointer/text cursor, and never click-through. */
+  cursor: auto;
+  pointer-events: auto;
+  /* user-select isn't inherited, but `auto` copies a parent's `none`;
+     `text` is what `auto` resolves to in an ordinary context. */
+  -webkit-user-select: text;
+  user-select: text;
   --_box-shadow:
     var(--dialog-shadow-distance, var(--top-shadow-distance, var(--surface-shadow-distance, var(--block-shadow-distance, var(--shadow-distance, var(--space)))))) var(--dialog-shadow-distance, var(--top-shadow-distance, var(--surface-shadow-distance, var(--block-shadow-distance, var(--shadow-distance, var(--space)))))) var(--dialog-shadow-blur, var(--top-shadow-blur, var(--surface-shadow-blur, var(--block-shadow-blur, var(--shadow-blur, var(--space)))))) var(--dialog-shadow-color, var(--top-shadow-color, var(--surface-shadow-color, var(--block-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))))));
   box-shadow: var(--_box-shadow);
+  /* typography-props writes margin-top/bottom ending in `unset`, which
+     zeroes the UA's `margin: auto` and pins a modal to the top edge.
+     Restore auto so it centers vertically; only dialog-level vars move it. */
+  margin-top: var(--dialog-margin-top, auto);
+  margin-bottom: var(--dialog-margin-bottom, auto);
   min-width: min(100vw - var(--padding) * 2, var(--dialog-min-width, 400px));
   max-width: max(100vw - var(--padding) * 2, var(--dialog-max-width, 800px));
   min-height: min(100vh - var(--padding) * 2, var(--dialog-min-height, 300px));

package/dist/overlays/Tooltip.svelte

@@ -16,7 +16,10 @@ const TOOLTIP_VARS = [
     ...TYPOGRAPHY_CONTAINER_VARS,
 ];
 /* The variables land on the wrapper and reach the popover by inheritance:
-   the tooltip is a descendant of it, and custom properties inherit. */
+   the tooltip is a descendant of it, and custom properties inherit.
+   Ordinary inherited properties (white-space, font-weight, text-align...)
+   would reach it the same way from the host, which is why the popover's
+   CSS resets them -- see overlay-text-reset in _typography.scss. */
 const el = $derived(elementProps(restProps, "tooltip", TOOLTIP_VARS));
 // svelte-ignore state_referenced_locally
 let renderedVertical = $state(vertical);
@@ -320,6 +323,31 @@ async function showPopover() {
    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.
@@ -647,6 +675,34 @@ async function showPopover() {
   --_h6-text-indent: var(--tooltip-heading-6-indent, var(--ui-heading-6-indent, var(--tooltip-heading-minor-indent, var(--ui-heading-minor-indent, var(--tooltip-heading-indent, var(--ui-heading-indent, var(--heading-6-indent, var(--heading-minor-indent, var(--heading-indent, var(--indent, revert))))))))));
   --_h6-font-variant: var(--tooltip-heading-6-font-variant, var(--ui-heading-6-font-variant, var(--tooltip-heading-minor-font-variant, var(--ui-heading-minor-font-variant, var(--tooltip-heading-font-variant, var(--ui-heading-font-variant, var(--heading-6-font-variant, var(--heading-minor-font-variant, var(--heading-font-variant, var(--font-variant, revert))))))))));
   --_h6-text-align: var(--tooltip-heading-6-text-align, var(--ui-heading-6-text-align, var(--tooltip-heading-minor-text-align, var(--ui-heading-minor-text-align, var(--tooltip-heading-text-align, var(--ui-heading-text-align, var(--heading-6-text-align, var(--heading-minor-text-align, var(--heading-text-align, var(--text-align, revert))))))))));
+  /* The popover is a DOM child of wherever the Tooltip was placed, so
+     without this it inherits that spot's white-space, weight, alignment
+     and so on. Must follow typography-container-props. */
+  --_font-size: var(--tooltip-font-size, var(--ui-font-size, var(--font-size, 1rem)));
+  font-size: var(--_font-size);
+  font-weight: var(--tooltip-font-weight, var(--ui-font-weight, var(--font-weight, normal)));
+  font-style: var(--tooltip-font-style, var(--ui-font-style, var(--font-style, normal)));
+  font-variant: var(--tooltip-font-variant, var(--ui-font-variant, var(--font-variant, normal)));
+  font-feature-settings: normal;
+  text-transform: var(--tooltip-text-transform, var(--ui-text-transform, var(--text-transform, none)));
+  letter-spacing: var(--tooltip-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, normal)));
+  word-spacing: normal;
+  line-height: var(--tooltip-line-height, var(--ui-line-height, var(--line-height, normal)));
+  text-indent: var(--tooltip-indent, var(--ui-indent, var(--indent, 0)));
+  text-align: var(--tooltip-text-align, var(--ui-text-align, var(--text-align, start)));
+  text-shadow: none;
+  /* An overlay is capped by a max-width; its text has to wrap inside it. */
+  white-space: var(--tooltip-white-space, var(--ui-white-space, var(--white-space, normal)));
+  word-break: normal;
+  overflow-wrap: var(--tooltip-overflow-wrap, var(--ui-overflow-wrap, var(--overflow-wrap, break-word)));
+  hyphens: manual;
+  /* Not the trigger's pointer/text cursor, and never click-through. */
+  cursor: auto;
+  pointer-events: auto;
+  /* user-select isn't inherited, but `auto` copies a parent's `none`;
+     `text` is what `auto` resolves to in an ordinary context. */
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 .tooltip-wrapper {

package/dist/sass/_affordances.scss

@@ -33,6 +33,12 @@
       fn.var-with-fallbacks(--transition, list.append($prefixes, 300ms)...);
 }
 
+// Hover mixes toward --hover-color-mix, defaulting to the element's own
+// text color: that darkens light controls and lightens dark ones whatever
+// the theme's mode, so the hover can't vanish into the surface the way a
+// fixed white did on light themes. Themes that set --hover-color-mix keep
+// exactly the direction they chose. Mixing is done in oklab because oklch
+// interpolates hue, which drifts when one side is a near-grey.
 @mixin clickable-hover-affordance($prefixes...) {
   filter: fn.var-with-fallbacks(
     --hover-filter,
@@ -44,9 +50,9 @@
   );
   color: var(--_color);
   background-color: color-mix(
-    in oklch,
+    in oklab,
     var(--_background-color) var(--hover-base-color-percentage, 90%),
-    var(--hover-color-mix, white)
+    var(--hover-color-mix, var(--_color, white))
       calc(100% - var(--hover-base-color-percentage, 90%))
   );
   box-shadow: fn.var-with-fallbacks(
@@ -65,7 +71,7 @@
     list.append($prefixes, none)...
   );
   background-color: color-mix(
-    in oklch,
+    in oklab,
     var(--_background-color) var(--active-base-color-percentage, 90%),
     var(--active-color-mix, black)
       calc(100% - var(--active-base-color-percentage, 90%))
@@ -99,7 +105,7 @@
       list.append($prefixes, grayscale(0.5))...
     );
     background-color: color-mix(
-      in oklch,
+      in oklab,
       var(--_background-color) var(--disabled-base-color-percentage, 50%),
       var(--disabled-color-mix, gray)
         calc(100% - var(--disabled-base-color-percentage, 50%))

package/dist/sass/_typography.scss

@@ -293,3 +293,56 @@
     )};
   @include heading-context-vars($prefixes...);
 }
+
+/* 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". */
+@mixin overlay-text-reset($prefixes...) {
+  --_font-size: #{fn.var-with-fallbacks(--font-size, list.append($prefixes, 1rem)...)};
+  font-size: var(--_font-size);
+  font-weight: fn.var-with-fallbacks(--font-weight, list.append($prefixes, normal)...);
+  font-style: fn.var-with-fallbacks(--font-style, list.append($prefixes, normal)...);
+  font-variant: fn.var-with-fallbacks(--font-variant, list.append($prefixes, normal)...);
+  font-feature-settings: normal;
+  text-transform: fn.var-with-fallbacks(--text-transform, list.append($prefixes, none)...);
+  letter-spacing: fn.var-with-fallbacks(--letter-spacing, list.append($prefixes, normal)...);
+  word-spacing: normal;
+  line-height: fn.var-with-fallbacks(--line-height, list.append($prefixes, normal)...);
+  text-indent: fn.var-with-fallbacks(--indent, list.append($prefixes, 0)...);
+  text-align: fn.var-with-fallbacks(--text-align, list.append($prefixes, start)...);
+  text-shadow: none;
+  /* An overlay is capped by a max-width; its text has to wrap inside it. */
+  white-space: fn.var-with-fallbacks(--white-space, list.append($prefixes, normal)...);
+  word-break: normal;
+  overflow-wrap: fn.var-with-fallbacks(--overflow-wrap, list.append($prefixes, break-word)...);
+  hyphens: manual;
+  /* Not the trigger's pointer/text cursor, and never click-through. */
+  cursor: auto;
+  pointer-events: auto;
+  /* user-select isn't inherited, but `auto` copies a parent's `none`;
+     `text` is what `auto` resolves to in an ordinary context. */
+  -webkit-user-select: text;
+  user-select: text;
+}

package/dist/typography/TextLayout.svelte

@@ -33,6 +33,31 @@ const el = $derived(elementProps(restProps, "text-layout", ["marginBlock", "marg
    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.