contain-css-svelte 0.0.6 → 0.0.8

package/dist/Card.svelte

@@ -60,20 +60,20 @@ let hasFooter = $$slots.footer;
   margin-left: auto;
   margin-right: auto;
   font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
-  font-family: var(--card-font-family, var(--container-font-family, var(--font-family, inherit)));
-  text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--card-font-size, var(--container-font-size, var(--font-size, inherit)));
-  font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight, inherit)));
-  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--card-margin, var(--container-margin, var(--margin, inherit)));
-  margin-top: var(--card-margin-top, var(--container-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--card-margin, var(--container-margin, var(--margin, inherit)));
-  margin-bottom: var(--card-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--card-indent, var(--container-indent, var(--indent, inherit)));
-  font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, inherit)));
-  text-align: var(--card-text-align, var(--container-text-align, var(--text-align, inherit)));
+  font-family: var(--card-font-family, var(--container-font-family, var(--font-family, unset)));
+  text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--card-font-size, var(--container-font-size, var(--font-size, unset)));
+  font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight, unset)));
+  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, unset)));
+  letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--card-margin, var(--container-margin, var(--margin, unset)));
+  margin-top: var(--card-margin-top, var(--container-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--card-margin, var(--container-margin, var(--margin, unset)));
+  margin-bottom: var(--card-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--card-indent, var(--container-indent, var(--indent, unset)));
+  font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, unset)));
+  text-align: var(--card-text-align, var(--container-text-align, var(--text-align, unset)));
 }
 .card section :global(p), .card section :global(blockquote), .card section :global(dl), .card section :global(ul), .card section :global(ol) {
   max-width: var(--card-line-width, var(--container-line-width, var(--line-width, 40em)));
@@ -81,7 +81,7 @@ let hasFooter = $$slots.footer;
   line-height: var(--card-line-height, var(--container-line-height, var(--line-height, 1.5)));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, inherit)));
+  font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
 }
 .card section :global(h1),
 .card section :global(h2),

package/dist/controls/Button.svelte

@@ -81,9 +81,9 @@ button:hover {
   color: var(--button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
 }
 button:active {
-  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9))));
-  transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space)))));
-  background-color: var(--active-bg, button, clickable, inherit);
+  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)));
+  background-color: var(--button-active-bg, var(--clickable-active-bg, var(--active-bg, inherit)));
   color: var(--active-fg, button, clickable, inherit);
 }
 

package/dist/controls/Checkbox.svelte

@@ -66,20 +66,20 @@ $: {
 
 .offscreen,
 label {
-  font-family: var(--checkbox-font-family, var(--ui-font-family, var(--font-family, inherit)));
-  text-transform: var(--checkbox-text-transform, var(--ui-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--checkbox-text-decoration, var(--ui-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--checkbox-font-size, var(--ui-font-size, var(--font-size, inherit)));
-  font-weight: var(--checkbox-font-weight, var(--ui-font-weight, var(--font-weight, inherit)));
-  line-height: var(--checkbox-line-height, var(--ui-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--checkbox-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--checkbox-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-top: var(--checkbox-margin-top, var(--ui-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--checkbox-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-bottom: var(--checkbox-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--checkbox-indent, var(--ui-indent, var(--indent, inherit)));
-  font-variant: var(--checkbox-font-variant, var(--ui-font-variant, var(--font-variant, inherit)));
-  text-align: var(--checkbox-text-align, var(--ui-text-align, var(--text-align, inherit)));
+  font-family: var(--checkbox-font-family, var(--ui-font-family, var(--font-family, unset)));
+  text-transform: var(--checkbox-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--checkbox-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--checkbox-font-size, var(--ui-font-size, var(--font-size, unset)));
+  font-weight: var(--checkbox-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
+  line-height: var(--checkbox-line-height, var(--ui-line-height, var(--line-height, unset)));
+  letter-spacing: var(--checkbox-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--checkbox-margin, var(--ui-margin, var(--margin, unset)));
+  margin-top: var(--checkbox-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--checkbox-margin, var(--ui-margin, var(--margin, unset)));
+  margin-bottom: var(--checkbox-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--checkbox-indent, var(--ui-indent, var(--indent, unset)));
+  font-variant: var(--checkbox-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
+  text-align: var(--checkbox-text-align, var(--ui-text-align, var(--text-align, unset)));
 }
 
 label {
@@ -108,9 +108,9 @@ label:hover {
   color: var(--checkbox-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
 }
 label:active {
-  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9))));
-  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space)))));
-  background-color: var(--active-bg, checkbox, clickable, inherit);
+  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)));
+  background-color: var(--checkbox-active-bg, var(--clickable-active-bg, var(--active-bg, inherit)));
   color: var(--active-fg, checkbox, clickable, inherit);
 }
 
