@siemens/ix 2.6.0 → 2.6.1

package/dist/collection/components/toggle/toggle.css

@@ -36,12 +36,11 @@
   /* Handle */
   /* Handle on hover */
   display: inline-flex;
+  flex-direction: row;
   position: relative;
-  height: 2rem;
-  justify-content: flex-start;
-  align-items: center;
-  margin-right: 0.25rem;
-  cursor: pointer;
+  height: 1.5rem;
+  margin-block-start: 0.25rem;
+  margin-block-end: 0.25rem;
 }
 :host *,
 :host *::after,
@@ -78,23 +77,34 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
+:host input[type=checkbox] {
+  display: none;
+}
+:host .wrapper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+}
+:host .label {
+  display: inline-block;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-block-start: 0.125rem;
+  margin-inline-start: 0.5625rem;
+}
 :host .switch {
+  all: unset;
   position: relative;
   display: inline-block;
   width: 3rem;
   min-width: 3rem;
   max-width: 3rem;
   height: 1.5rem;
-  margin-right: 0.25rem;
-}
-:host .switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
 }
 :host .slider {
   position: absolute;
-  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
@@ -102,219 +112,424 @@
   background-color: var(--theme-switch-off--background);
   transition: var(--theme-default-time);
   border-radius: 1.5rem;
-  border: 1px solid transparent;
+  border: 0.0625rem solid transparent;
 }
 :host .slider:before {
   position: absolute;
   content: "";
   height: 1.125rem;
   width: 1.125rem;
-  left: 4px;
-  bottom: 2px;
+  left: 0.125rem;
+  bottom: 0.125rem;
   background-color: var(--theme-switch-thumb-off--background);
   transition: var(--theme-default-time);
   border-radius: 50%;
 }
