@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/styles/recipes/sidebar-menu.css

@@ -0,0 +1,150 @@
+@layer components {
+  :where([data-control-family="sidebar"][data-slot="group-label"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    color: var(--cui-sidebar-group-label-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    outline: none;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]),
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    gap: calc(var(--spacing) * 1.5);
+    block-size: var(--control-h-md);
+    border-radius: var(--cui-sidebar-menu-button-radius);
+    padding-inline: var(--padding-x);
+    font-size: var(--text-body);
+    background-color: transparent;
+    color: var(--cui-sidebar-menu-button-foreground);
+    outline: none;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
+    block-size: var(--control-h-sm);
+    padding-inline: calc(var(--padding-x) * 0.75);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
+    gap: calc(var(--spacing) * 2);
+    block-size: var(--control-h-lg);
+    padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover),
+    :where([data-control-family="sidebar"][data-slot="menu-action"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-hover-background);
+      color: var(--cui-sidebar-menu-button-hover-foreground);
+      box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-active-background);
+      color: var(--cui-sidebar-menu-button-active-foreground);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:active, [data-popup-open])),
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:active),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    background-color: var(--cui-sidebar-menu-button-active-background);
+    color: var(--cui-sidebar-menu-button-active-foreground);
+    box-shadow: var(--cui-sidebar-menu-button-active-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
+    background-color: var(--background);
+    box-shadow: 0 0 0 1px var(--sidebar-border);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
+      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
+    }
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-indicator="slide"]
+      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
+  ) {
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:disabled, [aria-disabled="true"])),
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="group-content"]) {
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-md) / 2);
+    padding: 0;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-sm) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-lg) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:focus-visible) {
+    outline: 2px solid var(--sidebar-ring);
+    outline-offset: 2px;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="sidebar"][data-slot="menu-action"][data-show-on-hover]) {
+      opacity: 0;
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-item"]:is(:hover, :focus-within) [data-slot="menu-action"]),
+    :where([data-control-family="sidebar"][data-slot="menu-action"][data-popup-open]) {
+      opacity: 1;
+    }
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+      min-inline-size: 44px;
+      min-block-size: 44px;
+      inset-inline-end: 0;
+      inset-block-start: max(22px, calc(var(--control-h-md) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
+      inset-block-start: max(22px, calc(var(--control-h-sm) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
+      inset-block-start: max(22px, calc(var(--control-h-lg) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
+      padding-inline-end: calc(var(--spacing) * 12);
+    }
+  }
+}

package/dist/styles/recipes/sidebar.css

@@ -9,13 +9,18 @@
     background-image: var(--cui-sidebar-wrapper-background-image);
   }
 
-  :where([data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-variant="inset"])) {
+  :where([data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-variant="inset"][data-state])) {
     --cui-sidebar-wrapper-background: var(--sidebar);
   }
 
+  :where([data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-variant="page"][data-state])) {
+    --cui-sidebar-inset-background: transparent;
+  }
+
   :where([data-control-family="sidebar"][data-slot="root"]) {
     --cui-sidebar-inner-background: var(--sidebar);
     --cui-sidebar-inner-background-image: none;
+    --cui-sidebar-inner-backdrop-filter: none;
     --cui-sidebar-inner-border-color: var(--sidebar-border);
     --cui-sidebar-inner-border-width: 0px;
     --cui-sidebar-inner-radius: 0px;
@@ -34,15 +39,13 @@
     color: var(--sidebar-foreground);
   }
 
-  :where([data-control-family="sidebar"][data-slot="gap"]) {
+  :where([data-control-family="sidebar"][data-slot="root"][data-variant="page"][data-state]) {
+    --cui-sidebar-inner-background: transparent;
     background-color: transparent;
-    transition: width var(--duration-base) var(--ease-standard);
   }
 
-  :where([data-control-family="sidebar"][data-slot="container"]) {
-    transition-property: inset-inline-start, inset-inline-end, width;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
+  :where([data-control-family="sidebar"][data-slot="gap"]) {
+    background-color: transparent;
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {
@@ -54,14 +57,28 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="inner"]) {
+    position: relative;
+    isolation: isolate;
     border: var(--cui-sidebar-inner-border-width) solid var(--cui-sidebar-inner-border-color);
     border-radius: var(--cui-sidebar-inner-radius);
+    box-shadow: var(--cui-sidebar-inner-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="inner"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    border-radius: inherit;
+    corner-shape: inherit;
     background-color: var(--cui-sidebar-inner-background);
     background-image: var(--cui-sidebar-inner-background-image);
-    box-shadow: var(--cui-sidebar-inner-shadow);
+    -webkit-backdrop-filter: var(--cui-sidebar-inner-backdrop-filter);
+    backdrop-filter: var(--cui-sidebar-inner-backdrop-filter);
   }
 
-  :where([data-control-family="sidebar"][data-slot="root"][data-variant="floating"]) {
+  :where([data-control-family="sidebar"][data-slot="root"][data-variant="floating"][data-state]) {
     --cui-sidebar-inner-border-width: 1px;
     --cui-sidebar-inner-radius: var(--radius-panel);
     --cui-sidebar-inner-shadow: var(--shadow-md);
@@ -73,9 +90,6 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: 2px 100%;
-    transition-property: --cui-sidebar-rail-divider-background, background-color, translate;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
   }
 
   :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]) {
@@ -87,21 +101,40 @@
       --cui-sidebar-rail-divider-background: var(--sidebar-border);
     }
 
-    :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]:hover) {
+    :where([data-control-family="sidebar"][data-collapsible="offcanvas"] [data-slot="rail"]:not([data-resizable]):hover) {
       background-color: var(--sidebar);
     }
   }
 
+  :where([data-control-family="sidebar"][data-slot="rail"][data-resizable]) {
+    inline-size: calc(var(--spacing) * 2);
+    background: none;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="rail"][data-resizable])::after {
+    content: "";
+    position: absolute;
+    inset-block: 12.5%;
+    inset-inline-start: 50%;
+    inline-size: 1px;
+    background-image: linear-gradient(transparent, var(--cui-sidebar-rail-divider-background), transparent);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="rail"]:is(:focus-visible, [data-resizing="true"])) {
+    --cui-sidebar-rail-divider-background: var(--ring);
+    outline: none;
+  }
+
   :where([data-control-family="sidebar"][data-slot="inset"]) {
     background-color: var(--cui-sidebar-inset-background);
     background-image: var(--cui-sidebar-inset-background-image);
-    transition-property: margin, border-radius, box-shadow;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
   }
 
   @media (width >= 64rem) {
-    :where([data-control-family="sidebar"][data-slot="root"][data-variant="inset"] ~ [data-control-family="sidebar"][data-slot="inset"]) {
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state]
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
       margin: calc(var(--spacing) * 2);
       margin-inline-start: 0;
       border-radius: var(--radius-xl);
@@ -176,99 +209,6 @@
     --cui-track-highlight-radius: var(--cui-sidebar-menu-button-radius);
   }
 
