npm - @i-cell/ids-styles - Versions diffs - 0.0.66 → 0.0.69 - Mend

@i-cell/ids-styles 0.0.66 → 0.0.69

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/accordion/accordion.css +44 -43
package/dist/accordion/accordion.min.css +1 -1
package/dist/accordion/accordion.plugin.js +84 -79
package/dist/checkbox/checkbox-group.css +88 -28
package/dist/checkbox/checkbox-group.min.css +1 -1
package/dist/checkbox/checkbox-group.plugin.js +124 -36
package/dist/checkbox/checkbox.css +36 -36
package/dist/checkbox/checkbox.min.css +1 -1
package/dist/checkbox/checkbox.plugin.js +36 -36
package/dist/components.css +290 -173
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +368 -219
package/dist/notification/notification.css +11 -1
package/dist/notification/notification.min.css +1 -1
package/dist/notification/notification.plugin.js +30 -8
package/dist/option/option.css +5 -6
package/dist/option/option.min.css +1 -1
package/dist/option/option.plugin.js +5 -5
package/dist/radio/radio.css +34 -2
package/dist/radio/radio.min.css +1 -1
package/dist/radio/radio.plugin.js +26 -3
package/dist/switch/switch.css +72 -57
package/dist/switch/switch.min.css +1 -1
package/dist/switch/switch.plugin.js +63 -52
package/package.json +2 -2

package/dist/components.plugin.js CHANGED Viewed

@@ -20,30 +20,31 @@ module.exports = function ComponentsPlugin() {
         borderColor: 'rgba(0,0,0,0)',
       },
       '.ids-accordion>.ids-accordion-controls': { display: 'flex', alignItems: 'flex-start', alignSelf: 'stretch' },
-      '.ids-accordion>.ids-accordion-item': {
-        display: 'flex',
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)': {
         width: '100%',
+        display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
-        flexShrink: 0,
+        alignSelf: 'stretch',
       },
-      '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         display: 'flex',
         alignItems: 'center',
         width: '100%',
         flex: '1 0 0',
         borderStyle: 'solid',
         cursor: 'pointer',
+        textAlign: 'left',
       },
-      '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         { outlineOffset: '2px', outlineStyle: 'solid', zIndex: 1 },
-      '.ids-accordion>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
+      '.ids-accordion>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title': {
         flex: '1 0 0',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
       },
-      '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
+      '.ids-accordion>.ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         pointerEvents: 'none',
         userSelect: 'none',
       },
@@ -67,26 +68,27 @@ module.exports = function ComponentsPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact)',
         gap: 'var(--ids-comp-accordion-item-size-gap-compact)',
       },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-compact)',
         padding: 'var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact)',
         gap: 'var(--ids-comp-accordion-summary-size-gap-compact)',
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
       },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
-      },
-      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
+        },
+      '.ids-accordion.ids-accordion-compact>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-compact)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-compact)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-compact)',
@@ -113,7 +115,7 @@ module.exports = function ComponentsPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable)',
         gap: 'var(--ids-comp-accordion-item-size-gap-comfortable)',
       },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-comfortable)',
         padding:
           'var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable)',
@@ -121,19 +123,20 @@ module.exports = function ComponentsPlugin() {
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
       },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
-      },
-      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
+        },
+      '.ids-accordion.ids-accordion-comfortable>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-comfortable)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-comfortable)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-comfortable)',
@@ -159,26 +162,27 @@ module.exports = function ComponentsPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious)',
         gap: 'var(--ids-comp-accordion-item-size-gap-spacious)',
       },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-spacious)',
         padding: 'var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious)',
         gap: 'var(--ids-comp-accordion-summary-size-gap-spacious)',
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
       },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
-      },
-      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
+        },
+      '.ids-accordion.ids-accordion-spacious>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-spacious)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-spacious)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-spacious)',
@@ -203,26 +207,27 @@ module.exports = function ComponentsPlugin() {
         padding: 'var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense)',
         gap: 'var(--ids-comp-accordion-item-size-gap-dense)',
       },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         height: 'var(--ids-comp-accordion-summary-size-height-dense)',
         padding: 'var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense)',
         gap: 'var(--ids-comp-accordion-summary-size-gap-dense)',
         borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
         borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
       },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)',
           outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
         },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-accordion-item-title': {
