contain-css-svelte 1.1.10 → 1.1.12

package/dist/controls/Option.svelte

@@ -1,8 +1,36 @@
 <script lang="ts">let { children, value, ...restProps } = $props();
 let template = $state();
-// Extract text content from rendered children
-let textContent = $derived(template ? template.textContent ?? "" : "");
-let htmlContent = $derived(template ? template.innerHTML : "");
+// Extracted from the rendered children, in the DOM.
+let textContent = $state("");
+let htmlContent = $state("");
+function syncFromTemplate() {
+    if (!template)
+        return;
+    textContent = template.textContent ?? "";
+    htmlContent = template.innerHTML;
+}
+/*
+  These have to be read back out of the DOM, and a $derived would only
+  recompute when `template` itself changed -- which it never does once the
+  element is bound. So rendering different content into the snippet (renaming
+  a label, say) left the <option> showing whatever it was first given.
+
+  Watching the template covers that: any change to the rendered children
+  re-extracts the html and text.
+*/
+$effect(() => {
+    if (!template)
+        return;
+    syncFromTemplate();
+    const observer = new MutationObserver(syncFromTemplate);
+    observer.observe(template, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+    });
+    return () => observer.disconnect();
+});
 export {};
 </script>
 

package/dist/controls/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import DropdownMenu from "../dropdowns/DropdownMenu.svelte";
 import { onMount, tick } from "svelte";
-let { value = $bindable(), children, "data-audit-action": dropdownAuditAction = null, ...restProps } = $props();
+let { value = $bindable(), children, "data-audit-action": dropdownAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", ...restProps } = $props();
 let selectElement = $state();
 let observer;
 let resizeObserver;
@@ -8,16 +8,25 @@ let targetWidth = $state("");
 let optionButtons = $state([]);
 onMount(() => {
     tick().then(() => updateOptions());
-    // Observe changes in the select element
-    observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            if (mutation.type === "childList") {
-                updateOptions();
-            }
-        });
-    });
+    /*
+      Watch the options for any change, not just being added or removed. An
+      <Option> whose content is rewritten in place -- a label being renamed --
+      updates its own data-html without touching the child list, and a
+      childList-only observer never hears about it, so the dropdown kept
+      rendering the snapshot it took on mount.
+
+      Coalesced into one pass per microtask: a single re-render can produce a
+      burst of mutations, and updateOptions() measures layout.
+    */
+    observer = new MutationObserver(() => scheduleUpdateOptions());
     if (selectElement) {
-        observer.observe(selectElement, { childList: true });
+        observer.observe(selectElement, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ["data-html", "value", "label", "selected"],
+        });
     }
     // Observe size changes in option buttons
     resizeObserver = new ResizeObserver(() => updateTargetWidth());
@@ -29,6 +38,16 @@ onMount(() => {
 });
 let options = $state([]);
 let activeOption = $state(null);
