@box/blueprint-web 12.50.1 → 12.51.0

package/dist/lib-esm/index.css

@@ -8010,7 +8010,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   min-width:var(--split-button-dropdown-min-width);
 }
 
-.bp_switch_module_option--ee902[data-modern=false]{
+.bp_switch_module_option--d5013[data-modern=false]{
   --switch-width:var(--size-10);
   --switch-height:var(--size-5);
   --switch-margin-left:var(--space-10);
@@ -8019,17 +8019,22 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --thumb-width:var(--size-5);
   --thumb-height:var(--size-5);
   --thumb-bg:var(--surface-switch-surface);
-  --thumb-border:var(--border-1) solid var(--border-switch-border);
+  --thumb-border-off:var(--border-1) solid var(--border-switch-border);
+  --thumb-border-off-hover:var(--border-1) solid var(--border-switch-border);
+  --thumb-border-on:var(--border-1) solid var(--border-switch-border);
+  --thumb-border-on-hover:var(--border-1) solid var(--border-switch-border);
   --thumb-radius:var(--size-10);
   --thumb-shadow:var(--dropshadow-3);
   --switch-bg-off:var(--surface-switch-surface-off);
+  --switch-bg-off-hover:var(--surface-switch-surface-off);
   --switch-bg-on:var(--surface-switch-surface-on);
+  --switch-bg-on-hover:var(--surface-switch-surface-on);
   --switch-radius:var(--size-10);
   --switch-outline:var(--outline-focus-on-light);
   --switch-disabled-opacity:.5;
 }
 
-.bp_switch_module_option--ee902[data-modern=true]{
+.bp_switch_module_option--d5013[data-modern=true]{
   --switch-width:var(--bp-size-110);
   --switch-height:var(--bp-size-060);
   --switch-margin-left:var(--bp-space-100);
@@ -8038,17 +8043,22 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --thumb-width:var(--bp-size-060);
   --thumb-height:var(--bp-size-060);
   --thumb-bg:var(--bp-surface-switch-surface);
-  --thumb-border:var(--bp-border-01) solid var(--bp-border-switch-border);
+  --thumb-border-off:var(--bp-border-02) solid var(--bp-surface-switch-surface-off);
+  --thumb-border-off-hover:var(--bp-border-02) solid var(--bp-surface-switch-surface-off-hover);
+  --thumb-border-on:var(--bp-border-02) solid var(--bp-surface-switch-surface-on);
+  --thumb-border-on-hover:var(--bp-border-02) solid var(--bp-surface-switch-surface-on-hover);
   --thumb-radius:var(--bp-size-100);
   --thumb-shadow:var(--dropshadow-3);
   --switch-bg-off:var(--bp-surface-switch-surface-off);
+  --switch-bg-off-hover:var(--bp-surface-switch-surface-off-hover);
   --switch-bg-on:var(--bp-surface-switch-surface-on);
+  --switch-bg-on-hover:var(--bp-surface-switch-surface-on-hover);
   --switch-radius:var(--bp-size-100);
   --switch-outline:var(--bp-outline-focus-on-light);
   --switch-disabled-opacity:.6;
 }
 
-.bp_switch_module_option--ee902{
+.bp_switch_module_option--d5013{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -8060,28 +8070,31 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_switch_module_option--ee902 .bp_switch_module_label--ee902{
+.bp_switch_module_option--d5013 .bp_switch_module_label--d5013{
   cursor:pointer;
   display:inline-flex;
   flex-direction:row;
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_switch_module_option--ee902 .bp_switch_module_label--ee902.bp_switch_module_rightAlign--ee902{
+.bp_switch_module_option--d5013 .bp_switch_module_label--d5013.bp_switch_module_rightAlign--d5013{
   flex-direction:row-reverse;
   justify-content:space-between;
   width:unset;
 }
-.bp_switch_module_option--ee902 .bp_switch_module_description--ee902{
+.bp_switch_module_option--d5013 .bp_switch_module_label--d5013:has(.bp_switch_module_switch--d5013:disabled){
+  cursor:default;
+}
+.bp_switch_module_option--d5013 .bp_switch_module_description--d5013{
   margin-left:var(--description-margin);
 }
-.bp_switch_module_option--ee902 .bp_switch_module_description--ee902.bp_switch_module_rightAlign--ee902{
+.bp_switch_module_option--d5013 .bp_switch_module_description--d5013.bp_switch_module_rightAlign--d5013{
   margin-left:unset;
   margin-right:var(--description-margin);
 }
-.bp_switch_module_option--ee902 .bp_switch_module_thumb--ee902{
+.bp_switch_module_option--d5013 .bp_switch_module_thumb--d5013{
   background-color:var(--thumb-bg);
-  border:var(--thumb-border);
+  border:var(--thumb-border-off);
   border-radius:var(--thumb-radius);
   box-shadow:var(--thumb-shadow);
   box-sizing:border-box;
@@ -8091,7 +8104,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:var(--thumb-width);
   will-change:transform;
 }
-.bp_switch_module_option--ee902 .bp_switch_module_switch--ee902{
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013{
   all:unset;
   align-items:center;
   background-color:var(--switch-bg-off);
@@ -8105,24 +8118,45 @@ 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--ee902 .bp_switch_module_switch--ee902.bp_switch_module_rightAlign--ee902{
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013:disabled{
+  opacity:var(--switch-disabled-opacity);
+}
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013.bp_switch_module_rightAlign--d5013{
   margin-left:var(--switch-margin-left);
   margin-right:unset;
 }
-.bp_switch_module_option--ee902 .bp_switch_module_switch--ee902:focus-visible{
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013: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--ee902 .bp_switch_module_switch--ee902[aria-checked=true]{
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013:focus-visible .bp_switch_module_thumb--d5013{
+  border:var(--thumb-border-off-hover);
+}
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013:hover:not(:disabled){
+  background-color:var(--switch-bg-off-hover);
+}
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013:hover:not(:disabled) .bp_switch_module_thumb--d5013{
+  border:var(--thumb-border-off-hover);
+}
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013[aria-checked=true]{
   background-color:var(--switch-bg-on);
 }
-.bp_switch_module_option--ee902 .bp_switch_module_switch--ee902[aria-checked=true] .bp_switch_module_thumb--ee902{
-  transform:translateX(calc(var(--switch-width)/2));
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013[aria-checked=true] .bp_switch_module_thumb--d5013{
+  border:var(--thumb-border-on);
+  transform:translateX(calc(var(--switch-width) - var(--thumb-width)));
 }
-.bp_switch_module_option--ee902.bp_switch_module_disabled--ee902 .bp_switch_module_label--ee902{
-  cursor:default;
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013[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--ee902.bp_switch_module_disabled--ee902 .bp_switch_module_switch--ee902{
-  opacity:var(--switch-disabled-opacity);
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013[aria-checked=true]:focus-visible .bp_switch_module_thumb--d5013{
+  border:var(--thumb-border-on-hover);
+}
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013[aria-checked=true]:hover:not(:disabled){
+  background-color:var(--switch-bg-on-hover);
+}
+.bp_switch_module_option--d5013 .bp_switch_module_switch--d5013[aria-checked=true]:hover:not(:disabled) .bp_switch_module_thumb--d5013{
+  border:var(--thumb-border-on-hover);
 }
 
 .bp_text_button_module_textButton--809ae[data-modern=false]{

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.50.1",
+    "version": "12.51.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {