npm - @i-cell/ids-styles - Versions diffs - 0.0.25 → 0.0.27 - Mend

@i-cell/ids-styles 0.0.25 → 0.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/button/button-group.css +22 -0
package/dist/button/button-group.min.css +1 -0
package/dist/button/button-group.plugin.js +26 -0
package/dist/button/button.css +74 -74
package/dist/button/button.min.css +1 -1
package/dist/button/button.plugin.js +74 -74
package/dist/components.css +267 -507
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +306 -560
package/dist/form-elements/message/message.css +12 -12
package/dist/form-elements/message/message.min.css +1 -1
package/dist/form-elements/message/message.plugin.js +12 -12
package/dist/radio/radio.css +154 -154
package/dist/radio/radio.min.css +1 -1
package/dist/radio/radio.plugin.js +199 -222
package/dist/segmented-control/segmented-control-toggle.css +117 -228
package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
package/dist/segmented-control/segmented-control-toggle.plugin.js +206 -334
package/dist/segmented-control/segmented-control.css +4 -267
package/dist/segmented-control/segmented-control.min.css +1 -1
package/dist/segmented-control/segmented-control.plugin.js +4 -252
package/dist/segmented-control-toggle/segmented-control-toggle.css +563 -0
package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -0
package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +558 -0
package/package.json +2 -2

package/dist/components.css CHANGED Viewed

@@ -506,6 +506,29 @@
   background: var(--ids-comp-avatar-color-bg-dark-default);
 }
+.ids-button-group {
+  display: inline-flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+}
+.ids-button-group.ids-button-group-compact {
+  padding: var(--ids-comp-button-group-size-padding-y-compact) var(--ids-comp-button-group-size-padding-x-compact);
+  gap: var(--ids-comp-button-group-size-column-gap-compact) var(--ids-comp-button-group-size-row-gap-compact);
+}
+.ids-button-group.ids-button-group-comfortable {
+  padding: var(--ids-comp-button-group-size-padding-y-comfortable) var(--ids-comp-button-group-size-padding-x-comfortable);
+  gap: var(--ids-comp-button-group-size-column-gap-comfortable) var(--ids-comp-button-group-size-row-gap-comfortable);
+}
+.ids-button-group.ids-button-group-spacious {
+  padding: var(--ids-comp-button-group-size-padding-y-spacious) var(--ids-comp-button-group-size-padding-x-spacious);
+  gap: var(--ids-comp-button-group-size-column-gap-spacious) var(--ids-comp-button-group-size-row-gap-spacious);
+}
+.ids-button-group.ids-button-group-dense {
+  padding: var(--ids-comp-button-group-size-padding-y-dense) var(--ids-comp-button-group-size-padding-x-dense);
+  gap: var(--ids-comp-button-group-size-column-gap-dense) var(--ids-comp-button-group-size-row-gap-dense);
+}
 .ids-button {
   flex-shrink: 0;
   width: fit-content;
@@ -641,7 +664,7 @@
 .ids-button.ids-button-filled.ids-button-primary:hover {
   color: var(--ids-comp-button-filled-color-fg-label-primary-hovered);
   background: var(--ids-comp-button-filled-color-bg-primary-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-primary-default);
+  border-color: var(--ids-comp-button-filled-color-border-primary-hovered);
 }
 .ids-button.ids-button-filled.ids-button-primary:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-primary-hovered);
@@ -649,7 +672,7 @@
 .ids-button.ids-button-filled.ids-button-primary:focus, .ids-button.ids-button-filled.ids-button-primary:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-primary-focused);
   background: var(--ids-comp-button-filled-color-bg-primary-focused);
-  border-color: var(--ids-comp-button-filled-color-border-primary-default);
+  border-color: var(--ids-comp-button-filled-color-border-primary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-primary:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-primary:focus-visible > .ids-icon {
@@ -658,7 +681,7 @@
 .ids-button.ids-button-filled.ids-button-primary:active {
   color: var(--ids-comp-button-filled-color-fg-label-primary-pressed);
   background: var(--ids-comp-button-filled-color-bg-primary-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-primary-default);
+  border-color: var(--ids-comp-button-filled-color-border-primary-pressed);
 }
 .ids-button.ids-button-filled.ids-button-primary:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-primary-pressed);
@@ -666,7 +689,7 @@
 .ids-button.ids-button-filled.ids-button-primary:disabled {
   color: var(--ids-comp-button-filled-color-fg-label-primary-disabled);
   background: var(--ids-comp-button-filled-color-bg-primary-disabled);
-  border-color: var(--ids-comp-button-filled-color-border-primary-default);
+  border-color: var(--ids-comp-button-filled-color-border-primary-disabled);
 }
 .ids-button.ids-button-filled.ids-button-primary:disabled > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-primary-disabled);
@@ -682,7 +705,7 @@
 .ids-button.ids-button-filled.ids-button-secondary:hover {
   color: var(--ids-comp-button-filled-color-fg-label-secondary-hovered);
   background: var(--ids-comp-button-filled-color-bg-secondary-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-secondary-default);
+  border-color: var(--ids-comp-button-filled-color-border-secondary-hovered);
 }
 .ids-button.ids-button-filled.ids-button-secondary:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-secondary-hovered);
@@ -690,7 +713,7 @@
 .ids-button.ids-button-filled.ids-button-secondary:focus, .ids-button.ids-button-filled.ids-button-secondary:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-secondary-focused);
   background: var(--ids-comp-button-filled-color-bg-secondary-focused);
-  border-color: var(--ids-comp-button-filled-color-border-secondary-default);
+  border-color: var(--ids-comp-button-filled-color-border-secondary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-secondary:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-secondary:focus-visible > .ids-icon {
@@ -699,7 +722,7 @@
 .ids-button.ids-button-filled.ids-button-secondary:active {
   color: var(--ids-comp-button-filled-color-fg-label-secondary-pressed);
   background: var(--ids-comp-button-filled-color-bg-secondary-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-secondary-default);
+  border-color: var(--ids-comp-button-filled-color-border-secondary-pressed);
 }
 .ids-button.ids-button-filled.ids-button-secondary:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-secondary-pressed);
@@ -707,7 +730,7 @@
 .ids-button.ids-button-filled.ids-button-secondary:disabled {
   color: var(--ids-comp-button-filled-color-fg-label-secondary-disabled);
   background: var(--ids-comp-button-filled-color-bg-secondary-disabled);
-  border-color: var(--ids-comp-button-filled-color-border-secondary-default);
+  border-color: var(--ids-comp-button-filled-color-border-secondary-disabled);
 }
 .ids-button.ids-button-filled.ids-button-secondary:disabled > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-secondary-disabled);
