contain-css-svelte 1.0.0 → 1.0.1

package/dist/Card.svelte

@@ -44,6 +44,8 @@ let hasFooter = $derived(Boolean(footer));
   color: var(--card-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--card-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--card-bg, var(--container-bg, var(--bg, unset)));
   border-radius: var(--card-border-radius, var(--container-border-radius, var(--border-radius, 0)));
   border: var(--card-border, var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
   display: flex;
@@ -215,29 +217,35 @@ let hasFooter = $derived(Boolean(footer));
   height: var(--h);
   container-type: size;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
 }
 
 .card.fixedHeight::-webkit-scrollbar {
-  width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md))));
-  height: var(--card-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, var(--gap))));
+  width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, 6px)));
+  height: var(--card-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, 6px)));
 }
 
 .card.fixedHeight::-webkit-scrollbar-track {
-  background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
+  background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
 }
 
 .card.fixedHeight::-webkit-scrollbar-thumb {
-  background: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
-  border-radius: var(--card-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
+  background: transparent;
+  border-radius: var(--card-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, 3px)));
+  transition: background var(--card-transition, var(--container-transition, var(--transition, 300ms)));
 }
 
-.card.fixedHeight::-webkit-scrollbar-thumb:hover {
-  background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
+.card.fixedHeight:hover {
+  scrollbar-color: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3)))) var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
 }
 
-.card.fixedHeight {
-  scrollbar-width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, thin)));
-  scrollbar-color: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
+.card.fixedHeight:hover::-webkit-scrollbar-thumb {
+  background: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3))));
+}
+
+.card.fixedHeight:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
 }
 
 header,