-  :where([data-control-family="sidebar"][data-slot="group-label"]) {
-    gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
-    color: var(--cui-sidebar-group-label-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-    outline: none;
-    transition-property: margin, opacity;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"]) {
-    gap: calc(var(--spacing) * 1.5);
-    block-size: var(--control-h-md);
-    border-radius: var(--cui-sidebar-menu-button-radius);
-    padding-inline: var(--padding-x);
-    font-size: var(--text-body);
-    background-color: transparent;
-    color: var(--cui-sidebar-menu-button-foreground);
-    outline: none;
-    transition-property: width, height, padding, color, background-color, box-shadow;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
-    block-size: var(--control-h-sm);
-    padding-inline: calc(var(--padding-x) * 0.75);
-    font-size: var(--text-label);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
-    gap: calc(var(--spacing) * 2);
-    block-size: var(--control-h-lg);
-    padding-inline: calc(var(--padding-x) * 1.25);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover) {
-      background-color: var(--cui-sidebar-menu-button-hover-background);
-      color: var(--cui-sidebar-menu-button-hover-foreground);
-      box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
-    }
-
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
-      background-color: var(--cui-sidebar-menu-button-active-background);
-      color: var(--cui-sidebar-menu-button-active-foreground);
-    }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"]:active),
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    background-color: var(--cui-sidebar-menu-button-active-background);
-    color: var(--cui-sidebar-menu-button-active-foreground);
-    box-shadow: var(--cui-sidebar-menu-button-active-shadow);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    font-weight: var(--font-weight-medium);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
-    background-color: var(--background);
-    box-shadow: 0 0 0 1px var(--sidebar-border);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
-      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
-    }
-  }
-
-  :where(
-    [data-control-family="sidebar"][data-indicator="slide"]
-      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
-  ) {
-    background-color: transparent;
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
-      background-color: transparent;
-      box-shadow: none;
-    }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
-  :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
-    opacity: 0.5;
-  }
-
   :where([data-control-family="sidebar"][data-slot="root"][data-side="right"] [data-control-family="sidebar"][data-slot="gap"]) {
     rotate: 180deg;
   }
@@ -314,6 +254,12 @@
   inherits: true;
 }
 