@@ -139,6 +139,7 @@ label::before {
   --link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
   border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
   box-sizing: border-box;
+  border-radius: var(--checkbox-radius, 0);
 }
 
 label:has(input:checked)::before {
@@ -152,10 +153,10 @@ label:has(input:checked)::before {
 
 label:has(input:checked)::after {
   content: var(--checkbox-check, "✓");
-  font-size: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+  font-size: var(--checkbox-check-size, var(--size, 0.875em));
   color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, checkbox))));
   position: absolute;
-  left: 0;
+  left: var(--checkbox-left-offset, 0.125em);
   animation: checkbox-check var(--checkbox-transition) ease-in-out;
 }
 

package/dist/controls/Input.svelte

@@ -12,20 +12,20 @@ export let placeholder = "";
   container queries don't get their styles overridden by large media queries.
   */
 input {
-  font-family: var(--input-font-family, var(--ui-font-family, var(--font-family, inherit)));
-  text-transform: var(--input-text-transform, var(--ui-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--input-font-size, var(--ui-font-size, var(--font-size, inherit)));
-  font-weight: var(--input-font-weight, var(--ui-font-weight, var(--font-weight, inherit)));
-  line-height: var(--input-line-height, var(--ui-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--input-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-top: var(--input-margin-top, var(--ui-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--input-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-bottom: var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--input-indent, var(--ui-indent, var(--indent, inherit)));
-  font-variant: var(--input-font-variant, var(--ui-font-variant, var(--font-variant, inherit)));
-  text-align: var(--input-text-align, var(--ui-text-align, var(--text-align, inherit)));
+  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)));
+  text-decoration: var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--input-font-size, var(--ui-font-size, var(--font-size, unset)));
+  font-weight: var(--input-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
+  line-height: var(--input-line-height, var(--ui-line-height, var(--line-height, unset)));
+  letter-spacing: var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--input-margin, var(--ui-margin, var(--margin, unset)));
+  margin-top: var(--input-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--input-margin, var(--ui-margin, var(--margin, unset)));
+  margin-bottom: var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--input-indent, var(--ui-indent, var(--indent, unset)));
+  font-variant: var(--input-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
+  text-align: var(--input-text-align, var(--ui-text-align, var(--text-align, unset)));
   box-sizing: border-box;
   padding: var(--input-padding, var(--ui-padding, var(--padding, 4px)));
   border: var(--input-border, var(--ui-border, var(--border, inherit)));

package/dist/controls/MiniButton.svelte

@@ -42,20 +42,20 @@ button.primary {
 }
 
 button {
-  font-family: var(--button-font-family, var(--control-font-family, var(--font-family, inherit)));
-  text-transform: var(--button-text-transform, var(--control-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--button-text-decoration, var(--control-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--button-font-size, var(--control-font-size, var(--font-size, inherit)));
-  font-weight: var(--button-font-weight, var(--control-font-weight, var(--font-weight, inherit)));
-  line-height: var(--button-line-height, var(--control-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--button-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--button-margin, var(--control-margin, var(--margin, inherit)));
-  margin-top: var(--button-margin-top, var(--control-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--button-margin, var(--control-margin, var(--margin, inherit)));
-  margin-bottom: var(--button-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--button-indent, var(--control-indent, var(--indent, inherit)));
-  font-variant: var(--button-font-variant, var(--control-font-variant, var(--font-variant, inherit)));
-  text-align: var(--button-text-align, var(--control-text-align, var(--text-align, inherit)));
+  font-family: var(--button-font-family, var(--control-font-family, var(--font-family, unset)));
+  text-transform: var(--button-text-transform, var(--control-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--button-text-decoration, var(--control-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--button-font-size, var(--control-font-size, var(--font-size, unset)));
+  font-weight: var(--button-font-weight, var(--control-font-weight, var(--font-weight, unset)));
+  line-height: var(--button-line-height, var(--control-line-height, var(--line-height, unset)));
+  letter-spacing: var(--button-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--button-margin, var(--control-margin, var(--margin, unset)));
+  margin-top: var(--button-margin-top, var(--control-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--button-margin, var(--control-margin, var(--margin, unset)));
+  margin-bottom: var(--button-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--button-indent, var(--control-indent, var(--indent, unset)));
+  font-variant: var(--button-font-variant, var(--control-font-variant, var(--font-variant, unset)));
+  text-align: var(--button-text-align, var(--control-text-align, var(--text-align, unset)));
   background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
   color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
   --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
@@ -79,9 +79,9 @@ button:hover {
   color: var(--mini-button-hover-fg, var(--button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit))));
 }
 button:active {
-  filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9)))));
-  transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
-  background-color: var(--active-bg, mini-button, button, clickable, inherit);
+  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))));
+  background-color: var(--mini-button-active-bg, var(--button-active-bg, var(--clickable-active-bg, var(--active-bg, inherit))));
   color: var(--active-fg, mini-button, button, clickable, inherit);
 }
 

