contain-css-svelte 0.0.13 → 0.0.14

package/dist/Card.svelte

@@ -32,13 +32,13 @@ let hasFooter = $$slots.footer;
   </footer>
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 .card {
   --w: var(--card-width);
   --h: var(--card-height);
@@ -98,6 +98,25 @@ let hasFooter = $$slots.footer;
   margin-right: auto;
   margin-bottom: var(--card-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
   margin-top: var(--card-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
+  /* Typography */
+  font-family: var(--card-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
+  text-transform: var(--card-heading-text-transform, var(--container-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
+  text-decoration: var(--card-heading-text-decoration, var(--container-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
+  font-size: var(--card-heading-font-size, var(--container-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
+  font-weight: var(--card-heading-font-weight, var(--container-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
+  line-height: var(--card-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
+  letter-spacing: var(--card-heading-letter-spacing, var(--container-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
+  text-indent: var(--card-heading-indent, var(--container-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
+  font-variant: var(--card-heading-font-variant, var(--container-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
+  text-align: var(--card-heading-text-align, var(--container-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit))));
+  /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
+  font-size: fn.var(--heading-font-size, inherit);
+  font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
+  line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
+  letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
+  text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
+  font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
+  text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
 }
 .card section :global(p) {
   font-family: var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -128,34 +147,35 @@ let hasFooter = $$slots.footer;
   text-indent: var(--card-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--card-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--card-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  margin-block-start: var(--card-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 .card section :global(p:first-of-type::first-line) {
-  font-family: var(--card-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
-  text-transform: var(--card-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
-  text-decoration: var(--card-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
-  font-size: var(--card-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
-  font-weight: var(--card-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
-  line-height: var(--card-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
-  letter-spacing: var(--card-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
-  text-indent: var(--card-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
-  font-variant: var(--card-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
-  text-align: var(--card-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
+  font-family: var(--first-line-font-family, var(--card-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
+  text-transform: var(--first-line-text-transform, var(--card-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
+  text-decoration: var(--first-line-text-decoration, var(--card-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
+  font-size: var(--first-line-font-size, var(--card-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
+  font-weight: var(--first-line-font-weight, var(--card-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
+  line-height: var(--first-line-line-height, var(--card-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
+  letter-spacing: var(--first-line-letter-spacing, var(--card-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
+  text-indent: var(--first-line-indent, var(--card-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
+  font-variant: var(--first-line-font-variant, var(--card-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
+  text-align: var(--first-line-text-align, var(--card-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
 }
 .card section :global(p:first-of-type::first-letter) {
-  font-family: var(--card-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
-  text-transform: var(--card-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
-  text-decoration: var(--card-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
-  font-size: var(--card-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
-  font-weight: var(--card-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
-  line-height: var(--card-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
-  letter-spacing: var(--card-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
-  text-indent: var(--card-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
-  font-variant: var(--card-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
-  text-align: var(--card-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
-  background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
-  color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
-  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
-  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
+  font-family: var(--first-letter-font-family, var(--card-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit))));
+  text-transform: var(--first-letter-text-transform, var(--card-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit))));
+  text-decoration: var(--first-letter-text-decoration, var(--card-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit))));
+  font-size: var(--first-letter-font-size, var(--card-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit))));
+  font-weight: var(--first-letter-font-weight, var(--card-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit))));
+  line-height: var(--first-letter-line-height, var(--card-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit))));
+  letter-spacing: var(--first-letter-letter-spacing, var(--card-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit))));
+  text-indent: var(--first-letter-indent, var(--card-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit))));
+  font-variant: var(--first-letter-font-variant, var(--card-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit))));
+  text-align: var(--first-letter-text-align, var(--card-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit))));
+  --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
+  --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  background: var(--card-first-letter-bg, var(--container-first-letter-bg, var(--first-letter-bg, inherit)));
+  color: var(--card-first-letter-fg, var(--container-first-letter-fg, var(--first-letter-fg, inherit)));
 }
 
 @container (max-width: 600px) {

package/dist/controls/Button.svelte

@@ -28,13 +28,13 @@ let cssVars = injectVars($$props, "button", [
   <span class:hidden={!iconSlotted} class="icon"><slot name="icon" /></span>
 </button>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 button.has-icon {
   display: flex;
   align-items: center;
@@ -84,6 +84,11 @@ button:active {
   filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   transform: var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
 }
+button:disabled {
+  cursor: var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
+  transform: var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
+  filter: var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
+}
 
 button.primary {
   background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));

package/dist/controls/Checkbox.svelte

@@ -37,13 +37,13 @@ $: {
 </div>
 
 <style>@charset "UTF-8";
-/* Convenience groupings */
 /* 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;
@@ -110,6 +110,11 @@ label:active {
   filter: var(--checkbox-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   transform: var(--checkbox-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
 }
+label:disabled {
+  cursor: var(--checkbox-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
+  transform: var(--checkbox-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
+  filter: var(--checkbox-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
+}
 
 label span {
   width: var(--label-width);

package/dist/controls/Input.svelte

@@ -6,13 +6,13 @@ export let placeholder = "";
 {...$$restProps}
 />
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 input {
   font-family: var(--input-font-family, var(--ui-font-family, var(--font-family, unset)));
   text-transform: var(--input-text-transform, var(--ui-text-transform, var(--text-transform, unset)));

package/dist/controls/MiniButton.svelte

@@ -28,13 +28,13 @@ let style = injectVars($$props, "mini-button", [
   <slot />
 </button>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 button.primary {
   background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
@@ -68,10 +68,14 @@ button {
   margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
   width: var(--mini-button-size, var(--icon-size, 1em));
   height: var(--mini-button-size, var(--icon-size, 1em));
+  /* Make sure we don't shrink in a flex container */
+  min-width: var(--mini-button-size, var(--icon-size, 1em));
+  min-height: var(--mini-button-size, var(--icon-size, 1em));
   border-radius: var(--mini-button-radius, 50%);
   border: var(--mini-button-border, button-border, none);
   display: inline-grid;
   place-content: center;
+  flex-shrink: 0; /* Don't shrink any more */
 }
 button:hover {
   filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4)))));
@@ -81,6 +85,11 @@ button:active {
   filter: var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
   transform: var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none))));
 }
+button:disabled {
+  cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed))));
+  transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
+  filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
+}
 
 button.primary {
   background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));

package/dist/controls/RadioButton.svelte

@@ -52,13 +52,13 @@ $: {
   visibility: hidden;
 }
 
-/* Convenience groupings */
 /* 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: "•";
@@ -96,6 +96,7 @@ label {
   box-sizing: border-box;
   user-select: none;
   gap: var(--radio-button-space, var(--toggle-space, var(--space-md)));
+  white-space: nowrap;
   cursor: var(--radio-button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
   transition: filter, transform var(--radio-button-transition, var(--clickable-transition, var(--transition, 300ms)));
 }
@@ -107,6 +108,11 @@ label:active {
   filter: var(--radio-button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   transform: var(--radio-button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
 }
+label:disabled {
+  cursor: var(--radio-button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
+  transform: var(--radio-button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
+  filter: var(--radio-button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
+}
 
 label span {
   width: var(--label-width);
@@ -138,10 +144,10 @@ label::before {
 }
 
 label:has(input:checked)::before {
-  background: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--radio-button-bg, var(--bg, unset)))));
-  color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--radio-button-fg, var(--fg, unset)))));
-  --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--radio-button-link-bg, var(--radio-button-link-bg, inherit)))));
-  --link-fg: var(--radio-button-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--radio-button-link-fg, var(--radio-button-link-fg, inherit)))));
+  background: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
+  color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
+  --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit))));
+  --link-fg: var(--radio-button-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--primary-link-fg, inherit))));
   border: var(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));
   box-sizing: border-box;
   width: var(--radio-button-size, var(--toggle-size, var(--font-size, var(--size, 1em))));

package/dist/controls/Select.svelte

@@ -3,6 +3,9 @@ import { onMount, tick } from "svelte";
 export let value;
 let selectElement;
 let observer;
+let resizeObserver;
+let targetWidth = 0;
+let optionButtons = [];
 onMount(async () => {
     await tick(); // Ensure slot content is rendered
     updateOptions();
@@ -15,7 +18,13 @@ onMount(async () => {
         });
     });
     observer.observe(selectElement, { childList: true });
-    return () => observer.disconnect();
+    // Observe size changes in option buttons
+    resizeObserver = new ResizeObserver(() => updateTargetWidth());
+    optionButtons.forEach(button => resizeObserver.observe(button));
+    return () => {
+        observer.disconnect();
+        resizeObserver.disconnect();
+    };
 });
 let options = [];
 let activeOption = null;
@@ -25,7 +34,6 @@ function updateOptions() {
     }
     options = [];
     let optionEls = selectElement.querySelectorAll("option");
-    let newOptions = [];
     for (let optionEl of optionEls) {
         options.push({
             value: optionEl.value,
@@ -33,38 +41,32 @@ function updateOptions() {
         });
     }
     activeOption = options[selectElement.selectedIndex];
-    setTimeout(() => {
-        let maxWidth = 0;
-        for (let button of optionButtons) {
-            // measure the width of each button...
-            if (button.offsetWidth > maxWidth) {
-                maxWidth = button.offsetWidth;
-            }
+    updateTargetWidth();
+}
+function updateTargetWidth() {
+    let maxWidth = 0;
+    for (let button of optionButtons) {
+        if (button.offsetWidth > maxWidth) {
+            maxWidth = button.offsetWidth;
         }
-        targetWidth = maxWidth;
-    }, 10);
+    }
+    targetWidth = maxWidth || 150; // Fallback width if measurement fails
 }
 function setValue(idx) {
-    console.log("Button to set", idx);
     selectElement.selectedIndex = idx;
     selectElement.dispatchEvent(new Event("change"));
     activeOption = options[idx];
 }
 async function updateOption(value) {
-    /* Wait for svelte to update its internal select component */
     await tick();
     if (selectElement) {
-        /* Use svelte's magic to update our option */
         activeOption = options[selectElement.selectedIndex];
     }
 }
 $: updateOption(value);
-let targetWidth;
-let optionButtons = [];
 </script>
 
-<select bind:value on:change bind:this={selectElement}
-{...$$restProps}>
+<select bind:value on:change bind:this={selectElement} {...$$restProps}>
   <slot />
 </select>
 <div class="dropdown-wrapper" style:--target-width="{targetWidth}px">
@@ -85,32 +87,32 @@ let optionButtons = [];
 </div>
 
 <style>@charset "UTF-8";
-/* Convenience groupings */
 /* 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 */
 select,
 .dropdown-wrapper > :global(.dropdown-menu > button) {
   box-sizing: border-box;
   border: var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))))))));
-  /* border-top: var-with-fallbacks(--border-top,
+  /* border-top: fn.var-with-fallbacks(--border-top,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-right: var-with-fallbacks(--border-right,
+  /* border-right: fn.var-with-fallbacks(--border-right,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-bottom: var-with-fallbacks(--border-bottom,
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-left: var-with-fallbacks(--border-left,
+  /* border-left: fn.var-with-fallbacks(--border-left,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
   padding: var(--select-padding, var(--input-padding, var(--menu-padding, var(--control-padding, var(--container-padding, var(--padding, 4px))))));
   border-radius: var(--select-square-radius, var(--input-square-radius, var(--menu-square-radius, var(--control-square-radius, var(--container-square-radius, var(--square-radius, 0))))));
@@ -118,13 +120,27 @@ select,
   color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
   --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))))));
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
-  width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100cw))));
+  width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100vw))));
   text-overflow: ellipsis;
+  font-family: var(--select-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family, unset))));
+  text-transform: var(--select-text-transform, var(--input-text-transform, var(--ui-text-transform, var(--text-transform, unset))));
+  text-decoration: var(--select-text-decoration, var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset))));
+  font-size: var(--select-font-size, var(--input-font-size, var(--ui-font-size, var(--font-size, unset))));
+  font-weight: var(--select-font-weight, var(--input-font-weight, var(--ui-font-weight, var(--font-weight, unset))));
+  line-height: var(--select-line-height, var(--input-line-height, var(--ui-line-height, var(--line-height, unset))));
+  letter-spacing: var(--select-letter-spacing, var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset))));
+  margin-top: var(--select-margin, var(--input-margin, var(--ui-margin, var(--margin, unset))));
+  margin-top: var(--select-margin-top, var(--input-margin-top, var(--ui-margin-top, var(--margin-top, unset))));
+  margin-bottom: var(--select-margin, var(--input-margin, var(--ui-margin, var(--margin, unset))));
+  margin-bottom: var(--select-margin-bottom, var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset))));
+  text-indent: var(--select-indent, var(--input-indent, var(--ui-indent, var(--indent, unset))));
+  font-variant: var(--select-font-variant, var(--input-font-variant, var(--ui-font-variant, var(--font-variant, unset))));
+  text-align: var(--select-text-align, var(--input-text-align, var(--ui-text-align, var(--text-align, unset))));
 }
 
 .select-dropdown-label {
   overflow: hidden;
-  text-wrap: nowrap;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
 
@@ -151,7 +167,7 @@ select,
 }
 
 .select-dropdown::after {
-  content: var(--select-arrow, "⌄"); /* ↓ */
+  content: var(--select-arrow, "⌄");
   margin-left: auto;
   transform: var(--select-arrow-transform, scaleX(1.5) translateY(-70%));
   display: inline-grid;

package/dist/controls/TabItem.svelte

@@ -25,13 +25,13 @@ let style = injectVars($$props, "tab", [
   </Button>
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 div,
 span {
   display: contents;

package/dist/cssprops.js

@@ -186,4 +186,3 @@ for (let c of components) {
     cssProperties.push(...c.props);
 }
 cssProperties.sort();
-console.log(cssProperties);

package/dist/dropdowns/DropdownMenu.svelte

@@ -35,20 +35,15 @@ function computePosition() {
         dropdownTop = Math.max(0, window.innerHeight - dropdownRect.height);
     }
     dropdownMaxHeight = window.innerHeight - dropdownTop;
-    console.log("Computed top", dropdownTop, "left", dropdownLeft, "maxHeight", dropdownMaxHeight);
 }
 function triggerMenu(e) {
-    console.log("Triggered...");
     let isOpen = popoverDiv.matches(":popover-open");
-    console.log("Popover is currently open?", isOpen);
     if (!isOpen) {
-        console.log("Opening popover");
         injectVariablesIntoDropdown();
         computePosition();
     }
 }
 function dismissPopover(e) {
-    console.log("Dismissing popover");
     popoverDiv.hidePopover();
 }
 let searchString = "";
@@ -76,12 +71,10 @@ function handleKeystroke(event) {
     }
 }
 function maybeFocusMatch(searchString) {
-    console.log("Maybe focus", searchString);
     let focusableItems = dropdownContentElement.querySelectorAll("a,button,[tabindex]");
     for (let element of focusableItems) {
         if (element.textContent &&
             element.textContent.toLowerCase().startsWith(searchString.toLowerCase())) {
-            console.log("Found", element);
             if (element.focus) {
                 element.focus();
                 return;
@@ -146,13 +139,13 @@ let popoverDiv;
   </div>
 </nav>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 button {
   background: var(--menu-bg, var(--button-bg, var(--container-bg, var(--bg, unset))));
   color: var(--menu-fg, var(--button-fg, var(--container-fg, var(--fg, unset))));
@@ -178,6 +171,11 @@ 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))));
 }
+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)))));
+}
 
 .menu {
   background: var(--menu-bg, var(--container-bg, var(--bg, unset)));
@@ -217,6 +215,11 @@ 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))));
 }
+.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)))));
+}
 
 .dropdown-menu {
   font-family: var(--menu-font-family, var(--container-font-family, var(--font-family, unset)));
@@ -271,21 +274,21 @@ button:active {
   box-shadow: var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--dropdown-menu-shadow-blur, var(--dropdown-shadow-blur, var(--shadow-blur, var(--space)))) var(--dropdown-menu-shadow-color, var(--dropdown-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
   box-sizing: border-box;
   border: var(--dropdown-menu-border, var(--menu-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))))));
-  /* border-top: var-with-fallbacks(--border-top,
+  /* border-top: fn.var-with-fallbacks(--border-top,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-right: var-with-fallbacks(--border-right,
+  /* border-right: fn.var-with-fallbacks(--border-right,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-bottom: var-with-fallbacks(--border-bottom,
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-left: var-with-fallbacks(--border-left,
+  /* border-left: fn.var-with-fallbacks(--border-left,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
   padding: var(--dropdown-menu-padding, var(--menu-padding, var(--container-padding, var(--padding, 4px))));
   border-radius: var(--dropdown-menu-square-radius, var(--menu-square-radius, var(--container-square-radius, var(--square-radius, 0))));

package/dist/layout/Bar.svelte

@@ -24,13 +24,13 @@ let style = injectVars($$props, "bar", [
   <slot />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 .bar {
   display: flex;
   align-items: var(--bar-align, center);

package/dist/layout/Column.svelte

@@ -12,13 +12,13 @@ export let customWidth = null;
   <slot />
 </section>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 .small {
   --w: 120px;
 }
@@ -39,5 +39,5 @@ section {
   container-type: inline-size;
   overflow: auto;
   justify-content: start;
-  align-items: center;
+  align-items: var(--column-align, center);
 }</style>

package/dist/layout/Columns.svelte

@@ -5,13 +5,13 @@
   <slot />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* 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 */
 .columns {
   display: flex;
   flex-direction: row;