@@ -253,6 +261,8 @@ header {
   color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
   box-sizing: border-box;
   padding: var(--card-header-padding, var(--bar-padding, var(--padding, 4px)));
   border: var(--card-header-border, var(--bar-border, var(--border, inherit)));
@@ -285,6 +295,8 @@ footer :global(h6) {
   color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
 }
 
 footer {
@@ -292,6 +304,8 @@ footer {
   color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
   box-sizing: border-box;
   padding: var(--card-footer-padding, var(--bar-padding, var(--padding, 4px)));
   border: var(--card-footer-border, var(--bar-border, var(--border, inherit)));

package/dist/controls/Button.svelte

@@ -54,6 +54,8 @@ button {
   color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
+  --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
   box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
   font-family: var(--button-font-family, var(--control-font-family, var(--control-font-family, inherit)));
   text-transform: var(--button-text-transform, var(--control-text-transform, var(--control-text-transform, inherit)));
@@ -100,6 +102,8 @@ button.primary {
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--primary-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--primary-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--primary-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -117,6 +121,8 @@ button.warning {
   color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--warning-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--warning-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--warning-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -134,6 +140,8 @@ button.danger {
   color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--danger-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--danger-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--danger-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -151,6 +159,8 @@ button.success {
   color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--success-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--success-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--success-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -168,6 +178,8 @@ button.info {
   color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--info-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--info-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--info-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));

package/dist/controls/ButtonLink.svelte

@@ -65,6 +65,8 @@ a[role=button] {
   color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
+  --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
   box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
   font-family: var(--button-font-family, var(--control-font-family, var(--control-font-family, inherit)));
   text-transform: var(--button-text-transform, var(--control-text-transform, var(--control-text-transform, inherit)));
@@ -115,6 +117,8 @@ a[role=button]:hover {
   color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
+  --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
 }
 
 a.primary[role=button]:hover {
@@ -122,6 +126,8 @@ a.primary[role=button]:hover {
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
 }
 
 a.primary {
@@ -129,6 +135,8 @@ a.primary {
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
   font-family: var(--primary-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--primary-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--primary-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -146,6 +154,8 @@ a.warning {
   color: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--warning-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--warning-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--warning-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--warning-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--warning-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -163,6 +173,8 @@ a.danger {
   color: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--danger-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--danger-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--danger-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--danger-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--danger-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -180,6 +192,8 @@ a.success {
   color: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--success-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--success-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--success-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--success-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--success-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -197,6 +211,8 @@ a.info {
   color: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--info-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--info-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--info-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--info-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--info-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));

package/dist/controls/Checkbox.svelte

@@ -175,6 +175,8 @@ label::before {
   color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--checkbox-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
   border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
   box-sizing: border-box;
   border-radius: var(--checkbox-radius, 0);
@@ -185,6 +187,8 @@ label:has(input:checked)::before {
   color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
   --link-bg: var(--checkbox-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--checkbox-link-bg, var(--checkbox-link-bg, inherit)))));
   --link-fg: var(--checkbox-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--checkbox-link-fg, var(--checkbox-link-fg, inherit)))));
+  --fg: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
+  --bg: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
   border: var(--checkbox-checked-border, var(--toggle-on-border, var(--border, checkbox)));
   box-sizing: border-box;
 }

package/dist/controls/Input.svelte

@@ -38,6 +38,8 @@ input {
   color: var(--input-fg, var(--ui-fg, var(--fg, unset)));
   --link-bg: var(--input-link-bg, var(--ui-link-bg, var(--ui-link-bg, inherit)));
   --link-fg: var(--input-link-fg, var(--ui-link-fg, var(--ui-link-fg, inherit)));
+  --fg: var(--input-fg, var(--ui-fg, var(--fg, unset)));
+  --bg: var(--input-bg, var(--ui-bg, var(--bg, unset)));
   width: var(--input-width);
 }
 

package/dist/controls/MiniButton.svelte

@@ -34,6 +34,8 @@ button.primary {
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
 }
 
 button {
@@ -55,6 +57,8 @@ button {
   color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
   font-family: var(--button-font);
   cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
   transition: filter, transform var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
@@ -105,6 +109,8 @@ button.primary {
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
 }
 
 button.warning {
@@ -112,6 +118,8 @@ button.warning {
   color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
 }
 
 button.danger {
@@ -119,6 +127,8 @@ button.danger {
   color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
 }
 
 button.success {
@@ -126,6 +136,8 @@ button.success {
   color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
 }
 
 button.info {
@@ -133,4 +145,6 @@ button.info {
   color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
 }</style>

package/dist/controls/RadioButton.svelte

@@ -154,6 +154,8 @@ label.radio-item::before {
   color: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--radio-button-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--radio-button-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
   border: var(--radio-button-border, var(--border, 1px solid var(--border-color)));
   box-sizing: border-box;
   border-radius: var(--radio-button-border-radius, 50%);
@@ -165,6 +167,8 @@ label.radio-item:has(input:checked)::before {
   color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
   --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit))));
   --link-fg: var(--radio-button-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--primary-link-fg, inherit))));
+  --fg: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
+  --bg: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
   border: var(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));
   box-sizing: border-box;
   width: var(--radio-button-size, var(--toggle-size, var(--font-size, var(--size, 1em))));

package/dist/controls/Select.svelte

@@ -77,14 +77,20 @@ $effect(() => {
 <div class="dropdown-wrapper" style:--target-width={targetWidth}>
   <DropdownMenu>
     {#snippet label()}
-      <span class="select-dropdown">
+      <span
+        class="select-dropdown"
+        style:--fg="var(--select-fg, var(--control-fg, var(--fg)))"
+      >
         <span class="select-dropdown-label">
           {#if activeOption}{@html activeOption.html}{:else}-{/if}
         </span>
       </span>
     {/snippet}
     {#each options as option, index}
-      <li bind:this={optionButtons[index]}>
+      <li
+        bind:this={optionButtons[index]}
+        style:--fg="var(--menu-fg, var(--control-fg, var(--fg)))"
+      >
         <button
           type="button"
           role="menuitemradio"
@@ -132,6 +138,8 @@ select,
   color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
   --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))))));
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
+  --fg: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
+  --bg: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, unset))))));
   width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100vw))));
   text-overflow: ellipsis;
   font-family: var(--select-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family, unset))));