package/dist/controls/RadioButton.svelte

@@ -67,20 +67,20 @@ $: {
 /* ... (rest of your styles adapted for radio button) ... */
 .offscreen,
 label {
-  font-family: var(--radio-button-font-family, var(--ui-font-family, var(--font-family, inherit)));
-  text-transform: var(--radio-button-text-transform, var(--ui-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--radio-button-text-decoration, var(--ui-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--radio-button-font-size, var(--ui-font-size, var(--font-size, inherit)));
-  font-weight: var(--radio-button-font-weight, var(--ui-font-weight, var(--font-weight, inherit)));
-  line-height: var(--radio-button-line-height, var(--ui-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--radio-button-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--radio-button-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-top: var(--radio-button-margin-top, var(--ui-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--radio-button-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-bottom: var(--radio-button-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--radio-button-indent, var(--ui-indent, var(--indent, inherit)));
-  font-variant: var(--radio-button-font-variant, var(--ui-font-variant, var(--font-variant, inherit)));
-  text-align: var(--radio-button-text-align, var(--ui-text-align, var(--text-align, inherit)));
+  font-family: var(--radio-button-font-family, var(--ui-font-family, var(--font-family, unset)));
+  text-transform: var(--radio-button-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--radio-button-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--radio-button-font-size, var(--ui-font-size, var(--font-size, unset)));
+  font-weight: var(--radio-button-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
+  line-height: var(--radio-button-line-height, var(--ui-line-height, var(--line-height, unset)));
+  letter-spacing: var(--radio-button-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--radio-button-margin, var(--ui-margin, var(--margin, unset)));
+  margin-top: var(--radio-button-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--radio-button-margin, var(--ui-margin, var(--margin, unset)));
+  margin-bottom: var(--radio-button-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--radio-button-indent, var(--ui-indent, var(--indent, unset)));
+  font-variant: var(--radio-button-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
+  text-align: var(--radio-button-text-align, var(--ui-text-align, var(--text-align, unset)));
 }
 
 .offscreen {
@@ -105,9 +105,9 @@ label:hover {
   color: var(--radio-button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
 }
 label:active {
-  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9))));
-  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space)))));
-  background-color: var(--active-bg, radio-button, clickable, inherit);
+  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)));
+  background-color: var(--radio-button-active-bg, var(--clickable-active-bg, var(--active-bg, inherit)));
   color: var(--active-fg, radio-button, clickable, inherit);
 }
 

