contain-css-svelte 1.1.2 → 1.1.3

package/dist/controls/Button.svelte

@@ -79,7 +79,7 @@ button {
   font-variant: var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, inherit)));
   text-align: var(--button-text-align, var(--ui-text-align, var(--control-text-align, inherit)));
   cursor: var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
-  transition: filter var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), background-color var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), box-shadow var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), transform var(--button-transition, var(--clickable-transition, var(--transition, 300ms)));
+  transition: filter var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), background-color var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), border-color var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), box-shadow var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), transform var(--button-transition, var(--clickable-transition, var(--transition, 300ms)));
 }
 
 button:hover {
@@ -133,7 +133,7 @@ button.primary {
   font-variant: var(--primary-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, inherit))));
   text-align: var(--primary-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, inherit))));
   cursor: var(--primary-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  transition: filter var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
+  transition: filter var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--primary-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
 }
 
 button.primary:hover {
@@ -177,7 +177,7 @@ button.warning {
   font-variant: var(--warning-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, inherit))));
   text-align: var(--warning-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, inherit))));
   cursor: var(--warning-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  transition: filter var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
+  transition: filter var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--warning-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
 }
 
 button.warning:hover {
@@ -221,7 +221,7 @@ button.danger {
   font-variant: var(--danger-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, inherit))));
   text-align: var(--danger-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, inherit))));
   cursor: var(--danger-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  transition: filter var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
+  transition: filter var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--danger-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
 }
 
 button.danger:hover {
@@ -265,7 +265,7 @@ button.success {
   font-variant: var(--success-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, inherit))));
   text-align: var(--success-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, inherit))));
   cursor: var(--success-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  transition: filter var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
+  transition: filter var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--success-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
 }
 
 button.success:hover {
@@ -309,7 +309,7 @@ button.info {
   font-variant: var(--info-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, inherit))));
   text-align: var(--info-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, inherit))));
   cursor: var(--info-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  transition: filter var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
+  transition: filter var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--info-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
 }
 
 button.info:hover {

package/dist/controls/ButtonLink.svelte

@@ -89,7 +89,7 @@ a[role=button] {
   font-variant: var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, inherit)));
   text-align: var(--button-text-align, var(--ui-text-align, var(--control-text-align, inherit)));
   cursor: var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