@@ -180,6 +188,8 @@ button:focus-visible {
   color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
   --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))))));
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
+  --fg: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
+  --bg: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, unset))))));
 }
 
 .dropdown-menu :global(.dropdown-menu) > :global(button) {

package/dist/controls/TabItem.svelte

@@ -4,8 +4,8 @@ const { active = false, icon, children, ...restProps } = $props();
 const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "width", "height"]));
 </script>
 
-<div class="tab" class:active {style} {...restProps}>
-  <Button primary={active} {icon}>
+<div class="tab" class:active {style}>
+  <Button primary={active} {icon} {...restProps}>
     {@render children?.()}
   </Button>
 </div>
@@ -28,6 +28,8 @@ div > :global(div > button) {
   color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
   box-sizing: border-box;
   padding: var(--tab-padding, var(--button-padding, var(--control-padding, var(--secondary-padding, var(--padding, 4px)))));
   border: var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, inherit)))));
@@ -57,4 +59,6 @@ div.active > :global(div > button) {
   color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
   --link-bg: var(--tab-active-link-bg, var(--primary-link-bg, var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))))));
   --link-fg: var(--tab-active-link-fg, var(--primary-link-fg, var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))))));
+  --fg: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
+  --bg: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
 }</style>

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

@@ -5,7 +5,7 @@ type Props = {
     active?: boolean;
     icon?: Snippet;
     children?: Snippet;
-} & BaseStyleProps & HTMLAttributes<HTMLDivElement>;
+} & BaseStyleProps & HTMLAttributes<HTMLButtonElement>;
 declare const TabItem: import("svelte").Component<Props, {}, "">;
 type TabItem = ReturnType<typeof TabItem>;
 export default TabItem;

package/dist/dropdowns/DropdownMenu.svelte

@@ -166,6 +166,8 @@ button {
   color: var(--menu-fg, var(--button-fg, var(--container-fg, var(--fg, unset))));
   --link-bg: var(--menu-link-bg, var(--button-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
   --link-fg: var(--menu-link-fg, var(--button-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
+  --fg: var(--menu-fg, var(--button-fg, var(--container-fg, var(--fg, unset))));
+  --bg: var(--menu-bg, var(--button-bg, var(--container-bg, var(--bg, unset))));
   box-sizing: border-box;
   border: var(--menu-border, var(--button-border, var(--container-border, var(--border, inherit))));
   border-top: var(--menu-border-top, var(--button-border-top, var(--container-border-top, var(--border-top, var(--menu-border, var(--button-border, var(--container-border, var(--border, none))))))));
@@ -209,6 +211,8 @@ button {
   color: var(--menu-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--menu-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--menu-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--menu-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--menu-bg, var(--container-bg, var(--bg, unset)));
   box-sizing: border-box;
   padding: var(--menu-padding, var(--padding, 4px));
   border: var(--menu-border, var(--border, inherit));
@@ -280,29 +284,39 @@ button {
   pointer-events: none;
   transition: var(--dropdown-transition, 150ms) opacity;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
 }
 
 .dropdown-container::-webkit-scrollbar {
-  width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, var(--space-md))));
-  height: var(--dropdown-menu-scrollbar-height, var(--menu-scrollbar-height, var(--scrollbar-height, var(--gap))));
+  width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, 6px)));
+  height: var(--dropdown-menu-scrollbar-height, var(--menu-scrollbar-height, var(--scrollbar-height, 6px)));
 }
 
 .dropdown-container::-webkit-scrollbar-track {
-  background: var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
+  background: var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
 }
 
 .dropdown-container::-webkit-scrollbar-thumb {
-  background: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
-  border-radius: var(--dropdown-menu-scrollbar-thumb-radius, var(--menu-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
+  background: transparent;
+  border-radius: var(--dropdown-menu-scrollbar-thumb-radius, var(--menu-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, 3px)));
+  transition: background var(--dropdown-menu-transition, var(--menu-transition, var(--transition, 300ms)));
 }
 
-.dropdown-container::-webkit-scrollbar-thumb:hover {
-  background: var(--dropdown-menu-scrollbar-thumb-hover-bg, var(--menu-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
+.dropdown-container:hover {
+  scrollbar-color: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3)))) var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
+}
+
+.dropdown-container:hover::-webkit-scrollbar-thumb {
+  background: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3))));
+}
+
+.dropdown-container:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--dropdown-menu-scrollbar-thumb-hover-bg, var(--menu-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
 }
 
 .dropdown-container {
-  scrollbar-width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, thin)));
-  scrollbar-color: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
+  overflow: hidden;
 }
 
 .dropdown-container:popover-open {
@@ -310,10 +324,11 @@ button {
   pointer-events: all;
   position: fixed;
   inset: unset;
+  overflow: hidden;
 }
 
 .dropdown-content {
-  width: var(--dropdown-menu-width, 12em);
+  width: max(var(--dropdown-menu-min-width, 12em), var(--dropdown-menu-width, 12em));
   min-width: var(--dropdown-menu-min-width, 12em);
   box-shadow: var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space)))) var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space)))) 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;