package/dist/controls/Select.svelte

@@ -59,7 +59,7 @@ async function updateOption(value) {
     }
 }
 $: updateOption(value);
-let targetWidth = 10;
+let targetWidth;
 let optionButtons = [];
 </script>
 
@@ -157,7 +157,7 @@ select,
   width: var(--select-dropdown-arrow-width, 1em);
   place-content: center;
   position: absolute;
-  right: var(--select-arrow-right-offset, calc(-1 * var(--padding)));
+  right: var(--select-arrow-right-offset, calc(-0.5 * var(--padding)));
   top: 50%;
 }
 

package/dist/dropdowns/DropdownMenu.svelte

@@ -177,9 +177,9 @@ button:hover {
   color: var(--menu-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
 }
 button:active {
-  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
-  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
-  background-color: var(--active-bg, menu, button, control, inherit);
+  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: var(--menu-active-bg, var(--button-active-bg, var(--control-active-bg, var(--active-bg, inherit))));
   color: var(--active-fg, menu, button, control, inherit);
 }
 
@@ -196,20 +196,20 @@ button:active {
   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(--container-font-family, var(--font-family, inherit)));
-  text-transform: var(--menu-text-transform, var(--container-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--menu-text-decoration, var(--container-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--menu-font-size, var(--container-font-size, var(--font-size, inherit)));
-  font-weight: var(--menu-font-weight, var(--container-font-weight, var(--font-weight, inherit)));
-  line-height: var(--menu-line-height, var(--container-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--menu-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--menu-margin, var(--container-margin, var(--margin, inherit)));
-  margin-top: var(--menu-margin-top, var(--container-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--menu-margin, var(--container-margin, var(--margin, inherit)));
-  margin-bottom: var(--menu-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--menu-indent, var(--container-indent, var(--indent, inherit)));
-  font-variant: var(--menu-font-variant, var(--container-font-variant, var(--font-variant, inherit)));
-  text-align: var(--menu-text-align, var(--container-text-align, var(--text-align, inherit)));
+  font-family: var(--menu-font-family, var(--container-font-family, var(--font-family, unset)));
+  text-transform: var(--menu-text-transform, var(--container-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--menu-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--menu-font-size, var(--container-font-size, var(--font-size, unset)));
+  font-weight: var(--menu-font-weight, var(--container-font-weight, var(--font-weight, unset)));
+  line-height: var(--menu-line-height, var(--container-line-height, var(--line-height, unset)));
+  letter-spacing: var(--menu-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--menu-margin, var(--container-margin, var(--margin, unset)));
+  margin-top: var(--menu-margin-top, var(--container-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--menu-margin, var(--container-margin, var(--margin, unset)));
+  margin-bottom: var(--menu-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--menu-indent, var(--container-indent, var(--indent, unset)));
+  font-variant: var(--menu-font-variant, var(--container-font-variant, var(--font-variant, unset)));
+  text-align: var(--menu-text-align, var(--container-text-align, var(--text-align, unset)));
   cursor: var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
   transition: filter, transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
 }
@@ -220,12 +220,29 @@ button:active {
   color: var(--menu-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
 }
 .menu:active {
-  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
-  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
-  background-color: var(--active-bg, menu, button, control, inherit);
+  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: var(--menu-active-bg, var(--button-active-bg, var(--control-active-bg, var(--active-bg, inherit))));
   color: var(--active-fg, menu, button, control, inherit);
 }
 
+.dropdown-menu {
+  font-family: var(--menu-font-family, var(--container-font-family, var(--font-family, unset)));
+  text-transform: var(--menu-text-transform, var(--container-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--menu-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--menu-font-size, var(--container-font-size, var(--font-size, unset)));
+  font-weight: var(--menu-font-weight, var(--container-font-weight, var(--font-weight, unset)));
+  line-height: var(--menu-line-height, var(--container-line-height, var(--line-height, unset)));
+  letter-spacing: var(--menu-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--menu-margin, var(--container-margin, var(--margin, unset)));
+  margin-top: var(--menu-margin-top, var(--container-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--menu-margin, var(--container-margin, var(--margin, unset)));
+  margin-bottom: var(--menu-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--menu-indent, var(--container-indent, var(--indent, unset)));
+  font-variant: var(--menu-font-variant, var(--container-font-variant, var(--font-variant, unset)));
+  text-align: var(--menu-text-align, var(--container-text-align, var(--text-align, unset)));
+}
+
 .dropdown-container {
   box-sizing: border-box;
   opacity: 0;
@@ -259,8 +276,28 @@ button:active {
 
 .dropdown-content {
   width: var(--dropdown-menu-width, 12em);
-  padding: 0;
   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,
+    append($prefixes,          
+      var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-right: var-with-fallbacks(--border-right,
+    append($prefixes,          
+      var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-bottom: var-with-fallbacks(--border-bottom,
+    append($prefixes,          
+      var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-left: var-with-fallbacks(--border-left,
+    append($prefixes,          
+      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))));
+  padding: 0;
 }
 
 nav {
@@ -279,4 +316,5 @@ nav {
   visibility: visible;
   opacity: 1;
   padding: 0;
+  border: none;
 }</style>

package/dist/layout/Container.svelte

@@ -51,20 +51,20 @@ section {
   margin-left: auto;
   margin-right: auto;
   font-family: var(--container-body-font-family, var(--block-body-font-family, var(--body-font-family, var(--font-family))));
-  font-family: var(--container-font-family, var(--block-font-family, var(--font-family, inherit)));
-  text-transform: var(--container-text-transform, var(--block-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--container-text-decoration, var(--block-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--container-font-size, var(--block-font-size, var(--font-size, inherit)));
-  font-weight: var(--container-font-weight, var(--block-font-weight, var(--font-weight, inherit)));
-  line-height: var(--container-line-height, var(--block-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--container-letter-spacing, var(--block-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--container-margin, var(--block-margin, var(--margin, inherit)));
-  margin-top: var(--container-margin-top, var(--block-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--container-margin, var(--block-margin, var(--margin, inherit)));
-  margin-bottom: var(--container-margin-bottom, var(--block-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--container-indent, var(--block-indent, var(--indent, inherit)));
-  font-variant: var(--container-font-variant, var(--block-font-variant, var(--font-variant, inherit)));
-  text-align: var(--container-text-align, var(--block-text-align, var(--text-align, inherit)));
+  font-family: var(--container-font-family, var(--block-font-family, var(--font-family, unset)));
+  text-transform: var(--container-text-transform, var(--block-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--container-text-decoration, var(--block-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--container-font-size, var(--block-font-size, var(--font-size, unset)));
+  font-weight: var(--container-font-weight, var(--block-font-weight, var(--font-weight, unset)));
+  line-height: var(--container-line-height, var(--block-line-height, var(--line-height, unset)));
+  letter-spacing: var(--container-letter-spacing, var(--block-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--container-margin, var(--block-margin, var(--margin, unset)));
+  margin-top: var(--container-margin-top, var(--block-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--container-margin, var(--block-margin, var(--margin, unset)));
+  margin-bottom: var(--container-margin-bottom, var(--block-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--container-indent, var(--block-indent, var(--indent, unset)));
+  font-variant: var(--container-font-variant, var(--block-font-variant, var(--font-variant, unset)));
+  text-align: var(--container-text-align, var(--block-text-align, var(--text-align, unset)));
   /* Override typography max-width */
   max-width: var(--container-max-width, var(--block-max-width, var(--max-width, 900px)));
   margin-top: var(--container-margin, var(--block-margin, var(--margin, var(--gap))));
@@ -84,7 +84,7 @@ section :global(p), section :global(blockquote), section :global(dl), section :g
   line-height: var(--container-line-height, var(--block-line-height, var(--line-height, 1.5)));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--container-body-font-weight, var(--block-body-font-weight, var(--body-font-weight, inherit)));
+  font-weight: var(--container-body-font-weight, var(--block-body-font-weight, var(--body-font-weight, unset)));
 }
 section :global(h1),
 section :global(h2),

package/dist/layout/FormItem.svelte

@@ -36,20 +36,20 @@
   gap: var(--form-label-horizontal-gap, var(--padding));
   padding-top: var(--padding, form-item, 8px);
   padding-bottom: var(--padding, form-item, 8px);
-  font-family: var(--form-item-font-family, var(--ui-font-family, var(--font-family, inherit)));
-  text-transform: var(--form-item-text-transform, var(--ui-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--form-item-text-decoration, var(--ui-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--form-item-font-size, var(--ui-font-size, var(--font-size, inherit)));
-  font-weight: var(--form-item-font-weight, var(--ui-font-weight, var(--font-weight, inherit)));
-  line-height: var(--form-item-line-height, var(--ui-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--form-item-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--form-item-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-top: var(--form-item-margin-top, var(--ui-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--form-item-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-bottom: var(--form-item-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--form-item-indent, var(--ui-indent, var(--indent, inherit)));
-  font-variant: var(--form-item-font-variant, var(--ui-font-variant, var(--font-variant, inherit)));
-  text-align: var(--form-item-text-align, var(--ui-text-align, var(--text-align, inherit)));
+  font-family: var(--form-item-font-family, var(--ui-font-family, var(--font-family, unset)));
+  text-transform: var(--form-item-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--form-item-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--form-item-font-size, var(--ui-font-size, var(--font-size, unset)));
+  font-weight: var(--form-item-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
+  line-height: var(--form-item-line-height, var(--ui-line-height, var(--line-height, unset)));
+  letter-spacing: var(--form-item-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--form-item-margin, var(--ui-margin, var(--margin, unset)));
+  margin-top: var(--form-item-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--form-item-margin, var(--ui-margin, var(--margin, unset)));
+  margin-bottom: var(--form-item-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--form-item-indent, var(--ui-indent, var(--indent, unset)));
+  font-variant: var(--form-item-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
+  text-align: var(--form-item-text-align, var(--ui-text-align, var(--text-align, unset)));
   box-sizing: border-box;
 }
 
@@ -100,20 +100,20 @@ label {
 .globalInputStyles :global(input),
 .globalInputStyles :global(select),
 .globalInputStyles :global(textarea) {
-  font-family: var(--form-input-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family, inherit))));
-  text-transform: var(--form-input-text-transform, var(--input-text-transform, var(--ui-text-transform, var(--text-transform, inherit))));
-  text-decoration: var(--form-input-text-decoration, var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, inherit))));
-  font-size: var(--form-input-font-size, var(--input-font-size, var(--ui-font-size, var(--font-size, inherit))));
-  font-weight: var(--form-input-font-weight, var(--input-font-weight, var(--ui-font-weight, var(--font-weight, inherit))));
-  line-height: var(--form-input-line-height, var(--input-line-height, var(--ui-line-height, var(--line-height, inherit))));
-  letter-spacing: var(--form-input-letter-spacing, var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, inherit))));
-  margin-top: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin, inherit))));
-  margin-top: var(--form-input-margin-top, var(--input-margin-top, var(--ui-margin-top, var(--margin-top, inherit))));
-  margin-bottom: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin, inherit))));
-  margin-bottom: var(--form-input-margin-bottom, var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, inherit))));
-  text-indent: var(--form-input-indent, var(--input-indent, var(--ui-indent, var(--indent, inherit))));
-  font-variant: var(--form-input-font-variant, var(--input-font-variant, var(--ui-font-variant, var(--font-variant, inherit))));
-  text-align: var(--form-input-text-align, var(--input-text-align, var(--ui-text-align, var(--text-align, inherit))));
+  font-family: var(--form-input-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family, unset))));
+  text-transform: var(--form-input-text-transform, var(--input-text-transform, var(--ui-text-transform, var(--text-transform, unset))));
+  text-decoration: var(--form-input-text-decoration, var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset))));
+  font-size: var(--form-input-font-size, var(--input-font-size, var(--ui-font-size, var(--font-size, unset))));
+  font-weight: var(--form-input-font-weight, var(--input-font-weight, var(--ui-font-weight, var(--font-weight, unset))));
+  line-height: var(--form-input-line-height, var(--input-line-height, var(--ui-line-height, var(--line-height, unset))));
+  letter-spacing: var(--form-input-letter-spacing, var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset))));
+  margin-top: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin, unset))));
+  margin-top: var(--form-input-margin-top, var(--input-margin-top, var(--ui-margin-top, var(--margin-top, unset))));
+  margin-bottom: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin, unset))));
+  margin-bottom: var(--form-input-margin-bottom, var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset))));
+  text-indent: var(--form-input-indent, var(--input-indent, var(--ui-indent, var(--indent, unset))));
+  font-variant: var(--form-input-font-variant, var(--input-font-variant, var(--ui-font-variant, var(--font-variant, unset))));
+  text-align: var(--form-input-text-align, var(--input-text-align, var(--ui-text-align, var(--text-align, unset))));
   box-sizing: border-box;
   border: var(--form-input-border, var(--input-border, var(--ui-border, var(--border, inherit))));
   border-top: var(--form-input-border-top, var(--input-border-top, var(--ui-border-top, var(--border-top, var(--form-input-border, var(--input-border, var(--ui-border, var(--border, none))))))));