@@ -723,7 +746,7 @@
 .ids-button.ids-button-filled.ids-button-brand:hover {
   color: var(--ids-comp-button-filled-color-fg-label-brand-hovered);
   background: var(--ids-comp-button-filled-color-bg-brand-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-brand-default);
+  border-color: var(--ids-comp-button-filled-color-border-brand-hovered);
 }
 .ids-button.ids-button-filled.ids-button-brand:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-brand-hovered);
@@ -731,7 +754,7 @@
 .ids-button.ids-button-filled.ids-button-brand:focus, .ids-button.ids-button-filled.ids-button-brand:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-brand-focused);
   background: var(--ids-comp-button-filled-color-bg-brand-focused);
-  border-color: var(--ids-comp-button-filled-color-border-brand-default);
+  border-color: var(--ids-comp-button-filled-color-border-brand-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-brand:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-brand:focus-visible > .ids-icon {
@@ -740,7 +763,7 @@
 .ids-button.ids-button-filled.ids-button-brand:active {
   color: var(--ids-comp-button-filled-color-fg-label-brand-pressed);
   background: var(--ids-comp-button-filled-color-bg-brand-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-brand-default);
+  border-color: var(--ids-comp-button-filled-color-border-brand-pressed);
 }
 .ids-button.ids-button-filled.ids-button-brand:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-brand-pressed);
@@ -748,7 +771,7 @@
 .ids-button.ids-button-filled.ids-button-brand:disabled {
   color: var(--ids-comp-button-filled-color-fg-label-brand-disabled);
   background: var(--ids-comp-button-filled-color-bg-brand-disabled);
-  border-color: var(--ids-comp-button-filled-color-border-brand-default);
+  border-color: var(--ids-comp-button-filled-color-border-brand-disabled);
 }
 .ids-button.ids-button-filled.ids-button-brand:disabled > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-brand-disabled);
@@ -764,7 +787,7 @@
 .ids-button.ids-button-filled.ids-button-error:hover {
   color: var(--ids-comp-button-filled-color-fg-label-error-hovered);
   background: var(--ids-comp-button-filled-color-bg-error-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-error-default);
+  border-color: var(--ids-comp-button-filled-color-border-error-hovered);
 }
 .ids-button.ids-button-filled.ids-button-error:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-error-hovered);
@@ -772,7 +795,7 @@
 .ids-button.ids-button-filled.ids-button-error:focus, .ids-button.ids-button-filled.ids-button-error:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-error-focused);
   background: var(--ids-comp-button-filled-color-bg-error-focused);
-  border-color: var(--ids-comp-button-filled-color-border-error-default);
+  border-color: var(--ids-comp-button-filled-color-border-error-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-error:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-error:focus-visible > .ids-icon {
@@ -781,7 +804,7 @@
 .ids-button.ids-button-filled.ids-button-error:active {
   color: var(--ids-comp-button-filled-color-fg-label-error-pressed);
   background: var(--ids-comp-button-filled-color-bg-error-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-error-default);
+  border-color: var(--ids-comp-button-filled-color-border-error-pressed);
 }
 .ids-button.ids-button-filled.ids-button-error:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-error-pressed);
@@ -797,7 +820,7 @@
 .ids-button.ids-button-filled.ids-button-success:hover {
   color: var(--ids-comp-button-filled-color-fg-label-success-hovered);
   background: var(--ids-comp-button-filled-color-bg-success-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-success-default);
+  border-color: var(--ids-comp-button-filled-color-border-success-hovered);
 }
 .ids-button.ids-button-filled.ids-button-success:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-success-hovered);
@@ -805,7 +828,7 @@
 .ids-button.ids-button-filled.ids-button-success:focus, .ids-button.ids-button-filled.ids-button-success:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-success-focused);
   background: var(--ids-comp-button-filled-color-bg-success-focused);
-  border-color: var(--ids-comp-button-filled-color-border-success-default);
+  border-color: var(--ids-comp-button-filled-color-border-success-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-success:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-success:focus-visible > .ids-icon {
@@ -814,7 +837,7 @@
 .ids-button.ids-button-filled.ids-button-success:active {
   color: var(--ids-comp-button-filled-color-fg-label-success-pressed);
   background: var(--ids-comp-button-filled-color-bg-success-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-success-default);
+  border-color: var(--ids-comp-button-filled-color-border-success-pressed);
 }
 .ids-button.ids-button-filled.ids-button-success:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-success-pressed);
@@ -830,7 +853,7 @@
 .ids-button.ids-button-filled.ids-button-warning:hover {
   color: var(--ids-comp-button-filled-color-fg-label-warning-hovered);
   background: var(--ids-comp-button-filled-color-bg-warning-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-warning-default);
+  border-color: var(--ids-comp-button-filled-color-border-warning-hovered);
 }
 .ids-button.ids-button-filled.ids-button-warning:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-warning-hovered);
@@ -838,7 +861,7 @@
 .ids-button.ids-button-filled.ids-button-warning:focus, .ids-button.ids-button-filled.ids-button-warning:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-warning-focused);
   background: var(--ids-comp-button-filled-color-bg-warning-focused);
-  border-color: var(--ids-comp-button-filled-color-border-warning-default);
+  border-color: var(--ids-comp-button-filled-color-border-warning-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-warning:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-warning:focus-visible > .ids-icon {
@@ -847,7 +870,7 @@
 .ids-button.ids-button-filled.ids-button-warning:active {
   color: var(--ids-comp-button-filled-color-fg-label-warning-pressed);
   background: var(--ids-comp-button-filled-color-bg-warning-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-warning-default);
+  border-color: var(--ids-comp-button-filled-color-border-warning-pressed);
 }
 .ids-button.ids-button-filled.ids-button-warning:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-warning-pressed);
@@ -863,7 +886,7 @@
 .ids-button.ids-button-filled.ids-button-light:hover {
   color: var(--ids-comp-button-filled-color-fg-label-light-hovered);
   background: var(--ids-comp-button-filled-color-bg-light-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-light-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-hovered);
 }
 .ids-button.ids-button-filled.ids-button-light:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-light-hovered);