-        fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
-        fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
-        fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
-        letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
-        lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
-      },
-      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-accordion-item-title':
+        {
+          fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
+          fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
+          fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
+          letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
+          lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
+        },
+      '.ids-accordion.ids-accordion-dense>.ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         fontSize: 'var(--ids-comp-accordion-summary-icon-typography-font-size-dense)',
         fontWeight: 'var(--ids-comp-accordion-summary-icon-typography-font-weight-dense)',
         lineHeight: 'var(--ids-comp-accordion-summary-icon-typography-line-height-dense)',
@@ -237,90 +242,90 @@ module.exports = function ComponentsPlugin() {
         borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
         backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
         borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
         color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-default)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
         background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
         borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
         color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-hovered)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
           borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
           color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
         },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
         { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-focused)' },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
         background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
         borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
         color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
+      '.ids-accordion.ids-accordion-text .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-pressed)',
       },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
-        background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
-        borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
-        color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
-      },
-      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
-        color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)',
-      },
+      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
+        {
+          background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
+          borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
+          color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
+        },
+      '.ids-accordion.ids-accordion-text .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
+        { color: 'var(--ids-comp-accordion-summary-text-color-fg-icon-disabled)' },
       '.ids-accordion.ids-accordion-filled': {
         borderColor: 'var(--ids-comp-accordion-container-color-border-default)',
         backgroundColor: 'var(--ids-comp-accordion-container-color-bg-default)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary': {
         background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
         borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary>.ids-icon': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-default)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover': {
         background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
         borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:hover>.ids-icon': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:hover>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-hovered)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible':
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible':
         {
           background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
           borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
           color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
         },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:focus-visible>.ids-icon':
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus>.ids-icon,.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:focus-visible>.ids-icon':
         { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-focused)' },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active': {
         background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
         borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item>.ids-accordion-item-summary:active>.ids-icon': {
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary:active>.ids-icon': {
         color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-pressed)',
       },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary': {
-        background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
-        borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
-        color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
-      },
-      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>.ids-accordion-item-summary>.ids-icon': {
-        color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)',
-      },
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary':
+        {
+          background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
+          borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
+          color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
+        },
+      '.ids-accordion.ids-accordion-filled .ids-accordion-item.ids-accordion-item-disabled>:is(h1,h2,h3,h4,h5,h6)>.ids-accordion-item-summary>.ids-icon':
+        { color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)' },
       '.ids-autocomplete': {
         boxSizing: 'border-box',
         borderWidth: '0',
@@ -3345,85 +3350,173 @@ module.exports = function ComponentsPlugin() {
         borderColor: 'var(--ids-comp-card-elevated-color-border-surface-disabled)',
       },
       '.ids-checkbox-group': { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' },
-      '.ids-checkbox-group>.ids-checkbox-group__label': { fontStyle: 'normal' },
+      '.ids-checkbox-group>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': { fontStyle: 'normal' },
       '.ids-checkbox-group>.ids-checkbox-group__list': { display: 'flex' },
       '.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list': { flexDirection: 'row', alignItems: 'center' },
       '.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
       '.ids-checkbox-group.ids-checkbox-group-compact': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-compact)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-compact)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-compact)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-compact)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)',
-      },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)',
+        },
       '.ids-checkbox-group.ids-checkbox-group-comfortable': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-comfortable)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-comfortable)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-comfortable)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)',
-      },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)',
+        },
       '.ids-checkbox-group.ids-checkbox-group-spacious': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-spacious)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-spacious)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-spacious)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-spacious)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)',
-      },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)',
+        },
       '.ids-checkbox-group.ids-checkbox-group-dense': {
         padding:
-          'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense)',
-        gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)',
+          'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense)',
+      },
+      '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend': {
+        gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-dense)',
         fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-dense)',
         fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-dense)',
         lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-dense)',
         letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list': {