+@property --cui-sidebar-inner-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
 @property --cui-sidebar-inner-border-width {
   syntax: "<length>";
   inherits: true;

package/dist/styles/recipes/skeleton.css

@@ -2,11 +2,63 @@
   :where([data-control-family="skeleton"][data-slot="root"]) {
     --cui-skeleton-radius: var(--radius-control);
     --cui-skeleton-background: var(--muted);
+    --cui-skeleton-background-image: none;
+    --cui-skeleton-highlight-background: oklch(from var(--foreground) l c h / 0.06);
+    --cui-skeleton-animation-duration: calc(var(--duration-slow) * 5);
+    --cui-skeleton-easing: var(--ease-standard);
+    --cui-skeleton-pulse-opacity: 0.5;
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
     border-radius: var(--cui-skeleton-radius);
     background-color: var(--cui-skeleton-background);
-    background-image: linear-gradient(100deg, transparent 30%, oklch(from var(--foreground) l c h / 0.06) 50%, transparent 70%);
-    background-size: 220% 100%;
-    animation: shimmer calc(var(--duration-slow) * 5) var(--ease-standard) infinite;
+    background-image: var(--cui-skeleton-background-image);
+  }
+
+  :where([data-control-family="skeleton"][data-slot="root"][data-variant="shimmer"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image: linear-gradient(90deg, transparent, var(--cui-skeleton-highlight-background), transparent);
+    transform: translateX(-100%);
+    animation: cui-skeleton-shimmer var(--cui-skeleton-animation-duration) var(--cui-skeleton-easing) infinite;
+  }
+
+  :where([data-control-family="skeleton"][data-slot="root"][data-variant="pulse"]) {
+    animation: cui-skeleton-pulse var(--cui-skeleton-animation-duration) var(--cui-skeleton-easing) infinite;
+  }
+
+  :where([data-control-family="skeleton"][data-slot="root"][data-variant="none"]) {
+    animation: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-control-family="skeleton"][data-slot="root"]),
+    :where([data-control-family="skeleton"][data-slot="root"])::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion="reduced"] [data-control-family="skeleton"][data-slot="root"]),
+  :where([data-motion="reduced"] [data-control-family="skeleton"][data-slot="root"])::after {
+    animation: none;
+  }
+}
+
+@keyframes cui-skeleton-shimmer {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes cui-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--cui-skeleton-pulse-opacity);
   }
 }
 
@@ -21,3 +73,33 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-skeleton-background-image {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-skeleton-highlight-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-skeleton-animation-duration {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}
+
+@property --cui-skeleton-easing {
+  syntax: "*";
+  inherits: true;
+  initial-value: ease;
+}
+
+@property --cui-skeleton-pulse-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.5;
+}

package/dist/styles/recipes/source-badge.css

@@ -12,9 +12,6 @@
     --cui-source-badge-favicon-radius: var(--radius-sm);
     background: var(--cui-source-badge-background);
     color: var(--cui-source-badge-foreground);
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
     font-weight: var(--font-weight-normal);
   }
 

package/dist/styles/recipes/stepper.css

@@ -4,6 +4,7 @@
     --cui-stepper-indicator-background: var(--background);
     --cui-stepper-indicator-foreground: var(--muted-foreground);
     --cui-stepper-indicator-border-color: var(--border);
+    --cui-stepper-indicator-border-width: 1px;
     --cui-stepper-separator-background: var(--border);
     --cui-stepper-title-foreground: var(--foreground);
   }
@@ -23,7 +24,7 @@
     inline-size: calc(var(--spacing) * 8);
     block-size: calc(var(--spacing) * 8);
     --_stepper-indicator-shadow: 0 0 transparent;
-    border: 1px solid var(--cui-stepper-indicator-border-color);
+    border: var(--cui-stepper-indicator-border-width) solid var(--cui-stepper-indicator-border-color);
     border-radius: var(--cui-stepper-indicator-radius);
     background: var(--cui-stepper-indicator-background);
     color: var(--cui-stepper-indicator-foreground);
@@ -165,6 +166,12 @@
   initial-value: transparent;
 }
 
+@property --cui-stepper-indicator-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-stepper-separator-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/switch.css