@@ -871,7 +894,7 @@
 .ids-button.ids-button-filled.ids-button-light:focus, .ids-button.ids-button-filled.ids-button-light:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-light-focused);
   background: var(--ids-comp-button-filled-color-bg-light-focused);
-  border-color: var(--ids-comp-button-filled-color-border-light-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
 }
 .ids-button.ids-button-filled.ids-button-light:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-light:focus-visible > .ids-icon {
@@ -880,7 +903,7 @@
 .ids-button.ids-button-filled.ids-button-light:active {
   color: var(--ids-comp-button-filled-color-fg-label-light-pressed);
   background: var(--ids-comp-button-filled-color-bg-light-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-light-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-pressed);
 }
 .ids-button.ids-button-filled.ids-button-light:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-light-pressed);
@@ -888,7 +911,7 @@
 .ids-button.ids-button-filled.ids-button-light:disabled {
   color: var(--ids-comp-button-filled-color-fg-label-light-disabled);
   background: var(--ids-comp-button-filled-color-bg-light-disabled);
-  border-color: var(--ids-comp-button-filled-color-border-light-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-disabled);
 }
 .ids-button.ids-button-filled.ids-button-light:disabled > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-light-disabled);
@@ -904,7 +927,7 @@
 .ids-button.ids-button-filled.ids-button-light-fixed:hover {
   color: var(--ids-comp-button-filled-color-fg-label-light-fixed-hovered);
   background: var(--ids-comp-button-filled-color-bg-light-fixed-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-fixed-hovered);
 }
 .ids-button.ids-button-filled.ids-button-light-fixed:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-hovered);
@@ -912,7 +935,7 @@
 .ids-button.ids-button-filled.ids-button-light-fixed:focus, .ids-button.ids-button-filled.ids-button-light-fixed:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-light-fixed-focused);
   background: var(--ids-comp-button-filled-color-bg-light-fixed-focused);
-  border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-fixed-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-light-fixed:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-light-fixed:focus-visible > .ids-icon {
@@ -921,7 +944,7 @@
 .ids-button.ids-button-filled.ids-button-light-fixed:active {
   color: var(--ids-comp-button-filled-color-fg-label-light-fixed-pressed);
   background: var(--ids-comp-button-filled-color-bg-light-fixed-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-fixed-pressed);
 }
 .ids-button.ids-button-filled.ids-button-light-fixed:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-pressed);
@@ -929,7 +952,7 @@
 .ids-button.ids-button-filled.ids-button-light-fixed:disabled {
   color: var(--ids-comp-button-filled-color-fg-label-light-fixed-disabled);
   background: var(--ids-comp-button-filled-color-bg-light-fixed-disabled);
-  border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-filled-color-border-light-fixed-disabled);
 }
 .ids-button.ids-button-filled.ids-button-light-fixed:disabled > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-disabled);
@@ -945,7 +968,7 @@
 .ids-button.ids-button-filled.ids-button-dark:hover {
   color: var(--ids-comp-button-filled-color-fg-label-dark-hovered);
   background: var(--ids-comp-button-filled-color-bg-dark-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-dark-default);
+  border-color: var(--ids-comp-button-filled-color-border-dark-hovered);
 }
 .ids-button.ids-button-filled.ids-button-dark:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-dark-hovered);
@@ -953,7 +976,7 @@
 .ids-button.ids-button-filled.ids-button-dark:focus, .ids-button.ids-button-filled.ids-button-dark:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-dark-focused);
   background: var(--ids-comp-button-filled-color-bg-dark-focused);
-  border-color: var(--ids-comp-button-filled-color-border-dark-default);
+  border-color: var(--ids-comp-button-filled-color-border-dark-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-dark:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-dark:focus-visible > .ids-icon {
@@ -962,7 +985,7 @@
 .ids-button.ids-button-filled.ids-button-dark:active {
   color: var(--ids-comp-button-filled-color-fg-label-dark-pressed);
   background: var(--ids-comp-button-filled-color-bg-dark-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-dark-default);
+  border-color: var(--ids-comp-button-filled-color-border-dark-pressed);
 }
 .ids-button.ids-button-filled.ids-button-dark:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-dark-pressed);
@@ -970,7 +993,7 @@
 .ids-button.ids-button-filled.ids-button-dark:disabled {
   color: var(--ids-comp-button-filled-color-fg-label-dark-disabled);
   background: var(--ids-comp-button-filled-color-bg-dark-disabled);
-  border-color: var(--ids-comp-button-filled-color-border-dark-default);
+  border-color: var(--ids-comp-button-filled-color-border-dark-disabled);
 }
 .ids-button.ids-button-filled.ids-button-dark:disabled > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-dark-disabled);
@@ -986,7 +1009,7 @@
 .ids-button.ids-button-filled.ids-button-surface:hover {
   color: var(--ids-comp-button-filled-color-fg-label-surface-hovered);
   background: var(--ids-comp-button-filled-color-bg-surface-hovered);
-  border-color: var(--ids-comp-button-filled-color-border-surface-default);
+  border-color: var(--ids-comp-button-filled-color-border-surface-hovered);
 }
 .ids-button.ids-button-filled.ids-button-surface:hover > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-surface-hovered);
