@box/blueprint-web 16.15.0 → 16.16.0

package/dist/lib-esm/components.css

@@ -14672,7 +14672,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_styles_module_dropdown--a3588{
   min-width:var(--split-button-dropdown-min-width);
 }
-.bp_switch_module_option--a1cfd[data-modern=false]{
+.bp_switch_module_option--21edc[data-modern=false]{
   --switch-height:var(--size-5);
   --switch-margin-left:var(--space-10);
   --switch-margin-right:var(--space-3);
@@ -14684,7 +14684,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --switch-padding-inline:0;
   --switch-width:var(--size-10);
   --switch-outline:var(--outline-focus-on-light);
-  --switch-disabled-opacity:.5;
+  --switch-disabled-opacity:0.5;
   --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
   --thumb-width:var(--size-5);
   --thumb-height:var(--size-5);
@@ -14692,7 +14692,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --thumb-border:var(--border-1) solid var(--border-switch-border);
   --thumb-radius:var(--size-10);
   --thumb-shadow:var(--dropshadow-3);
-  --thumb-transform:translateX(calc(var(--switch-width) - var(--thumb-width)));
+  --thumb-translate-x:calc(var(--switch-width) - var(--thumb-width));
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -14702,7 +14702,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-text-case);
 }
 
-.bp_switch_module_option--a1cfd[data-modern=true]{
+.bp_switch_module_option--21edc[data-modern=true]{
   --switch-height:var(--bp-size-060);
   --switch-margin-left:var(--bp-space-100);
   --switch-margin-right:var(--bp-space-030);
@@ -14714,7 +14714,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --switch-padding-inline:var(--bp-space-005);
   --switch-width:var(--bp-size-110);
   --switch-outline:var(--bp-outline-focus-on-light);
-  --switch-disabled-opacity:.6;
+  --switch-disabled-opacity:0.6;
   --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
   --thumb-width:var(--bp-size-050);
   --thumb-height:var(--bp-size-050);
@@ -14722,7 +14722,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --thumb-border:none;
   --thumb-radius:var(--bp-size-100);
   --thumb-shadow:var(--dropshadow-3);
-  --thumb-transform:translateX(calc(var(--switch-width) - var(--thumb-width) - var(--switch-padding-inline)*2));
+  --thumb-translate-x:calc(var(--switch-width) - var(--thumb-width) - var(--switch-padding-inline)*2);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -14730,7 +14730,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_switch_module_option--a1cfd[data-modern=true]{
+:where(body.is-inter-font) .bp_switch_module_option--21edc[data-modern=true]{
   font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -14741,32 +14741,32 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_switch_module_option--a1cfd{
+.bp_switch_module_option--21edc{
   display:flex;
   flex-direction:column;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_label--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_label--21edc{
   cursor:pointer;
   display:inline-flex;
   flex-direction:row;
   width:fit-content;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_label--a1cfd.bp_switch_module_rightAlign--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_label--21edc.bp_switch_module_rightAlign--21edc{
   flex-direction:row-reverse;
   justify-content:space-between;
   width:unset;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_label--a1cfd:has(.bp_switch_module_switch--a1cfd:disabled){
+.bp_switch_module_option--21edc .bp_switch_module_label--21edc:has(.bp_switch_module_switch--21edc:disabled){
   cursor:default;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_description--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_description--21edc{
   margin-left:var(--description-margin);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_description--a1cfd.bp_switch_module_rightAlign--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_description--21edc.bp_switch_module_rightAlign--21edc{
   margin-left:unset;
   margin-right:var(--description-margin);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_thumb--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_thumb--21edc{
   background-color:var(--thumb-bg);
   border:var(--thumb-border);
   border-radius:var(--thumb-radius);
@@ -14774,11 +14774,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   box-sizing:border-box;
   display:block;
   height:var(--thumb-height);
-  transition:transform .4s;
+  transition:translate .4s;
   width:var(--thumb-width);
-  will-change:transform;
+  will-change:translate;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc{
   all:unset;
   align-items:center;
   background-color:var(--switch-bg-off);
@@ -14794,34 +14794,124 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:var(--switch-width);
   will-change:transition;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd:disabled{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc:disabled{
   opacity:var(--switch-disabled-opacity);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd.bp_switch_module_rightAlign--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc.bp_switch_module_rightAlign--21edc{
   margin-left:var(--switch-margin-left);
   margin-right:unset;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd:focus-visible{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc:focus-visible{
   background-color:var(--switch-bg-off-hover);
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd:hover:not(:disabled){
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc:hover:not(:disabled){
   background-color:var(--switch-bg-off-hover);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true]{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true]{
   background-color:var(--switch-bg-on);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true] .bp_switch_module_thumb--a1cfd{
-  transform:var(--thumb-transform);
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true] .bp_switch_module_thumb--21edc{
+  translate:var(--thumb-translate-x);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true]:focus-visible{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true]:focus-visible{
   background-color:var(--switch-bg-on-hover);
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true]:hover:not(:disabled){
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true]:hover:not(:disabled){
   background-color:var(--switch-bg-on-hover);
 }
 
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc:active .bp_switch_module_thumb--21edc{
+  scale:var(--bp-scale-extra-small);
+  transform-origin:left center;
+  transition:translate .4s, scale var(--bp-duration-short) var(--bp-curve-small-on);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=true]{
+  animation-delay:var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-name:bp_switch_module_bpSwitchToggleOnBackground--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-on);
+  background-color:var(--switch-bg-on);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=true]:not(:focus-visible):hover:not(:disabled){
+  --hovered-transition-color-on:var(--switch-bg-on-hover);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=true] .bp_switch_module_thumb--21edc{
+  animation-delay:0s, var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short), var(--bp-duration-short);
+  animation-name:bp_switch_module_bpSwitchToggleOnStart--21edc, bp_switch_module_bpSwitchToggleOnEnd--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-on), var(--bp-curve-extra-small-on);
+  transform-origin:right center;
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=false]{
+  animation-delay:var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-name:bp_switch_module_bpSwitchToggleOffBackground--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-off);
+  background-color:var(--switch-bg-off);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=false]:not(:focus-visible):hover:not(:disabled){
+  --hovered-transition-color-off:var(--switch-bg-off-hover);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=false] .bp_switch_module_thumb--21edc{
+  animation-delay:0s, var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short), var(--bp-duration-short);
+  animation-name:bp_switch_module_bpSwitchToggleOffStart--21edc, bp_switch_module_bpSwitchToggleOffEnd--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-off), var(--bp-curve-extra-small-off);
+}
+
+@keyframes bp_switch_module_bpSwitchToggleOnStart--21edc{
+  0%{
+    scale:var(--bp-scale-extra-small);
+  }
+  100%{
+    scale:var(--bp-scale-large);
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOffStart--21edc{
+  from{
+    scale:var(--bp-scale-extra-small);
+  }
+  to{
+    scale:var(--bp-scale-large);
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOnBackground--21edc{
+  from{
+    background-color:var(--hovered-transition-color-off, var(--switch-bg-off-hover));
+  }
+  to{
+    background-color:var(--hovered-transition-color-on, var(--switch-bg-on));
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOffBackground--21edc{
+  from{
+    background-color:var(--hovered-transition-color-on, var(--switch-bg-on));
+  }
+  to{
+    background-color:var(--hovered-transition-color-off, var(--switch-bg-off));
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOnEnd--21edc{
+  from{
+    scale:var(--bp-scale-large);
+  }
+  to{
+    scale:var(--bp-scale-default);
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOffEnd--21edc{
+  from{
+    scale:var(--bp-scale-large);
+  }
+  to{
+    scale:var(--bp-scale-default);
+  }
+}
+
 .bp_text_input_module_textInput--91b57.bp_text_input_module_textInput--91b57.bp_text_input_module_textInput--91b57 input:has(+ .bp_text_input_module_iconEnd--91b57){
   padding-inline-end:1.875rem;
 }

package/dist/lib-esm/index.css

@@ -14672,7 +14672,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_styles_module_dropdown--a3588{
   min-width:var(--split-button-dropdown-min-width);
 }
-.bp_switch_module_option--a1cfd[data-modern=false]{
+.bp_switch_module_option--21edc[data-modern=false]{
   --switch-height:var(--size-5);
   --switch-margin-left:var(--space-10);
   --switch-margin-right:var(--space-3);
@@ -14684,7 +14684,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --switch-padding-inline:0;
   --switch-width:var(--size-10);
   --switch-outline:var(--outline-focus-on-light);
-  --switch-disabled-opacity:.5;
+  --switch-disabled-opacity:0.5;
   --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
   --thumb-width:var(--size-5);
   --thumb-height:var(--size-5);
@@ -14692,7 +14692,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --thumb-border:var(--border-1) solid var(--border-switch-border);
   --thumb-radius:var(--size-10);
   --thumb-shadow:var(--dropshadow-3);
-  --thumb-transform:translateX(calc(var(--switch-width) - var(--thumb-width)));
+  --thumb-translate-x:calc(var(--switch-width) - var(--thumb-width));
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -14702,7 +14702,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-text-case);
 }
 
-.bp_switch_module_option--a1cfd[data-modern=true]{
+.bp_switch_module_option--21edc[data-modern=true]{
   --switch-height:var(--bp-size-060);
   --switch-margin-left:var(--bp-space-100);
   --switch-margin-right:var(--bp-space-030);
@@ -14714,7 +14714,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --switch-padding-inline:var(--bp-space-005);
   --switch-width:var(--bp-size-110);
   --switch-outline:var(--bp-outline-focus-on-light);
-  --switch-disabled-opacity:.6;
+  --switch-disabled-opacity:0.6;
   --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
   --thumb-width:var(--bp-size-050);
   --thumb-height:var(--bp-size-050);
@@ -14722,7 +14722,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --thumb-border:none;
   --thumb-radius:var(--bp-size-100);
   --thumb-shadow:var(--dropshadow-3);
-  --thumb-transform:translateX(calc(var(--switch-width) - var(--thumb-width) - var(--switch-padding-inline)*2));
+  --thumb-translate-x:calc(var(--switch-width) - var(--thumb-width) - var(--switch-padding-inline)*2);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -14730,7 +14730,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_switch_module_option--a1cfd[data-modern=true]{
+:where(body.is-inter-font) .bp_switch_module_option--21edc[data-modern=true]{
   font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -14741,32 +14741,32 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_switch_module_option--a1cfd{
+.bp_switch_module_option--21edc{
   display:flex;
   flex-direction:column;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_label--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_label--21edc{
   cursor:pointer;
   display:inline-flex;
   flex-direction:row;
   width:fit-content;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_label--a1cfd.bp_switch_module_rightAlign--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_label--21edc.bp_switch_module_rightAlign--21edc{
   flex-direction:row-reverse;
   justify-content:space-between;
   width:unset;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_label--a1cfd:has(.bp_switch_module_switch--a1cfd:disabled){
+.bp_switch_module_option--21edc .bp_switch_module_label--21edc:has(.bp_switch_module_switch--21edc:disabled){
   cursor:default;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_description--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_description--21edc{
   margin-left:var(--description-margin);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_description--a1cfd.bp_switch_module_rightAlign--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_description--21edc.bp_switch_module_rightAlign--21edc{
   margin-left:unset;
   margin-right:var(--description-margin);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_thumb--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_thumb--21edc{
   background-color:var(--thumb-bg);
   border:var(--thumb-border);
   border-radius:var(--thumb-radius);
@@ -14774,11 +14774,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   box-sizing:border-box;
   display:block;
   height:var(--thumb-height);
-  transition:transform .4s;
+  transition:translate .4s;
   width:var(--thumb-width);
-  will-change:transform;
+  will-change:translate;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc{
   all:unset;
   align-items:center;
   background-color:var(--switch-bg-off);
@@ -14794,34 +14794,124 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:var(--switch-width);
   will-change:transition;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd:disabled{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc:disabled{
   opacity:var(--switch-disabled-opacity);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd.bp_switch_module_rightAlign--a1cfd{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc.bp_switch_module_rightAlign--21edc{
   margin-left:var(--switch-margin-left);
   margin-right:unset;
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd:focus-visible{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc:focus-visible{
   background-color:var(--switch-bg-off-hover);
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd:hover:not(:disabled){
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc:hover:not(:disabled){
   background-color:var(--switch-bg-off-hover);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true]{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true]{
   background-color:var(--switch-bg-on);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true] .bp_switch_module_thumb--a1cfd{
-  transform:var(--thumb-transform);
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true] .bp_switch_module_thumb--21edc{
+  translate:var(--thumb-translate-x);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true]:focus-visible{
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true]:focus-visible{
   background-color:var(--switch-bg-on-hover);
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
 }
-.bp_switch_module_option--a1cfd .bp_switch_module_switch--a1cfd[aria-checked=true]:hover:not(:disabled){
+.bp_switch_module_option--21edc .bp_switch_module_switch--21edc[aria-checked=true]:hover:not(:disabled){
   background-color:var(--switch-bg-on-hover);
 }
 
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc:active .bp_switch_module_thumb--21edc{
+  scale:var(--bp-scale-extra-small);
+  transform-origin:left center;
+  transition:translate .4s, scale var(--bp-duration-short) var(--bp-curve-small-on);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=true]{
+  animation-delay:var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-name:bp_switch_module_bpSwitchToggleOnBackground--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-on);
+  background-color:var(--switch-bg-on);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=true]:not(:focus-visible):hover:not(:disabled){
+  --hovered-transition-color-on:var(--switch-bg-on-hover);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=true] .bp_switch_module_thumb--21edc{
+  animation-delay:0s, var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short), var(--bp-duration-short);
+  animation-name:bp_switch_module_bpSwitchToggleOnStart--21edc, bp_switch_module_bpSwitchToggleOnEnd--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-on), var(--bp-curve-extra-small-on);
+  transform-origin:right center;
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=false]{
+  animation-delay:var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-name:bp_switch_module_bpSwitchToggleOffBackground--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-off);
+  background-color:var(--switch-bg-off);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=false]:not(:focus-visible):hover:not(:disabled){
+  --hovered-transition-color-off:var(--switch-bg-off-hover);
+}
+.bp_switch_module_option--21edc[data-bp-animated=true] .bp_switch_module_switch--21edc[data-bp-was-toggled=true][aria-checked=false] .bp_switch_module_thumb--21edc{
+  animation-delay:0s, var(--bp-duration-short);
+  animation-duration:var(--bp-duration-short), var(--bp-duration-short);
+  animation-name:bp_switch_module_bpSwitchToggleOffStart--21edc, bp_switch_module_bpSwitchToggleOffEnd--21edc;
+  animation-timing-function:var(--bp-curve-extra-small-off), var(--bp-curve-extra-small-off);
+}
+
+@keyframes bp_switch_module_bpSwitchToggleOnStart--21edc{
+  0%{
+    scale:var(--bp-scale-extra-small);
+  }
+  100%{
+    scale:var(--bp-scale-large);
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOffStart--21edc{
+  from{
+    scale:var(--bp-scale-extra-small);
+  }
+  to{
+    scale:var(--bp-scale-large);
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOnBackground--21edc{
+  from{
+    background-color:var(--hovered-transition-color-off, var(--switch-bg-off-hover));
+  }
+  to{
+    background-color:var(--hovered-transition-color-on, var(--switch-bg-on));
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOffBackground--21edc{
+  from{
+    background-color:var(--hovered-transition-color-on, var(--switch-bg-on));
+  }
+  to{
+    background-color:var(--hovered-transition-color-off, var(--switch-bg-off));
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOnEnd--21edc{
+  from{
+    scale:var(--bp-scale-large);
+  }
+  to{
+    scale:var(--bp-scale-default);
+  }
+}
+@keyframes bp_switch_module_bpSwitchToggleOffEnd--21edc{
+  from{
+    scale:var(--bp-scale-large);
+  }
+  to{
+    scale:var(--bp-scale-default);
+  }
+}
+
 .bp_text_input_module_textInput--91b57.bp_text_input_module_textInput--91b57.bp_text_input_module_textInput--91b57 input:has(+ .bp_text_input_module_iconEnd--91b57){
   padding-inline-end:1.875rem;
 }

package/dist/lib-esm/switch/switch-item.js

@@ -1,9 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './switch.module.js';
 
@@ -28,11 +32,17 @@ const Switch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Switch');
+  const [wasToggled, setWasToggled] = useState(false);
   return jsxs("div", {
     className: clsx([styles.option], {
       [styles.disabled]: disabled
     }, className),
     "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     children: [jsxs("label", {
       className: clsx(styles.label, {
         [styles.rightAlign]: isRightAligned
@@ -46,8 +56,13 @@ const Switch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         className: clsx(styles.switch, {
           [styles.rightAlign]: isRightAligned
         }),
+        "data-bp-was-toggled": wasToggled ? 'true' : 'false',
         disabled: disabled,
-        onCheckedChange: onCheckedChange,
+        onCheckedChange: composeEventHandlers(onCheckedChange, () => {
+          if (!wasToggled) {
+            setWasToggled(true);
+          }
+        }),
         children: jsx(RadixSwitch.Thumb, {
           className: styles.thumb
         })

package/dist/lib-esm/switch/switch.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"option":"bp_switch_module_option--a1cfd","label":"bp_switch_module_label--a1cfd","rightAlign":"bp_switch_module_rightAlign--a1cfd","switch":"bp_switch_module_switch--a1cfd","description":"bp_switch_module_description--a1cfd","thumb":"bp_switch_module_thumb--a1cfd"};
+var styles = {"option":"bp_switch_module_option--21edc","label":"bp_switch_module_label--21edc","rightAlign":"bp_switch_module_rightAlign--21edc","switch":"bp_switch_module_switch--21edc","description":"bp_switch_module_description--21edc","thumb":"bp_switch_module_thumb--21edc"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.15.0",
+    "version": "16.16.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -50,7 +50,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.6.3",
+        "@box/blueprint-web-assets": "^5.6.4",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -79,7 +79,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^1.2.3",
+        "@box/storybook-utils": "^1.2.4",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",