@i-cell/ids-styles 0.0.15-beta.6 → 0.0.15-beta.7

package/dist/components.css

@@ -8894,10 +8894,10 @@
 }
 .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track {
   width: var(--ids-comp-switch-track-size-width-compact);
-  height: var(--ids-comp-switch-handle-size-height-compact);
+  height: calc(var(--ids-comp-switch-handle-size-height-compact) + var(--ids-comp-switch-track-size-padding-y-compact) * 2);
   padding: var(--ids-comp-switch-track-size-padding-y-compact) var(--ids-comp-switch-track-size-padding-x-compact);
   border-radius: var(--ids-comp-switch-track-size-border-radius-compact);
-  box-sizing: content-box;
+  box-sizing: border-box;
 }
 .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
   width: var(--ids-comp-switch-handle-size-width-compact);
@@ -8934,7 +8934,7 @@
   left: 0;
 }
 .ids-switch.ids-switch-compact.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
-  left: calc(var(--ids-comp-switch-track-size-width-compact) - var(--ids-comp-switch-handle-size-width-compact));
+  left: calc(var(--ids-comp-switch-track-size-width-compact) - var(--ids-comp-switch-handle-size-width-compact) - 2 * var(--ids-comp-switch-track-size-padding-x-compact));
 }
 .ids-switch.ids-switch-comfortable {
   gap: var(--ids-comp-switch-container-size-gap-comfortable);
@@ -8947,10 +8947,10 @@
 }
 .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track {
   width: var(--ids-comp-switch-track-size-width-comfortable);
-  height: var(--ids-comp-switch-handle-size-height-comfortable);
+  height: calc(var(--ids-comp-switch-handle-size-height-comfortable) + var(--ids-comp-switch-track-size-padding-y-comfortable) * 2);
   padding: var(--ids-comp-switch-track-size-padding-y-comfortable) var(--ids-comp-switch-track-size-padding-x-comfortable);
   border-radius: var(--ids-comp-switch-track-size-border-radius-comfortable);
-  box-sizing: content-box;
+  box-sizing: border-box;
 }
 .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
   width: var(--ids-comp-switch-handle-size-width-comfortable);
@@ -8987,7 +8987,7 @@
   left: 0;
 }
 .ids-switch.ids-switch-comfortable.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
-  left: calc(var(--ids-comp-switch-track-size-width-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable));
+  left: calc(var(--ids-comp-switch-track-size-width-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable) - 2 * var(--ids-comp-switch-track-size-padding-x-comfortable));
 }
 .ids-switch.ids-switch-spacious {
   gap: var(--ids-comp-switch-container-size-gap-spacious);
@@ -9000,10 +9000,10 @@
 }
 .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track {
   width: var(--ids-comp-switch-track-size-width-spacious);
-  height: var(--ids-comp-switch-handle-size-height-spacious);
+  height: calc(var(--ids-comp-switch-handle-size-height-spacious) + var(--ids-comp-switch-track-size-padding-y-spacious) * 2);
   padding: var(--ids-comp-switch-track-size-padding-y-spacious) var(--ids-comp-switch-track-size-padding-x-spacious);
   border-radius: var(--ids-comp-switch-track-size-border-radius-spacious);
-  box-sizing: content-box;
+  box-sizing: border-box;
 }
 .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
   width: var(--ids-comp-switch-handle-size-width-spacious);
@@ -9040,7 +9040,7 @@
   left: 0;
 }
 .ids-switch.ids-switch-spacious.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
-  left: calc(var(--ids-comp-switch-track-size-width-spacious) - var(--ids-comp-switch-handle-size-width-spacious));
+  left: calc(var(--ids-comp-switch-track-size-width-spacious) - var(--ids-comp-switch-handle-size-width-spacious) - 2 * var(--ids-comp-switch-track-size-padding-x-spacious));
 }
 .ids-switch.ids-switch-dense {
   gap: var(--ids-comp-switch-container-size-gap-dense);
@@ -9053,10 +9053,10 @@
 }
 .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track {
   width: var(--ids-comp-switch-track-size-width-dense);
-  height: var(--ids-comp-switch-handle-size-height-dense);
+  height: calc(var(--ids-comp-switch-handle-size-height-dense) + var(--ids-comp-switch-track-size-padding-y-dense) * 2);
   padding: var(--ids-comp-switch-track-size-padding-y-dense) var(--ids-comp-switch-track-size-padding-x-dense);
   border-radius: var(--ids-comp-switch-track-size-border-radius-dense);
-  box-sizing: content-box;
+  box-sizing: border-box;
 }
 .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
   width: var(--ids-comp-switch-handle-size-width-dense);
@@ -9093,7 +9093,7 @@
   left: 0;
 }
 .ids-switch.ids-switch-dense.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
-  left: calc(var(--ids-comp-switch-track-size-width-dense) - var(--ids-comp-switch-handle-size-width-dense));
+  left: calc(var(--ids-comp-switch-track-size-width-dense) - var(--ids-comp-switch-handle-size-width-dense) - 2 * var(--ids-comp-switch-track-size-padding-x-dense));
 }
 .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track {
   background-color: var(--ids-comp-switch-track-off-color-bg-surface-default);