@@ -994,7 +1017,7 @@
 .ids-button.ids-button-filled.ids-button-surface:focus, .ids-button.ids-button-filled.ids-button-surface:focus-visible {
   color: var(--ids-comp-button-filled-color-fg-label-surface-focused);
   background: var(--ids-comp-button-filled-color-bg-surface-focused);
-  border-color: var(--ids-comp-button-filled-color-border-surface-default);
+  border-color: var(--ids-comp-button-filled-color-border-surface-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-filled.ids-button-surface:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-surface:focus-visible > .ids-icon {
@@ -1003,7 +1026,7 @@
 .ids-button.ids-button-filled.ids-button-surface:active {
   color: var(--ids-comp-button-filled-color-fg-label-surface-pressed);
   background: var(--ids-comp-button-filled-color-bg-surface-pressed);
-  border-color: var(--ids-comp-button-filled-color-border-surface-default);
+  border-color: var(--ids-comp-button-filled-color-border-surface-pressed);
 }
 .ids-button.ids-button-filled.ids-button-surface:active > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-surface-pressed);
@@ -1011,7 +1034,7 @@
 .ids-button.ids-button-filled.ids-button-surface:disabled {
   color: var(--ids-comp-button-filled-color-fg-label-surface-disabled);
   background: var(--ids-comp-button-filled-color-bg-surface-disabled);
-  border-color: var(--ids-comp-button-filled-color-border-surface-default);
+  border-color: var(--ids-comp-button-filled-color-border-surface-disabled);
 }
 .ids-button.ids-button-filled.ids-button-surface:disabled > .ids-icon {
   color: var(--ids-comp-button-filled-color-fg-icon-surface-disabled);
@@ -1027,7 +1050,7 @@
 .ids-button.ids-button-outlined.ids-button-primary:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-primary-hovered);
   background: var(--ids-comp-button-outlined-color-bg-primary-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-primary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-primary-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-primary:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-primary-hovered);
@@ -1035,7 +1058,7 @@
 .ids-button.ids-button-outlined.ids-button-primary:focus, .ids-button.ids-button-outlined.ids-button-primary:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-primary-focused);
   background: var(--ids-comp-button-outlined-color-bg-primary-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-primary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-primary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-primary:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-primary:focus-visible > .ids-icon {
@@ -1044,7 +1067,7 @@
 .ids-button.ids-button-outlined.ids-button-primary:active {
   color: var(--ids-comp-button-outlined-color-fg-label-primary-pressed);
   background: var(--ids-comp-button-outlined-color-bg-primary-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-primary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-primary-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-primary:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-primary-pressed);
@@ -1052,7 +1075,7 @@
 .ids-button.ids-button-outlined.ids-button-primary:disabled {
   color: var(--ids-comp-button-outlined-color-fg-label-primary-disabled);
   background: var(--ids-comp-button-outlined-color-bg-primary-disabled);
-  border-color: var(--ids-comp-button-outlined-color-border-primary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-primary-disabled);
 }
 .ids-button.ids-button-outlined.ids-button-primary:disabled > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-primary-disabled);
@@ -1068,7 +1091,7 @@
 .ids-button.ids-button-outlined.ids-button-secondary:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-secondary-hovered);
   background: var(--ids-comp-button-outlined-color-bg-secondary-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-secondary-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-secondary:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-secondary-hovered);
@@ -1076,7 +1099,7 @@
 .ids-button.ids-button-outlined.ids-button-secondary:focus, .ids-button.ids-button-outlined.ids-button-secondary:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-secondary-focused);
   background: var(--ids-comp-button-outlined-color-bg-secondary-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-secondary-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-secondary:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-secondary:focus-visible > .ids-icon {
@@ -1085,7 +1108,7 @@
 .ids-button.ids-button-outlined.ids-button-secondary:active {
   color: var(--ids-comp-button-outlined-color-fg-label-secondary-pressed);
   background: var(--ids-comp-button-outlined-color-bg-secondary-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-secondary-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-secondary:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-secondary-pressed);
@@ -1093,7 +1116,7 @@
 .ids-button.ids-button-outlined.ids-button-secondary:disabled {
   color: var(--ids-comp-button-outlined-color-fg-label-secondary-disabled);
   background: var(--ids-comp-button-outlined-color-bg-secondary-disabled);
-  border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
+  border-color: var(--ids-comp-button-outlined-color-border-secondary-disabled);
 }
 .ids-button.ids-button-outlined.ids-button-secondary:disabled > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-secondary-disabled);
@@ -1109,7 +1132,7 @@
 .ids-button.ids-button-outlined.ids-button-brand:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-brand-hovered);
   background: var(--ids-comp-button-outlined-color-bg-brand-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-brand-default);
+  border-color: var(--ids-comp-button-outlined-color-border-brand-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-brand:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-brand-hovered);
@@ -1117,7 +1140,7 @@
 .ids-button.ids-button-outlined.ids-button-brand:focus, .ids-button.ids-button-outlined.ids-button-brand:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-brand-focused);
   background: var(--ids-comp-button-outlined-color-bg-brand-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-brand-default);
+  border-color: var(--ids-comp-button-outlined-color-border-brand-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-brand:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-brand:focus-visible > .ids-icon {
@@ -1126,7 +1149,7 @@
 .ids-button.ids-button-outlined.ids-button-brand:active {
   color: var(--ids-comp-button-outlined-color-fg-label-brand-pressed);
   background: var(--ids-comp-button-outlined-color-bg-brand-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-brand-default);
+  border-color: var(--ids-comp-button-outlined-color-border-brand-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-brand:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-brand-pressed);
@@ -1134,7 +1157,7 @@
 .ids-button.ids-button-outlined.ids-button-brand:disabled {
   color: var(--ids-comp-button-outlined-color-fg-label-brand-disabled);
   background: var(--ids-comp-button-outlined-color-bg-brand-disabled);
-  border-color: var(--ids-comp-button-outlined-color-border-brand-default);
+  border-color: var(--ids-comp-button-outlined-color-border-brand-disabled);
 }
 .ids-button.ids-button-outlined.ids-button-brand:disabled > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-brand-disabled);
@@ -1150,7 +1173,7 @@
 .ids-button.ids-button-outlined.ids-button-error:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-error-hovered);
   background: var(--ids-comp-button-outlined-color-bg-error-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-error-default);
+  border-color: var(--ids-comp-button-outlined-color-border-error-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-error:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-error-hovered);
@@ -1158,7 +1181,7 @@
 .ids-button.ids-button-outlined.ids-button-error:focus, .ids-button.ids-button-outlined.ids-button-error:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-error-focused);
   background: var(--ids-comp-button-outlined-color-bg-error-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-error-default);
+  border-color: var(--ids-comp-button-outlined-color-border-error-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-error:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-error:focus-visible > .ids-icon {
@@ -1167,7 +1190,7 @@
 .ids-button.ids-button-outlined.ids-button-error:active {
   color: var(--ids-comp-button-outlined-color-fg-label-error-pressed);
   background: var(--ids-comp-button-outlined-color-bg-error-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-error-default);
+  border-color: var(--ids-comp-button-outlined-color-border-error-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-error:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-error-pressed);
@@ -1183,7 +1206,7 @@
 .ids-button.ids-button-outlined.ids-button-success:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-success-hovered);
   background: var(--ids-comp-button-outlined-color-bg-success-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-success-default);
+  border-color: var(--ids-comp-button-outlined-color-border-success-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-success:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-success-hovered);
@@ -1191,7 +1214,7 @@
 .ids-button.ids-button-outlined.ids-button-success:focus, .ids-button.ids-button-outlined.ids-button-success:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-success-focused);
   background: var(--ids-comp-button-outlined-color-bg-success-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-success-default);
+  border-color: var(--ids-comp-button-outlined-color-border-success-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-success:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-success:focus-visible > .ids-icon {
@@ -1200,7 +1223,7 @@
 .ids-button.ids-button-outlined.ids-button-success:active {
   color: var(--ids-comp-button-outlined-color-fg-label-success-pressed);
   background: var(--ids-comp-button-outlined-color-bg-success-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-success-default);
+  border-color: var(--ids-comp-button-outlined-color-border-success-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-success:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-success-pressed);
@@ -1216,7 +1239,7 @@
 .ids-button.ids-button-outlined.ids-button-warning:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-warning-hovered);
   background: var(--ids-comp-button-outlined-color-bg-warning-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-warning-default);
+  border-color: var(--ids-comp-button-outlined-color-border-warning-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-warning:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-warning-hovered);
@@ -1224,7 +1247,7 @@
 .ids-button.ids-button-outlined.ids-button-warning:focus, .ids-button.ids-button-outlined.ids-button-warning:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-warning-focused);
   background: var(--ids-comp-button-outlined-color-bg-warning-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-warning-default);
+  border-color: var(--ids-comp-button-outlined-color-border-warning-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-warning:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-warning:focus-visible > .ids-icon {
@@ -1233,7 +1256,7 @@
 .ids-button.ids-button-outlined.ids-button-warning:active {
   color: var(--ids-comp-button-outlined-color-fg-label-warning-pressed);
   background: var(--ids-comp-button-outlined-color-bg-warning-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-warning-default);
+  border-color: var(--ids-comp-button-outlined-color-border-warning-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-warning:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-warning-pressed);
@@ -1249,7 +1272,7 @@
 .ids-button.ids-button-outlined.ids-button-light:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-light-hovered);
   background: var(--ids-comp-button-outlined-color-bg-light-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-light-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-light:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-light-hovered);
@@ -1257,7 +1280,7 @@
 .ids-button.ids-button-outlined.ids-button-light:focus, .ids-button.ids-button-outlined.ids-button-light:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-light-focused);
   background: var(--ids-comp-button-outlined-color-bg-light-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-light-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
 }
 .ids-button.ids-button-outlined.ids-button-light:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-light:focus-visible > .ids-icon {
@@ -1266,7 +1289,7 @@
 .ids-button.ids-button-outlined.ids-button-light:active {
   color: var(--ids-comp-button-outlined-color-fg-label-light-pressed);
   background: var(--ids-comp-button-outlined-color-bg-light-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-light-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-light:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-light-pressed);
@@ -1274,7 +1297,7 @@
 .ids-button.ids-button-outlined.ids-button-light:disabled {
   color: var(--ids-comp-button-outlined-color-fg-label-light-disabled);
   background: var(--ids-comp-button-outlined-color-bg-light-disabled);
-  border-color: var(--ids-comp-button-outlined-color-border-light-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-disabled);
 }
 .ids-button.ids-button-outlined.ids-button-light:disabled > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-light-disabled);
@@ -1290,7 +1313,7 @@
 .ids-button.ids-button-outlined.ids-button-light-fixed:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-hovered);
   background: var(--ids-comp-button-outlined-color-bg-light-fixed-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-light-fixed:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-hovered);
@@ -1298,7 +1321,7 @@
 .ids-button.ids-button-outlined.ids-button-light-fixed:focus, .ids-button.ids-button-outlined.ids-button-light-fixed:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-focused);
   background: var(--ids-comp-button-outlined-color-bg-light-fixed-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-light-fixed:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-light-fixed:focus-visible > .ids-icon {
@@ -1307,7 +1330,7 @@
 .ids-button.ids-button-outlined.ids-button-light-fixed:active {
   color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-pressed);
   background: var(--ids-comp-button-outlined-color-bg-light-fixed-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-light-fixed:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-pressed);
@@ -1315,7 +1338,7 @@
 .ids-button.ids-button-outlined.ids-button-light-fixed:disabled {
   color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-disabled);
   background: var(--ids-comp-button-outlined-color-bg-light-fixed-disabled);
-  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
+  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-disabled);
 }
 .ids-button.ids-button-outlined.ids-button-light-fixed:disabled > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-disabled);
@@ -1331,7 +1354,7 @@
 .ids-button.ids-button-outlined.ids-button-dark:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-dark-hovered);
   background: var(--ids-comp-button-outlined-color-bg-dark-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-dark-default);
+  border-color: var(--ids-comp-button-outlined-color-border-dark-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-dark:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-dark-hovered);
@@ -1339,7 +1362,7 @@
 .ids-button.ids-button-outlined.ids-button-dark:focus, .ids-button.ids-button-outlined.ids-button-dark:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-dark-focused);
   background: var(--ids-comp-button-outlined-color-bg-dark-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-dark-default);