-        padding:
-          'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense)',
-        gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)',
-      },
-      '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
+        {
+          padding:
+            'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense)',
+          gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)',
+        },
+      '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
       },
-      '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label': {
+      '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
         color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
       },
       '.ids-checkbox': {
@@ -3935,149 +4028,149 @@ module.exports = function ComponentsPlugin() {
       '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
         cursor: 'pointer',
       },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-default)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-default)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-default)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-default)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible':
         {
           borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
           backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
         },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)' },
-      '.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
+      '.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
       '.ids-pseudo-checkbox': { display: 'inline-flex', alignSelf: 'stretch' },
       '.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper': {
@@ -8304,7 +8397,6 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-notification>.ids-notification__content-wrapper': {
         display: 'flex',
-        justifyContent: 'space-between',
         alignItems: 'flex-start',
         alignContent: 'flex-start',
         flexWrap: 'wrap',
@@ -8334,6 +8426,7 @@ module.exports = function ComponentsPlugin() {
         alignItems: 'center',
         flexShrink: 0,
       },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container': { marginLeft: 'auto' },
       '.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container.ids-notification__label-button': {
         display: 'flex',
         alignSelf: 'center',
@@ -8426,7 +8519,10 @@ module.exports = function ComponentsPlugin() {
         borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-compact)',
       },
       '.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container':
-        { minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-compact)' },
+        {
+          minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-compact)',
+          maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-compact)',
+        },
       '.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper': {
         gap: 'var(--ids-comp-notification-filled-container-size-gap-comfortable)',
         padding:
@@ -8438,7 +8534,10 @@ module.exports = function ComponentsPlugin() {
         borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-comfortable)',
       },
       '.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container':
-        { minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-comfortable)' },
+        {
+          minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-comfortable)',
+          maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-comfortable)',
+        },
       '.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper': {
         gap: 'var(--ids-comp-notification-filled-container-size-gap-spacious)',
         padding:
@@ -8450,7 +8549,10 @@ module.exports = function ComponentsPlugin() {
         borderLeftWidth: 'var(--ids-comp-notification-filled-container-size-border-left-width-spacious)',
       },
       '.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container':
-        { minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-spacious)' },
+        {
+          minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-spacious)',
+          maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-spacious)',
+        },
       '.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper': {
         gap: 'var(--ids-comp-notification-filled-container-size-gap-dense)',
         padding:
@@ -8463,6 +8565,7 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container': {
         minWidth: 'var(--ids-comp-notification-filled-container-size-min-width-dense)',
+        maxWidth: 'var(--ids-comp-notification-filled-container-size-max-width-dense)',
       },
       '.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper': {
         borderColor: 'var(--ids-comp-notification-outlined-color-border-error-default)',
@@ -8545,7 +8648,10 @@ module.exports = function ComponentsPlugin() {
         borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-compact)',
       },
       '.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container':
-        { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-compact)' },
+        {
+          minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-compact)',
+          maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-compact)',
+        },
       '.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper': {
         gap: 'var(--ids-comp-notification-outlined-container-size-gap-comfortable)',
         padding:
@@ -8557,7 +8663,10 @@ module.exports = function ComponentsPlugin() {
         borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)',
       },
       '.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container':
-        { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-comfortable)' },
+        {
+          minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-comfortable)',
+          maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-comfortable)',
+        },
       '.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper': {
         gap: 'var(--ids-comp-notification-outlined-container-size-gap-spacious)',
         padding:
@@ -8569,7 +8678,10 @@ module.exports = function ComponentsPlugin() {
         borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)',
       },
       '.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container':
-        { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-spacious)' },
+        {
+          minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-spacious)',
+          maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-spacious)',
+        },
       '.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper': {
         gap: 'var(--ids-comp-notification-outlined-container-size-gap-dense)',
         padding:
@@ -8581,7 +8693,10 @@ module.exports = function ComponentsPlugin() {
         borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-dense)',
       },
       '.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container':