@@ -339,6 +354,24 @@ button {
   padding: 0;
 }
 
+.dropdown-content :global(button),
+.dropdown-content :global(a) {
+  white-space: var(--dropdown-wrap-mode, wrap);
+  min-width: 0;
+}
+
+.dropdown-content :global([style*="--dropdown-wrap-mode: nowrap"] button),
+.dropdown-content :global([style*="--dropdown-wrap-mode: nowrap"] a) {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.dropdown-content :global(button span),
+.dropdown-content :global(a span) {
+  white-space: var(--dropdown-wrap-mode, wrap);
+  min-width: 0;
+}
+
 nav {
   position: relative;
 }

package/dist/layout/Accordion.svelte

@@ -54,6 +54,8 @@ div {
   color: var(--accordion-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--accordion-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--accordion-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--accordion-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--accordion-bg, var(--container-bg, var(--bg, unset)));
   font-family: var(--accordion-font-family, var(--header-font-family, var(--font-family, unset)));
   text-transform: var(--accordion-text-transform, var(--header-text-transform, var(--text-transform, unset)));
   text-decoration: var(--accordion-text-decoration, var(--header-text-decoration, var(--text-decoration, unset)));
@@ -98,6 +100,8 @@ div :global(details > summary) {
   color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
   box-sizing: border-box;
   border: var(--accordion-summary-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
   /* border-top: fn.var-with-fallbacks(--border-top,
@@ -163,6 +167,8 @@ div :global(details[open] > summary) {
   color: var(--accordion-summary-open-fg, var(--primary-fg, var(--fg, unset)));
   --link-bg: var(--accordion-summary-open-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit)));
   --link-fg: var(--accordion-summary-open-link-fg, var(--primary-link-fg, var(--primary-link-fg, inherit)));
+  --fg: var(--accordion-summary-open-fg, var(--primary-fg, var(--fg, unset)));
+  --bg: var(--accordion-summary-open-bg, var(--primary-bg, var(--bg, unset)));
   font-family: var(--accordion-summary-open-font-family, var(--accordion-summary-font-family, var(--accordion-summary-font-family, inherit)));
   text-transform: var(--accordion-summary-open-text-transform, var(--accordion-summary-text-transform, var(--accordion-summary-text-transform, inherit)));
   text-decoration: var(--accordion-summary-open-text-decoration, var(--accordion-summary-text-decoration, var(--accordion-summary-text-decoration, inherit)));
@@ -202,6 +208,8 @@ div :global(summary) {
   color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
   box-sizing: border-box;
   border: var(--accordion-summary-border, var(--container-border, var(--border, inherit)));
   border-top: var(--accordion-summary-border-top, var(--container-border-top, var(--border-top, var(--accordion-summary-border, var(--container-border, var(--border, none))))));

package/dist/layout/Bar.svelte

@@ -40,6 +40,8 @@ const style = $derived(injectVars(restProps, "bar", cssKeys));
   color: var(--bar-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--bar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--bar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--bar-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--bar-bg, var(--container-bg, var(--bg, unset)));
   gap: var(--bar-gap, var(--gap, 8px));
   overflow: var(--bar-overflow, visible);
   /* Reset form label width in horizontal context */
@@ -58,4 +60,6 @@ const style = $derived(injectVars(restProps, "bar", cssKeys));
   color: var(--bar-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--bar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--bar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--bar-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--bar-bg, var(--container-bg, var(--bg, unset)));
 }</style>

package/dist/layout/Container.svelte

@@ -31,6 +31,8 @@ section {
   color: var(--container-fg, var(--block-fg, var(--fg, unset)));
   --link-bg: var(--container-link-bg, var(--block-link-bg, var(--block-link-bg, inherit)));
   --link-fg: var(--container-link-fg, var(--block-link-fg, var(--block-link-fg, inherit)));
+  --fg: var(--container-fg, var(--block-fg, var(--fg, unset)));
+  --bg: var(--container-bg, var(--block-bg, var(--bg, unset)));
   box-sizing: border-box;
   padding: var(--container-padding, var(--block-padding, var(--padding, 4px)));
   border: var(--container-border, var(--block-border, var(--border, inherit)));
@@ -178,29 +180,35 @@ section {
   height: var(--container-height, 100%);
   overflow-y: auto;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
 }
 
 section::-webkit-scrollbar {
-  width: var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md)));
-  height: var(--container-scrollbar-height, var(--scrollbar-height, var(--gap)));
+  width: var(--container-scrollbar-width, var(--scrollbar-width, 6px));
+  height: var(--container-scrollbar-height, var(--scrollbar-height, 6px));
 }
 
 section::-webkit-scrollbar-track {
-  background: var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg)));
+  background: var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent));
 }
 
 section::-webkit-scrollbar-thumb {
-  background: var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg)));
-  border-radius: var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius)));
+  background: transparent;
+  border-radius: var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, 3px));
+  transition: background var(--container-transition, var(--transition, 300ms));
 }
 