-  transition: filter var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), background-color var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), box-shadow var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), transform var(--button-transition, var(--clickable-transition, var(--transition, 300ms)));
+  transition: filter var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), background-color var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), border-color var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), box-shadow var(--button-transition, var(--clickable-transition, var(--transition, 300ms))), transform var(--button-transition, var(--clickable-transition, var(--transition, 300ms)));
 }
 
 a[role=button]:hover {

package/dist/controls/Checkbox.svelte

@@ -122,29 +122,6 @@ label {
   box-sizing: border-box;
   gap: var(--checkbox-space, var(--toggle-space, var(--space-md)));
   cursor: var(--checkbox-cursor, var(--clickable-cursor, var(--cursor, pointer)));
-  transition: filter var(--checkbox-transition, var(--clickable-transition, var(--transition, 300ms))), background-color var(--checkbox-transition, var(--clickable-transition, var(--transition, 300ms))), box-shadow var(--checkbox-transition, var(--clickable-transition, var(--transition, 300ms))), transform var(--checkbox-transition, var(--clickable-transition, var(--transition, 300ms)));
-}
-
-label:hover {
-  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
-  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
-  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
-  box-shadow: var(--checkbox-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
-}
-
-label:active {
-  filter: var(--checkbox-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
-  transform: var(--checkbox-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
-  background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
-  box-shadow: var(--checkbox-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
-}
-
-label:disabled {
-  cursor: var(--checkbox-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
-  transform: var(--checkbox-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
-  filter: var(--checkbox-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
-  background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
-  box-shadow: var(--checkbox-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))));
 }
 
 label span {
@@ -174,7 +151,7 @@ label:has(input:focus-visible) {
 }
 
 label::before {
-  transition: all var(--checkbox-transition, var(--transition, control));
+  transition: filter var(--checkbox-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), background-color var(--checkbox-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), border-color var(--checkbox-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), box-shadow var(--checkbox-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), transform var(--checkbox-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms)))));
   display: inline-grid;
   place-content: center;
   content: " ";
@@ -191,6 +168,20 @@ label::before {
   border-radius: var(--checkbox-radius, 0);
 }
 
+label:hover::before {
+  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
+  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
+  box-shadow: var(--checkbox-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
+}
+
+label:active::before {
+  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: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
+  box-shadow: var(--checkbox-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
+}
+
 label:has(input:checked)::before {
   --_background-color: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
   --_color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
@@ -202,6 +193,18 @@ label:has(input:checked)::before {
   box-sizing: border-box;
 }
 
+label:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--checkbox-disabled-opacity, 0.6);
+  filter: grayscale(0.2);
+}
+
+label:has(input:disabled):hover::before,
+label:has(input:disabled):active::before {
+  filter: none;
+  box-shadow: none;
+}
+
 label:has(input:checked)::after {
   content: var(--checkbox-check, "✓");
   font-size: var(--checkbox-check-size, var(--size, 0.875em));

package/dist/controls/MiniButton.svelte

@@ -63,7 +63,7 @@ button {
   background-color: var(--_background-color);
   color: var(--_color);
   cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
-  transition: filter var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
+  transition: filter var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), border-color var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
 }
 
 button:hover {

package/dist/controls/RadioButton.svelte

@@ -100,29 +100,6 @@ label.radio-item {
   gap: var(--radio-button-space, var(--toggle-space, var(--space-md)));
   white-space: nowrap;
   cursor: var(--radio-button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
-  transition: filter var(--radio-button-transition, var(--clickable-transition, var(--transition, 300ms))), background-color var(--radio-button-transition, var(--clickable-transition, var(--transition, 300ms))), box-shadow var(--radio-button-transition, var(--clickable-transition, var(--transition, 300ms))), transform var(--radio-button-transition, var(--clickable-transition, var(--transition, 300ms)));
-}
-
-label.radio-item:hover {
-  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
-  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
-  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
-  box-shadow: var(--radio-button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
-}
-
-label.radio-item:active {
-  filter: var(--radio-button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
-  transform: var(--radio-button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
-  background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
-  box-shadow: var(--radio-button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
-}
-
-label.radio-item:disabled {
-  cursor: var(--radio-button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
-  transform: var(--radio-button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
-  filter: var(--radio-button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
-  background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
-  box-shadow: var(--radio-button-disabled-box-shadow, var(--clickable-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))));
 }
 
 label.radio-item span {
@@ -153,7 +130,7 @@ label.radio-item:has(input:focus-visible) {
 }
 
 label.radio-item::before {
-  transition: all var(--radio-button-transition, var(--transition, control));
+  transition: filter var(--radio-button-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), background-color var(--radio-button-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), border-color var(--radio-button-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), box-shadow var(--radio-button-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), transform var(--radio-button-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms)))));
   display: inline-grid;
   place-content: center;
   content: " ";
@@ -171,6 +148,20 @@ label.radio-item::before {
   margin-left: var(--radio-button-padding, var(--padding));
 }
 
+label.radio-item:hover::before {
+  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
+  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
+  box-shadow: var(--radio-button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
+}
+
+label.radio-item:active::before {
+  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: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
+  box-shadow: var(--radio-button-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
+}
+
 label.radio-item:has(input:checked)::before {
   --_background-color: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
   --_color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
@@ -182,4 +173,16 @@ label.radio-item:has(input:checked)::before {
   box-sizing: border-box;
   width: var(--radio-button-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
   height: var(--radio-button-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+}
+
+label.radio-item:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--radio-button-disabled-opacity, 0.6);
+  filter: grayscale(0.2);
+}
+
+label.radio-item:has(input:disabled):hover::before,
+label.radio-item:has(input:disabled):active::before {
+  filter: none;
+  box-shadow: none;
 }</style>

package/dist/controls/Toggle.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">import { injectVars } from "../util";
+let { checked = $bindable(false), name = "", onLabel, offLabel, children, ...restProps } = $props();
+const style = $derived(injectVars(restProps, "toggle", ["bg", "fg", "padding", "width", "height"]));
+const hasOffLabel = $derived(Boolean(offLabel));
+const hasOnLabel = $derived(Boolean(onLabel || children));
+const effectiveOnLabel = $derived(onLabel || children);
+</script>
+
+<label class="toggle" {style}>
+  {#if hasOffLabel}
+    <span class="toggle-label toggle-label-off">{@render offLabel?.()}</span>
+  {/if}
+
+  <span class="toggle-switch">
+    <input
+      name={name || undefined}
+      type="checkbox"
+      bind:checked
+      {...restProps}
+    />
+    <span class="toggle-track" aria-hidden="true">
+      <span class="toggle-thumb"></span>
+    </span>
+  </span>
+
+  {#if hasOnLabel}
+    <span class="toggle-label toggle-label-on"
+      >{@render effectiveOnLabel?.()}</span
+    >
+  {/if}
+</label>
+
+<style>/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--toggle-space, var(--space-md, 0.5rem));
+  user-select: none;
+  cursor: var(--toggle-cursor, var(--clickable-cursor, var(--cursor, pointer)));
+  font-family: var(--toggle-font-family, var(--ui-font-family, var(--font-family, unset)));
+  text-transform: var(--toggle-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--toggle-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
+  --_font-size: var(--toggle-font-size, var(--ui-font-size, var(--font-size, unset)));
+  font-size: var(--_font-size);
+  font-weight: var(--toggle-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
+  line-height: var(--toggle-line-height, var(--ui-line-height, var(--line-height, unset)));
+  letter-spacing: var(--toggle-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
+  --_margin-top: var(--toggle-margin, var(--ui-margin, var(--margin, unset)));
+  --_margin-top: var(--toggle-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
+  margin-top: var(--_margin-top);
+  --_margin-bottom: var(--toggle-margin, var(--ui-margin, var(--margin, unset)));
+  --_margin-bottom: var(--toggle-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
+  margin-bottom: var(--_margin-bottom);
+  text-indent: var(--toggle-indent, var(--ui-indent, var(--indent, unset)));
+  font-variant: var(--toggle-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
+  text-align: var(--toggle-text-align, var(--ui-text-align, var(--text-align, unset)));
+}
+
+.toggle-switch {
+  --_toggle-width: var(--toggle-width, 2.75em);
+  --_toggle-height: var(--toggle-height, 1.5em);
+  --_thumb-inset: var(--toggle-thumb-inset, 2px);
+  --_thumb-size: var(
+    --toggle-thumb-size,
+    calc(var(--_toggle-height) - (2 * var(--_thumb-inset)))
+  );
+  position: relative;
+  width: var(--_toggle-width);
+  height: var(--_toggle-height);
+  min-width: 2.25em;
+  min-height: 1.25em;
+  flex: 0 0 auto;
+}
+
+.toggle-track {
+  --_background-color: var(--toggle-bg, var(--toggle-off-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_color: var(--toggle-fg, var(--toggle-off-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--toggle-link-bg, var(--toggle-off-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));
+  --link-fg: var(--toggle-link-fg, var(--toggle-off-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, inherit))));
+  background-color: var(--_background-color);
+  color: var(--_color);
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--toggle-track-radius, 999px);
+  border: var(--toggle-border, var(--border, 1px solid var(--border-color, rgba(127, 127, 127, 0.6))));
+  transition: filter var(--toggle-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), background-color var(--toggle-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), border-color var(--toggle-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), box-shadow var(--toggle-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms))))), transform var(--toggle-transition, var(--clickable-transition, var(--control-transition, var(--180ms ease-transition, var(--transition, 300ms)))));
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+}
+
+.toggle-thumb {
+  position: absolute;
+  top: 50%;
+  left: var(--_thumb-inset);
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  border-radius: 50%;
+  background: var(--toggle-thumb-bg, var(--surface-bg, var(--secondary-fg, rgb(240, 240, 240))));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transform: translate(0, -50%);
+  transition: transform var(--toggle-transition, var(--control-transition, var(--transition, 180ms ease)));
+}
+
+input[type=checkbox] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  cursor: inherit;
+}
+
+.toggle:hover .toggle-track {
+  filter: var(--toggle-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
+  transform: var(--toggle-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
+  box-shadow: var(--toggle-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
+}
+
+.toggle:active .toggle-track {
+  filter: var(--toggle-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
+  transform: var(--toggle-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
+  background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
+  box-shadow: var(--toggle-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
+}
+
+.toggle:has(input:focus-visible) {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
+
+.toggle:has(input:checked) .toggle-track {
+  --_background-color: var(--toggle-on-bg, var(--primary-bg, var(--toggle-bg, var(--bg, unset))));
+  --_color: var(--toggle-on-fg, var(--primary-fg, var(--toggle-fg, var(--fg, unset))));
+  --link-bg: var(--toggle-on-link-bg, var(--primary-link-bg, var(--toggle-link-bg, inherit)));
+  --link-fg: var(--toggle-on-link-fg, var(--primary-link-fg, var(--toggle-link-fg, inherit)));
+  background-color: var(--_background-color);
+  color: var(--_color);
+  border: var(--toggle-on-border, var(--toggle-border, var(--border, 1px solid transparent)));
+}
+
+.toggle:has(input:checked) .toggle-thumb {
+  transform: translate(calc(var(--_toggle-width) - var(--_thumb-size) - 2 * var(--_thumb-inset)), -50%);
+}
+
+.toggle:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--toggle-disabled-opacity, 0.6);
+  filter: grayscale(0.2);
+}
+
+.toggle:has(input:disabled):hover .toggle-track,
+.toggle:has(input:disabled):active .toggle-track {
+  filter: none;
+  box-shadow: none;
+}
+
+.toggle-label {
+  white-space: nowrap;
+}</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { BaseStyleProps } from "../types";
+type Props = {
+    checked?: boolean;
+    name?: string;
+    onLabel?: Snippet;
+    offLabel?: Snippet;
+    children?: Snippet;
+} & BaseStyleProps & Omit<HTMLInputAttributes, "type">;
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/dropdowns/DropdownMenu.svelte

@@ -186,7 +186,7 @@ button {
   padding: var(--_padding);
   border-radius: var(--menu-square-radius, var(--button-square-radius, var(--surface-square-radius, var(--square-radius, 0))));
   cursor: var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
-  transition: filter var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
+  transition: filter var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
 }
 
 button:hover {
@@ -258,7 +258,7 @@ button {
   font-variant: var(--menu-font-variant, var(--surface-font-variant, var(--font-variant, unset)));
   text-align: var(--menu-text-align, var(--surface-text-align, var(--text-align, unset)));
   cursor: var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
-  transition: filter var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
+  transition: filter var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
 }
 
 .menu:hover {

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import Select from "./controls/Select.svelte";
 import Option from "./controls/Option.svelte";
 import Slider from "./controls/Slider.svelte";
 import TabItem from "./controls/TabItem.svelte";
+import Toggle from "./controls/Toggle.svelte";
 import Bar from "./layout/Bar.svelte";
 import Column from "./layout/Column.svelte";
 import ColumnContainer from "./layout/ColumnContainer.svelte";
@@ -46,7 +47,7 @@ export type { BaseStyleProps, ContainerStyleProps, BarStyleProps, MenuStyleProps
 export { Tag };
 export { Hero };
 export { TabItem };
-export { Button, ButtonLink, Checkbox, Input, Slider, RadioButton, MiniButton, Select, Option, };
+export { Button, ButtonLink, Checkbox, Input, Slider, Toggle, RadioButton, MiniButton, Select, Option, };
 export { Bar, ColumnContainer, Container, GridLayout, Inline, MenuList, Page, ResponsiveText, RowContainer, Stack, TabBar, };
 export { TextLayout, Code, Accordion };
 export { Card, Tile, Form, FormItem, FormProvider, Fieldset };

package/dist/index.js

@@ -11,6 +11,7 @@ import Select from "./controls/Select.svelte";
 import Option from "./controls/Option.svelte";
 import Slider from "./controls/Slider.svelte";
 import TabItem from "./controls/TabItem.svelte";
+import Toggle from "./controls/Toggle.svelte";
 import Bar from "./layout/Bar.svelte";
 import Column from "./layout/Column.svelte";
 import ColumnContainer from "./layout/ColumnContainer.svelte";
@@ -46,7 +47,7 @@ import Tag from "./misc/Tag.svelte";
 export { Tag };
 export { Hero };
 export { TabItem };
-export { Button, ButtonLink, Checkbox, Input, Slider, RadioButton, MiniButton, Select, Option, };
+export { Button, ButtonLink, Checkbox, Input, Slider, Toggle, RadioButton, MiniButton, Select, Option, };
 export { Bar, ColumnContainer, Container, GridLayout, Inline, MenuList, Page, ResponsiveText, RowContainer, Stack, TabBar, };
 export { TextLayout, Code, Accordion };
 export { Card, Tile, Form, FormItem, FormProvider, Fieldset };

package/dist/layout/Accordion.svelte

@@ -106,7 +106,7 @@ div :global(details > summary) {
   padding: var(--_padding);
   border-radius: var(--accordion-summary-square-radius, var(--control-square-radius, var(--surface-square-radius, var(--square-radius, 0))));
   cursor: var(--accordion-cursor, var(--cursor, pointer));
-  transition: filter var(--accordion-transition, var(--transition, 300ms)), background-color var(--accordion-transition, var(--transition, 300ms)), box-shadow var(--accordion-transition, var(--transition, 300ms)), transform var(--accordion-transition, var(--transition, 300ms));
+  transition: filter var(--accordion-transition, var(--transition, 300ms)), background-color var(--accordion-transition, var(--transition, 300ms)), border-color var(--accordion-transition, var(--transition, 300ms)), box-shadow var(--accordion-transition, var(--transition, 300ms)), transform var(--accordion-transition, var(--transition, 300ms));
 }
 
 div :global(details > summary):hover {

package/dist/layout/DataListItem.svelte

@@ -544,7 +544,7 @@ function handleKeydown(event) {
 
 .data-list-item.isInteractive {
   cursor: var(--data-list-item-cursor, var(--cursor, pointer));
-  transition: filter var(--data-list-item-transition, var(--transition, 300ms)), background-color var(--data-list-item-transition, var(--transition, 300ms)), box-shadow var(--data-list-item-transition, var(--transition, 300ms)), transform var(--data-list-item-transition, var(--transition, 300ms));
+  transition: filter var(--data-list-item-transition, var(--transition, 300ms)), background-color var(--data-list-item-transition, var(--transition, 300ms)), border-color var(--data-list-item-transition, var(--transition, 300ms)), box-shadow var(--data-list-item-transition, var(--transition, 300ms)), transform var(--data-list-item-transition, var(--transition, 300ms));
 }
 
 .data-list-item.isInteractive:hover {

package/dist/layout/Fieldset.svelte

@@ -2,7 +2,7 @@
 import FormProvider from "./FormProvider.svelte";
 let { legend, children, 
 // FormProvider props
-layout, fullWidth, globalInputStyles, multiline, 
+layout, collapseSide, fullWidth, globalInputStyles, multiline, 
 // Container-like props
 bg, fg, padding, border, borderRadius, margin, maxWidth, minWidth, width, ...restProps } = $props();
 const style = $derived(injectVars({
@@ -29,7 +29,13 @@ const style = $derived(injectVars({
 ]));
 </script>
 
-<FormProvider {layout} {fullWidth} {globalInputStyles} {multiline}>
+<FormProvider
+  {layout}
+  {collapseSide}
+  {fullWidth}
+  {globalInputStyles}
+  {multiline}
+>
   <fieldset {style} {...restProps}>
     {#if legend}
       <legend>

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

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     legend?: Snippet;
     children?: Snippet;
     layout?: "side" | "above" | "below";
+    collapseSide?: boolean;
     fullWidth?: boolean;
     globalInputStyles?: boolean;
     multiline?: boolean;

package/dist/layout/Form.svelte

@@ -2,7 +2,7 @@
 import FormProvider from "./FormProvider.svelte";
 let { children, 
 // FormProvider props
-layout, fullWidth, globalInputStyles, multiline, 
+layout, collapseSide, fullWidth, globalInputStyles, multiline, 
 // Container-like props
 bg, fg, padding, border, borderRadius, margin, maxWidth, minWidth, width, 
 // Form-specific props
@@ -31,7 +31,13 @@ const style = $derived(injectVars({
 ]));
 </script>
 
-<FormProvider {layout} {fullWidth} {globalInputStyles} {multiline}>
+<FormProvider
+  {layout}
+  {collapseSide}
+  {fullWidth}
+  {globalInputStyles}
+  {multiline}
+>
   <form {style} {action} {method} {onsubmit} {...restProps}>
     {@render children?.()}
   </form>

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

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     children?: Snippet;
     layout?: "side" | "above" | "below";
+    collapseSide?: boolean;
     fullWidth?: boolean;
     globalInputStyles?: boolean;
     multiline?: boolean;

package/dist/layout/FormItem.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">import { injectVars } from "../util";
 import { getContext } from "svelte";
 const contextDefaults = getContext("formItemDefaults");
-let { fullWidth, globalInputStyles, label, after, children, multiline, layout, above = false, below = false, ...restProps } = $props();
+let { fullWidth, globalInputStyles, label, after, children, multiline, layout, collapseSide, above = false, below = false, ...restProps } = $props();
 // Use $derived to reactively compute values from context
 const effectiveFullWidth = $derived(fullWidth ?? contextDefaults?.fullWidth ?? false);
 const effectiveGlobalInputStyles = $derived(globalInputStyles ?? contextDefaults?.globalInputStyles ?? true);
 const effectiveMultiline = $derived(multiline ?? contextDefaults?.multiline ?? false);
+const effectiveCollapseSide = $derived(collapseSide ?? contextDefaults?.collapseSide ?? true);
 const effectiveLayoutFromContext = $derived(layout ?? contextDefaults?.layout ?? "side");
 const cssKeys = ["fullWidth", "globalInputStyles", "multiline"];
 const style = $derived(injectVars(restProps, "form-item", cssKeys));
@@ -18,6 +19,7 @@ const effectiveLayout = $derived(above ? "above" : below ? "below" : effectiveLa
   class:fullWidth={effectiveFullWidth}
   class:globalInputStyles={effectiveGlobalInputStyles}
   class:multiline={effectiveMultiline}
+  class:collapse-side={effectiveCollapseSide}
   class:layout-side={effectiveLayout === "side"}
   class:layout-above={effectiveLayout === "above"}
   class:layout-below={effectiveLayout === "below"}
@@ -163,20 +165,20 @@ label {
 }
 
 @container (max-width: 400px) {
-  .form-item.layout-side {
+  .form-item.layout-side.collapse-side {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--form-label-vertical-gap, var(--space));
   }
-  .form-item.layout-side .label {
+  .form-item.layout-side.collapse-side .label {
     text-align: left;
   }
-  .form-item.layout-side {
+  .form-item.layout-side.collapse-side {
     width: auto;
     text-align: left;
     font-size: var(--font-size-small);
   }
-  .form-item.layout-side {
+  .form-item.layout-side.collapse-side {
     width: var(--form-input-fixed-width, var(--form-input-width));
   }
 }

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

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     children?: Snippet;
     multiline?: boolean;
     layout?: "side" | "above" | "below";
+    collapseSide?: boolean;
     above?: boolean;
     below?: boolean;
 } & HTMLAttributes<HTMLElement>;

package/dist/layout/FormProvider.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">import { setContext, getContext } from "svelte";
-let { layout, fullWidth, globalInputStyles, multiline, children, } = $props();
+let { layout, collapseSide, fullWidth, globalInputStyles, multiline, children, } = $props();
 // Get parent context if it exists
 const parentContext = getContext("formItemDefaults");
 // Make context reactive using $state, merging with parent
 let contextValue = $state({
     layout: layout ?? parentContext?.layout,
+    collapseSide: collapseSide ?? parentContext?.collapseSide,
     fullWidth: fullWidth ?? parentContext?.fullWidth,
     globalInputStyles: globalInputStyles ?? parentContext?.globalInputStyles,
     multiline: multiline ?? parentContext?.multiline,
@@ -12,6 +13,7 @@ let contextValue = $state({
 // Update context value properties when props change, falling back to parent
 $effect(() => {
     contextValue.layout = layout ?? parentContext?.layout;
+    contextValue.collapseSide = collapseSide ?? parentContext?.collapseSide;
     contextValue.fullWidth = fullWidth ?? parentContext?.fullWidth;
     contextValue.globalInputStyles =
         globalInputStyles ?? parentContext?.globalInputStyles;

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

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 type FormItemDefaults = {
     layout?: "side" | "above" | "below";
+    collapseSide?: boolean;
     fullWidth?: boolean;
     globalInputStyles?: boolean;
     multiline?: boolean;

package/dist/layout/MenuList.svelte

@@ -62,7 +62,7 @@ const style = $derived(injectVars(restProps, "menu", [
 .menu :global(li[role="button"]),
 .menu :global(li[tabindex]:not([tabindex="-1"])) {
   cursor: var(--menu-item-cursor, var(--cursor, pointer));
-  transition: filter var(--menu-item-transition, var(--transition, 300ms)), background-color var(--menu-item-transition, var(--transition, 300ms)), box-shadow var(--menu-item-transition, var(--transition, 300ms)), transform var(--menu-item-transition, var(--transition, 300ms));
+  transition: filter var(--menu-item-transition, var(--transition, 300ms)), background-color var(--menu-item-transition, var(--transition, 300ms)), border-color var(--menu-item-transition, var(--transition, 300ms)), box-shadow var(--menu-item-transition, var(--transition, 300ms)), transform var(--menu-item-transition, var(--transition, 300ms));
 }
 
 .menu :global(li.subheader):hover,
@@ -158,7 +158,7 @@ const style = $derived(injectVars(restProps, "menu", [
 
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
   cursor: var(--menu-item-cursor, var(--cursor, pointer));
-  transition: filter var(--menu-item-transition, var(--transition, 300ms)), background-color var(--menu-item-transition, var(--transition, 300ms)), box-shadow var(--menu-item-transition, var(--transition, 300ms)), transform var(--menu-item-transition, var(--transition, 300ms));
+  transition: filter var(--menu-item-transition, var(--transition, 300ms)), background-color var(--menu-item-transition, var(--transition, 300ms)), border-color var(--menu-item-transition, var(--transition, 300ms)), box-shadow var(--menu-item-transition, var(--transition, 300ms)), 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 {
@@ -185,7 +185,7 @@ const style = $derived(injectVars(restProps, "menu", [
 
 .menu li {
   cursor: var(--menu-item-cursor, var(--cursor, pointer));
-  transition: filter var(--menu-item-transition, var(--transition, 300ms)), background-color var(--menu-item-transition, var(--transition, 300ms)), box-shadow var(--menu-item-transition, var(--transition, 300ms)), transform var(--menu-item-transition, var(--transition, 300ms));
+  transition: filter var(--menu-item-transition, var(--transition, 300ms)), background-color var(--menu-item-transition, var(--transition, 300ms)), border-color var(--menu-item-transition, var(--transition, 300ms)), box-shadow var(--menu-item-transition, var(--transition, 300ms)), transform var(--menu-item-transition, var(--transition, 300ms));
 }
 
 .menu li:hover {
@@ -210,49 +210,6 @@ const style = $derived(injectVars(restProps, "menu", [
   box-shadow: var(--menu-item-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)));
 }
 
-.menu {
-  /*
-  // Make hover/active feedback visible across the whole row by default.
-  & :global(li:hover > a:not(.active)),
-  & :global(li:hover > button:not(.active)),
-  & :global(li:hover > input[type="submit"]:not(.active)),
-  & :global(li:hover > .button:not(.active)) {
-    background: var(
-      --menu-item-hover-bg,
-      var(--menu-item-bg, var(--menu-bg, var(--bg, unset)))
-    );
-    color: var(
-      --menu-item-hover-fg,
-      var(--menu-item-fg, var(--menu-fg, var(--fg, inherit)))
-    );
-  }
-
-  & :global(li:active > a:not(.active)),
-  & :global(li:active > button:not(.active)),
-  & :global(li:active > input[type="submit"]:not(.active)),
-  & :global(li:active > .button:not(.active)) {
-    background: var(
-      --menu-item-active-bg,
-      var(--menu-item-bg, var(--menu-bg, var(--bg, unset)))
-    );
-    color: var(
-      --menu-item-active-fg,
-      var(--menu-item-fg, var(--menu-fg, var(--fg, inherit)))
-    );
-  }
-
-  & :global(.active) {
-    @include color-props(
-      menu-item-active,
-      primary,
-      menu-item,
-      button,
-      control,
-      surface
-    );
-  } */
-}
-
 .menu.striped :global(li:nth-of-type(even)) > :global(a), .menu.striped :global(li:nth-of-type(even)) > :global(button), .menu.striped :global(li:nth-of-type(even)) > :global(input[type="submit"]), .menu.striped :global(li:nth-of-type(even)) > :global(.button) {
   --_background-color: var(--menu-item-even-bg, var(--stripe-bg, var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--bg, unset))))));
   --_color: var(--menu-item-even-fg, var(--stripe-fg, var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--fg, unset))))));

package/dist/layout/Sidebar.svelte

@@ -262,7 +262,7 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
     background-color: var(--_background-color);
     color: var(--_color);
     cursor: var(--mini-button-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
-    transition: filter var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
+    transition: filter var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--mini-button-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
   }
   aside > button:hover {
     filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));

package/dist/layout/Table.svelte

@@ -655,12 +655,23 @@ table :global(tr > th:first-child:has(~ td)) {
 }
 
 .fixed-table-head :global(th) {
-  --_background-color: var(--table-head-bg, var(--table-bg, var(--surface-bg, var(--bg, unset))));
-  --_color: var(--table-head-fg, var(--table-fg, var(--surface-fg, var(--fg, unset))));
-  --link-bg: var(--table-head-link-bg, var(--table-link-bg, var(--surface-link-bg, inherit)));
-  --link-fg: var(--table-head-link-fg, var(--table-link-fg, var(--surface-link-fg, inherit)));
+  --_background-color: var(--table-head-bg, var(--text-bg, var(--bg, unset)));
+  --_color: var(--table-head-fg, var(--text-fg, var(--fg, unset)));
+  --link-bg: var(--table-head-link-bg, var(--text-link-bg, inherit));
+  --link-fg: var(--table-head-link-fg, var(--text-link-fg, inherit));
   background-color: var(--_background-color);
   color: var(--_color);
+  font-family: var(--table-head-font-family, var(--header-font-family, inherit));
+  text-transform: var(--table-head-text-transform, var(--header-text-transform, inherit));
+  text-decoration: var(--table-head-text-decoration, var(--header-text-decoration, inherit));
+  --_font-size: var(--table-head-font-size, var(--header-font-size, inherit));
+  font-size: var(--_font-size);
+  font-weight: var(--table-head-font-weight, var(--header-font-weight, var(--font-weight, bold)));
+  line-height: var(--table-head-line-height, var(--header-line-height, inherit));
+  letter-spacing: var(--table-head-letter-spacing, var(--header-letter-spacing, inherit));
+  text-indent: var(--table-head-indent, var(--header-indent, inherit));
+  font-variant: var(--table-head-font-variant, var(--header-font-variant, inherit));
+  text-align: var(--table-head-text-align, var(--header-text-align, inherit));
 }
 
 /* Visually make our two tables appear as one */
@@ -692,29 +703,6 @@ table :global(tr > th:first-child:has(~ td)) {
 /* Interactive affordances: target rows/cells with tabindex for keyboard accessibility */
 table :global(tr[tabindex]) {
   cursor: var(--cursor, pointer);
-  transition: filter var(--transition, 300ms), background-color var(--transition, 300ms), box-shadow var(--transition, 300ms), transform var(--transition, 300ms);
-}
-
-table :global(tr[tabindex]):hover {
-  filter: var(--hover-filter, brightness(1.05));
-  transform: var(--hover-transform, none);
-  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
-  box-shadow: var(--hover-box-shadow, var(--_box-shadow, none));
-}
-
-table :global(tr[tabindex]):active {
-  filter: var(--active-filter, brightness(0.9));
-  transform: var(--active-transform, none);
-  background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
-  box-shadow: var(--active-box-shadow, var(--_box-shadow, none));
-}
-
-table :global(tr[tabindex]):disabled {
-  cursor: var(--disabled-cursor, not-allowed);
-  transform: var(--disabled-transform, none);
-  filter: var(--disabled-filter, grayscale(0.5));
-  background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
-  box-shadow: var(--disabled-box-shadow, var(--_box-shadow, none));
 }
 
 table :global(tr[tabindex]):focus-visible {
@@ -723,33 +711,39 @@ table :global(tr[tabindex]):focus-visible {
   box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
 }
 
+table :global(tr[tabindex] > th),
+table :global(tr[tabindex] > td),
+table :global(th[tabindex]),
 table :global(td[tabindex]) {
   cursor: var(--cursor, pointer);
-  transition: filter var(--transition, 300ms), background-color var(--transition, 300ms), box-shadow var(--transition, 300ms), transform var(--transition, 300ms);
+  transition: filter var(--transition, 300ms), background-color var(--transition, 300ms), border-color var(--transition, 300ms), box-shadow var(--transition, 300ms), transform var(--transition, 300ms);
 }
 
-table :global(td[tabindex]):hover {
+table :global(tr[tabindex]:hover > th),
+table :global(tr[tabindex]:hover > td),
+table :global(tr[tabindex]:focus-visible > th),
+table :global(tr[tabindex]:focus-visible > td),
+table :global(th[tabindex]:hover),
+table :global(th[tabindex]:focus-visible),
+table :global(td[tabindex]:hover),
+table :global(td[tabindex]:focus-visible) {
   filter: var(--hover-filter, brightness(1.05));
   transform: var(--hover-transform, none);
   background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
   box-shadow: var(--hover-box-shadow, var(--_box-shadow, none));
 }
 
-table :global(td[tabindex]):active {
+table :global(tr[tabindex]:active > th),
+table :global(tr[tabindex]:active > td),
+table :global(th[tabindex]:active),
+table :global(td[tabindex]:active) {
   filter: var(--active-filter, brightness(0.9));
   transform: var(--active-transform, none);
   background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
   box-shadow: var(--active-box-shadow, var(--_box-shadow, none));
 }
 
-table :global(td[tabindex]):disabled {
-  cursor: var(--disabled-cursor, not-allowed);
-  transform: var(--disabled-transform, none);
-  filter: var(--disabled-filter, grayscale(0.5));
-  background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
-  box-shadow: var(--disabled-box-shadow, var(--_box-shadow, none));
-}
-
+table :global(th[tabindex]):focus-visible,
 table :global(td[tabindex]):focus-visible {
   outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
   outline-offset: var(--focus-outline-offset, 2px);

package/dist/layout/Tile.svelte

@@ -381,7 +381,7 @@ export {};
 button.tile,
 label.tile {
   cursor: var(--tile-cursor, var(--cursor, pointer));
-  transition: filter var(--tile-transition, var(--transition, 300ms)), background-color var(--tile-transition, var(--transition, 300ms)), box-shadow var(--tile-transition, var(--transition, 300ms)), transform var(--tile-transition, var(--transition, 300ms));
+  transition: filter var(--tile-transition, var(--transition, 300ms)), background-color var(--tile-transition, var(--transition, 300ms)), border-color var(--tile-transition, var(--transition, 300ms)), box-shadow var(--tile-transition, var(--transition, 300ms)), transform var(--tile-transition, var(--transition, 300ms));
 }
 
 button.tile:hover,

package/dist/misc/Progress.svelte

@@ -451,7 +451,7 @@ let halfFull = $derived(fillFraction > 0.5);
 }
 
 .progress-container .progress-track[data-animate=true] {
-  background: repeating-linear-gradient(135deg, var(--progress-track-bg, var(--secondary-bg, #dfdfdf)) 0, var(--progress-track-bg, var(--secondary-bg, #dfdfdf)) 20px, var(--progress-track-stripe-bg, var(--white, #fff)) 20px, var(--progress-track-stripe-bg, var(--white, #fff)) 40px);
+  background: repeating-linear-gradient(135deg, var(--progress-track-bg, var(--secondary-bg, #dfdfdf)) 0, var(--progress-track-bg, var(--secondary-bg, #dfdfdf)) 20px, var(--progress-track-stripe-bg, color-mix(in srgb, var(--secondary-bg, #fff) 85%, var(--surface-bg, #dfdfdf) 15%)) 20px, var(--progress-track-stripe-bg, color-mix(in srgb, var(--secondary-bg, #fff) 85%, var(--surface-bg, #dfdfdf) 15%)) 40px);
   background-size: 3000px;
   background-position: center;
   animation: track-stripes 1s linear infinite;
@@ -484,10 +484,35 @@ let halfFull = $derived(fillFraction > 0.5);
   align-items: center;
   justify-content: center;
   color: var(--progress-fg, var(--secondary-fg, var(--white)));
-  text-shadow: var(--progress-text-shadow, 1px 1px var(--progress-fg, var(--secondary-fg, var(--white))));
+  /* Outline color defaults to track background so text is readable over unfilled area */
+  --_progress-outline-color: var(
+    --progress-outline-color,
+    var(--progress-track-bg, var(--secondary-bg, #dfdfdf))
+  );
+  -webkit-text-stroke: var(--progress-outline-width, 1px) var(--_progress-outline-color);
+  paint-order: stroke fill;
+  text-shadow: none;
 }
 
+@supports not (-webkit-text-stroke: 1px black) {
+  .progress-container .progress-text {
+    text-shadow: var(--progress-text-shadow, 1px 0px var(--_progress-outline-color), -1px 0px var(--_progress-outline-color), 0px -1px var(--_progress-outline-color), 0px 1px var(--_progress-outline-color));
+  }
+}
 .progress-container .half-full .progress-text {
   color: var(--progress-half-fg, var(--primary-fg, var(--white)));
-  text-shadow: var(--progress-half-text-shadow, var(--progress-text-shadow, 1px 1px var(--progress-fg, var(--secondary-fg, var(--white)))));
+  /* Outline color defaults to bar color so text is readable over the unfilled track edge */
+  --_progress-outline-color: var(
+    --progress-half-outline-color,
+    var(
+      --progress-outline-color,
+      var(--progress-bar-color, var(--primary-bg))
+    )
+  );
+}
+
+@supports not (-webkit-text-stroke: 1px black) {
+  .progress-container .half-full .progress-text {
+    text-shadow: var(--progress-half-text-shadow, var(--progress-text-shadow, 1px 0px var(--_progress-outline-color), -1px 0px var(--_progress-outline-color), 0px -1px var(--_progress-outline-color), 0px 1px var(--_progress-outline-color)));
+  }
 }</style>

package/dist/misc/Tag.svelte

@@ -86,7 +86,7 @@ let style = $derived(injectVars(restProps, "tag", [
   top: 0;
   right: 0;
   cursor: var(--tag-close-button-cursor, var(--button-cursor, var(--cursor, pointer)));
-  transition: filter var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), background-color var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), box-shadow var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), transform var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms)));
+  transition: filter var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), background-color var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), border-color var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), box-shadow var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), transform var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms)));
 }
 
 .tag button:hover {

package/dist/overlays/Tooltip.svelte

@@ -49,23 +49,13 @@ function showPopover() {
         tooltipDiv.style.marginBottom = "var(--tooltipGap, 8px)";
     }
     if (renderedHorizontal == "right") {
-        /* Check if the "arrow" will not "hit" the edge... */
-        // Read value of --tooltip-gap
-        if (targetRect.width / 2 > tooltipGap) {
-            tooltipDiv.style.left = `${targetRect.left + targetRect.width / 2}px`;
-        }
-        else {
-            tooltipDiv.style.left = `${targetRect.left - tooltipGap}px`;
-        }
+        // Anchor so that the arrow center (at 2*tooltipGap from tooltip left) aligns with target center
+        tooltipDiv.style.left = `${targetRect.left + targetRect.width / 2 - 2 * tooltipGap}px`;
         tooltipDiv.style.right = "unset";
     }
     else {
-        if (targetRect.width / 2 > tooltipGap) {
-            tooltipDiv.style.right = `${window.innerWidth - (targetRect.left + targetRect.width / 2)}px`;
-        }
-        else {
-            tooltipDiv.style.right = `${window.innerWidth - (targetRect.right + tooltipGap)}px`;
-        }
+        // Anchor so that the arrow center (at 2*tooltipGap from tooltip right) aligns with target center
+        tooltipDiv.style.right = `${window.innerWidth - (targetRect.left + targetRect.width / 2) - 2 * tooltipGap}px`;
         tooltipDiv.style.left = "unset";
     }
     // Top and Left will put us OVER the element (matching top and left corner)

package/dist/sass/_affordances.scss

@@ -15,54 +15,72 @@
   }
 }
 
-@mixin clickable($prefixes...) {
+@mixin clickable-cursor($prefixes...) {
   cursor: fn.var-with-fallbacks(--cursor, append($prefixes, pointer)...);
+}
+
+@mixin clickable-affordance-transition($prefixes...) {
   transition:
     filter fn.var-with-fallbacks(--transition, append($prefixes, 300ms)...),
     background-color
       fn.var-with-fallbacks(--transition, append($prefixes, 300ms)...),
+    border-color
+      fn.var-with-fallbacks(--transition, append($prefixes, 300ms)...),
     box-shadow
       fn.var-with-fallbacks(--transition, append($prefixes, 300ms)...),
     transform fn.var-with-fallbacks(--transition, append($prefixes, 300ms)...);
+}
+
+@mixin clickable-hover-affordance($prefixes...) {
+  filter: fn.var-with-fallbacks(
+    --hover-filter,
+    append($prefixes, brightness(1.05))...
+  );
+  transform: fn.var-with-fallbacks(
+    --hover-transform,
+    append($prefixes, none)...
+  );
+  background-color: color-mix(
+    in oklch,
+    var(--_background-color) var(--hover-base-color-percentage, 90%),
+    var(--hover-color-mix, white)
+      calc(100% - var(--hover-base-color-percentage, 90%))
+  );
+  box-shadow: fn.var-with-fallbacks(
+    --hover-box-shadow,
+    append($prefixes, var(--_box-shadow, none))...
+  );
+}
+
+@mixin clickable-active-affordance($prefixes...) {
+  filter: fn.var-with-fallbacks(
+    --active-filter,
+    append($prefixes, brightness(0.9))...
+  );
+  transform: fn.var-with-fallbacks(
+    --active-transform,
+    append($prefixes, none)...
+  );
+  background-color: color-mix(
+    in oklch,
+    var(--_background-color) var(--active-base-color-percentage, 90%),
+    var(--active-color-mix, black)
+      calc(100% - var(--active-base-color-percentage, 90%))
+  );
+  box-shadow: fn.var-with-fallbacks(
+    --active-box-shadow,
+    append($prefixes, var(--_box-shadow, none))...
+  );
+}
+
+@mixin clickable($prefixes...) {
+  @include clickable-cursor($prefixes...);
+  @include clickable-affordance-transition($prefixes...);
   &:hover {
-    filter: fn.var-with-fallbacks(
-      --hover-filter,
-      append($prefixes, brightness(1.05))...
-    );
-    transform: fn.var-with-fallbacks(
-      --hover-transform,
-      append($prefixes, none)...
-    );
-    background-color: color-mix(
-      in oklch,
-      var(--_background-color) var(--hover-base-color-percentage, 90%),
-      var(--hover-color-mix, white)
-        calc(100% - var(--hover-base-color-percentage, 90%))
-    );
-    box-shadow: fn.var-with-fallbacks(
-      --hover-box-shadow,
-      append($prefixes, var(--_box-shadow, none))...
-    );
+    @include clickable-hover-affordance($prefixes...);
   }
   &:active {
-    filter: fn.var-with-fallbacks(
-      --active-filter,
-      append($prefixes, brightness(0.9))...
-    );
-    transform: fn.var-with-fallbacks(
-      --active-transform,
-      append($prefixes, none)...
-    );
-    background-color: color-mix(
-      in oklch,
-      var(--_background-color) var(--active-base-color-percentage, 90%),
-      var(--active-color-mix, black)
-        calc(100% - var(--active-base-color-percentage, 90%))
-    );
-    box-shadow: fn.var-with-fallbacks(
-      --active-box-shadow,
-      append($prefixes, var(--_box-shadow, none))...
-    );
+    @include clickable-active-affordance($prefixes...);
   }
   &:disabled {
     cursor: fn.var-with-fallbacks(

package/dist/vars/themes/bootstrap.css

@@ -195,7 +195,6 @@
   --tab-fg: #495057;
   --tab-active-bg: #ffffff;
   --tab-active-fg: #212529;
-  --tab-bar-bg: #ffffff;
   --tab-bar-fg: #212529;
 
   /* Misc */

package/dist/vars/themes/canyon.css

@@ -24,11 +24,10 @@
   --input-bg: #fffdfa;
   --input-fg: #33261f;
 
-  --tab-bg: #efdccf;
+  --tab-bg: color-mix(in srgb, var(--surface-bg) 72%, var(--secondary-bg) 28%);
   --tab-fg: #5a4033;
-  --tab-active-bg: #fff8f2;
+  --tab-active-bg: var(--secondary-bg);
   --tab-active-fg: #8f472b;
-  --tab-bar-bg: #f0e1d4;
   --tab-bar-fg: #33261f;
 
   --border-color: #ccb2a1;

package/dist/vars/themes/forest.css

@@ -24,11 +24,10 @@
   --input-bg: #fbfdfb;
   --input-fg: #1f2d26;
 
-  --tab-bg: #dce7da;
+  --tab-bg: color-mix(in srgb, var(--surface-bg) 72%, var(--secondary-bg) 28%);
   --tab-fg: #284032;
-  --tab-active-bg: #f7faf6;
+  --tab-active-bg: var(--secondary-bg);
   --tab-active-fg: #204f39;
-  --tab-bar-bg: #e3ece0;
   --tab-bar-fg: #1f2d26;
 
   --border-color: #a7bcae;

package/dist/vars/themes/light.css

@@ -26,7 +26,6 @@
   --tab-fg: var(--material-color-grey-800);
   --tab-active-bg: #ffffff;
   --tab-active-fg: var(--material-color-blue-700);
-  --tab-bar-bg: var(--material-color-grey-100);
   --tab-bar-fg: var(--material-color-grey-900);
 
   /* Semantic colors for light mode */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",
     "capture:review:matrix": "node scripts/capture-review-matrix.mjs",