package/dist/layout/Hero.svelte

@@ -34,20 +34,20 @@ let cssVars = injectVars($$props, "hero", [
   margin-left: auto;
   margin-right: auto;
   font-family: var(--hero-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
-  font-family: var(--hero-font-family, var(--container-font-family, var(--font-family, inherit)));
-  text-transform: var(--hero-text-transform, var(--container-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--hero-text-decoration, var(--container-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--hero-font-size, var(--container-font-size, var(--font-size, inherit)));
-  font-weight: var(--hero-font-weight, var(--container-font-weight, var(--font-weight, inherit)));
-  line-height: var(--hero-line-height, var(--container-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--hero-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--hero-margin, var(--container-margin, var(--margin, inherit)));
-  margin-top: var(--hero-margin-top, var(--container-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--hero-margin, var(--container-margin, var(--margin, inherit)));
-  margin-bottom: var(--hero-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--hero-indent, var(--container-indent, var(--indent, inherit)));
-  font-variant: var(--hero-font-variant, var(--container-font-variant, var(--font-variant, inherit)));
-  text-align: var(--hero-text-align, var(--container-text-align, var(--text-align, inherit)));
+  font-family: var(--hero-font-family, var(--container-font-family, var(--font-family, unset)));
+  text-transform: var(--hero-text-transform, var(--container-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--hero-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--hero-font-size, var(--container-font-size, var(--font-size, unset)));
+  font-weight: var(--hero-font-weight, var(--container-font-weight, var(--font-weight, unset)));
+  line-height: var(--hero-line-height, var(--container-line-height, var(--line-height, unset)));
+  letter-spacing: var(--hero-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--hero-margin, var(--container-margin, var(--margin, unset)));
+  margin-top: var(--hero-margin-top, var(--container-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--hero-margin, var(--container-margin, var(--margin, unset)));
+  margin-bottom: var(--hero-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--hero-indent, var(--container-indent, var(--indent, unset)));
+  font-variant: var(--hero-font-variant, var(--container-font-variant, var(--font-variant, unset)));
+  text-align: var(--hero-text-align, var(--container-text-align, var(--text-align, unset)));
   display: grid;
   place-content: center;
   width: var(--hero-width, 100%);
@@ -65,7 +65,7 @@ let cssVars = injectVars($$props, "hero", [
   line-height: var(--hero-line-height, var(--container-line-height, var(--line-height, 1.5)));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--hero-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, inherit)));
+  font-weight: var(--hero-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
 }
 .hero :global(h1),
 .hero :global(h2),