-section::-webkit-scrollbar-thumb:hover {
-  background: var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg)));
+section:hover {
+  scrollbar-color: var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3))) var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent));
 }
 
-section {
-  scrollbar-width: var(--container-scrollbar-width, var(--scrollbar-width, thin));
-  scrollbar-color: var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888)) var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color)));
+section:hover::-webkit-scrollbar-thumb {
+  background: var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3)));
+}
+
+section:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5)));
 }
 
 .border {

package/dist/layout/Fieldset.svelte

@@ -52,6 +52,8 @@ fieldset {
   color: var(--fieldset-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--fieldset-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--fieldset-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--fieldset-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--fieldset-bg, var(--container-bg, var(--bg, unset)));
   box-sizing: border-box;
   padding: var(--fieldset-padding, var(--container-padding, var(--padding, 4px)));
   border: var(--fieldset-border, var(--container-border, var(--border, inherit)));
@@ -89,6 +91,8 @@ legend {
   color: var(--legend-fg, var(--fieldset-fg, var(--fg, unset)));
   --link-bg: var(--legend-link-bg, var(--fieldset-link-bg, var(--fieldset-link-bg, inherit)));
   --link-fg: var(--legend-link-fg, var(--fieldset-link-fg, var(--fieldset-link-fg, inherit)));
+  --fg: var(--legend-fg, var(--fieldset-fg, var(--fg, unset)));
+  --bg: var(--legend-bg, var(--fieldset-bg, var(--bg, unset)));
   padding: var(--legend-padding, var(--padding, 0 var(--space-sm)));
   font-weight: var(--legend-weight, var(--weight, var(--bold)));
 }</style>