contain-css-svelte 0.0.7 → 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),

package/dist/layout/MenuList.svelte

@@ -46,6 +46,24 @@ let style = injectVars($$props, "menu", [
   --link-fg: var(--menu-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
   margin-block-start: 0;
   margin-block-end: 0;
+  overflow: hidden;
+}
+
+.menu :global(li) {
+  cursor: var(--menu-item-cursor, var(--cursor, pointer));
+  transition: filter, transform var(--menu-item-transition, var(--transition, 300ms));
+}
+.menu :global(li):hover {
+  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.4)));
+  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
+  background-color: var(--menu-item-hover-bg, var(--hover-bg, inherit));
+  color: var(--menu-item-hover-fg, var(--hover-fg, inherit));
+}
+.menu :global(li):active {
+  filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
+  transform: var(--menu-item-active-transform, var(--active-transform, none));
+  background-color: var(--menu-item-active-bg, var(--active-bg, inherit));
+  color: var(--active-fg, menu-item, inherit);
 }
 
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
@@ -55,20 +73,20 @@ let style = injectVars($$props, "menu", [
   width: var(--menu-item-width, 100%);
   height: var(--menu-item-height);
   text-decoration: none;
-  font-family: var(--menu-item-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, inherit)))));
-  text-transform: var(--menu-item-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, inherit)))));
-  text-decoration: var(--menu-item-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, inherit)))));
-  font-size: var(--menu-item-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, inherit)))));
-  font-weight: var(--menu-item-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, inherit)))));
-  line-height: var(--menu-item-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, inherit)))));
-  letter-spacing: var(--menu-item-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, inherit)))));
-  margin-top: var(--menu-item-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, inherit)))));
-  margin-top: var(--menu-item-margin-top, var(--button-margin-top, var(--ui-margin-top, var(--control-margin-top, var(--margin-top, inherit)))));
-  margin-bottom: var(--menu-item-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, inherit)))));
-  margin-bottom: var(--menu-item-margin-bottom, var(--button-margin-bottom, var(--ui-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, inherit)))));
-  text-indent: var(--menu-item-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, inherit)))));
-  font-variant: var(--menu-item-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, inherit)))));
-  text-align: var(--menu-item-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, inherit)))));
+  font-family: var(--menu-item-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, unset)))));
+  text-transform: var(--menu-item-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, unset)))));
+  text-decoration: var(--menu-item-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, unset)))));
+  font-size: var(--menu-item-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, unset)))));
+  font-weight: var(--menu-item-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, unset)))));
+  line-height: var(--menu-item-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, unset)))));
+  letter-spacing: var(--menu-item-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset)))));
+  margin-top: var(--menu-item-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
+  margin-top: var(--menu-item-margin-top, var(--button-margin-top, var(--ui-margin-top, var(--control-margin-top, var(--margin-top, unset)))));
+  margin-bottom: var(--menu-item-margin, var(--button-margin, var(--ui-margin, var(--control-margin, var(--margin, unset)))));
+  margin-bottom: var(--menu-item-margin-bottom, var(--button-margin-bottom, var(--ui-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset)))));
+  text-indent: var(--menu-item-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
+  font-variant: var(--menu-item-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
+  text-align: var(--menu-item-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
   background: var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
   color: var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
   --link-bg: var(--menu-item-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
@@ -81,20 +99,20 @@ let style = injectVars($$props, "menu", [
   border-left: var(--menu-item-border-left, var(--button-border-left, var(--control-border-left, var(--border-left, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
   padding: var(--menu-item-padding, var(--button-padding, var(--control-padding, var(--padding, 4px))));
   border-radius: var(--menu-item-square-radius, var(--button-square-radius, var(--control-square-radius, var(--square-radius, 0))));
-  cursor: var(--menu-item-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
-  transition: filter, transform var(--menu-item-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
+  cursor: var(--menu-item-cursor, var(--cursor, pointer));
+  transition: filter, transform var(--menu-item-transition, var(--transition, 300ms));
 }
 .menu :global(a):hover, .menu :global(button):hover, .menu :global(input[type="submit"]):hover, .menu :global(.button):hover {
-  filter: var(--menu-item-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.4)))));
-  transform: var(--menu-item-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
-  background-color: var(--menu-item-hover-bg, var(--button-hover-bg, var(--control-hover-bg, var(--hover-bg, inherit))));
-  color: var(--menu-item-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
+  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.4)));
+  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
+  background-color: var(--menu-item-hover-bg, var(--hover-bg, inherit));
+  color: var(--menu-item-hover-fg, var(--hover-fg, inherit));
 }
 .menu :global(a):active, .menu :global(button):active, .menu :global(input[type="submit"]):active, .menu :global(.button):active {
-  filter: var(--menu-item-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
-  transform: var(--menu-item-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
-  background-color: var(--active-bg, menu-item, button, control, inherit);
-  color: var(--active-fg, menu-item, button, control, inherit);
+  filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
+  transform: var(--menu-item-active-transform, var(--active-transform, none));
+  background-color: var(--menu-item-active-bg, var(--active-bg, inherit));
+  color: var(--active-fg, menu-item, inherit);
 }
 .menu :global(.active) {
   background: var(--menu-item-active-bg, var(--primary-bg, var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--container-bg, var(--container-bg, inherit)))))));

package/dist/layout/Sidebar.svelte

@@ -239,9 +239,9 @@ aside .content::-webkit-scrollbar-thumb:hover {
     color: var(--mini-button-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
   }
   aside > button:active {
-    filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
-    transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
-    background-color: var(--active-bg, mini-button, button, control, inherit);
+    filter: var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
+    transform: var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
+    background-color: var(--mini-button-active-bg, var(--button-active-bg, var(--control-active-bg, var(--active-bg, inherit))));
     color: var(--active-fg, mini-button, button, control, inherit);
   }
   aside > button.close {

package/dist/layout/Tile.svelte

@@ -62,20 +62,20 @@ $: console.log("Checked=>", checked);
   margin-left: auto;
   margin-right: auto;
   font-family: var(--tile-body-font-family, var(--body-font-family, var(--font-family)));
-  font-family: var(--tile-font-family, var(--font-family, inherit));
-  text-transform: var(--tile-text-transform, var(--text-transform, inherit));
-  text-decoration: var(--tile-text-decoration, var(--text-decoration, inherit));
-  font-size: var(--tile-font-size, var(--font-size, inherit));
-  font-weight: var(--tile-font-weight, var(--font-weight, inherit));
-  line-height: var(--tile-line-height, var(--line-height, inherit));
-  letter-spacing: var(--tile-letter-spacing, var(--letter-spacing, inherit));
-  margin-top: var(--tile-margin, var(--margin, inherit));
-  margin-top: var(--tile-margin-top, var(--margin-top, inherit));
-  margin-bottom: var(--tile-margin, var(--margin, inherit));
-  margin-bottom: var(--tile-margin-bottom, var(--margin-bottom, inherit));
-  text-indent: var(--tile-indent, var(--indent, inherit));
-  font-variant: var(--tile-font-variant, var(--font-variant, inherit));
-  text-align: var(--tile-text-align, var(--text-align, inherit));
+  font-family: var(--tile-font-family, var(--font-family, unset));
+  text-transform: var(--tile-text-transform, var(--text-transform, unset));
+  text-decoration: var(--tile-text-decoration, var(--text-decoration, unset));
+  font-size: var(--tile-font-size, var(--font-size, unset));
+  font-weight: var(--tile-font-weight, var(--font-weight, unset));
+  line-height: var(--tile-line-height, var(--line-height, unset));
+  letter-spacing: var(--tile-letter-spacing, var(--letter-spacing, unset));
+  margin-top: var(--tile-margin, var(--margin, unset));
+  margin-top: var(--tile-margin-top, var(--margin-top, unset));
+  margin-bottom: var(--tile-margin, var(--margin, unset));
+  margin-bottom: var(--tile-margin-bottom, var(--margin-bottom, unset));
+  text-indent: var(--tile-indent, var(--indent, unset));
+  font-variant: var(--tile-font-variant, var(--font-variant, unset));
+  text-align: var(--tile-text-align, var(--text-align, unset));
   box-shadow: var(--tile-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--tile-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--tile-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--tile-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
   width: var(--tile-width, calc(var(--space-lg) * 24));
   /* Override typography max-width */
@@ -101,7 +101,7 @@ $: console.log("Checked=>", checked);
   line-height: var(--tile-line-height, var(--line-height, 1.5));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--tile-body-font-weight, var(--body-font-weight, inherit));
+  font-weight: var(--tile-body-font-weight, var(--body-font-weight, unset));
 }
 .tile :global(h1),
 .tile :global(h2),
@@ -222,9 +222,9 @@ label.tile:hover {
 }
 button.tile:active,
 label.tile:active {
-  filter: var(--tile-hover-filter, var(--hover-filter, brightness(0.9)));
-  transform: var(--tile-hover-transform, var(--hover-transform, translate(var(--space), var(--space))));
-  background-color: var(--active-bg, tile, inherit);
+  filter: var(--tile-active-filter, var(--active-filter, brightness(0.9)));
+  transform: var(--tile-active-transform, var(--active-transform, none));
+  background-color: var(--tile-active-bg, var(--active-bg, inherit));
   color: var(--active-fg, tile, inherit);
 }
 
@@ -233,20 +233,20 @@ label.tile {
   color: var(--tile-selected-fg, var(--tile-selected-fg, inherit));
   --link-bg: var(--tile-selected-link-bg, var(--tile-selected-link-bg, inherit));
   --link-fg: var(--tile-selected-link-fg, var(--tile-selected-link-fg, inherit));
-  font-family: var(--tile-selected-font-family, var(--font-family, inherit));
-  text-transform: var(--tile-selected-text-transform, var(--text-transform, inherit));
-  text-decoration: var(--tile-selected-text-decoration, var(--text-decoration, inherit));
-  font-size: var(--tile-selected-font-size, var(--font-size, inherit));
-  font-weight: var(--tile-selected-font-weight, var(--font-weight, inherit));
-  line-height: var(--tile-selected-line-height, var(--line-height, inherit));
-  letter-spacing: var(--tile-selected-letter-spacing, var(--letter-spacing, inherit));
-  margin-top: var(--tile-selected-margin, var(--margin, inherit));
-  margin-top: var(--tile-selected-margin-top, var(--margin-top, inherit));
-  margin-bottom: var(--tile-selected-margin, var(--margin, inherit));
-  margin-bottom: var(--tile-selected-margin-bottom, var(--margin-bottom, inherit));
-  text-indent: var(--tile-selected-indent, var(--indent, inherit));
-  font-variant: var(--tile-selected-font-variant, var(--font-variant, inherit));
-  text-align: var(--tile-selected-text-align, var(--text-align, inherit));
+  font-family: var(--tile-selected-font-family, var(--font-family, unset));
+  text-transform: var(--tile-selected-text-transform, var(--text-transform, unset));
+  text-decoration: var(--tile-selected-text-decoration, var(--text-decoration, unset));
+  font-size: var(--tile-selected-font-size, var(--font-size, unset));
+  font-weight: var(--tile-selected-font-weight, var(--font-weight, unset));
+  line-height: var(--tile-selected-line-height, var(--line-height, unset));
+  letter-spacing: var(--tile-selected-letter-spacing, var(--letter-spacing, unset));
+  margin-top: var(--tile-selected-margin, var(--margin, unset));
+  margin-top: var(--tile-selected-margin-top, var(--margin-top, unset));
+  margin-bottom: var(--tile-selected-margin, var(--margin, unset));
+  margin-bottom: var(--tile-selected-margin-bottom, var(--margin-bottom, unset));
+  text-indent: var(--tile-selected-indent, var(--indent, unset));
+  font-variant: var(--tile-selected-font-variant, var(--font-variant, unset));
+  text-align: var(--tile-selected-text-align, var(--text-align, unset));
 }
 
 /* Sizing code */

package/dist/misc/Code.svelte

@@ -40,20 +40,20 @@ div > :global(pre) {
   margin-left: auto;
   margin-right: auto;
   font-family: var(--code-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
-  font-family: var(--code-font-family, var(--container-font-family, var(--font-family, inherit)));
-  text-transform: var(--code-text-transform, var(--container-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--code-text-decoration, var(--container-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--code-font-size, var(--container-font-size, var(--font-size, inherit)));
-  font-weight: var(--code-font-weight, var(--container-font-weight, var(--font-weight, inherit)));
-  line-height: var(--code-line-height, var(--container-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--code-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--code-margin, var(--container-margin, var(--margin, inherit)));
-  margin-top: var(--code-margin-top, var(--container-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--code-margin, var(--container-margin, var(--margin, inherit)));
-  margin-bottom: var(--code-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--code-indent, var(--container-indent, var(--indent, inherit)));
-  font-variant: var(--code-font-variant, var(--container-font-variant, var(--font-variant, inherit)));
-  text-align: var(--code-text-align, var(--container-text-align, var(--text-align, inherit)));
+  font-family: var(--code-font-family, var(--container-font-family, var(--font-family, unset)));
+  text-transform: var(--code-text-transform, var(--container-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--code-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--code-font-size, var(--container-font-size, var(--font-size, unset)));
+  font-weight: var(--code-font-weight, var(--container-font-weight, var(--font-weight, unset)));
+  line-height: var(--code-line-height, var(--container-line-height, var(--line-height, unset)));
+  letter-spacing: var(--code-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--code-margin, var(--container-margin, var(--margin, unset)));
+  margin-top: var(--code-margin-top, var(--container-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--code-margin, var(--container-margin, var(--margin, unset)));
+  margin-bottom: var(--code-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--code-indent, var(--container-indent, var(--indent, unset)));
+  font-variant: var(--code-font-variant, var(--container-font-variant, var(--font-variant, unset)));
+  text-align: var(--code-text-align, var(--container-text-align, var(--text-align, unset)));
 }
 .code :global(code[class*="language-"]) :global(p), .code :global(code[class*="language-"]) :global(blockquote), .code :global(code[class*="language-"]) :global(dl), .code :global(code[class*="language-"]) :global(ul), .code :global(code[class*="language-"]) :global(ol),
 .code :global(pre[class*="language-"]) :global(p),
@@ -66,7 +66,7 @@ div > :global(pre) {
   line-height: var(--code-line-height, var(--container-line-height, var(--line-height, 1.5)));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--code-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, inherit)));
+  font-weight: var(--code-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
 }
 .code :global(code[class*="language-"]) :global(h1),
 .code :global(code[class*="language-"]) :global(h2),

package/dist/overlays/Tooltip.svelte

@@ -128,20 +128,20 @@ function showPopover() {
   margin-left: auto;
   margin-right: auto;
   font-family: var(--tooltip-body-font-family, var(--ui-body-font-family, var(--body-font-family, var(--font-family))));
-  font-family: var(--tooltip-font-family, var(--ui-font-family, var(--font-family, inherit)));
-  text-transform: var(--tooltip-text-transform, var(--ui-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--tooltip-text-decoration, var(--ui-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--tooltip-font-size, var(--ui-font-size, var(--font-size, inherit)));
-  font-weight: var(--tooltip-font-weight, var(--ui-font-weight, var(--font-weight, inherit)));
-  line-height: var(--tooltip-line-height, var(--ui-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--tooltip-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--tooltip-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-top: var(--tooltip-margin-top, var(--ui-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--tooltip-margin, var(--ui-margin, var(--margin, inherit)));
-  margin-bottom: var(--tooltip-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--tooltip-indent, var(--ui-indent, var(--indent, inherit)));
-  font-variant: var(--tooltip-font-variant, var(--ui-font-variant, var(--font-variant, inherit)));
-  text-align: var(--tooltip-text-align, var(--ui-text-align, var(--text-align, inherit)));
+  font-family: var(--tooltip-font-family, var(--ui-font-family, var(--font-family, unset)));
+  text-transform: var(--tooltip-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--tooltip-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--tooltip-font-size, var(--ui-font-size, var(--font-size, unset)));
+  font-weight: var(--tooltip-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
+  line-height: var(--tooltip-line-height, var(--ui-line-height, var(--line-height, unset)));
+  letter-spacing: var(--tooltip-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--tooltip-margin, var(--ui-margin, var(--margin, unset)));
+  margin-top: var(--tooltip-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--tooltip-margin, var(--ui-margin, var(--margin, unset)));
+  margin-bottom: var(--tooltip-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--tooltip-indent, var(--ui-indent, var(--indent, unset)));
+  font-variant: var(--tooltip-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
+  text-align: var(--tooltip-text-align, var(--ui-text-align, var(--text-align, unset)));
 }
 .tooltip :global(p), .tooltip :global(blockquote), .tooltip :global(dl), .tooltip :global(ul), .tooltip :global(ol) {
   max-width: var(--tooltip-line-width, var(--ui-line-width, var(--line-width, 40em)));
@@ -149,7 +149,7 @@ function showPopover() {
   line-height: var(--tooltip-line-height, var(--ui-line-height, var(--line-height, 1.5)));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--tooltip-body-font-weight, var(--ui-body-font-weight, var(--body-font-weight, inherit)));
+  font-weight: var(--tooltip-body-font-weight, var(--ui-body-font-weight, var(--body-font-weight, unset)));
 }
 .tooltip :global(h1),
 .tooltip :global(h2),

package/dist/sass/_mixins.scss

@@ -34,7 +34,7 @@
   $base-var-name: str-slice($base-var, 3);  
 
   // Initialize the result with the final fallback value
-  $result: var($base-var, inherit);
+  $result: var($base-var, unset);
 
   // Iterate through the prefixes in reverse order
   @for $i from length($args) through 1 {
@@ -309,9 +309,9 @@ $rectProps : (border);
     color: var-with-fallbacks(--hover-fg, append($prefixes, inherit)...);
   }
   &:active {
-      filter: var-with-fallbacks(--hover-filter, append($prefixes, brightness(0.9))...);
-      transform: var-with-fallbacks(--hover-transform, append($prefixes, translate(var(--space),var(--space)))...);
-      background-color: var-with-fallbacks(--active-bg, append($prefixes, inherit));
+      filter: var-with-fallbacks(--active-filter, append($prefixes, brightness(0.9))...);
+      transform: var-with-fallbacks(--active-transform, append($prefixes, none)...);
+      background-color: var-with-fallbacks(--active-bg, append($prefixes, inherit)...);
       color: var-with-fallbacks(--active-fg, append($prefixes, inherit));
     }
 }

package/dist/typography/TextLayout.svelte

@@ -14,34 +14,34 @@ div {
   margin-left: auto;
   margin-right: auto;
   font-family: var(--body-body-font-family, var(--text-body-font-family, var(--body-font-family, var(--font-family))));
-  font-family: var(--body-font-family, var(--text-font-family, var(--font-family, inherit)));
-  text-transform: var(--body-text-transform, var(--text-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--body-text-decoration, var(--text-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--body-font-size, var(--text-font-size, var(--font-size, inherit)));
-  font-weight: var(--body-font-weight, var(--text-font-weight, var(--font-weight, inherit)));
-  line-height: var(--body-line-height, var(--text-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--body-letter-spacing, var(--text-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--body-margin, var(--text-margin, var(--margin, inherit)));
-  margin-top: var(--body-margin-top, var(--text-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--body-margin, var(--text-margin, var(--margin, inherit)));
-  margin-bottom: var(--body-margin-bottom, var(--text-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--body-indent, var(--text-indent, var(--indent, inherit)));
-  font-variant: var(--body-font-variant, var(--text-font-variant, var(--font-variant, inherit)));
-  text-align: var(--body-text-align, var(--text-text-align, var(--text-align, inherit)));
-  font-family: var(--body-font-family, var(--text-font-family, var(--font-family, inherit)));
-  text-transform: var(--body-text-transform, var(--text-text-transform, var(--text-transform, inherit)));
-  text-decoration: var(--body-text-decoration, var(--text-text-decoration, var(--text-decoration, inherit)));
-  font-size: var(--body-font-size, var(--text-font-size, var(--font-size, inherit)));
-  font-weight: var(--body-font-weight, var(--text-font-weight, var(--font-weight, inherit)));
-  line-height: var(--body-line-height, var(--text-line-height, var(--line-height, inherit)));
-  letter-spacing: var(--body-letter-spacing, var(--text-letter-spacing, var(--letter-spacing, inherit)));
-  margin-top: var(--body-margin, var(--text-margin, var(--margin, inherit)));
-  margin-top: var(--body-margin-top, var(--text-margin-top, var(--margin-top, inherit)));
-  margin-bottom: var(--body-margin, var(--text-margin, var(--margin, inherit)));
-  margin-bottom: var(--body-margin-bottom, var(--text-margin-bottom, var(--margin-bottom, inherit)));
-  text-indent: var(--body-indent, var(--text-indent, var(--indent, inherit)));
-  font-variant: var(--body-font-variant, var(--text-font-variant, var(--font-variant, inherit)));
-  text-align: var(--body-text-align, var(--text-text-align, var(--text-align, inherit)));
+  font-family: var(--body-font-family, var(--text-font-family, var(--font-family, unset)));
+  text-transform: var(--body-text-transform, var(--text-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--body-text-decoration, var(--text-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--body-font-size, var(--text-font-size, var(--font-size, unset)));
+  font-weight: var(--body-font-weight, var(--text-font-weight, var(--font-weight, unset)));
+  line-height: var(--body-line-height, var(--text-line-height, var(--line-height, unset)));
+  letter-spacing: var(--body-letter-spacing, var(--text-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--body-margin, var(--text-margin, var(--margin, unset)));
+  margin-top: var(--body-margin-top, var(--text-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--body-margin, var(--text-margin, var(--margin, unset)));
+  margin-bottom: var(--body-margin-bottom, var(--text-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--body-indent, var(--text-indent, var(--indent, unset)));
+  font-variant: var(--body-font-variant, var(--text-font-variant, var(--font-variant, unset)));
+  text-align: var(--body-text-align, var(--text-text-align, var(--text-align, unset)));
+  font-family: var(--body-font-family, var(--text-font-family, var(--font-family, unset)));
+  text-transform: var(--body-text-transform, var(--text-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--body-text-decoration, var(--text-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--body-font-size, var(--text-font-size, var(--font-size, unset)));
+  font-weight: var(--body-font-weight, var(--text-font-weight, var(--font-weight, unset)));
+  line-height: var(--body-line-height, var(--text-line-height, var(--line-height, unset)));
+  letter-spacing: var(--body-letter-spacing, var(--text-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--body-margin, var(--text-margin, var(--margin, unset)));
+  margin-top: var(--body-margin-top, var(--text-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--body-margin, var(--text-margin, var(--margin, unset)));
+  margin-bottom: var(--body-margin-bottom, var(--text-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--body-indent, var(--text-indent, var(--indent, unset)));
+  font-variant: var(--body-font-variant, var(--text-font-variant, var(--font-variant, unset)));
+  text-align: var(--body-text-align, var(--text-text-align, var(--text-align, unset)));
   width: var(--text-width, var(--body-width, 100%));
 }
 div :global(p), div :global(blockquote), div :global(dl), div :global(ul), div :global(ol) {
@@ -50,7 +50,7 @@ div :global(p), div :global(blockquote), div :global(dl), div :global(ul), div :
   line-height: var(--body-line-height, var(--text-line-height, var(--line-height, 1.5)));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--body-body-font-weight, var(--text-body-font-weight, var(--body-font-weight, inherit)));
+  font-weight: var(--body-body-font-weight, var(--text-body-font-weight, var(--body-font-weight, unset)));
 }
 div :global(h1),
 div :global(h2),
@@ -126,19 +126,19 @@ div :global(p:first-of-type::first-letter) {
 }
 
 div :global(code) {
-  font-family: var(--code-font-family, var(--font-family, inherit));
-  text-transform: var(--code-text-transform, var(--text-transform, inherit));
-  text-decoration: var(--code-text-decoration, var(--text-decoration, inherit));
-  font-size: var(--code-font-size, var(--font-size, inherit));
-  font-weight: var(--code-font-weight, var(--font-weight, inherit));
-  line-height: var(--code-line-height, var(--line-height, inherit));
-  letter-spacing: var(--code-letter-spacing, var(--letter-spacing, inherit));
-  margin-top: var(--code-margin, var(--margin, inherit));
-  margin-top: var(--code-margin-top, var(--margin-top, inherit));
-  margin-bottom: var(--code-margin, var(--margin, inherit));
-  margin-bottom: var(--code-margin-bottom, var(--margin-bottom, inherit));
-  text-indent: var(--code-indent, var(--indent, inherit));
-  font-variant: var(--code-font-variant, var(--font-variant, inherit));
-  text-align: var(--code-text-align, var(--text-align, inherit));
+  font-family: var(--code-font-family, var(--font-family, unset));
+  text-transform: var(--code-text-transform, var(--text-transform, unset));
+  text-decoration: var(--code-text-decoration, var(--text-decoration, unset));
+  font-size: var(--code-font-size, var(--font-size, unset));
+  font-weight: var(--code-font-weight, var(--font-weight, unset));
+  line-height: var(--code-line-height, var(--line-height, unset));
+  letter-spacing: var(--code-letter-spacing, var(--letter-spacing, unset));
+  margin-top: var(--code-margin, var(--margin, unset));
+  margin-top: var(--code-margin-top, var(--margin-top, unset));
+  margin-bottom: var(--code-margin, var(--margin, unset));
+  margin-bottom: var(--code-margin-bottom, var(--margin-bottom, unset));
+  text-indent: var(--code-indent, var(--indent, unset));
+  font-variant: var(--code-font-variant, var(--font-variant, unset));
+  text-align: var(--code-text-align, var(--text-align, unset));
   text-wrap: nowrap;
 }</style>

package/dist/vars/themes/bootstrap.css

@@ -16,15 +16,20 @@
   --fg: #212529;
   --dark-bg: #343a40;
   --dark-fg: #ffffff;
-  --hover-filter: brightness(0.8);
+  --menu-bg: var(--bg);
 
   --body-bg: #ffffff;
   --body-fg: #212529;
+  --border: 1px solid #dee2e6;
   --border-color: #dee2e6;
-
-  --hover-bg: #f8f9fa;
-  --hover-filter: none;
+  --button-border: none;
   --hover-transform: none;
+  --hover-filter: none;
+  --button-hover-filter: brightness(0.9);
+
+  --button-active-filter: brightness(0.9);
+  --active-transform: none;
+  --transition: 0.15s ease-in-out;
 
   /* Typography */
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -56,8 +61,9 @@
 
   /* Spacing */
   --gap: 1rem; /* Using 1rem as a base gap */
-  --column-gap: 1rem;
   --padding: 1rem; /* Using 1rem for padding */
+  --control-padding: 0.375rem 0.75rem;
+  --input-padding: 0.375rem 0.75rem;
   --bar-margin-bottom: 1rem;
 
   /* Layout */
@@ -71,4 +77,9 @@
   --border-radius: 0.25rem;
   --border-style: solid;
   --border-width: 1px;
+
+  --checkbox-radius: 0.25em;
+  --checkbox-check-mark: "✔";
+  --checkbox-check-size: 0.75em;
+  --checkbox-left-offset: 0.25em;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "contain-css-svelte",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build-css": "postcss src/lib/vars/defaults.css -o dist/vars/defaults.css",