-        { minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-dense)' },
+        {
+          minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-dense)',
+          maxWidth: 'var(--ids-comp-notification-outlined-container-size-max-width-dense)',
+        },
       '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element': {
         paddingLeft: 'var(--ids-comp-notification-icon-size-padding-left-compact)',
         paddingRight: 'var(--ids-comp-notification-icon-size-padding-right-compact)',
@@ -8735,13 +8850,13 @@ module.exports = function ComponentsPlugin() {
           height: 'var(--ids-comp-notification-icon-button-size-icon-button-dense)',
         },
       '.ids-option': { display: 'flex', alignItems: 'center', alignSelf: 'stretch', boxSizing: 'border-box', userSelect: 'none' },
-      '.ids-option>.ids-option__text': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
+      '.ids-option>.ids-option__text': { overflowWrap: 'anywhere', fontStyle: 'normal' },
       '.ids-option:not(.ids-option-disabled)': { cursor: 'pointer' },
       '.ids-option.ids-option-disabled': { cursor: 'not-allowed' },
       '.ids-option:not(.ids-option-multiselect)': { justifyContent: 'space-between' },
       '.ids-option.ids-option-active': { outlineStyle: 'solid' },
       '.ids-option.ids-option-compact': {
-        height: 'var(--ids-comp-forms-option-item-size-min-height-compact)',
+        minHeight: 'var(--ids-comp-forms-option-item-size-min-height-compact)',
         padding: 'var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact)',
         gap: 'var(--ids-comp-forms-option-container-size-gap-compact)',
         borderRadius: 'var(--ids-comp-forms-option-item-size-border-radius-compact)',
@@ -8764,7 +8879,7 @@ module.exports = function ComponentsPlugin() {
         outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
       },
       '.ids-option.ids-option-comfortable': {
-        height: 'var(--ids-comp-forms-option-item-size-min-height-comfortable)',
+        minHeight: 'var(--ids-comp-forms-option-item-size-min-height-comfortable)',
         padding:
           'var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable)',
         gap: 'var(--ids-comp-forms-option-container-size-gap-comfortable)',
@@ -8788,7 +8903,7 @@ module.exports = function ComponentsPlugin() {
         outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable)',
       },
       '.ids-option.ids-option-spacious': {
-        height: 'var(--ids-comp-forms-option-item-size-min-height-spacious)',
+        minHeight: 'var(--ids-comp-forms-option-item-size-min-height-spacious)',
         padding: 'var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious)',
         gap: 'var(--ids-comp-forms-option-container-size-gap-spacious)',
         borderRadius: 'var(--ids-comp-forms-option-item-size-border-radius-spacious)',
@@ -8811,7 +8926,7 @@ module.exports = function ComponentsPlugin() {
         outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious)',
       },
       '.ids-option.ids-option-dense': {
-        height: 'var(--ids-comp-forms-option-item-size-min-height-dense)',
+        minHeight: 'var(--ids-comp-forms-option-item-size-min-height-dense)',
         padding: 'var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense)',
         gap: 'var(--ids-comp-forms-option-container-size-gap-dense)',
         borderRadius: 'var(--ids-comp-forms-option-item-size-border-radius-dense)',
@@ -9609,9 +9724,33 @@ module.exports = function ComponentsPlugin() {
       '.ids-radio-group.ids-radio-group-right': { alignItems: 'flex-start' },
       '.ids-radio-group .ids-radio': { display: 'flex', alignItems: 'center' },
       '.ids-radio-group .ids-radio.ids-radio-left': { flexDirection: 'row-reverse', justifyContent: 'start' },
-      '.ids-radio-group .ids-radio.ids-radio-righ': { flexDirection: 'row', justifyContent: 'start' },
-      '.ids-radio-group .ids-radio.ids-radio-top': { flexDirection: 'column-reverse', alignItems: 'center' },
+      '.ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+      },
+      '.ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper .ids-radio__label': { justifyContent: 'start' },
+      '.ids-radio-group .ids-radio.ids-radio-right': { flexDirection: 'row', justifyContent: 'start' },
+      '.ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+      },
+      '.ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper .ids-radio__label': { justifyContent: 'start' },
+      '.ids-radio-group .ids-radio.ids-radio-top': { flexDirection: 'column-reverse', alignItems: 'center', justifyContent: 'center' },
+      '.ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      },
+      '.ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper .ids-radio__label': { justifyContent: 'center' },
       '.ids-radio-group .ids-radio.ids-radio-bottom': { flexDirection: 'column', alignItems: 'center' },
+      '.ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      },
+      '.ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper .ids-radio__label': { justifyContent: 'center' },
       '.ids-radio-group .ids-radio .ids-radio__input-wrapper': {
         position: 'relative',
         display: 'flex',
@@ -9644,7 +9783,6 @@ module.exports = function ComponentsPlugin() {
       '.ids-radio-group .ids-radio .ids-radio__label': {
         cursor: 'pointer',
         display: 'flex',
-        justifyContent: 'center',
         alignItems: 'center',
         flex: '1 0 0',
         fontStyle: 'normal',
@@ -12759,6 +12897,7 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-switch>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon': { position: 'absolute' },
       '.ids-switch>.ids-switch__label': { fontStyle: 'normal', flexGrow: 1 },
+      '.ids-switch:not(.ids-switch-disabled)>.ids-switch__label': { cursor: 'pointer' },
       '.ids-switch.ids-switch-label-right': { flexDirection: 'row' },
       '.ids-switch.ids-switch-label-left': { flexDirection: 'row-reverse' },
       '.ids-switch.ids-switch-compact': { gap: 'var(--ids-comp-switch-container-size-gap-compact)' },
@@ -12950,19 +13089,6 @@ module.exports = function ComponentsPlugin() {
       '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label': {
         color: 'var(--ids-comp-switch-label-color-fg-surface-default)',
       },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track': {
-        backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-surface-hovered)',
-      },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
-        { color: 'var(--ids-comp-switch-track-off-color-fg-icon-surface-default)' },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle': {
-        backgroundColor: 'var(--ids-comp-switch-handle-off-color-bg-surface-default)',
-      },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon':
-        { color: 'var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)' },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label': {
-        color: 'var(--ids-comp-switch-label-color-fg-surface-hovered)',
-      },
       '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-surface-pressed)',
       },
@@ -12988,6 +13114,19 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)' },
       '.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-surface:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label':
         { color: 'var(--ids-comp-switch-label-color-fg-surface-focused)' },
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track': {
+        backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-surface-hovered)',
+      },
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
+        { color: 'var(--ids-comp-switch-track-off-color-fg-icon-surface-default)' },
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
+        backgroundColor: 'var(--ids-comp-switch-handle-off-color-bg-surface-default)',
+      },
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
+        { color: 'var(--ids-comp-switch-handle-off-color-fg-icon-surface-default)' },
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover>.ids-switch__label': {
+        color: 'var(--ids-comp-switch-label-color-fg-surface-hovered)',
+      },
       '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-surface-default)',
       },
