opui-css 3.2.1 → 3.3.0

package/dist/op.css

@@ -0,0 +1,72 @@
+/*
+* Open Props
+* Import as many props as you need here.
+* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
+*/
+@custom-media --motionOK      (prefers-reduced-motion: no-preference);
+@custom-media --motionNotOK   (prefers-reduced-motion: reduce);
+@custom-media --opacityOK     (prefers-reduced-transparency: no-preference);
+@custom-media --opacityNotOK  (prefers-reduced-transparency: reduce);
+@custom-media --useDataOK     (prefers-reduced-data: no-preference);
+@custom-media --useDataNotOK  (prefers-reduced-data: reduce);
+@custom-media --OSdark        (prefers-color-scheme: dark);
+@custom-media --OSlight       (prefers-color-scheme: light);
+@custom-media --highContrast  (prefers-contrast: more);
+@custom-media --lowContrast   (prefers-contrast: less);
+@custom-media --portrait      (orientation: portrait);
+@custom-media --landscape     (orientation: landscape);
+@custom-media --HDcolor       (dynamic-range: high);
+@custom-media --touch         (hover: none) and (pointer: coarse);
+@custom-media --stylus        (hover: none) and (pointer: fine);
+@custom-media --pointer       (hover) and (pointer: coarse);
+@custom-media --mouse         (hover) and (pointer: fine);
+@custom-media --xxs-only      (0px <= width <= 240px);
+@custom-media --xxs-n-above   (width >= 240px);
+@custom-media --xxs-n-below   (width < 240px);
+@custom-media --xxs-phone     (--xxs-only) and (--portrait);
+@custom-media --xs-only       (240px <= width <= 360px);
+@custom-media --xs-n-above    (width >= 360px);
+@custom-media --xs-n-below    (width < 360px);
+@custom-media --xs-phone      (--xs-only) and (--portrait);
+@custom-media --sm-only       (360px <= width <= 480px);
+@custom-media --sm-n-above    (width >= 480px);
+@custom-media --sm-n-below    (width < 480px);
+@custom-media --sm-phone      (--sm-only) and (--portrait);
+@custom-media --md-only       (480px <= width <= 768px);
+@custom-media --md-n-above    (width >= 768px);
+@custom-media --md-n-below    (width < 768px);
+@custom-media --md-phone      (--md-only) and (--portrait);
+@custom-media --lg-only       (768px <= width <= 1024px);
+@custom-media --lg-n-above    (width >= 1024px);
+@custom-media --lg-n-below    (width < 1024px);
+@custom-media --lg-phone      (--lg-only) and (--portrait);
+@custom-media --xl-only       (1024px <= width <= 1440px);
+@custom-media --xl-n-above    (width >= 1440px);
+@custom-media --xl-n-below    (width < 1440px);
+@custom-media --xxl-only      (1440px <= width <= 1920px);
+@custom-media --xxl-n-above   (width >= 1920px);
+@custom-media --xxl-n-below   (width < 1920px);
+@layer openprops{
+:where(:root){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-bottom:var(--layer-1);--layer-top:var(--layer-5);--layer-important:2147480000;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:100000px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%)*100000,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%)*100000,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%)*100000,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%)*100000,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%)*100000,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%)*100000,var(--radius-6))}*{--shadow-strength:1%;--shadow-chroma:3%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 #0001;--shadow-1:0 1px 2px -1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight)}@media (prefers-color-scheme:dark){*{--shadow-strength:25%;--shadow-chroma:10%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff1,inset 0 .5px 0 0 #0007}}:where(:root){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-.5,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-spring-1:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,.007,.029 2.2%,.118 4.7%,.625 14.4%,.826 19%,.902,.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,.999 61.6%,.995 71.2%,1);--ease-spring-3:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,.009,.037 1.7%,.153 3.6%,.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,.973,.955 39.2%,.953 41.1%,.957 43.3%,.998 53.3%,1.009 59.1% 63.7%,.998 78.9%,1);--ease-spring-5:linear(0,.01,.04 1.6%,.161 3.3%,.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,.999 29.4%,.955 32.1%,.942,.935 34.9%,.933,.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,.004,.016,.035,.063,.098,.141,.191,.25,.316,.391 36.8%,.563,.766,1 58.8%,.946,.908 69.1%,.895,.885,.879,.878,.879,.885,.895,.908 89.7%,.946,1);--ease-bounce-2:linear(0,.004,.016,.035,.063,.098,.141 15.1%,.25,.391,.562,.765,1,.892 45.2%,.849,.815,.788,.769,.757,.753,.757,.769,.788,.815,.85,.892 75.2%,1 80.2%,.973,.954,.943,.939,.943,.954,.973,1);--ease-bounce-3:linear(0,.004,.016,.035,.062,.098,.141 11.4%,.25,.39,.562,.764,1 30.3%,.847 34.8%,.787,.737,.699,.672,.655,.65,.656,.672,.699,.738,.787,.847 61.7%,1 66.2%,.946,.908,.885 74.2%,.879,.878,.879,.885 79.5%,.908,.946,1 87.4%,.981,.968,.96,.957,.96,.968,.981,1);--ease-bounce-4:linear(0,.004,.016 3%,.062,.141,.25,.391,.562 18.2%,1 24.3%,.81,.676 32.3%,.629,.595,.575,.568,.575,.595,.629,.676 48.2%,.811,1 56.2%,.918,.86,.825,.814,.825,.86,.918,1 77.2%,.94 80.6%,.925,.92,.925,.94 87.5%,1 90.9%,.974,.965,.974,1);--ease-bounce-5:linear(0,.004,.016 2.5%,.063,.141,.25 10.1%,.562,1 20.2%,.783,.627,.534 30.9%,.511,.503,.511,.534 38%,.627,.782,1 48.7%,.892,.815,.769 56.3%,.757,.753,.757,.769 61.3%,.815,.892,1 68.8%,.908 72.4%,.885,.878,.885,.908 79.4%,1 83%,.954 85.5%,.943,.939,.943,.954 90.5%,1 93%,.977,.97,.977,1)}:where(:root){--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:.15}*{--color-1:oklch(98% calc(.03*var(--palette-chroma,1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));--color-2:oklch(97% calc(.06*var(--palette-chroma,1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));--color-3:oklch(93% calc(.1*var(--palette-chroma,1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));--color-4:oklch(84% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));--color-5:oklch(80% calc(.16*var(--palette-chroma,1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));--color-6:oklch(71% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));--color-7:oklch(66% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));--color-8:oklch(58% calc(.21*var(--palette-chroma,1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));--color-9:oklch(53% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));--color-10:oklch(49% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));--color-11:oklch(42% calc(.17*var(--palette-chroma,1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));--color-12:oklch(35% calc(.15*var(--palette-chroma,1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));--color-13:oklch(27% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));--color-14:oklch(20% calc(.09*var(--palette-chroma,1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));--color-15:oklch(16% calc(.07*var(--palette-chroma,1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));--color-16:oklch(10% calc(.05*var(--palette-chroma,1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by))))}}
+@layer openprops{
+:where(:root) {
+	--size-xxs: 240px;
+	--size-xs: 360px;
+	--size-sm: 480px;
+	--size-md: 768px;
+	--size-lg: 1024px;
+	--size-xl: 1440px;
+	--size-xxl: 1920px;
+}}
+@layer openprops{
+:where(:root) {
+	--font-lineheight-00: 0.95;
+	--font-lineheight-0: 1.1;
+	--font-lineheight-1: 1.25;
+	--font-lineheight-2: 1.375;
+	--font-lineheight-3: 1.5;
+	--font-lineheight-4: 1.75;
+	--font-lineheight-5: 2;
+}}
+@layer openprops{
+:where(:root){--oklch-red:25;--oklch-pink:350;--oklch-purple:310;--oklch-violet:290;--oklch-indigo:270;--oklch-blue:240;--oklch-cyan:210;--oklch-teal:185;--oklch-green:145;--oklch-lime:125;--oklch-yellow:100;--oklch-orange:75}}

package/dist/theme-one.css

@@ -1972,8 +1972,8 @@
         &::before {
           background-color: var(--_accent-color);
           border-color: var(--_accent-color);
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 
@@ -1992,8 +1992,8 @@
       @media (prefers-reduced-motion: no-preference) {
         /* Track */
         &::before {
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 
@@ -2014,6 +2014,42 @@
       }
     }
 
+    /* Icons */
+    &:has(.icon-checked, .icon-unchecked) {
+      [role="switch"] {
+        grid-column: 1 / -1;
+        grid-row: 1;
+      }
+
+      &:has([role="switch"]:checked) {
+        .icon-unchecked {
+          display: none;
+        }
+        .icon-checked {
+          display: block;
+        }
+      }
+
+      .icon-checked {
+        display: none;
+      }
+
+      svg {
+        grid-column: 1;
+        grid-row: 1;
+        inline-size: var(--_dot-size);
+        margin-inline-start: calc(
+          var(--_track-width) - var(--_dot-size) - var(--size-1)
+        );
+        pointer-events: none;
+        z-index: 1;
+
+        &.icon-checked {
+          margin-inline-start: var(--size-1);
+        }
+      }
+    }
+
     /* Required dot */
     &:has([required]:not(:checked)) {
       .label:after {

package/dist/theme-two.css

@@ -1922,8 +1922,8 @@
         &::before {
           background-color: var(--_accent-color);
           border-color: var(--_accent-color);
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 
@@ -1942,8 +1942,8 @@
       @media (prefers-reduced-motion: no-preference) {
         /* Track */
         &::before {
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 
@@ -1964,6 +1964,42 @@
       }
     }
 
+    /* Icons */
+    &:has(.icon-checked, .icon-unchecked) {
+      [role="switch"] {
+        grid-column: 1 / -1;
+        grid-row: 1;
+      }
+
+      &:has([role="switch"]:checked) {
+        .icon-unchecked {
+          display: none;
+        }
+        .icon-checked {
+          display: block;
+        }
+      }
+
+      .icon-checked {
+        display: none;
+      }
+
+      svg {
+        grid-column: 1;
+        grid-row: 1;
+        inline-size: var(--_dot-size);
+        margin-inline-start: calc(
+          var(--_track-width) - var(--_dot-size) - var(--size-1)
+        );
+        pointer-events: none;
+        z-index: 1;
+
+        &.icon-checked {
+          margin-inline-start: var(--size-1);
+        }
+      }
+    }
+
     /* Required dot */
     &:has([required]:not(:checked)) {
       .label:after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opui-css",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "private": false,
   "license": "MIT",
   "type": "module",

package/src/themes/theme-one/components/switch.css

@@ -65,8 +65,8 @@
         &::before {
           background-color: var(--_accent-color);
           border-color: var(--_accent-color);
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 
@@ -85,8 +85,8 @@
       @media (prefers-reduced-motion: no-preference) {
         /* Track */
         &::before {
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
             border-color var(--_transition-time) var(--_transition-tf);
         }
 
@@ -107,6 +107,42 @@
       }
     }
 
+    /* Icons */
+    &:has(.icon-checked, .icon-unchecked) {
+      [role="switch"] {
+        grid-column: 1 / -1;
+        grid-row: 1;
+      }
+
+      &:has([role="switch"]:checked) {
+        .icon-unchecked {
+          display: none;
+        }
+        .icon-checked {
+          display: block;
+        }
+      }
+
+      .icon-checked {
+        display: none;
+      }
+
+      svg {
+        grid-column: 1;
+        grid-row: 1;
+        inline-size: var(--_dot-size);
+        margin-inline-start: calc(
+          var(--_track-width) - var(--_dot-size) - var(--size-1)
+        );
+        pointer-events: none;
+        z-index: 1;
+
+        &.icon-checked {
+          margin-inline-start: var(--size-1);
+        }
+      }
+    }
+
     /* Required dot */
     &:has([required]:not(:checked)) {
       .label:after {

package/src/themes/theme-two/components/switch.css

@@ -1,189 +1,225 @@
-@layer components.root {
-  :where(.switch) {
-    --_accent-color: var(--primary);
-    --_accent-contrast: var(--primary-contrast);
 
-    --_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
-    --_dot-inset: var(--size-1) auto auto var(--size-1);
-    --_dot-outline-size: 0;
-    --_dot-size: var(--size-3);
 
-    --_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
-    --_track-height: var(--size-5);
-    --_track-width: var(--size-8);
-    --_transition-tf: var(--ease-4);
-    --_transition-time: 0.2s;
 
-    align-items: center;
-    color: var(--text-color-1);
-    display: inline-grid;
-    gap: 0 var(--size-2);
-    grid-auto-columns: auto;
-    grid-auto-flow: column;
-    inline-size: fit-content;
 
-    input[type="checkbox"][role="switch"] {
-      appearance: none;
-      block-size: var(--_track-height);
-      cursor: pointer;
-      inline-size: var(--_track-width);
-      margin: 0;
-      position: relative;
 
-      /* Track */
-      &::before {
-        background-color: var(--_track-bg-color);
-        block-size: var(--_track-height);
-        border: 1px solid var(--_dot-bg-color);
-        border-radius: 100vmax;
-        content: "";
-        inline-size: var(--_track-width);
-        inset: 0;
-        position: absolute;
-      }
 
-      &:focus-visible {
-        outline-offset: 2px;
-        outline: 2px solid currentColor;
-      }
 
-      /* Dot */
-      &::after {
-        background-color: var(--_dot-bg-color);
-        block-size: var(--_dot-size);
-        border-radius: 100vmax;
-        content: "";
-        inline-size: var(--_dot-size);
-        inset: var(--_dot-inset);
-        outline-offset: -1px;
-        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
-        position: absolute;
-      }
 
-      /* Checked */
-      &:checked {
-        &::before {
-          background-color: var(--_accent-color);
-          border-color: var(--_accent-color);
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
-            border-color var(--_transition-time) var(--_transition-tf);
-        }
 
-        /* Dot */
-        &::after {
-          --_dot-bg-color: var(--_accent-contrast);
-          --_dot-outline-size: calc(var(--size-1) - 1px);
 
-          inset-inline-start: calc(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+            --_dot-outline-size: calc(var(--size-1) + 1px);
+            background-color var(--_transition-time) var(--_transition-tf),
+            background-color var(--_transition-time) var(--_transition-tf),
+            border-color var(--_transition-time) var(--_transition-tf);
+            border-color var(--_transition-time) var(--_transition-tf);
             var(--_track-width) - var(--_dot-size) - var(--size-1)
+          --_dot-bg-color: var(--_accent-contrast);
+          --_dot-outline-size: calc(var(--size-1) - 1px);
+          --_dot-outline-size: calc(var(--size-1) + 1px);
           );
+          }
+          &:active:after {
+          background-color: var(--_accent-color);
+          border-color: var(--_accent-color);
+          display: block;
+          display: none;
+          inset-inline-start: calc(
+          margin-inline-start: var(--size-1);
+          transition:
+          transition:
+          transition: all var(--_transition-time) var(--_transition-tf);
+          var(--_track-width) - var(--_dot-size) - var(--size-1)
+        .icon-checked {
+        .icon-unchecked {
+        );
         }
-      }
-
-      /* Animation */
-      @media (prefers-reduced-motion: no-preference) {
-        /* Track */
-        &::before {
-          transition: background-color var(--_transition-time)
-              var(--_transition-tf),
-            border-color var(--_transition-time) var(--_transition-tf);
         }
-
+        }
+        }
+        }
+        }
+        }
+        }
+        }
+        /* Dot */
         /* Dot */
+        /* Track */
         &::after {
-          transition: all var(--_transition-time) var(--_transition-tf);
-        }
-
+        &::after {
+        &::before {
+        &::before {
         &:active:after {
-          --_dot-outline-size: calc(var(--size-1) + 1px);
-        }
-
         &:checked {
-          &:active:after {
-            --_dot-outline-size: calc(var(--size-1) + 1px);
-          }
-        }
-      }
-    }
-
-    /* Required dot */
-    &:has([required]:not(:checked)) {
-      .label:after {
+        &.icon-checked {
+        background-color: var(--_dot-bg-color);
+        background-color: var(--_track-bg-color);
+        block-size: var(--_dot-size);
+        block-size: var(--_track-height);
+        border-radius: 100vmax;
+        border-radius: 100vmax;
+        border-radius: var(--radius-round);
+        border: 1px solid var(--_dot-bg-color);
+        color: var(--color-9);
         color: var(--red);
+        content: "";
+        content: "";
         content: "*";
+        cursor: not-allowed;
+        display: none;
+        grid-column: 1 / -1;
+        grid-column: 1;
+        grid-column: 1/-1;
+        grid-column: 1/-1;
+        grid-row: 1;
+        grid-row: 1;
+        grid-row: 2;
+        grid-row: 3;
+        inline-size: var(--_dot-size);
+        inline-size: var(--_dot-size);
+        inline-size: var(--_track-width);
         inset: 0 -0.25ex auto auto;
+        inset: 0;
+        inset: var(--_dot-inset);
+        margin-block-start: var(--size-1);
+        margin-inline-start: calc(
+        outline-offset: -1px;
+        outline-offset: 2px;
+        outline: 2px solid currentColor;
+        outline: 2px solid var(--color-9);
+        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
+        padding-inline: 1ex;
+        pointer-events: none;
+        position: absolute;
+        position: absolute;
         position: absolute;
+        z-index: 1;
+      --_dot-size: 0.75rem;
+      --_track-height: var(--size-4);
+      --_track-width: 2.5rem;
+      .icon-checked {
+      .label {
+      .label,
+      .label:after {
+      .supporting-text {
+      .supporting-text {
+      [role="switch"] {
       }
-    }
-
-    /* Disabled */
-    &:has([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
       }
-    }
-
-    /* Label */
-    .label {
+      }
+      }
+      }
+      }
+      }
+      }
+      }
+      }
+      }
+      }
+      }
+      }
+      }
+      @media (prefers-reduced-motion: no-preference) {
+      /* Animation */
+      /* Checked */
+      /* Dot */
+      /* Track */
+      &::after {
+      &::before {
+      &:checked {
+      &:focus-visible {
+      &:has([role="switch"]:checked) {
+      appearance: none;
+      block-size: var(--_track-height);
+      color: var(--text-color-2);
+      cursor: not-allowed;
+      cursor: pointer;
+      font-size: var(--font-size-xs);
+      grid-auto-columns: unset;
+      grid-column: 2;
       grid-column: 2;
       grid-row: 1;
+      grid-row: 2;
+      inline-size: var(--_track-width);
+      input {
+      input {
+      justify-items: center;
+      line-height: 1.5;
+      margin: 0;
       min-width: 0;
+      opacity: 0.64;
       padding-inline: 0 1ex;
       position: relative;
+      position: relative;
+      svg {
+      user-select: none;
       user-select: none;
-    }
-
-    /* Supporting text */
-    .supporting-text {
-      color: var(--text-color-2);
-      font-size: var(--font-size-xs);
-      grid-column: 2;
-      grid-row: 2;
-      line-height: 1.5;
       z-index: 1;
+    --_accent-color: var(--primary);
+    --_accent-contrast: var(--primary-contrast);
+    --_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
+    --_dot-inset: var(--size-1) auto auto var(--size-1);
+    --_dot-outline-size: 0;
+    --_dot-size: var(--size-3);
+    --_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
+    --_track-height: var(--size-5);
+    --_track-width: var(--size-8);
+    --_transition-tf: var(--ease-4);
+    --_transition-time: 0.2s;
+    .label {
+    .supporting-text {
     }
-
-    /* Size */
-    &.small {
-      --_dot-size: 0.75rem;
-      --_track-height: var(--size-4);
-      --_track-width: 2.5rem;
     }
-
-    /* Stacked layout */
-    &.stack {
-      justify-items: center;
-      grid-auto-columns: unset;
-
-      .label {
-        grid-column: 1/-1;
-        grid-row: 2;
-        margin-block-start: var(--size-1);
-        padding-inline: 1ex;
-      }
-
-      .supporting-text {
-        grid-column: 1/-1;
-        grid-row: 3;
-      }
     }
-
+    }
+    }
+    }
+    }
+    }
+    }
+    /* Disabled */
+    /* Icons */
+    /* Label */
+    /* Required dot */
+    /* Size */
+    /* Stacked layout */
+    /* Supporting text */
     /* Validation */
+    &:has(.icon-checked, .icon-unchecked) {
+    &:has([disabled]) {
+    &:has([required]:not(:checked)) {
     &.error {
-      input {
-        outline: 2px solid var(--color-9);
-        border-radius: var(--radius-round);
-      }
-
-      .label,
-      .supporting-text {
-        color: var(--color-9);
-      }
-    }
+    &.small {
+    &.stack {
+    align-items: center;
+    color: var(--text-color-1);
+    display: inline-grid;
+    gap: 0 var(--size-2);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    inline-size: fit-content;
+    input[type="checkbox"][role="switch"] {
+  :where(.switch) {
   }
 }
+@layer components.root {