+let updateQueued = false;
+function scheduleUpdateOptions() {
+    if (updateQueued)
+        return;
+    updateQueued = true;
+    queueMicrotask(() => {
+        updateQueued = false;
+        updateOptions();
+    });
+}
 function updateOptions() {
     if (!selectElement) {
         return;
@@ -76,7 +95,11 @@ $effect(() => {
   {@render children?.()}
 </select>
 <div class="dropdown-wrapper" style:--target-width={targetWidth}>
-  <DropdownMenu triggerAuditAction={dropdownAuditAction}>
+  <DropdownMenu
+    triggerAuditAction={dropdownAuditAction}
+    {matchMode}
+    {typeaheadMode}
+  >
     {#snippet label()}
       <span
         class="select-dropdown"

package/dist/controls/Select.svelte.d.ts

@@ -1,8 +1,13 @@
 import type { HTMLSelectAttributes } from "svelte/elements";
+import type { MatchMode, TypeaheadMode } from "../dropdowns/DropdownMenu.svelte";
 type Props = {
     value?: any;
     children?: import("svelte").Snippet;
     "data-audit-action"?: string | null;
+    /** See {@link MatchMode} on DropdownMenu -- how type-ahead text is compared. */
+    matchMode?: MatchMode;
+    /** See {@link TypeaheadMode} on DropdownMenu -- focus a match or filter the list. */
+    typeaheadMode?: TypeaheadMode;
 } & HTMLSelectAttributes;
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/controls/TabItem.svelte

@@ -73,8 +73,7 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
 .tab > :global(button):focus-visible,
 .tab > :global(div > button):focus-visible {
   outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
-  outline-offset: var(--focus-outline-offset, 2px);
-  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+  outline-offset: var(--focus-inset-outline-offset, -3px);
 }
 
 .tab > :global(button),

package/dist/cssprops.js

@@ -126,6 +126,7 @@ const components = [
     ...[
         "button",
         "mini-button",
+        "menu",
         "menu-trigger",
         "menu-item",
         "dropdown-menu",

package/dist/dropdowns/DropdownMenu.svelte

@@ -1,12 +1,12 @@
-<script module lang="ts">"use strict";
-var idPostfix = 1;
+<script module lang="ts">var idPostfix = 1;
+export {};
 </script>
 
 <script lang="ts">import { cssProperties } from "../cssprops";
 import MenuList from "../layout/MenuList.svelte";
 import { injectVars } from "../util";
 import { onMount } from "svelte";
-let { label, children, triggerAuditAction = null, ...props } = $props();
+let { label, children, triggerAuditAction = null, matchMode = "prefix", typeaheadMode = "focus", ...props } = $props();
 idPostfix++;
 let id = "contain-dropdown-menu-" + idPostfix;
 let buttonElement = $state();
@@ -56,44 +56,142 @@ function dismissPopover(_e) {
 }
 function handleToggle(event) {
     isOpen = event.newState === "open";
+    if (!isOpen)
+        clearSearch();
+}
+let searchString = $state("");
+let clearTimer;
+function clearSearch() {
+    clearTimeout(clearTimer);
+    clearTimer = undefined;
+    searchString = "";
+    clearFilter();
+}
+const timeoutAfterMS = 2500; // 2.5 seconds seems more humane
+function scheduleSearchClear() {
+    // In filter mode the buffer is a live filter, not a transient jump target --
+    // auto-clearing it mid-scroll would make the list flicker back to full
+    // length. It persists until Escape, close, or Backspace to empty.
+    if (typeaheadMode === "filter")
+        return;
+    clearTimeout(clearTimer);
+    clearTimer = setTimeout(clearSearch, timeoutAfterMS);
 }
-let searchString = "";
-let lastPress;
 function handleKeystroke(event) {
     if (event.key == "Backspace" && searchString) {
         searchString = searchString.slice(0, -1);
+        applySearch();
+        scheduleSearchClear();
     }
     else if (event.key.length == 1) {
         if (searchString || event.key != " ") {
             searchString += event.key;
-            maybeFocusMatch(searchString);
+            applySearch();
+            scheduleSearchClear();
         }
     }
-    else {
-        searchString = "";
-        if (event.key === "Escape") {
-            popoverDiv?.hidePopover();
+    else if (event.key === "Escape") {
+        clearSearch();
+        popoverDiv?.hidePopover();
+    }
+    else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault(); // Prevent default to stop scrolling the page
+        // In filter mode the buffer stays live so arrow keys (and Tab) cycle
+        // through the *filtered* rows -- type a few letters, then arrow down to
+        // the one you saw. In focus mode a navigation key ends the type-ahead.
+        if (typeaheadMode !== "filter")
+            clearSearch();
+        navigateMenu(event.key);
+    }
+    else if (typeaheadMode !== "filter") {
+        // Tab, Enter, Home/End, etc. -- end a focus-mode type-ahead session.
+        // Filter mode keeps the filter until Escape, close, or Backspace-to-empty.
+        clearSearch();
+    }
+}
+/** Route the current buffer to whichever behavior this menu is configured for. */
+function applySearch() {
+    if (typeaheadMode === "filter") {
+        applyFilter(searchString);
+    }
+    if (!searchString)
+        return;
+    const matched = maybeFocusMatch(searchString);
+    // In filter mode a filtered-out item may have been holding focus; if nothing
+    // matched, park focus on the trigger so keystrokes still reach this <nav>
+    // (Backspace to recover, Escape to close).
+    if (!matched && typeaheadMode === "filter")
+        buttonElement?.focus();
+}
+/** Does `text` satisfy `query` under the active {@link matchMode}? */
+function textMatches(text, query) {
+    if (!query)
+        return true;
+    const haystack = text.toLowerCase();
+    const needle = query.toLowerCase();
+    if (matchMode === "substring")
+        return haystack.includes(needle);
+    if (matchMode === "word")
+        return haystack.split(/\s+/).some((word) => word.startsWith(needle));
+    return haystack.startsWith(needle); // "prefix"
+}
+function getFocusableItems(visibleOnly = false) {
+    if (!dropdownContentElement)
+        return [];
+    let items = Array.from(dropdownContentElement.querySelectorAll("button, a, [tabindex]:not([tabindex='-1'])"));
+    if (visibleOnly)
+        items = items.filter((el) => el.closest("[hidden]") === null);
+    return items;
+}
+/** The row we hide/show for a given item -- its wrapping <li>, or the item. */
+function itemRow(el) {
+    return el.closest("li") ?? el;
+}
+function applyFilter(query) {
+    if (!dropdownContentElement)
+        return;
+    if (!query) {
+        clearFilter();
+        return;
+    }
+    for (const el of getFocusableItems()) {
+        const row = itemRow(el);
+        if (textMatches(el.textContent ?? "", query)) {
+            if (row.dataset.typeaheadFiltered) {
+                delete row.dataset.typeaheadFiltered;
+                row.hidden = false;
+            }
         }
-        else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault(); // Prevent default to stop scrolling the page
-            navigateMenu(event.key);
-            searchString = "";
+        else if (!row.hidden) {
+            row.hidden = true;
+            row.dataset.typeaheadFiltered = "true";
         }
     }
+    // The popover just changed height; keep it anchored under the trigger.
+    computePosition();
 }
-function maybeFocusMatch(searchString) {
+/** Undo {@link applyFilter}, leaving any consumer-set `hidden` rows alone. */
+function clearFilter() {
     if (!dropdownContentElement)
         return;
-    let focusableItems = dropdownContentElement.querySelectorAll("a,button,[tabindex]");
-    for (let element of focusableItems) {
-        if (element.textContent &&
-            element.textContent.toLowerCase().startsWith(searchString.toLowerCase())) {
+    const hiddenRows = dropdownContentElement.querySelectorAll("[data-typeahead-filtered]");
+    for (const row of hiddenRows) {
+        delete row.dataset.typeaheadFiltered;
+        row.hidden = false;
+    }
+    if (hiddenRows.length)
+        computePosition();
+}
+function maybeFocusMatch(searchString) {
+    for (const element of getFocusableItems(true)) {
+        if (element.textContent && textMatches(element.textContent, searchString)) {
             if (element.focus) {
                 element.focus();
-                return;
+                return true;
             }
         }
     }
+    return false;
 }
 function navigateMenu(direction) {
     if (!popoverDiv?.matches(":popover-open") && buttonElement) {
@@ -102,7 +200,7 @@ function navigateMenu(direction) {
     }
     if (!dropdownContentElement)
         return;
-    const focusableItems = Array.from(dropdownContentElement.querySelectorAll("button, a, [tabindex]:not([tabindex='-1'])"));
+    const focusableItems = getFocusableItems(true);
     let currentIndex = focusableItems.findIndex((item) => item === document.activeElement);
     if (direction === "ArrowDown") {
         currentIndex = (currentIndex + 1) % focusableItems.length;
@@ -158,6 +256,11 @@ let popoverDiv = $state();
     style:left="{dropdownLeft}px"
     style:max-height="{dropdownMaxHeight}px"
   >
+    {#if searchString}
+      <div class="search-hint-wrapper">
+        <div class="search-hint" aria-hidden="true">{searchString}</div>
+      </div>
+    {/if}
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="dropdown-content"
@@ -418,6 +521,72 @@ button {
   overflow: hidden;
 }
 
+.search-hint-wrapper {
+  position: sticky;
+  top: 0;
+  right: 0;
+  height: 0;
+}
+
+.search-hint {
+  z-index: 2;
+  position: absolute;
+  right: 0;
+  pointer-events: none;
+  width: fit-content;
+  max-width: calc(100% - 2 * var(--search-hint-offset, 4px));
+  --link-bg: var(--search-hint-link-bg, var(--tag-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--search-hint-link-fg, var(--tag-link-fg, var(--secondary-link-fg, inherit)));
+  --_bg-mix-color: var(--search-hint-bg-mix-color, var(--tag-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--search-hint-bg-mix-amount, var(--tag-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--search-hint-fg-mix-color, var(--tag-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--search-hint-fg-mix-amount, var(--tag-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--search-hint-bg, var(--tag-bg, var(--secondary-bg, var(--bg, unset))));
+  --_fg-base: var(--search-hint-fg, var(--tag-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));
+  background-color: var(--_background-color);
+  color: var(--_color);
+  font-family: var(--search-hint-font-family, var(--tag-font-family, inherit));
+  text-transform: var(--search-hint-text-transform, var(--tag-text-transform, inherit));
+  text-decoration: var(--search-hint-text-decoration, var(--tag-text-decoration, inherit));
+  --_font-size: var(--search-hint-font-size, var(--tag-font-size, inherit));
+  font-size: var(--_font-size);
+  font-weight: var(--search-hint-font-weight, var(--tag-font-weight, inherit));
+  line-height: var(--search-hint-line-height, var(--tag-line-height, inherit));
+  letter-spacing: var(--search-hint-letter-spacing, var(--tag-letter-spacing, inherit));
+  text-indent: var(--search-hint-indent, var(--tag-indent, inherit));
+  font-variant: var(--search-hint-font-variant, var(--tag-font-variant, inherit));
+  text-align: var(--search-hint-text-align, var(--tag-text-align, inherit));
+  box-sizing: border-box;
+  --_padding: var(--search-hint-padding, var(--tag-padding, var(--padding, 4px)));
+  padding: var(--_padding);
+  border: var(--search-hint-border, var(--tag-border, var(--border, inherit)));
+  border-width: var(--search-hint-border-width, var(--tag-border-width, var(--__missing-border-width)));
+  border-style: var(--search-hint-border-style, var(--tag-border-style, var(--__missing-border-style)));
+  border-color: var(--search-hint-border-color, var(--tag-border-color, var(--__missing-border-color)));
+  border-top: var(--search-hint-border-top, var(--tag-border-top, var(--border-top, var(--search-hint-border, var(--tag-border, var(--border, none))))));
+  border-right: var(--search-hint-border-right, var(--tag-border-right, var(--border-right, var(--search-hint-border, var(--tag-border, var(--border, none))))));
+  border-bottom: var(--search-hint-border-bottom, var(--tag-border-bottom, var(--border-bottom, var(--search-hint-border, var(--tag-border, var(--border, none))))));
+  border-left: var(--search-hint-border-left, var(--tag-border-left, var(--border-left, var(--search-hint-border, var(--tag-border, var(--border, none))))));
+  border-radius: var(--search-hint-border-radius, var(--tag-border-radius, var(--border-radius, none)));
+  font-size: var(--search-hint-font-size, var(--font-size-small, 0.75rem));
+  padding: var(--search-hint-padding, 0.2em 0.55em);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: var(--search-hint-radius, var(--border-radius, 4px));
+  --_box-shadow:
+    var(--search-hint-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space)))) var(--search-hint-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space)))) var(--search-hint-shadow-blur, var(--dropdown-shadow-blur, var(--shadow-blur, var(--space)))) var(--search-hint-shadow-color, var(--dropdown-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
+  box-shadow: var(--_box-shadow);
+  opacity: var(--search-hint-opacity, 0.95);
+}
+
 .dropdown-content :global(button),
 .dropdown-content :global(a) {
   white-space: var(--dropdown-wrap-mode, wrap);

package/dist/dropdowns/DropdownMenu.svelte.d.ts

@@ -1,3 +1,19 @@
+/**
+ * How the type-ahead search buffer is compared against each item's text.
+ *  - "prefix"    : item text must start with the query (default, classic
+ *                  <select> behavior)
+ *  - "word"      : any whitespace-delimited word in the item must start with
+ *                  the query -- typing "Boo" matches "Foo Boo Baz"
+ *  - "substring" : query may appear anywhere in the item text
+ */
+export type MatchMode = "prefix" | "word" | "substring";
+/**
+ * What a type-ahead match does:
+ *  - "focus"  : move focus to the first matching item (default)
+ *  - "filter" : hide non-matching items so the list shrinks as you type;
+ *               focus follows the first remaining match
+ */
+export type TypeaheadMode = "focus" | "filter";
 import type { Snippet } from "svelte";
 import type { DropdownMenuStyleProps } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
@@ -5,6 +21,8 @@ type Props = {
     label?: Snippet;
     children?: Snippet;
     triggerAuditAction?: string | null;
+    matchMode?: MatchMode;
+    typeaheadMode?: TypeaheadMode;
 } & DropdownMenuStyleProps & HTMLAttributes<HTMLDivElement>;
 declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/layout/MenuList.svelte

@@ -139,9 +139,12 @@ const style = $derived(injectVars(restProps, "menu", [
 .menu :global(li.interactive):focus-visible,
 .menu :global(li[role="button"]):focus-visible,
 .menu :global(li[tabindex]:not([tabindex="-1"])):focus-visible {
+  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
+  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
+  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
+  box-shadow: var(--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-outline-offset, 2px);
-  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+  outline-offset: var(--focus-inset-outline-offset, -3px);
 }
 
 .menu :global(li > .subheader) {
@@ -151,7 +154,7 @@ const style = $derived(injectVars(restProps, "menu", [
 
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
   display: flex;
-  justify-content: var(--menu-item-justify, center);
+  justify-content: var(--menu-item-justify, start);
   align-items: var(--menu-item-align, center);
   width: var(--menu-item-width, 100%);
   height: var(--menu-item-height);
@@ -205,9 +208,12 @@ const style = $derived(injectVars(restProps, "menu", [
 }
 
 .menu :global(a):focus-visible, .menu :global(button):focus-visible, .menu :global(input[type="submit"]):focus-visible, .menu :global(.button):focus-visible {
+  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.05)));
+  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
+  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
+  box-shadow: var(--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-outline-offset, 2px);
-  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+  outline-offset: var(--focus-inset-outline-offset, -3px);
 }
 
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {

package/dist/layout/Table.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from "svelte/legacy";
-let { sticky = false, column_widths = null, thead, tbody, children, } = $props();
+<script lang="ts">let { sticky = false, column_widths = null, thead, tbody, children, } = $props();
 // svelte-ignore state_referenced_locally
 let columns = $state(column_widths || []);
 /* Code for syncing column widths for scrolling table solution */
@@ -205,6 +204,10 @@ function setupWidths() {
   container queries don't get their styles overridden by large media queries.
   */
 /* Convenience groupings */
+table:has(colgroup) {
+  table-layout: fixed;
+}
+
 table {
   --link-bg: var(--table-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--table-link-fg, var(--surface-link-fg, inherit));
@@ -621,7 +624,7 @@ table :global(tr > th:first-child:has(~ td)) {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--white);
+  background: var(--_background-color, var(--white, #fff));
   margin-inline-start: auto;
   margin-inline-end: auto;
 }
@@ -637,7 +640,7 @@ table :global(tr > th:first-child:has(~ td)) {
 }
 
 .veil {
-  background-color: var(--white, #fff);
+  background-color: var(--_background-color, var(--white, #fff));
   position: sticky;
   top: -2em;
   height: 3em;
@@ -808,4 +811,17 @@ table :global(td[tabindex]):focus-visible {
   outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
   outline-offset: var(--focus-outline-offset, 2px);
   box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
+
+/* Apply thick border to column 1 in BOTH header and body tables, 
+ BUT ONLY IF the scrolling table contains row headers in its tbody */
+.scrolling-table:has(.scrolling-table-body :global(tbody > tr > th:first-child)) .fixed-table-head :global(tr > th:first-child),
+.scrolling-table:has(.scrolling-table-body :global(tbody > tr > th:first-child)) .scrolling-table-body :global(tbody > tr > th:first-child) {
+  border-right: var(--table-first-row-bottom-border, var(--table-thick-border, 3px) solid var(--table-first-row-border-color, var(--secondary-bg))) !important;
+}
+
+/* 2. Standard non-scrolling single <table> setup */
+table:has(:global(tbody > tr > th:first-child)) :global(thead > tr > th:first-child),
+table:has(:global(tbody > tr > th:first-child)) :global(tbody > tr > th:first-child) {
+  border-right: var(--table-first-row-bottom-border, var(--table-thick-border, 3px) solid var(--table-first-row-border-color, var(--secondary-bg)));
 }</style>

package/dist/sass/_affordances.scss

@@ -109,6 +109,33 @@
   }
 }
 
+// Focus ring for controls living inside an overflow:hidden container
+// (menus, tab bars). Drawn with a negative outline-offset so it sits inside
+// the control and is not clipped by the container. Defined after `clickable`
+// so `clickable-hover-affordance` is in scope.
+@mixin focus-ring-inset {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-inset-outline-offset, -3px);
+}
+
+// Clip-safe focus indicator: just the inset ring, no fill change. For
+// controls that already carry their own resting/active styling (tabs).
+@mixin focusable-inset($prefixes...) {
+  &:focus-visible {
+    @include focus-ring-inset();
+  }
+}
+
+// As `focusable-inset`, plus the hover affordance for the fill, so keyboard
+// focus reads the same as pointer hover. For controls with no resting
+// visual weight of their own (menu items).
+@mixin focusable-as-hover($prefixes...) {
+  &:focus-visible {
+    @include clickable-hover-affordance($prefixes...);
+    @include focus-ring-inset();
+  }
+}
+
 @mixin custom-scrollbar($prefixes...) {
   overflow-y: auto;
 

package/dist/vars/affordances.css

@@ -20,8 +20,14 @@
   --menu-item-hover-filter-custom: ;
   --menu-item-hover-filter: var(--menu-item-hover-filter-brightness-hack,)
     var(--menu-item-hover-filter-custom,);
-  /* Default menu items to the menu surface so row-wide filters read clearly. */
-  --menu-item-bg: var(--menu-bg, var(--bg));
+  /* NB: do NOT default --menu-item-bg here. Declared at :root it would freeze
+     to var(--bg) (--menu-bg is not set yet at :root) and then win the
+     color-props(menu-item, menu, ...) chain ahead of a per-instance --menu-bg,
+     breaking overrides like <Menu --menu-bg="#111">. The chain already ends at
+     --bg, and color-props now computes an always-opaque --_background-color on
+     the element (evaluated where --menu-bg is live), which the hover/active
+     filter affordances derive from -- so the "give filters an opaque surface"
+     goal is met structurally without a frozen root default. */
   --menu-item-active-filter-custom: ;
   --menu-item-active-filter: var(--menu-item-active-filter-custom,);
   /* --button-hover-transform: var(var(--button-hover-transform));

package/dist/vars/colors.css

@@ -36,7 +36,10 @@
   --surface-fg: var(--fg);
   --surface-link-fg: var(--link-fg, var(--primary-bg));
   --container-link-fg: var(--surface-link-fg);
-  --menu-item-bg: var(--menu-bg);
+  /* --menu-item-bg intentionally not defaulted at :root -- see the note in
+     affordances.css. The color-props(menu-item, menu, button, control) chain
+     resolves it to --menu-bg / --bg at the element, keeping per-instance
+     --menu-bg overrides working. */
   --focus-color: var(--material-color-blue-a400);
   --tooltip-border: none;
 }

package/dist/vars/defaults.css

@@ -63,7 +63,10 @@
   --surface-fg: var(--fg);
   --surface-link-fg: var(--link-fg, var(--primary-bg));
   --container-link-fg: var(--surface-link-fg);
-  --menu-item-bg: var(--menu-bg);
+  /* --menu-item-bg intentionally not defaulted at :root -- see the note in
+     affordances.css. The color-props(menu-item, menu, button, control) chain
+     resolves it to --menu-bg / --bg at the element, keeping per-instance
+     --menu-bg overrides working. */
   --focus-color: var(--material-color-blue-a400);
   --tooltip-border: none;
 }
@@ -424,8 +427,14 @@ a {
   --menu-item-hover-filter-custom: ;
   --menu-item-hover-filter: var(--menu-item-hover-filter-brightness-hack,)
     var(--menu-item-hover-filter-custom,);
-  /* Default menu items to the menu surface so row-wide filters read clearly. */
-  --menu-item-bg: var(--menu-bg, var(--bg));
+  /* NB: do NOT default --menu-item-bg here. Declared at :root it would freeze
+     to var(--bg) (--menu-bg is not set yet at :root) and then win the
+     color-props(menu-item, menu, ...) chain ahead of a per-instance --menu-bg,
+     breaking overrides like <Menu --menu-bg="#111">. The chain already ends at
+     --bg, and color-props now computes an always-opaque --_background-color on
+     the element (evaluated where --menu-bg is live), which the hover/active
+     filter affordances derive from -- so the "give filters an opaque surface"
+     goal is met structurally without a frozen root default. */
   --menu-item-active-filter-custom: ;
   --menu-item-active-filter: var(--menu-item-active-filter-custom,);
   /* --button-hover-transform: var(var(--button-hover-transform));

package/package.json

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