@@ -12998,15 +13137,18 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
         { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)' },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track': {
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-surface-hovered)',
       },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
         { color: 'var(--ids-comp-switch-track-on-color-fg-icon-surface-default)' },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle':
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle':
         { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-surface-default)' },
-      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon':
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
         { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-surface-default)' },
+      '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__label': {
+        color: 'var(--ids-comp-switch-label-color-fg-surface-hovered)',
+      },
       '.ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-surface-pressed)',
       },
@@ -13062,20 +13204,6 @@ module.exports = function ComponentsPlugin() {
       '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label': {
         color: 'var(--ids-comp-switch-label-color-fg-light-default)',
       },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track': {
-        backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-light-hovered)',
-      },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
-        { color: 'var(--ids-comp-switch-track-off-color-fg-icon-light-default)' },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle': {
-        backgroundColor: 'var(--ids-comp-switch-handle-off-color-bg-light-default)',
-      },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon': {
-        color: 'var(--ids-comp-switch-handle-off-color-fg-icon-light-default)',
-      },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label': {
-        color: 'var(--ids-comp-switch-label-color-fg-light-hovered)',
-      },
       '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-light-pressed)',
       },
@@ -13101,6 +13229,20 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-switch-handle-off-color-fg-icon-light-default)' },
       '.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-light:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label':
         { color: 'var(--ids-comp-switch-label-color-fg-light-focused)' },
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track': {
+        backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-light-hovered)',
+      },
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
+        { color: 'var(--ids-comp-switch-track-off-color-fg-icon-light-default)' },
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
+        backgroundColor: 'var(--ids-comp-switch-handle-off-color-bg-light-default)',
+      },
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon': {
+        color: 'var(--ids-comp-switch-handle-off-color-fg-icon-light-default)',
+      },
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled):hover>.ids-switch__label': {
+        color: 'var(--ids-comp-switch-label-color-fg-light-hovered)',
+      },
       '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-light-default)',
       },
