contain-css-svelte 1.1.4 → 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/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/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

@@ -13,7 +13,16 @@ let buttonElement = $state();
 let dropdownContentElement = $state();
 let isOpen = $state(false);
 // Style injection
-const style = $derived(injectVars(props, "menu", ["bg", "fg", "padding", "width", "height"]));
+const style = $derived(injectVars(props, "menu", [
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
+    "triggerBg",
+    "triggerFg",
+    "triggerPadding",
+]));
 let dropdownTop = $state(0);
 let dropdownLeft = $state(0);
 let dropdownMaxHeight = $state(0);
@@ -34,13 +43,13 @@ 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();
@@ -63,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
@@ -87,7 +96,7 @@ function maybeFocusMatch(searchString) {
     }
 }
 function navigateMenu(direction) {
-    if (!popoverDiv.matches(":popover-open") && buttonElement) {
+    if (!popoverDiv?.matches(":popover-open") && buttonElement) {
         buttonElement.click();
         return;
     }
@@ -171,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 {

package/dist/layout/Bar.svelte

@@ -32,14 +32,16 @@ const extraStyle = $derived(primary
 /* 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/Container.svelte.d.ts

@@ -1,4 +1,6 @@
-type $$ComponentProps = {
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type Props = {
     bg?: string | null;
     fg?: string | null;
     margin?: string | null;
@@ -8,8 +10,8 @@ type $$ComponentProps = {
     border?: boolean;
     paddingTop?: string | null;
     borderTop?: string | null;
-    children?: import("svelte").Snippet;
-};
-declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const Container: import("svelte").Component<Props, {}, "">;
 type Container = ReturnType<typeof Container>;
 export default Container;

package/dist/layout/DataListItem.svelte

@@ -108,7 +108,7 @@ function handleKeydown(event) {
         <Checkbox
           bind:checked
           padding="0"
-          tabindex="-1"
+          tabindex={-1}
           aria-label={checked ? "Unselect row" : "Select row"}
         />
       {/if}

package/dist/layout/FormProvider.svelte

@@ -2,7 +2,9 @@
 let { layout, collapseSide, fullWidth, globalInputStyles, multiline, children, } = $props();
 // Get parent context if it exists
 const parentContext = getContext("formItemDefaults");
-// Make context reactive using $state, merging with parent
+// Make context reactive using $state, merging with parent.
+// The $effect below keeps these in sync; the initial values are intentional.
+// svelte-ignore state_referenced_locally
 let contextValue = $state({
     layout: layout ?? parentContext?.layout,
     collapseSide: collapseSide ?? parentContext?.collapseSide,

package/dist/layout/GridLayout.svelte

@@ -20,7 +20,7 @@ export {};
 /* Convenience groupings */
 .grid-layout {
   display: grid;
-  grid-template-columns: repeat(auto-fill, var(--grid-layout-item-width, var(--item-width, 250px)));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-layout-item-width, var(--item-width, 250px))), 1fr));
   gap: var(--grid-layout-gap, var(--gap, 8px));
   justify-content: var(--grid-justify-content, center);
   place-content: var(--grid-place-content, center);

package/dist/layout/Inline.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">import { injectVars } from "../util";
 let { fill = false, stretch = false, split = false, justify = null, align = null, gap = null, wrap = null, 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({ justify, align, gap, wrap, ...elementProps }, "inline", [
     "bg",
     "fg",

package/dist/layout/Page.svelte

@@ -216,7 +216,8 @@ footer {
   margin: 0;
   box-sizing: border-box;
   gap: var(--column-gap);
-  padding: var(--padding);
+  padding: 0;
+  position: relative;
 }
 
 .right .side-by-side {
@@ -231,4 +232,31 @@ footer {
 
 .page.sticky.freeze :global(*) {
   overflow: hidden;
+}
+
+@container (max-width: 600px) {
+  .side-by-side {
+    gap: 0;
+  }
+  .hasSidebar > .side-by-side > .aside {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: 3;
+    display: flex;
+  }
+  .hasSidebar > .side-by-side > .content {
+    padding-inline-start: max(var(--_padding, var(--padding, 0px)), var(--sidebar-compact-side-padding, calc(max(var(--sidebar-icon-width, 0.65rem), var(--sidebar-icon-height, 1rem), var(--icon-size, 32px)) + var(--gap, 8px))));
+  }
+  .hasSidebar.right > .side-by-side > .aside {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+  .hasSidebar.right > .side-by-side > .content {
+    padding-inline-start: var(--_padding, var(--padding, 0px));
+    padding-inline-end: max(var(--_padding, var(--padding, 0px)), var(--sidebar-compact-side-padding, calc(max(var(--sidebar-icon-width, 0.65rem), var(--sidebar-icon-height, 1rem), var(--icon-size, 32px)) + var(--gap, 8px))));
+  }
+  .page > div > .content {
+    min-width: 0;
+  }
 }</style>

package/dist/layout/ResponsiveText.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">const breakpoints = ["xs", "small", "medium", "large", "xl"];
-const { greaterThan = null, smallerThan = null, xs, small, medium, large, xl, else: elseSnippet, greaterThan: greaterThanSnippet, smallerThan: smallerThanSnippet, } = $props();
+const { greaterThan = null, smallerThan = null, xs, small, medium, large, xl, else: elseSnippet, greaterThanContent: greaterThanSnippet, smallerThanContent: smallerThanSnippet, } = $props();
 function computeSmallerThan(value) {
     if (!value)
         return "";

package/dist/layout/ResponsiveText.svelte.d.ts

@@ -8,6 +8,8 @@ declare const ResponsiveText: import("svelte").Component<{
     large?: Snippet;
     xl?: Snippet;
     else?: Snippet;
+    greaterThanContent?: Snippet;
+    smallerThanContent?: Snippet;
 }, {}, "">;
 type ResponsiveText = ReturnType<typeof ResponsiveText>;
 export default ResponsiveText;

package/dist/layout/Sidebar.svelte

@@ -238,6 +238,14 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     color: var(--_color);
   }
   aside > button {
+    --_sidebar-expander-width: max(
+      var(--sidebar-icon-width, 0.65rem),
+      var(--icon-size, 32px)
+    );
+    --_sidebar-expander-height: max(
+      var(--sidebar-icon-height, 1rem),
+      var(--icon-size, 32px)
+    );
     transition: left var(--sidebar-transition);
     transform: translateX(0);
     z-index: 3;
@@ -247,13 +255,13 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     display: block;
     position: absolute;
     top: var(--padding);
-    left: calc(-1 * var(--padding));
+    left: 0;
     border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border: var(--mini-button-border);
-    width: var(--icon-size, 32px);
-    height: var(--icon-size, 32px);
+    width: var(--_sidebar-expander-width);
+    height: var(--_sidebar-expander-height);
     --_background-color: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
     --_color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
     --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
@@ -287,8 +295,12 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     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)));
   }
+  aside > button::after {
+    color: var(--mini-button-fg, currentColor);
+    filter: var(--sidebar-mobile-icon-filter, none);
+  }
   aside > button.close {
-    left: calc(var(--sidebar-width) - var(--icon-size, 32px) + var(--padding));
+    left: calc(var(--sidebar-width) - var(--_sidebar-expander-width) + var(--padding));
     border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -298,13 +310,16 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     color: var(--mini-button-hover-fg);
   } */
   aside {
-    width: calc(var(--gap) + var(--icon-size));
+    width: calc(var(--gap) + max(var(--sidebar-icon-width, 0.65rem), var(--icon-size, 32px)));
     flex: 0 0 auto;
   }
   aside .content {
     position: absolute;
-    --top: calc(var(--padding) + var(--icon-size));
-    left: var(--padding);
+    --top: calc(
+      var(--padding) +
+        max(var(--sidebar-icon-height, 1rem), var(--icon-size, 32px))
+    );
+    left: 0;
     width: var(--sidebar-width);
     z-index: 2;
   }

package/dist/layout/SplitPane.svelte

@@ -10,9 +10,9 @@ const style = $derived(injectVars(restProps, "split-pane", [
     "rightWidth",
 ]));
 let resizeStyle = $state("");
-let startWidthLeft = $state();
-let startWidthRight = $state();
-let startX = $state();
+let startWidthLeft = $state(0);
+let startWidthRight = $state(0);
+let startX = $state(0);
 let splitPaneContainer = $state();
 let resizerDiv = $state();
 let leftPane = $state();

package/dist/layout/Stack.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">import { injectVars } from "../util";
 let { fill = false, stretch = false, split = false, center = false, justify = null, align = null, gap = null, children, ...restProps } = $props();
 const resolvedAlign = $derived(align ?? (center ? "center" : null));
-const { style: inlineStyle, ...elementProps } = restProps;
+const inlineStyle = $derived(restProps.style);
+const elementProps = $derived.by(() => {
+    const { style: _, ...rest } = restProps;
+    return rest;
+});
 const style = $derived(injectVars({ justify, align: resolvedAlign, gap, ...elementProps }, "stack", ["bg", "fg", "padding", "width", "height", "gap", "justify", "align"]) + (inlineStyle ?? ""));
 </script>
 

package/dist/layout/TabBar.svelte

@@ -7,7 +7,6 @@ let lastActive = $state(active);
 <div class="tabs" class:sticky>
   <Bar
     padding="0"
-    borderTop="none"
     --button-height="var(--tab-bar-height, 3em)"
     --bar-justify="var(--tab-bar-justify, start)"
     --bar-gap="var(--tab-bar-gap, var(--space-md))"
@@ -21,8 +20,8 @@ let lastActive = $state(active);
     --bar-border-bottom="var(--tab-bar-border-bottom, var(--border-width) var(--border-style) var(--border-color))"
   >
     {#each items as item}
-      {@const value = item.value || item}
-      {@const label = item.label || item}
+      {@const value = typeof item === "string" ? item : item.value}
+      {@const label = typeof item === "string" ? item : item.label}
       <TabItem
         active={value === active}
         onclick={() => {

package/dist/layout/Table.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { run } from "svelte/legacy";
 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 */
 let headClone = $state(null);
@@ -40,18 +41,19 @@ function syncColumnWidths() {
             return 0;
         return Array.from(row.children).reduce((acc, cell) => acc + parseInt(cell.getAttribute("colspan") || "1", 10), 0);
     };
+    const hasNoColspan = (row) => !Array.from(row.children).some((cell) => cell.hasAttribute("colspan"));
     const findBestRow = (table) => {
-        const rows = Array.from(table.querySelectorAll("tr"));
-        // First: find a row with no colspans
-        for (const row of rows) {
-            const hasColspan = Array.from(row.children).some((cell) => cell.hasAttribute("colspan"));
-            if (!hasColspan)
-                return row;
-        }
-        // Otherwise: row with smallest total colspans
+        // Fast path: first row covers the vast majority of real tables
+        const firstRow = table.querySelector("tbody tr, tr");
+        if (firstRow && hasNoColspan(firstRow))
+            return firstRow;
+        // Slow path: single pass — return on first no-colspan row found,
+        // while simultaneously tracking the least-colspan row as a fallback.
         let best = null;
         let bestSpanCount = Infinity;
-        for (const row of rows) {
+        for (const row of table.querySelectorAll("tr")) {
+            if (hasNoColspan(row))
+                return row;
             const spanCount = getTotalCols(row);
             if (spanCount < bestSpanCount) {
                 bestSpanCount = spanCount;
@@ -109,12 +111,20 @@ function setupWidths() {
     columns = [];
     if (thead && sticky && headClone && bodyClone) {
         syncColumnWidths();
-        // Set up ResizeObserver to keep columns in sync when content or size changes
+        // Set up ResizeObserver to keep columns in sync when content or size changes.
+        // Debounce via rAF so rapid Svelte updates only trigger one sync per frame.
         if (!resizeObserver &&
             typeof window !== "undefined" &&
             window.ResizeObserver) {
+            let rafPending = false;
             resizeObserver = new ResizeObserver(() => {
-                syncColumnWidths();
+                if (!rafPending) {
+                    rafPending = true;
+                    requestAnimationFrame(() => {
+                        rafPending = false;
+                        syncColumnWidths();
+                    });
+                }
             });
             if (headClone)
                 resizeObserver.observe(headClone);

package/dist/layout/Tile.svelte

@@ -372,6 +372,7 @@ export {};
   /* Override typography max-width */
   max-width: var(--tile-width, calc(var(--space-lg) * 24));
   display: inline-flex;
+  vertical-align: top;
   flex-direction: column;
   justify-content: var(--tile-justify, var(--justify, flex-start));
   align-items: var(--tile-align, var(--align, center));

package/dist/overlays/Dialog.svelte

@@ -23,7 +23,7 @@ function handleBackdropClick(event) {
             event.clientX > rect.right ||
             event.clientY < rect.top ||
             event.clientY > rect.bottom)) {
-        onclose();
+        onclose?.();
     }
 }
 $effect(() => {
@@ -44,7 +44,7 @@ $effect(() => {
         else if (dialogElement) {
             dialogElement.close();
             dialogElement.removeEventListener("click", handleBackdropClick);
-            onclose();
+            onclose?.();
         }
     }
 });

package/dist/overlays/Dialog.svelte.d.ts

@@ -4,8 +4,8 @@ type PropsType = {
     modal?: boolean;
     dismissible?: boolean;
     children?: Snippet;
-    onclose?: () => void | null;
-    onClose?: () => void | null;
+    onclose?: (() => void) | null;
+    onClose?: (() => void) | null;
 } & Record<string, unknown>;
 declare const Dialog: import("svelte").Component<PropsType, {}, "">;
 type Dialog = ReturnType<typeof Dialog>;