+  border-color: var(--ids-comp-button-outlined-color-border-dark-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-dark:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-dark:focus-visible > .ids-icon {
@@ -1348,7 +1371,7 @@
 .ids-button.ids-button-outlined.ids-button-dark:active {
   color: var(--ids-comp-button-outlined-color-fg-label-dark-pressed);
   background: var(--ids-comp-button-outlined-color-bg-dark-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-dark-default);
+  border-color: var(--ids-comp-button-outlined-color-border-dark-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-dark:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-dark-pressed);
@@ -1356,7 +1379,7 @@
 .ids-button.ids-button-outlined.ids-button-dark:disabled {
   color: var(--ids-comp-button-outlined-color-fg-label-dark-disabled);
   background: var(--ids-comp-button-outlined-color-bg-dark-disabled);
-  border-color: var(--ids-comp-button-outlined-color-border-dark-default);
+  border-color: var(--ids-comp-button-outlined-color-border-dark-disabled);
 }
 .ids-button.ids-button-outlined.ids-button-dark:disabled > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-dark-disabled);
@@ -1372,7 +1395,7 @@
 .ids-button.ids-button-outlined.ids-button-surface:hover {
   color: var(--ids-comp-button-outlined-color-fg-label-surface-hovered);
   background: var(--ids-comp-button-outlined-color-bg-surface-hovered);
-  border-color: var(--ids-comp-button-outlined-color-border-surface-default);
+  border-color: var(--ids-comp-button-outlined-color-border-surface-hovered);
 }
 .ids-button.ids-button-outlined.ids-button-surface:hover > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-surface-hovered);
@@ -1380,7 +1403,7 @@
 .ids-button.ids-button-outlined.ids-button-surface:focus, .ids-button.ids-button-outlined.ids-button-surface:focus-visible {
   color: var(--ids-comp-button-outlined-color-fg-label-surface-focused);
   background: var(--ids-comp-button-outlined-color-bg-surface-focused);
-  border-color: var(--ids-comp-button-outlined-color-border-surface-default);
+  border-color: var(--ids-comp-button-outlined-color-border-surface-focused);
   outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
 }
 .ids-button.ids-button-outlined.ids-button-surface:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-surface:focus-visible > .ids-icon {
@@ -1389,7 +1412,7 @@
 .ids-button.ids-button-outlined.ids-button-surface:active {
   color: var(--ids-comp-button-outlined-color-fg-label-surface-pressed);
   background: var(--ids-comp-button-outlined-color-bg-surface-pressed);
-  border-color: var(--ids-comp-button-outlined-color-border-surface-default);
+  border-color: var(--ids-comp-button-outlined-color-border-surface-pressed);
 }
 .ids-button.ids-button-outlined.ids-button-surface:active > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-surface-pressed);
@@ -1397,7 +1420,7 @@
 .ids-button.ids-button-outlined.ids-button-surface:disabled {
   color: var(--ids-comp-button-outlined-color-fg-label-surface-disabled);
   background: var(--ids-comp-button-outlined-color-bg-surface-disabled);
-  border-color: var(--ids-comp-button-outlined-color-border-surface-default);
+  border-color: var(--ids-comp-button-outlined-color-border-surface-disabled);
 }
 .ids-button.ids-button-outlined.ids-button-surface:disabled > .ids-icon {
   color: var(--ids-comp-button-outlined-color-fg-icon-surface-disabled);
@@ -5991,9 +6014,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   width: var(--ids-comp-forms-message-size-icon-width-compact);
 }
 .ids-message.ids-message-compact .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-iconset-typography-font-size-compact);