@@ -13111,15 +13253,18 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
         { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-light-default)' },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track': {
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-light-hovered)',
       },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
         { color: 'var(--ids-comp-switch-track-on-color-fg-icon-light-default)' },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle':
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle':
         { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-light-default)' },
-      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon':
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
         { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-light-default)' },
+      '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__label': {
+        color: 'var(--ids-comp-switch-label-color-fg-light-hovered)',
+      },
       '.ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-light-pressed)',
       },
@@ -13175,19 +13320,6 @@ module.exports = function ComponentsPlugin() {
       '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button+.ids-switch__label': {
         color: 'var(--ids-comp-switch-label-color-fg-primary-default)',
       },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track': {
-        backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-primary-hovered)',
-      },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
-        { color: 'var(--ids-comp-switch-track-off-color-fg-icon-primary-default)' },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle': {
-        backgroundColor: 'var(--ids-comp-switch-handle-off-color-bg-primary-default)',
-      },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon':
-        { color: 'var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)' },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:hover+.ids-switch__label': {
-        color: 'var(--ids-comp-switch-label-color-fg-primary-hovered)',
-      },
       '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:active>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-primary-pressed)',
       },
@@ -13213,6 +13345,19 @@ module.exports = function ComponentsPlugin() {
         { color: 'var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)' },
       '.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus+.ids-switch__label,.ids-switch.ids-switch-primary:not(.ids-switch-disabled)>.ids-switch__button:focus-visible+.ids-switch__label':
         { color: 'var(--ids-comp-switch-label-color-fg-primary-focused)' },
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track': {
+        backgroundColor: 'var(--ids-comp-switch-track-off-color-bg-primary-hovered)',
+      },
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
+        { color: 'var(--ids-comp-switch-track-off-color-fg-icon-primary-default)' },
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle': {
+        backgroundColor: 'var(--ids-comp-switch-handle-off-color-bg-primary-default)',
+      },
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
+        { color: 'var(--ids-comp-switch-handle-off-color-fg-icon-primary-default)' },
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover>.ids-switch__label': {
+        color: 'var(--ids-comp-switch-label-color-fg-primary-hovered)',
+      },
       '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-primary-default)',
       },
@@ -13223,15 +13368,18 @@ module.exports = function ComponentsPlugin() {
       },
       '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
         { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)' },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track': {
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-primary-hovered)',
       },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__track-icon>.ids-icon':
         { color: 'var(--ids-comp-switch-track-on-color-fg-icon-primary-default)' },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle':
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle':
         { backgroundColor: 'var(--ids-comp-switch-handle-on-color-bg-primary-default)' },
-      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:hover>.ids-switch__track>.ids-switch__handle>.ids-icon':
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
         { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-primary-default)' },
+      '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover>.ids-switch__label': {
+        color: 'var(--ids-comp-switch-label-color-fg-primary-hovered)',
+      },
       '.ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on>.ids-switch__button:active>.ids-switch__track': {
         backgroundColor: 'var(--ids-comp-switch-track-on-color-bg-primary-pressed)',
       },
@@ -13273,6 +13421,7 @@ module.exports = function ComponentsPlugin() {
       '.ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on>.ids-switch__button>.ids-switch__track>.ids-switch__handle>.ids-icon':
         { color: 'var(--ids-comp-switch-handle-on-color-fg-icon-primary-disabled)' },
       '.ids-switch.ids-switch-disabled': { cursor: 'not-allowed' },
+      '.ids-switch.ids-switch-disabled>.ids-switch__label': { cursor: 'not-allowed' },
       '.ids-tab-group': {
         boxSizing: 'border-box',
         borderWidth: '0',