-:host input {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-:host input:focus-visible + .switch > .slider {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: 1px;
-}
-:host input:checked + .switch > .slider::before {
+:host .switch.checked > .slider::before {
   background-color: var(--theme-switch-thumb-on--background);
-  transform: translateX(1.35rem);
+  transform: translateX(1.5rem);
 }
-:host input + .switch > .slider {
+:host .switch > .slider {
   border-color: var(--theme-switch-off--border-color);
 }
-:host input + .switch:hover > .slider {
+:host .switch:hover > .slider {
   background-color: var(--theme-switch-off--background--hover);
   border-color: var(--theme-switch-off--border-color--hover);
 }
-:host input + .switch:hover > .slider:before {
+:host .switch:hover > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--hover);
 }
-:host input + .switch:active > .slider {
+:host .switch:active > .slider {
   background-color: var(--theme-switch-off--background--active);
   border-color: var(--theme-switch-off--border-color--active);
 }
-:host input + .switch:active > .slider:before {
+:host .switch:active > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--active);
 }
-:host input:checked + .switch > .slider {
+:host .switch.checked > .slider {
   background-color: var(--theme-switch-on--background);
   border-color: var(--theme-switch-on--border-color);
 }
-:host input:checked + .switch:hover > .slider {
+:host .switch.checked:hover > .slider {
   background-color: var(--theme-switch-on--background--hover);
   border-color: var(--theme-switch-on--border-color--hover);
 }
-:host input:checked + .switch:hover > .slider:before {
+:host .switch.checked:hover > .slider:before {
   background-color: var(--theme-switch-thumb-on--background--hover);
 }
-:host input:checked + .switch:active > .slider {
+:host .switch.checked:active > .slider {
   background-color: var(--theme-switch-on--background--active);
   border-color: var(--theme-switch-on--border-color--active);
 }
-:host input:checked + .switch:active > .slider:before {
+:host .switch.checked:active > .slider:before {
   background-color: var(--theme-switch-thumb-on--background--active);
 }
-:host input:indeterminate + .switch > .slider::before {
-  transform: translateX(0.7rem);
+:host .switch.indeterminate > .slider::before {
+  transform: translateX(0.75rem);
 }
-:host .toggle-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+
+:host(:not(.disabled)) .wrapper {
+  cursor: pointer;
+}
+:host(:not(.disabled)) .switch:focus-visible > .slider {
+  outline: 0.0625rem solid var(--theme-color-focus-bdr);
+  outline-offset: 0.0625rem;
 }
 
 :host(.disabled) {
   pointer-events: none;
 }
-:host(.disabled) input + .switch {
+:host(.disabled) .switch {
   opacity: 0.5;
 }
-:host(.disabled) input + .switch > .slider {
+:host(.disabled) .switch > .slider {
   background-color: var(--theme-switch-off--background--disabled);
 }
-:host(.disabled) input + .switch > .slider:before {
+:host(.disabled) .switch > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--disabled);
 }
-:host(.disabled) input:checked + .switch > .slider {
+:host(.disabled) .switch.checked > .slider {
   background-color: var(--theme-switch-on--background--disabled);
 }
-:host(.disabled) input:checked + .switch > .slider:before {
+:host(.disabled) .switch.checked > .slider:before {
   background-color: var(--theme-switch-thumb-on--background--disabled);
 }
-:host(.disabled) .toggle-text {
+:host(.disabled) .label {
   color: var(--theme-color-weak-text);
 }
 
 :host(.ix-info:not(.disabled)) .slider {
-  --theme-switch-off--background: var(--theme-switch-off--background--info);
-  --theme-switch-off--background--hover: var(--theme-switch-off--background--info--hover);
-  --theme-switch-off--background--active: var(--theme-switch-off--background--info--active);
-  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--info);
-  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--info--hover);
-  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--info--active);
-  --theme-switch-off--border-color: var(--theme-switch-off--border-color--info);
-  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--info--hover);
-  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--info--active);
-  --theme-switch-on--background: var(--theme-switch-on--background--info);
-  --theme-switch-on--background--hover: var(--theme-switch-on--background--info--hover);
-  --theme-switch-on--background--active: var(--theme-switch-on--background--info--active);
-  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--info);
-  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--info--hover);
-  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--info--active);
-  --theme-switch-on--border-color: var(--theme-switch-on--border-color--info);
-  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--info--hover);
-  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--info--active);
-  --theme-switch-mixed--background: var(--theme-switch-mixed--background--info);
-  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--info--hover);
-  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--info--active);
-  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--info);
-  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--info--hover);
-  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--info--active);
-  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--info);
-  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--info--hover);
-  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--info--active);
+  --theme-switch-off--background: var(
+    --theme-switch-off--background--info
+  );
+  --theme-switch-off--background--hover: var(
+    --theme-switch-off--background--info--hover
+  );
+  --theme-switch-off--background--active: var(
+    --theme-switch-off--background--info--active
+  );
+  --theme-switch-thumb-off--background: var(
+    --theme-switch-thumb-off--background--info
+  );
+  --theme-switch-thumb-off--background--hover: var(
+    --theme-switch-thumb-off--background--info--hover
+  );
+  --theme-switch-thumb-off--background--active: var(
+    --theme-switch-thumb-off--background--info--active
+  );
+  --theme-switch-off--border-color: var(
+    --theme-switch-off--border-color--info
+  );
+  --theme-switch-off--border-color--hover: var(
+    --theme-switch-off--border-color--info--hover
+  );
+  --theme-switch-off--border-color--active: var(
+    --theme-switch-off--border-color--info--active
+  );
+  --theme-switch-on--background: var(
+    --theme-switch-on--background--info
+  );
+  --theme-switch-on--background--hover: var(
+    --theme-switch-on--background--info--hover
+  );
+  --theme-switch-on--background--active: var(
+    --theme-switch-on--background--info--active
+  );
+  --theme-switch-thumb-on--background: var(
+    --theme-switch-thumb-on--background--info
+  );
+  --theme-switch-thumb-on--background--hover: var(
+    --theme-switch-thumb-on--background--info--hover
+  );
+  --theme-switch-thumb-on--background--active: var(
+    --theme-switch-thumb-on--background--info--active
+  );
+  --theme-switch-on--border-color: var(
+    --theme-switch-on--border-color--info
+  );
+  --theme-switch-on--border-color--hover: var(
+    --theme-switch-on--border-color--info--hover
+  );
+  --theme-switch-on--border-color--active: var(
+    --theme-switch-on--border-color--info--active
+  );
+  --theme-switch-mixed--background: var(
+    --theme-switch-mixed--background--info
+  );
+  --theme-switch-mixed--background--hover: var(
+    --theme-switch-mixed--background--info--hover
+  );
+  --theme-switch-mixed--background--active: var(
+    --theme-switch-mixed--background--info--active
+  );
+  --theme-switch-thumb-mixed--background: var(
+    --theme-switch-thumb-mixed--background--info
+  );
+  --theme-switch-thumb-mixed--background--hover: var(
+    --theme-switch-thumb-mixed--background--info--hover
+  );
+  --theme-switch-thumb-mixed--background--active: var(
+    --theme-switch-thumb-mixed--background--info--active
+  );
+  --theme-switch-mixed--border-color: var(
+    --theme-switch-mixed--border-color--info
+  );
+  --theme-switch-mixed--border-color--hover: var(
+    --theme-switch-mixed--border-color--info--hover
+  );
+  --theme-switch-mixed--border-color--active: var(
+    --theme-switch-mixed--border-color--info--active
+  );
 }
 
 :host(.ix-warning:not(.disabled)) .slider {
-  --theme-switch-off--background: var(--theme-switch-off--background--warning);
-  --theme-switch-off--background--hover: var(--theme-switch-off--background--warning--hover);
-  --theme-switch-off--background--active: var(--theme-switch-off--background--warning--active);
-  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--warning);
-  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--warning--hover);
-  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--warning--active);
-  --theme-switch-off--border-color: var(--theme-switch-off--border-color--warning);
-  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--warning--hover);
-  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--warning--active);
-  --theme-switch-on--background: var(--theme-switch-on--background--warning);
-  --theme-switch-on--background--hover: var(--theme-switch-on--background--warning--hover);
-  --theme-switch-on--background--active: var(--theme-switch-on--background--warning--active);
-  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--warning);
-  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--warning--hover);
-  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--warning--active);
-  --theme-switch-on--border-color: var(--theme-switch-on--border-color--warning);
-  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--warning--hover);
-  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--warning--active);
-  --theme-switch-mixed--background: var(--theme-switch-mixed--background--warning);
-  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--warning--hover);
-  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--warning--active);
-  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--warning);
-  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--warning--hover);
-  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--warning--active);
-  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--warning);
-  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--warning--hover);
-  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--warning--active);
+  --theme-switch-off--background: var(
+    --theme-switch-off--background--warning
+  );
+  --theme-switch-off--background--hover: var(
+    --theme-switch-off--background--warning--hover
+  );
+  --theme-switch-off--background--active: var(
+    --theme-switch-off--background--warning--active
+  );
+  --theme-switch-thumb-off--background: var(
+    --theme-switch-thumb-off--background--warning
+  );
+  --theme-switch-thumb-off--background--hover: var(
+    --theme-switch-thumb-off--background--warning--hover
+  );
+  --theme-switch-thumb-off--background--active: var(
+    --theme-switch-thumb-off--background--warning--active
+  );
+  --theme-switch-off--border-color: var(
+    --theme-switch-off--border-color--warning
+  );
+  --theme-switch-off--border-color--hover: var(
+    --theme-switch-off--border-color--warning--hover
+  );
+  --theme-switch-off--border-color--active: var(
+    --theme-switch-off--border-color--warning--active
+  );
+  --theme-switch-on--background: var(
+    --theme-switch-on--background--warning
+  );
+  --theme-switch-on--background--hover: var(
+    --theme-switch-on--background--warning--hover
+  );
+  --theme-switch-on--background--active: var(
+    --theme-switch-on--background--warning--active
+  );
+  --theme-switch-thumb-on--background: var(
+    --theme-switch-thumb-on--background--warning
+  );
+  --theme-switch-thumb-on--background--hover: var(
+    --theme-switch-thumb-on--background--warning--hover
+  );
+  --theme-switch-thumb-on--background--active: var(
+    --theme-switch-thumb-on--background--warning--active
+  );
+  --theme-switch-on--border-color: var(
+    --theme-switch-on--border-color--warning
+  );
+  --theme-switch-on--border-color--hover: var(
+    --theme-switch-on--border-color--warning--hover
+  );
+  --theme-switch-on--border-color--active: var(
+    --theme-switch-on--border-color--warning--active
+  );
+  --theme-switch-mixed--background: var(
+    --theme-switch-mixed--background--warning
+  );
+  --theme-switch-mixed--background--hover: var(
+    --theme-switch-mixed--background--warning--hover
+  );
+  --theme-switch-mixed--background--active: var(
+    --theme-switch-mixed--background--warning--active
+  );
+  --theme-switch-thumb-mixed--background: var(
+    --theme-switch-thumb-mixed--background--warning
+  );
+  --theme-switch-thumb-mixed--background--hover: var(
+    --theme-switch-thumb-mixed--background--warning--hover
+  );
+  --theme-switch-thumb-mixed--background--active: var(
+    --theme-switch-thumb-mixed--background--warning--active
+  );
+  --theme-switch-mixed--border-color: var(
+    --theme-switch-mixed--border-color--warning
+  );
+  --theme-switch-mixed--border-color--hover: var(
+    --theme-switch-mixed--border-color--warning--hover
+  );
+  --theme-switch-mixed--border-color--active: var(
+    --theme-switch-mixed--border-color--warning--active
+  );
 }
 
 :host(.ix-invalid--required:not(.disabled)) .slider {
-  --theme-switch-off--background: var(--theme-switch-off--background--invalid);
-  --theme-switch-off--background--hover: var(--theme-switch-off--background--invalid--hover);
-  --theme-switch-off--background--active: var(--theme-switch-off--background--invalid--active);
-  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--invalid);
-  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--invalid--hover);
-  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--invalid--active);
-  --theme-switch-off--border-color: var(--theme-switch-off--border-color--invalid);
-  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--invalid--hover);
-  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--invalid--active);
-  --theme-switch-on--background: var(--theme-switch-on--background--invalid);
-  --theme-switch-on--background--hover: var(--theme-switch-on--background--invalid--hover);
-  --theme-switch-on--background--active: var(--theme-switch-on--background--invalid--active);
-  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--invalid);
-  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--invalid--hover);
-  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--invalid--active);
-  --theme-switch-on--border-color: var(--theme-switch-on--border-color--invalid);
-  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--invalid--hover);
-  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--invalid--active);
-  --theme-switch-mixed--background: var(--theme-switch-mixed--background--invalid);
-  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--invalid--hover);
-  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--invalid--active);
-  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--invalid);
-  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--invalid--hover);
-  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--invalid--active);
-  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--invalid);
-  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--invalid--hover);
-  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--invalid--active);
+  --theme-switch-off--background: var(
+    --theme-switch-off--background--invalid
+  );
+  --theme-switch-off--background--hover: var(
+    --theme-switch-off--background--invalid--hover
+  );
+  --theme-switch-off--background--active: var(
+    --theme-switch-off--background--invalid--active
+  );
+  --theme-switch-thumb-off--background: var(
+    --theme-switch-thumb-off--background--invalid
+  );
+  --theme-switch-thumb-off--background--hover: var(
+    --theme-switch-thumb-off--background--invalid--hover
+  );
+  --theme-switch-thumb-off--background--active: var(
+    --theme-switch-thumb-off--background--invalid--active
+  );
+  --theme-switch-off--border-color: var(
+    --theme-switch-off--border-color--invalid
+  );
+  --theme-switch-off--border-color--hover: var(
+    --theme-switch-off--border-color--invalid--hover
+  );
+  --theme-switch-off--border-color--active: var(
+    --theme-switch-off--border-color--invalid--active
+  );
+  --theme-switch-on--background: var(
+    --theme-switch-on--background--invalid
+  );
+  --theme-switch-on--background--hover: var(
+    --theme-switch-on--background--invalid--hover
+  );
+  --theme-switch-on--background--active: var(
+    --theme-switch-on--background--invalid--active
+  );
+  --theme-switch-thumb-on--background: var(
+    --theme-switch-thumb-on--background--invalid
+  );
+  --theme-switch-thumb-on--background--hover: var(
+    --theme-switch-thumb-on--background--invalid--hover
+  );
+  --theme-switch-thumb-on--background--active: var(
+    --theme-switch-thumb-on--background--invalid--active
+  );
+  --theme-switch-on--border-color: var(
+    --theme-switch-on--border-color--invalid
+  );
+  --theme-switch-on--border-color--hover: var(
+    --theme-switch-on--border-color--invalid--hover
+  );
+  --theme-switch-on--border-color--active: var(
+    --theme-switch-on--border-color--invalid--active
+  );
+  --theme-switch-mixed--background: var(
+    --theme-switch-mixed--background--invalid
+  );
+  --theme-switch-mixed--background--hover: var(
+    --theme-switch-mixed--background--invalid--hover
+  );
+  --theme-switch-mixed--background--active: var(
+    --theme-switch-mixed--background--invalid--active
+  );
+  --theme-switch-thumb-mixed--background: var(
+    --theme-switch-thumb-mixed--background--invalid
+  );
+  --theme-switch-thumb-mixed--background--hover: var(
+    --theme-switch-thumb-mixed--background--invalid--hover
+  );
+  --theme-switch-thumb-mixed--background--active: var(
+    --theme-switch-thumb-mixed--background--invalid--active
+  );
+  --theme-switch-mixed--border-color: var(
+    --theme-switch-mixed--border-color--invalid
+  );
+  --theme-switch-mixed--border-color--hover: var(
+    --theme-switch-mixed--border-color--invalid--hover
+  );
+  --theme-switch-mixed--border-color--active: var(
+    --theme-switch-mixed--border-color--invalid--active
+  );
 }
 
 :host(.ix-invalid:not(.disabled)) .slider {
-  --theme-switch-off--background: var(--theme-switch-off--background--invalid);
-  --theme-switch-off--background--hover: var(--theme-switch-off--background--invalid--hover);
-  --theme-switch-off--background--active: var(--theme-switch-off--background--invalid--active);
-  --theme-switch-thumb-off--background: var(--theme-switch-thumb-off--background--invalid);
-  --theme-switch-thumb-off--background--hover: var(--theme-switch-thumb-off--background--invalid--hover);
-  --theme-switch-thumb-off--background--active: var(--theme-switch-thumb-off--background--invalid--active);
-  --theme-switch-off--border-color: var(--theme-switch-off--border-color--invalid);
-  --theme-switch-off--border-color--hover: var(--theme-switch-off--border-color--invalid--hover);
-  --theme-switch-off--border-color--active: var(--theme-switch-off--border-color--invalid--active);
-  --theme-switch-on--background: var(--theme-switch-on--background--invalid);
-  --theme-switch-on--background--hover: var(--theme-switch-on--background--invalid--hover);
-  --theme-switch-on--background--active: var(--theme-switch-on--background--invalid--active);
-  --theme-switch-thumb-on--background: var(--theme-switch-thumb-on--background--invalid);
-  --theme-switch-thumb-on--background--hover: var(--theme-switch-thumb-on--background--invalid--hover);
-  --theme-switch-thumb-on--background--active: var(--theme-switch-thumb-on--background--invalid--active);
-  --theme-switch-on--border-color: var(--theme-switch-on--border-color--invalid);
-  --theme-switch-on--border-color--hover: var(--theme-switch-on--border-color--invalid--hover);
-  --theme-switch-on--border-color--active: var(--theme-switch-on--border-color--invalid--active);
-  --theme-switch-mixed--background: var(--theme-switch-mixed--background--invalid);
-  --theme-switch-mixed--background--hover: var(--theme-switch-mixed--background--invalid--hover);
-  --theme-switch-mixed--background--active: var(--theme-switch-mixed--background--invalid--active);
-  --theme-switch-thumb-mixed--background: var(--theme-switch-thumb-mixed--background--invalid);
-  --theme-switch-thumb-mixed--background--hover: var(--theme-switch-thumb-mixed--background--invalid--hover);
-  --theme-switch-thumb-mixed--background--active: var(--theme-switch-thumb-mixed--background--invalid--active);
-  --theme-switch-mixed--border-color: var(--theme-switch-mixed--border-color--invalid);
-  --theme-switch-mixed--border-color--hover: var(--theme-switch-mixed--border-color--invalid--hover);
-  --theme-switch-mixed--border-color--active: var(--theme-switch-mixed--border-color--invalid--active);
+  --theme-switch-off--background: var(
+    --theme-switch-off--background--invalid
+  );
+  --theme-switch-off--background--hover: var(
+    --theme-switch-off--background--invalid--hover
+  );
+  --theme-switch-off--background--active: var(
+    --theme-switch-off--background--invalid--active
+  );
+  --theme-switch-thumb-off--background: var(
+    --theme-switch-thumb-off--background--invalid
+  );
+  --theme-switch-thumb-off--background--hover: var(
+    --theme-switch-thumb-off--background--invalid--hover
+  );
+  --theme-switch-thumb-off--background--active: var(
+    --theme-switch-thumb-off--background--invalid--active
+  );
+  --theme-switch-off--border-color: var(
+    --theme-switch-off--border-color--invalid
+  );
+  --theme-switch-off--border-color--hover: var(
+    --theme-switch-off--border-color--invalid--hover
+  );
+  --theme-switch-off--border-color--active: var(
+    --theme-switch-off--border-color--invalid--active
+  );
+  --theme-switch-on--background: var(
+    --theme-switch-on--background--invalid
+  );
+  --theme-switch-on--background--hover: var(
+    --theme-switch-on--background--invalid--hover
+  );
+  --theme-switch-on--background--active: var(
+    --theme-switch-on--background--invalid--active
+  );
+  --theme-switch-thumb-on--background: var(
+    --theme-switch-thumb-on--background--invalid
+  );
+  --theme-switch-thumb-on--background--hover: var(
+    --theme-switch-thumb-on--background--invalid--hover
+  );
+  --theme-switch-thumb-on--background--active: var(
+    --theme-switch-thumb-on--background--invalid--active
+  );
+  --theme-switch-on--border-color: var(
+    --theme-switch-on--border-color--invalid
+  );
+  --theme-switch-on--border-color--hover: var(
+    --theme-switch-on--border-color--invalid--hover
+  );
+  --theme-switch-on--border-color--active: var(
+    --theme-switch-on--border-color--invalid--active
+  );
+  --theme-switch-mixed--background: var(
+    --theme-switch-mixed--background--invalid
+  );
+  --theme-switch-mixed--background--hover: var(
+    --theme-switch-mixed--background--invalid--hover
+  );
+  --theme-switch-mixed--background--active: var(
+    --theme-switch-mixed--background--invalid--active
+  );
+  --theme-switch-thumb-mixed--background: var(
+    --theme-switch-thumb-mixed--background--invalid
+  );
+  --theme-switch-thumb-mixed--background--hover: var(
+    --theme-switch-thumb-mixed--background--invalid--hover
+  );
+  --theme-switch-thumb-mixed--background--active: var(
+    --theme-switch-thumb-mixed--background--invalid--active
+  );
+  --theme-switch-mixed--border-color: var(
+    --theme-switch-mixed--border-color--invalid
+  );
+  --theme-switch-mixed--border-color--hover: var(
+    --theme-switch-mixed--border-color--invalid--hover
+  );
+  --theme-switch-mixed--border-color--active: var(
+    --theme-switch-mixed--border-color--invalid--active
+  );
 }