-  font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-compact);
-  line-height: var(--ids-comp-forms-message-iconset-typography-line-height-compact);
+  font-size: var(--ids-comp-forms-message-icon-typography-font-size-compact);
+  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-compact);
+  line-height: var(--ids-comp-forms-message-icon-typography-line-height-compact);
 }
 .ids-message.ids-message-comfortable {
   gap: var(--ids-comp-forms-message-size-gap-comfortable);
@@ -6009,9 +6032,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   width: var(--ids-comp-forms-message-size-icon-width-comfortable);
 }
 .ids-message.ids-message-comfortable .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-iconset-typography-font-size-comfortable);
-  font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-comfortable);
-  line-height: var(--ids-comp-forms-message-iconset-typography-line-height-comfortable);
+  font-size: var(--ids-comp-forms-message-icon-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-forms-message-icon-typography-line-height-comfortable);
 }
 .ids-message.ids-message-spacious {
   gap: var(--ids-comp-forms-message-size-gap-spacious);
@@ -6027,9 +6050,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   width: var(--ids-comp-forms-message-size-icon-width-spacious);
 }
 .ids-message.ids-message-spacious .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-iconset-typography-font-size-spacious);
-  font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-spacious);
-  line-height: var(--ids-comp-forms-message-iconset-typography-line-height-spacious);
+  font-size: var(--ids-comp-forms-message-icon-typography-font-size-spacious);
+  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-spacious);
+  line-height: var(--ids-comp-forms-message-icon-typography-line-height-spacious);
 }
 .ids-message.ids-message-dense {
   gap: var(--ids-comp-forms-message-size-gap-dense);
@@ -6045,9 +6068,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   width: var(--ids-comp-forms-message-size-icon-width-dense);
 }
 .ids-message.ids-message-dense .ids-message__prefix > .ids-icon {
-  font-size: var(--ids-comp-forms-message-iconset-typography-font-size-dense);
-  font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-dense);
-  line-height: var(--ids-comp-forms-message-iconset-typography-line-height-dense);
+  font-size: var(--ids-comp-forms-message-icon-typography-font-size-dense);
+  font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-dense);
+  line-height: var(--ids-comp-forms-message-icon-typography-line-height-dense);
 }
 .ids-message.ids-message-light .ids-message__prefix {
   color: var(--ids-comp-forms-message-color-fg-icon-light-default);
@@ -8507,37 +8530,37 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
 .ids-radio-group.ids-radio-group-right {
   align-items: flex-start;
 }
-.ids-radio-group .ids-radio-item {
+.ids-radio-group .ids-radio {
   display: flex;
   align-items: center;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-left {
+.ids-radio-group .ids-radio.ids-radio-left {
   flex-direction: row-reverse;
   justify-content: start;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-righ {
+.ids-radio-group .ids-radio.ids-radio-righ {
   flex-direction: row;
   justify-content: start;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-top {
+.ids-radio-group .ids-radio.ids-radio-top {
   flex-direction: column-reverse;
   align-items: center;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-bottom {
+.ids-radio-group .ids-radio.ids-radio-bottom {
   flex-direction: column;
   align-items: center;
 }
-.ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper {
+.ids-radio-group .ids-radio .ids-radio__input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
+.ids-radio-group .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
   position: absolute;
   cursor: pointer;
 }
-.ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
+.ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] {
   appearance: none;
   -webkit-appearance: none;
   flex-shrink: 0;
@@ -8549,7 +8572,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   flex-shrink: 0;
   cursor: pointer;
 }
-.ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
   position: absolute;
   flex-shrink: 0;
   border-style: solid;
@@ -8558,26 +8581,26 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   border-width: 0;
   cursor: pointer;
 }
-.ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus, .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible {
+.ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
   outline-offset: 2px;
   outline-style: solid;
 }
-.ids-radio-group .ids-radio-item .ids-radio-item__label {
+.ids-radio-group .ids-radio .ids-radio__label {
   cursor: pointer;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
+.ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper .ids-radio__touch-target {
   cursor: not-allowed;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper input[type=radio] {
+.ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] {
   cursor: not-allowed;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper input[type=radio] + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
   cursor: not-allowed;
 }
-.ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__label {
+.ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
   cursor: not-allowed;
 }
-.ids-radio-group .ids-radio-item .ids-radio-item__label {
+.ids-radio-group .ids-radio .ids-radio__label {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -8592,32 +8615,32 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
   gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
 }
-.ids-radio-group.ids-radio-group-compact > .ids-radio-item {
+.ids-radio-group.ids-radio-group-compact > .ids-radio {
   padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
   gap: var(--ids-comp-radio-button-container-size-gap-compact);
 }
-.ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
+.ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
   top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
   left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
   height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
   width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
 }
-.ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
+.ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio] {
   width: var(--ids-comp-radio-button-input-size-width-compact);
   height: var(--ids-comp-radio-button-input-size-height-compact);
   border-radius: var(--ids-comp-radio-button-input-size-border-radius-compact);
   border-width: var(--ids-comp-radio-button-input-size-border-width-compact);
 }
-.ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
+.ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
   width: var(--ids-comp-radio-button-input-inner-circle-size-width-compact);
   height: var(--ids-comp-radio-button-input-inner-circle-size-height-compact);
   border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-compact);
   border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-compact);
 }
-.ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible {
+.ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
   outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
 }
-.ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__label {
+.ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__label {
   padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
   font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
   font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
@@ -8633,32 +8656,32 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
   gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
 }
-.ids-radio-group.ids-radio-group-comfortable > .ids-radio-item {
+.ids-radio-group.ids-radio-group-comfortable > .ids-radio {
   padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
   gap: var(--ids-comp-radio-button-container-size-gap-comfortable);
 }
-.ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
+.ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
   top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
   left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
   height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
   width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
 }
-.ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
+.ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio] {
   width: var(--ids-comp-radio-button-input-size-width-comfortable);
   height: var(--ids-comp-radio-button-input-size-height-comfortable);
   border-radius: var(--ids-comp-radio-button-input-size-border-radius-comfortable);
   border-width: var(--ids-comp-radio-button-input-size-border-width-comfortable);
 }
-.ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
+.ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
   width: var(--ids-comp-radio-button-input-inner-circle-size-width-comfortable);
   height: var(--ids-comp-radio-button-input-inner-circle-size-height-comfortable);
   border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-comfortable);
   border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-comfortable);
 }
-.ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible {
+.ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
   outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
 }
-.ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__label {
+.ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__label {
   padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
   font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
   font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
@@ -8674,32 +8697,32 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
   gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
 }
-.ids-radio-group.ids-radio-group-spacious > .ids-radio-item {
+.ids-radio-group.ids-radio-group-spacious > .ids-radio {
   padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
   gap: var(--ids-comp-radio-button-container-size-gap-spacious);
 }
-.ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
+.ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
   top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
   left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
   height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
   width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
 }
-.ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
+.ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio] {
   width: var(--ids-comp-radio-button-input-size-width-spacious);
   height: var(--ids-comp-radio-button-input-size-height-spacious);
   border-radius: var(--ids-comp-radio-button-input-size-border-radius-spacious);
   border-width: var(--ids-comp-radio-button-input-size-border-width-spacious);
 }
-.ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
+.ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
   width: var(--ids-comp-radio-button-input-inner-circle-size-width-spacious);
   height: var(--ids-comp-radio-button-input-inner-circle-size-height-spacious);
   border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-spacious);
   border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-spacious);
 }
-.ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible {
+.ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
   outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
 }
-.ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__label {
+.ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__label {
   padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
   font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
   font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
@@ -8715,32 +8738,32 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
   gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
 }
-.ids-radio-group.ids-radio-group-dense > .ids-radio-item {
+.ids-radio-group.ids-radio-group-dense > .ids-radio {
   padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
   gap: var(--ids-comp-radio-button-container-size-gap-dense);
 }
-.ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
+.ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
   top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
   left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
   height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
   width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
 }
-.ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
+.ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio] {
   width: var(--ids-comp-radio-button-input-size-width-dense);
   height: var(--ids-comp-radio-button-input-size-height-dense);
   border-radius: var(--ids-comp-radio-button-input-size-border-radius-dense);
   border-width: var(--ids-comp-radio-button-input-size-border-width-dense);
 }
-.ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
+.ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
   width: var(--ids-comp-radio-button-input-inner-circle-size-width-dense);
   height: var(--ids-comp-radio-button-input-inner-circle-size-height-dense);
   border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-dense);
   border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-dense);
 }
