contain-css-svelte 1.1.3 → 1.1.6

package/dist/controls/ButtonLink.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">import { injectVars } from "../util";
 let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, href = "#", id = null, icon, children, ...restProps } = $props();
-const { style: inlineStyle, ...elementProps } = restProps;
+const inlineStyle = $derived(restProps.style);
+const elementProps = $derived.by(() => {
+    const { style: _, ...rest } = restProps;
+    return rest;
+});
 const style = $derived(`${injectVars(elementProps, "button", [
     "bg",
     "fg",

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

@@ -1,6 +1,6 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 type Props = {
-    value?: string;
+    value?: string | number;
     placeholder?: string;
 } & HTMLInputAttributes;
 declare const Input: import("svelte").Component<Props, {}, "value">;

package/dist/controls/Option.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">let { children, value, ...restProps } = $props();
-let template = $state(null);
+let template = $state();
 // Extract text content from rendered children
-let textContent = $derived(template ? template.textContent : "");
+let textContent = $derived(template ? template.textContent ?? "" : "");
 let htmlContent = $derived(template ? template.innerHTML : "");
 export {};
 </script>
@@ -10,6 +10,6 @@ export {};
   {@html textContent}
 </option>
 
-<div bind:this={template} style="display: none;" class="option-template hidden">
+<div bind:this={template} style="display: none;" class="option-template hidden" aria-hidden="true">
   {@render children?.()}
 </div>

package/dist/controls/RadioButton.svelte

@@ -35,6 +35,13 @@ function handleChange() {
 </div>
 
 <style>@charset "UTF-8";
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
 .label-sizing-box {
   position: relative;
   display: inline-block;
@@ -51,13 +58,6 @@ function handleChange() {
   visibility: hidden;
 }
 
-/* Warning: because we define a fallback
-  media query, the media query can override the container
-  if we stack a bunch of these in a row and aren't thoughtful about the order.
-  Put min-width queries *after* max-width queries so that smaller
-  container queries don't get their styles overridden by large media queries.
-  */
-/* Convenience groupings */
 :root {
   /* Customize these variables for radio button styling */
   --radio-button-dot: "•";

package/dist/controls/Select.svelte

@@ -6,9 +6,8 @@ let observer;
 let resizeObserver;
 let targetWidth = $state("");
 let optionButtons = $state([]);
-onMount(async () => {
-    await tick(); // Ensure slot content is rendered
-    updateOptions();
+onMount(() => {
+    tick().then(() => updateOptions());
     // Observe changes in the select element
     observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
@@ -56,6 +55,8 @@ function updateTargetWidth() {
     targetWidth = maxWidth ? maxWidth + "px" : "100%"; // || 150; // Fallback width if measurement fails
 }
 function setValue(idx) {
+    if (!selectElement)
+        return;
     selectElement.selectedIndex = idx;
     selectElement.dispatchEvent(new Event("change", { bubbles: true }));
     activeOption = options[idx];

package/dist/controls/Slider.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">import { injectVars } from "../util";
 let { value = $bindable(0), min = 0, max = 100, step = 1, ...restProps } = $props();
-const { style: inlineStyle, ...elementProps } = restProps;
+const inlineStyle = $derived(restProps.style);
+const elementProps = $derived.by(() => {
+    const { style: _, ...rest } = restProps;
+    return rest;
+});
 const normalizedMin = $derived(Number.isFinite(min) ? min : 0);
 const normalizedMax = $derived(Number.isFinite(max) && max > normalizedMin ? max : normalizedMin + 1);
 const clampedValue = $derived(Math.min(Math.max(Number(value) || 0, normalizedMin), normalizedMax));

package/dist/controls/TabItem.svelte

@@ -17,13 +17,12 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
   container queries don't get their styles overridden by large media queries.
   */
 /* Convenience groupings */
-div,
-span {
+.tab {
   display: contents;
 }
 
-div > :global(button),
-div > :global(div > button) {
+.tab > :global(button),
+.tab > :global(div > button) {
   --_background-color: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
   --_color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
@@ -61,21 +60,21 @@ div > :global(div > button) {
   text-align: var(--tab-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--secondary-text-align, var(--text-align, unset))))));
 }
 
-div > :global(button):focus-visible,
-div > :global(div > button):focus-visible {
+.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)));
 }
 
-div > :global(button),
-div > :global(div > button) {
+.tab > :global(button),
+.tab > :global(div > button) {
   border-radius: var(--tab-border-radius, var(--border-radius) var(--border-radius) 0 0);
   margin: 0;
 }
 
-div.active > :global(button),
-div.active > :global(div > button) {
+.tab.active > :global(button),
+.tab.active > :global(div > button) {
   --_background-color: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
   --_color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
   --link-bg: var(--tab-active-link-bg, var(--primary-link-bg, var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))))));

package/dist/cssprops.js

@@ -41,8 +41,10 @@ const miscComponentProps = [
     "--split-pane-right-width",
     "--split-pane-left-width",
     "--sidebar-collapse",
+    "--sidebar-compact-side-padding",
     "--sidebar-expand",
     "--sidebar-transition",
+    "--sidebar-mobile-icon-filter",
     "--resizer-grab-width",
     "--resizer-grab-height",
     "--resizer-color",
@@ -124,6 +126,7 @@ const components = [
     ...[
         "button",
         "mini-button",
+        "menu-trigger",
         "menu-item",
         "dropdown-menu",
         "select",

package/dist/dropdowns/DropdownMenu.svelte

@@ -19,11 +19,16 @@ const style = $derived(injectVars(props, "menu", [
     "padding",
     "width",
     "height",
+    "triggerBg",
+    "triggerFg",
+    "triggerPadding",
 ]));
-let dropdownTop = $state();
-let dropdownLeft = $state();
-let dropdownMaxHeight = $state();
+let dropdownTop = $state(0);
+let dropdownLeft = $state(0);
+let dropdownMaxHeight = $state(0);
 function computePosition() {
+    if (!buttonElement || !dropdownContentElement)
+        return;
     let dropdownRect = dropdownContentElement.getBoundingClientRect();
     let buttonRect = buttonElement.getBoundingClientRect();
     // Fix me -- we need to figure out where the dropdown goes in fixed
@@ -38,13 +43,15 @@ function computePosition() {
     }
     dropdownMaxHeight = window.innerHeight - dropdownTop;
 }
-function triggerMenu(e) {
+function triggerMenu(_e) {
     if (!isOpen) {
         injectVariablesIntoDropdown();
         computePosition();
     }
 }
-function dismissPopover(e) {
+function dismissPopover(_e) {
+    if (!popoverDiv)
+        return;
     popoverDiv.hidePopover();
 }
 function handleToggle(event) {
@@ -65,7 +72,7 @@ function handleKeystroke(event) {
     else {
         searchString = "";
         if (event.key === "Escape") {
-            popoverDiv.hidePopover();
+            popoverDiv?.hidePopover();
         }
         else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault(); // Prevent default to stop scrolling the page
@@ -75,6 +82,8 @@ function handleKeystroke(event) {
     }
 }
 function maybeFocusMatch(searchString) {
+    if (!dropdownContentElement)
+        return;
     let focusableItems = dropdownContentElement.querySelectorAll("a,button,[tabindex]");
     for (let element of focusableItems) {
         if (element.textContent &&
@@ -87,10 +96,12 @@ function maybeFocusMatch(searchString) {
     }
 }
 function navigateMenu(direction) {
-    if (!popoverDiv.matches(":popover-open")) {
+    if (!popoverDiv?.matches(":popover-open") && buttonElement) {
         buttonElement.click();
         return;
     }
+    if (!dropdownContentElement)
+        return;
     const focusableItems = Array.from(dropdownContentElement.querySelectorAll("button, a, [tabindex]:not([tabindex='-1'])"));
     let currentIndex = focusableItems.findIndex((item) => item === document.activeElement);
     if (direction === "ArrowDown") {
@@ -104,6 +115,8 @@ function navigateMenu(direction) {
 }
 let cssVariableContext = $state("");
 function injectVariablesIntoDropdown() {
+    if (!buttonElement)
+        return;
     cssVariableContext = "";
     let buttonStyle = getComputedStyle(buttonElement);
     for (let prop of cssProperties) {
@@ -167,48 +180,48 @@ let popoverDiv = $state();
   */
 /* Convenience groupings */
 button {
-  --_background-color: var(--menu-bg, var(--button-bg, var(--surface-bg, var(--bg, unset))));
-  --_color: var(--menu-fg, var(--button-fg, var(--surface-fg, var(--fg, unset))));
-  --link-bg: var(--menu-link-bg, var(--button-link-bg, var(--surface-link-bg, inherit)));
-  --link-fg: var(--menu-link-fg, var(--button-link-fg, var(--surface-link-fg, inherit)));
+  --_background-color: var(--menu-trigger-bg, var(--menu-bg, var(--button-bg, var(--surface-bg, var(--bg, unset)))));
+  --_color: var(--menu-trigger-fg, var(--menu-fg, var(--button-fg, var(--surface-fg, var(--fg, unset)))));
+  --link-bg: var(--menu-trigger-link-bg, var(--menu-link-bg, var(--button-link-bg, var(--surface-link-bg, inherit))));
+  --link-fg: var(--menu-trigger-link-fg, var(--menu-link-fg, var(--button-link-fg, var(--surface-link-fg, inherit))));
   background-color: var(--_background-color);
   color: var(--_color);
   box-sizing: border-box;
-  border: var(--menu-border, var(--button-border, var(--surface-border, var(--border, inherit))));
-  border-width: var(--menu-border-width, var(--button-border-width, var(--surface-border-width, var(--__missing-border-width))));
-  border-style: var(--menu-border-style, var(--button-border-style, var(--surface-border-style, var(--__missing-border-style))));
-  border-color: var(--menu-border-color, var(--button-border-color, var(--surface-border-color, var(--__missing-border-color))));
-  border-top: var(--menu-border-top, var(--button-border-top, var(--surface-border-top, var(--border-top, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  border-right: var(--menu-border-right, var(--button-border-right, var(--surface-border-right, var(--border-right, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  border-bottom: var(--menu-border-bottom, var(--button-border-bottom, var(--surface-border-bottom, var(--border-bottom, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  border-left: var(--menu-border-left, var(--button-border-left, var(--surface-border-left, var(--border-left, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  --_padding: var(--menu-padding, var(--button-padding, var(--surface-padding, var(--padding, 4px))));
+  border: var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, inherit)))));
+  border-width: var(--menu-trigger-border-width, var(--menu-border-width, var(--button-border-width, var(--surface-border-width, var(--__missing-border-width)))));
+  border-style: var(--menu-trigger-border-style, var(--menu-border-style, var(--button-border-style, var(--surface-border-style, var(--__missing-border-style)))));
+  border-color: var(--menu-trigger-border-color, var(--menu-border-color, var(--button-border-color, var(--surface-border-color, var(--__missing-border-color)))));
+  border-top: var(--menu-trigger-border-top, var(--menu-border-top, var(--button-border-top, var(--surface-border-top, var(--border-top, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  border-right: var(--menu-trigger-border-right, var(--menu-border-right, var(--button-border-right, var(--surface-border-right, var(--border-right, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  border-bottom: var(--menu-trigger-border-bottom, var(--menu-border-bottom, var(--button-border-bottom, var(--surface-border-bottom, var(--border-bottom, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  border-left: var(--menu-trigger-border-left, var(--menu-border-left, var(--button-border-left, var(--surface-border-left, var(--border-left, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  --_padding: var(--menu-trigger-padding, var(--menu-padding, var(--button-padding, var(--surface-padding, var(--padding, 4px)))));
   padding: var(--_padding);
-  border-radius: var(--menu-square-radius, var(--button-square-radius, var(--surface-square-radius, var(--square-radius, 0))));
-  cursor: var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
-  transition: filter var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
+  border-radius: var(--menu-trigger-square-radius, var(--menu-square-radius, var(--button-square-radius, var(--surface-square-radius, var(--square-radius, 0)))));
+  cursor: var(--menu-trigger-cursor, var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer)))));
+  transition: filter var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), background-color var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), border-color var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), box-shadow var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), transform var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))));
 }
 
 button:hover {
-  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));
-  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
+  filter: var(--menu-trigger-hover-filter, var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05))))));
+  transform: var(--menu-trigger-hover-transform, var(--menu-hover-transform, var(--button-hover-transform, var(--control-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-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--menu-trigger-hover-box-shadow, var(--menu-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:active {
-  filter: var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
-  transform: var(--menu-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
+  filter: var(--menu-trigger-active-filter, var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9))))));
+  transform: var(--menu-trigger-active-transform, var(--menu-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%)));
-  box-shadow: var(--menu-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--menu-trigger-active-box-shadow, var(--menu-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:disabled {
-  cursor: var(--menu-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed))));
-  transform: var(--menu-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
-  filter: var(--menu-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
+  cursor: var(--menu-trigger-disabled-cursor, var(--menu-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed)))));
+  transform: var(--menu-trigger-disabled-transform, var(--menu-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none)))));
+  filter: var(--menu-trigger-disabled-filter, var(--menu-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%)));
-  box-shadow: var(--menu-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--menu-trigger-disabled-box-shadow, var(--menu-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:focus-visible {
@@ -221,25 +234,13 @@ button {
   position: relative;
 }
 
-.menu {
+.dropdown-content :global(.menu) {
   --_background-color: var(--menu-bg, var(--surface-bg, var(--bg, unset)));
   --_color: var(--menu-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--menu-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--menu-link-fg, var(--surface-link-fg, inherit));
   background-color: var(--_background-color);
   color: var(--_color);
-  box-sizing: border-box;
-  --_padding: var(--menu-padding, var(--padding, 4px));
-  padding: var(--_padding);
-  border: var(--menu-border, var(--border, inherit));
-  border-width: var(--menu-border-width, var(--__missing-border-width));
-  border-style: var(--menu-border-style, var(--__missing-border-style));
-  border-color: var(--menu-border-color, var(--__missing-border-color));
-  border-top: var(--menu-border-top, var(--border-top, var(--menu-border, var(--border, none))));
-  border-right: var(--menu-border-right, var(--border-right, var(--menu-border, var(--border, none))));
-  border-bottom: var(--menu-border-bottom, var(--border-bottom, var(--menu-border, var(--border, none))));
-  border-left: var(--menu-border-left, var(--border-left, var(--menu-border, var(--border, none))));
-  border-radius: var(--menu-border-radius, var(--border-radius, none));
   font-family: var(--menu-font-family, var(--surface-font-family, var(--font-family, unset)));
   text-transform: var(--menu-text-transform, var(--surface-text-transform, var(--text-transform, unset)));
   text-decoration: var(--menu-text-decoration, var(--surface-text-decoration, var(--text-decoration, unset)));
@@ -261,21 +262,21 @@ button {
   transition: filter var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
 }
 
-.menu:hover {
+.dropdown-content :global(.menu):hover {
   filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));
   transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-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-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
 }
 
-.menu:active {
+.dropdown-content :global(.menu):active {
   filter: var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
   transform: var(--menu-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%)));
   box-shadow: var(--menu-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
 }
 
-.menu:disabled {
+.dropdown-content :global(.menu):disabled {
   cursor: var(--menu-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed))));
   transform: var(--menu-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
   filter: var(--menu-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
@@ -283,7 +284,7 @@ button {
   box-shadow: var(--menu-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
 }
 
-.menu:focus-visible {
+.dropdown-content :global(.menu):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)));

package/dist/layout/Bar.svelte

@@ -12,14 +12,11 @@ const cssKeys = [
     "marginTop",
 ];
 const style = $derived(injectVars(restProps, "bar", cssKeys));
-let extraStyle = "";
-if (primary) {
-    extraStyle += "--bar-bg: var(--primary-bg); --bar-fg: var(--primary-fg);";
-}
-else if (secondary) {
-    extraStyle +=
-        "--bar-bg: var(--secondary-bg); --bar-fg: var(--secondary-fg);";
-}
+const extraStyle = $derived(primary
+    ? "--bar-bg: var(--primary-bg); --bar-fg: var(--primary-fg);"
+    : secondary
+        ? "--bar-bg: var(--secondary-bg); --bar-fg: var(--secondary-fg);"
+        : "");
 </script>
 
 <div class="bar" style="{style}{extraStyle}">
@@ -35,14 +32,16 @@ else if (secondary) {
 /* Convenience groupings */
 .bar {
   display: flex;
+  container-type: inline-size;
+  flex-wrap: var(--bar-wrap, wrap);
   align-items: var(--bar-align, center);
   justify-content: var(--bar-justify, space-between);
   padding: var(--bar-padding, var(--padding, 8px));
   border-bottom: var(--bar-border-bottom, var(--bar-border-width, var(--border-width, 1px)) var(--bar-border-style, var(--border-style, 1px)) var(--bar-border-color, var(--border-color, 1px)));
   border-top: var(--bar-border-top, var(--bar-border-width, var(--border-width, 1px)) var(--bar-border-style, var(--border-style, 1px)) var(--bar-border-color, var(--border-color, 1px)));
   margin-bottom: var(--bar-margin-bottom, 1em);
-  min-height: var(--bar-min-height);
-  height: var(--bar-height, 3em);
+  min-height: var(--bar-min-height, var(--bar-height, 3em));
+  height: var(--bar-height, auto);
   max-height: var(--bar-max-height);
   --_background-color: var(--bar-bg, var(--surface-bg, var(--bg, unset)));
   --_color: var(--bar-fg, var(--surface-fg, var(--fg, unset)));

package/dist/layout/Column.svelte

@@ -2,9 +2,10 @@
 let warned = false;
 </script>
 
-<script lang="ts">import ColumnContainer from "./ColumnContainer.svelte";
+<script lang="ts">import { BROWSER, DEV } from "esm-env";
+import ColumnContainer from "./ColumnContainer.svelte";
 let { size = "medium", customWidth = null, children, ...restProps } = $props();
-if (typeof window !== "undefined" && import.meta.env.DEV && !warned) {
+if (BROWSER && DEV && !warned) {
     warned = true;
     console.warn("[ContainCSS] <Column> is deprecated. Use <ColumnContainer> for sized rails or <Stack> for generic vertical layout.");
 }