@@ -1,8 +1,19 @@
 @layer components {
   :where([data-control-family="switch"][data-slot="root"]) {
-    block-size: calc(var(--spacing) * 5);
-    inline-size: calc(var(--spacing) * 9);
-    padding: calc(var(--spacing) * 0.5);
+    --cui-switch-inline-size: calc(var(--spacing) * 9);
+    --cui-switch-height: calc(var(--spacing) * 5);
+    --cui-switch-padding: calc(var(--spacing) * 0.5);
+    --cui-switch-thumb-inline-size: calc(var(--spacing) * 4);
+    --cui-switch-thumb-press-scale: 1.25 1;
+    --cui-switch-thumb-backdrop-filter: none;
+    --_switch-direction: 1;
+    --_switch-progress: 0;
+    --_switch-travel: calc(var(--cui-switch-inline-size) - var(--cui-switch-padding) * 2 - var(--cui-switch-thumb-inline-size));
+    block-size: var(--cui-switch-height);
+    inline-size: var(--cui-switch-inline-size);
+    padding: var(--cui-switch-padding);
+    touch-action: pan-y;
+    user-select: none;
     --cui-switch-background: oklch(from var(--foreground) l c h / 0.14);
     --cui-switch-hover-background: oklch(from var(--foreground) l c h / 0.2);
     --cui-switch-checked-background: var(--primary);
@@ -13,7 +24,6 @@
     border-radius: calc(infinity * 1px);
     background: var(--cui-switch-background);
     outline: none;
-    transition: background-color var(--duration-base) var(--ease-standard);
   }
 
   :where([data-control-family="switch"][data-slot="root"]:hover) {
@@ -21,10 +31,12 @@
   }
 
   :where([data-control-family="switch"][data-slot="root"]:active) {
-    background: oklch(from var(--foreground) l c h / 0.25);
+    --cui-switch-background: oklch(from var(--foreground) l c h / 0.25);
+    background: var(--cui-switch-background);
   }
 
   :where([data-control-family="switch"][data-slot="root"][data-checked]) {
+    --_switch-progress: 1;
     background: var(--cui-switch-checked-background);
   }
 
@@ -33,7 +45,8 @@
   }
 
   :where([data-control-family="switch"][data-slot="root"][data-checked]:active) {
-    background: oklch(from var(--primary) l c h / 0.8);
+    --cui-switch-checked-background: oklch(from var(--primary) l c h / 0.8);
+    background: var(--cui-switch-checked-background);
   }
 
   :where([data-control-family="switch"][data-slot="root"][data-disabled]) {
@@ -52,9 +65,13 @@
     border-radius: var(--cui-switch-thumb-radius);
     background: var(--cui-switch-thumb-background);
     box-shadow: var(--cui-switch-thumb-shadow);
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
-    transition-property: translate, width;
+    inline-size: var(--cui-switch-thumb-inline-size);
+    block-size: calc(var(--cui-switch-height) - var(--cui-switch-padding) * 2);
+    translate: calc(var(--_switch-direction) * var(--_switch-travel) * var(--_switch-progress)) 0;
+    transform-origin: left center;
+    -webkit-backdrop-filter: var(--cui-switch-thumb-backdrop-filter);
+    backdrop-filter: var(--cui-switch-thumb-backdrop-filter);
+    transition-property: translate, scale, background-color, box-shadow;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
   }
@@ -92,18 +109,39 @@
     opacity: 1;
   }
 
-  :where([data-control-family="switch"][data-slot="thumb"][data-checked]) {
-    --_switch-thumb-translate: calc(var(--spacing) * 4) 0;
-    translate: var(--_switch-thumb-translate);
+  :where([data-control-family="switch"][data-slot="root"]:dir(rtl)) {
+    --_switch-direction: -1;
   }
 
-  :where([data-control-family="switch"][data-slot="root"]:active [data-control-family="switch"][data-slot="thumb"]) {
-    width: calc(var(--spacing) * 5);
+  :where([data-control-family="switch"][data-slot="thumb"][data-checked]),
+  :where([data-control-family="switch"][data-slot="thumb"]:dir(rtl)) {
+    transform-origin: right center;
   }
 
-  :where([data-control-family="switch"][data-slot="root"]:active [data-control-family="switch"][data-slot="thumb"][data-checked]) {
-    --_switch-thumb-translate: calc(var(--spacing) * 3) 0;
-    translate: var(--_switch-thumb-translate);
+  :where([data-control-family="switch"][data-slot="thumb"][data-checked]:dir(rtl)) {
+    transform-origin: left center;
+  }
+
+  :where(
+    [data-control-family="switch"][data-slot="root"]:is(:active, [data-dragging]):not([data-disabled], [data-readonly]) [data-slot="thumb"]
+  ) {
+    scale: var(--cui-switch-thumb-press-scale);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-dragging]) {
+    --_switch-progress: var(--_switch-drag-progress);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-drag-checked="false"]) {
+    background: var(--cui-switch-background);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-drag-checked="true"]) {
+    background: var(--cui-switch-checked-background);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-dragging] [data-slot="thumb"]) {
+    transition-property: scale, background-color, box-shadow;
   }
 }
 
@@ -147,3 +185,37 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-switch-inline-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 36px;
+}
+
+@property --cui-switch-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 20px;
+}
+
+@property --cui-switch-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 2px;
+}
+
+@property --cui-switch-thumb-inline-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+@property --cui-switch-thumb-press-scale {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-switch-thumb-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}