-.ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible {
+.ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
   outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
 }
-.ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__label {
+.ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__label {
   padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
   font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
   font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);
@@ -8748,450 +8771,450 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
   line-height: var(--ids-comp-radio-button-label-typography-line-height-dense);
   letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-dense);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-pressed);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
   outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:disabled {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:disabled {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-disabled);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-disabled);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-pressed);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-pressed);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-pressed);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
   outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-disabled);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-disabled);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-disabled);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-disabled);
 }
-.ids-radio-group .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
 }
-.ids-radio-group .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__label {
+.ids-radio-group .ids-radio-surface .ids-radio__label {
   color: var(--ids-comp-radio-label-color-fg-surface-default);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__label:hover {
+.ids-radio-group .ids-radio-surface .ids-radio__label:hover {
   color: var(--ids-comp-radio-label-color-fg-surface-hovered);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__label:active {
+.ids-radio-group .ids-radio-surface .ids-radio__label:active {
   color: var(--ids-comp-radio-label-color-fg-surface-pressed);
 }
-.ids-radio-group .ids-radio-item-surface .ids-radio-item__label:focus, .ids-radio-group .ids-radio-item-surface .ids-radio-item__label:focus-visible {
+.ids-radio-group .ids-radio-surface .ids-radio__label:focus, .ids-radio-group .ids-radio-surface .ids-radio__label:focus-visible {
   color: var(--ids-comp-radio-label-color-fg-surface-focused);
 }
-.ids-radio-group .ids-radio-item-surface.ids-radio-item-disabled .ids-radio-item__label {
+.ids-radio-group .ids-radio-surface.ids-radio-disabled .ids-radio__label {
   color: var(--ids-comp-radio-label-color-fg-surface-disabled);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-pressed);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
   outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:disabled {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:disabled {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-disabled);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-disabled);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-pressed);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-pressed);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-pressed);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
   outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-light-focused);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-disabled);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-disabled);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-disabled);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-disabled);
 }
