contain-css-svelte 1.1.10 → 1.1.11

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

@@ -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;

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

@@ -56,28 +56,41 @@ 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 = "";
+}
+const timeoutAfterMS = 2500; // 2.5 seconds seems more humane
+function scheduleSearchClear() {
+    clearTimeout(clearTimer);
+    clearTimer = setTimeout(clearSearch, timeoutAfterMS);
 }
-let searchString = "";
-let lastPress;
 function handleKeystroke(event) {
     if (event.key == "Backspace" && searchString) {
         searchString = searchString.slice(0, -1);
+        scheduleSearchClear();
     }
     else if (event.key.length == 1) {
         if (searchString || event.key != " ") {
             searchString += event.key;
             maybeFocusMatch(searchString);
+            scheduleSearchClear();
         }
     }
     else {
-        searchString = "";
+        clearSearch();
         if (event.key === "Escape") {
             popoverDiv?.hidePopover();
         }
         else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault(); // Prevent default to stop scrolling the page
             navigateMenu(event.key);
-            searchString = "";
         }
     }
 }
@@ -158,6 +171,9 @@ let popoverDiv = $state();
     style:left="{dropdownLeft}px"
     style:max-height="{dropdownMaxHeight}px"
   >
+    {#if searchString}
+      <div class="search-hint" aria-hidden="true">{searchString}</div>
+    {/if}
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="dropdown-content"
@@ -418,6 +434,65 @@ button {
   overflow: hidden;
 }
 
+.search-hint {
+  position: absolute;
+  top: var(--search-hint-offset, 4px);
+  right: var(--search-hint-offset, 4px);
+  z-index: 2;
+  pointer-events: none;
+  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/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) {
@@ -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.11",
   "license": "MIT",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",