-.ids-radio-group .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
 }
-.ids-radio-group .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__label {
+.ids-radio-group .ids-radio-light .ids-radio__label {
   color: var(--ids-comp-radio-label-color-fg-light-default);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__label:hover {
+.ids-radio-group .ids-radio-light .ids-radio__label:hover {
   color: var(--ids-comp-radio-label-color-fg-light-hovered);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__label:active {
+.ids-radio-group .ids-radio-light .ids-radio__label:active {
   color: var(--ids-comp-radio-label-color-fg-light-pressed);
 }
-.ids-radio-group .ids-radio-item-light .ids-radio-item__label:focus, .ids-radio-group .ids-radio-item-light .ids-radio-item__label:focus-visible {
+.ids-radio-group .ids-radio-light .ids-radio__label:focus, .ids-radio-group .ids-radio-light .ids-radio__label:focus-visible {
   color: var(--ids-comp-radio-label-color-fg-light-focused);
 }
-.ids-radio-group .ids-radio-item-light.ids-radio-item-disabled .ids-radio-item__label {
+.ids-radio-group .ids-radio-light.ids-radio-disabled .ids-radio__label {
   color: var(--ids-comp-radio-label-color-fg-light-disabled);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-pressed);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
   outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:disabled {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:disabled {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-disabled);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-disabled);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-pressed);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-pressed);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-pressed);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
   outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-disabled);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-disabled);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-disabled);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-disabled);
 }
-.ids-radio-group .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
 }
-.ids-radio-group .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__label {
+.ids-radio-group .ids-radio-dark .ids-radio__label {
   color: var(--ids-comp-radio-label-color-fg-dark-default);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:hover {
+.ids-radio-group .ids-radio-dark .ids-radio__label:hover {
   color: var(--ids-comp-radio-label-color-fg-dark-hovered);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:active {
+.ids-radio-group .ids-radio-dark .ids-radio__label:active {
   color: var(--ids-comp-radio-label-color-fg-dark-pressed);
 }
-.ids-radio-group .ids-radio-item-dark .ids-radio-item__label:focus, .ids-radio-group .ids-radio-item-dark .ids-radio-item__label:focus-visible {
+.ids-radio-group .ids-radio-dark .ids-radio__label:focus, .ids-radio-group .ids-radio-dark .ids-radio__label:focus-visible {
   color: var(--ids-comp-radio-label-color-fg-dark-focused);
 }
-.ids-radio-group .ids-radio-item-dark.ids-radio-item-disabled .ids-radio-item__label {
+.ids-radio-group .ids-radio-dark.ids-radio-disabled .ids-radio__label {
   color: var(--ids-comp-radio-label-color-fg-dark-disabled);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-pressed);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-pressed);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-pressed);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-pressed);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-error-pressed);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-pressed);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-pressed);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
   background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-pressed);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-pressed);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-pressed);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
+.ids-radio-group.ng-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
   border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
   background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
 }
-.ids-radio-group.ng-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
+.ids-radio-group.ng-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
   border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
   background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
 }
@@ -9379,61 +9402,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
 .ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item > button:focus-visible {
   outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
 }
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled {
-  background-color: var(--ids-comp-segmented-control-container-filled-color-bg-primary-default);
-  border-color: var(--ids-comp-segmented-control-container-filled-color-border-primary-default);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-default);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-active);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-hovered);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-pressed);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-focused);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-disabled);
-}
-.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
-}
 .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined {
-  background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-primary-default);
-  border-color: var(--ids-comp-segmented-control-container-outlined-color-border-primary-default);
+  background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);
+  border-color: var(--ids-comp-segmented-control-container-outlined-color-border-surface-default);
 }
 .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button {
   background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);
@@ -9486,58 +9457,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
 .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus-visible {
   outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
 }
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled {
-  background-color: var(--ids-comp-segmented-control-container-filled-color-bg-surface-default);
-  border-color: var(--ids-comp-segmented-control-container-filled-color-border-surface-default);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-default);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-active);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-hovered);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-pressed);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-focused);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-disabled);
-}
-.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
-}
 .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined {
   background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);
   border-color: var(--ids-comp-segmented-control-container-outlined-color-border-surface-default);
@@ -9593,61 +9512,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
 .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus-visible {
   outline-color: var(--ids-comp-segmented-control-focused-outline-color-light-focused);
 }
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled {
-  background-color: var(--ids-comp-segmented-control-container-filled-color-bg-light-default);
-  border-color: var(--ids-comp-segmented-control-container-filled-color-border-light-default);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-default);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-default);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-active);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-active);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-hovered);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-pressed);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-focused);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-disabled);
-}
-.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
-}
 .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined {
-  background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-light-default);
-  border-color: var(--ids-comp-segmented-control-container-outlined-color-border-light-default);
+  background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);
+  border-color: var(--ids-comp-segmented-control-container-outlined-color-border-surface-default);
 }
 .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button {
   background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);
@@ -9697,113 +9564,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
 .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
   color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled);
 }
-.ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus-visible {
-  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled {
-  background-color: var(--ids-comp-segmented-control-container-filled-color-bg-dark-default);
-  border-color: var(--ids-comp-segmented-control-container-filled-color-border-dark-default);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-default);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-active);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-hovered);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-pressed);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-focused);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
-  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
-  border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-disabled);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
-  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined {
-  background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-dark-default);
-  border-color: var(--ids-comp-segmented-control-container-outlined-color-border-dark-default);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button {
-  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-default);
-  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-default);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-default);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
-  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-active);
-  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-active);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-active);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
-  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-hovered);
-  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-hovered);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-hovered);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
-  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-pressed);
-  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-pressed);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible {
-  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused);
-  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible .ids-icon {
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
-  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-disabled);
-  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-disabled);
-}
-.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
-  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-disabled);
-}
 .ids-segmented-control-toggle {
   display: inline-flex;