npm - @i-cell/ids-styles - Versions diffs - 0.0.19 → 0.0.21 - Mend

@i-cell/ids-styles 0.0.19 → 0.0.21

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 (13) hide show

package/dist/chip/chip.css +315 -306
package/dist/chip/chip.min.css +1 -1
package/dist/chip/chip.plugin.js +297 -299
package/dist/components.css +1267 -546
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +1014 -544
package/dist/notification/notification.css +598 -0
package/dist/notification/notification.min.css +1 -0
package/dist/notification/notification.plugin.js +382 -0
package/dist/tag/tag.css +353 -240
package/dist/tag/tag.min.css +1 -1
package/dist/tag/tag.plugin.js +344 -245
package/package.json +2 -2

package/dist/components.plugin.js CHANGED Viewed

@@ -3620,9 +3620,6 @@ module.exports = function ComponentsPlugin() {
       '.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible+.ids-pseudo-checkbox__icon':
         { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
       '.ids-chip': { display: 'inline-flex', alignItems: 'center', borderStyle: 'solid', boxSizing: 'border-box' },
-      '.ids-chip[role=button]:focus,.ids-chip[role=button]:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
-      '.ids-chip:not([role=button]):focus,.ids-chip:not([role=button]):focus-visible': { outlineStyle: 'none' },
-      '.ids-chip.ids-chip-disabled': { cursor: 'not-allowed' },
       '.ids-chip>.ids-chip__label': { display: 'flex', alignItems: 'center' },
       '.ids-chip.ids-chip-compact': {
         height: 'var(--ids-comp-chip-container-size-height-compact)',
@@ -3630,9 +3627,6 @@ module.exports = function ComponentsPlugin() {
         borderRadius: 'var(--ids-comp-chip-container-size-border-radius-compact)',
         borderWidth: 'var(--ids-comp-chip-container-size-border-width-compact)',
       },
-      '.ids-chip.ids-chip-compact:focus,.ids-chip.ids-chip-compact:focus-visible': {
-        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-compact)',
-      },
       '.ids-chip.ids-chip-compact>.ids-avatar': {
         width: 'var(--ids-comp-chip-avatar-size-avatar-compact)',
         height: 'var(--ids-comp-chip-avatar-size-avatar-compact)',
@@ -3665,9 +3659,6 @@ module.exports = function ComponentsPlugin() {
         borderRadius: 'var(--ids-comp-chip-container-size-border-radius-comfortable)',
         borderWidth: 'var(--ids-comp-chip-container-size-border-width-comfortable)',
       },
-      '.ids-chip.ids-chip-comfortable:focus,.ids-chip.ids-chip-comfortable:focus-visible': {
-        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-comfortable)',
-      },
       '.ids-chip.ids-chip-comfortable>.ids-avatar': {
         width: 'var(--ids-comp-chip-avatar-size-avatar-comfortable)',
         height: 'var(--ids-comp-chip-avatar-size-avatar-comfortable)',
@@ -3700,9 +3691,6 @@ module.exports = function ComponentsPlugin() {
         borderRadius: 'var(--ids-comp-chip-container-size-border-radius-spacious)',
         borderWidth: 'var(--ids-comp-chip-container-size-border-width-spacious)',
       },
-      '.ids-chip.ids-chip-spacious:focus,.ids-chip.ids-chip-spacious:focus-visible': {
-        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-spacious)',
-      },
       '.ids-chip.ids-chip-spacious>.ids-avatar': {
         width: 'var(--ids-comp-chip-avatar-size-avatar-spacious)',
         height: 'var(--ids-comp-chip-avatar-size-avatar-spacious)',
@@ -3735,9 +3723,6 @@ module.exports = function ComponentsPlugin() {
         borderRadius: 'var(--ids-comp-chip-container-size-border-radius-dense)',
         borderWidth: 'var(--ids-comp-chip-container-size-border-width-dense)',
       },
-      '.ids-chip.ids-chip-dense:focus,.ids-chip.ids-chip-dense:focus-visible': {
-        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-dense)',
-      },
       '.ids-chip.ids-chip-dense>.ids-avatar': {
         width: 'var(--ids-comp-chip-avatar-size-avatar-dense)',
         height: 'var(--ids-comp-chip-avatar-size-avatar-dense)',
@@ -3764,507 +3749,520 @@ module.exports = function ComponentsPlugin() {
         fontWeight: 'var(--ids-comp-chip-icon-typography-font-weight-dense)',
         lineHeight: 'var(--ids-comp-chip-icon-typography-line-height-dense)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)': {
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled)': {
         background: 'var(--ids-comp-chip-filled-color-bg-primary-default)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-primary-default)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)>.ids-icon': {
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled)>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-default)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)>.ids-chip__label': {
+      '.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled)>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-primary-default)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover': {
+      '.ids-chip.ids-chip-filled.ids-chip-primary:disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-primary-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-primary-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-primary:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-primary-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-secondary:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-surface-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-surface:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-light-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-light-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-light-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-light-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-light-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-light:disabled>.ids-icon': { color: 'var(--ids-comp-chip-filled-color-fg-icon-light-disabled)' },
+      '.ids-chip.ids-chip-filled.ids-chip-light:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-light-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled)': {
+        background: 'var(--ids-comp-chip-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-default)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:disabled': {
+        background: 'var(--ids-comp-chip-filled-color-bg-dark-disabled)',
+        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-disabled)',
+      },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:disabled>.ids-icon': { color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-disabled)' },
+      '.ids-chip.ids-chip-filled.ids-chip-dark:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-primary-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-primary:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-secondary:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-surface-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-surface:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-light-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-light:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled)': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled)>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled)>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-default)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:disabled': {
+        background: 'var(--ids-comp-chip-outlined-color-bg-dark-disabled)',
+        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:disabled>.ids-icon': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-disabled)',
+      },
+      '.ids-chip.ids-chip-outlined.ids-chip-dark:disabled>.ids-chip__label': {
+        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-disabled)',
+      },
+      'ids-chip': { cursor: 'default' },
+      'ids-chip:focus,ids-chip:focus-visible': { outlineStyle: 'none' },
+      'button.ids-chip': { cursor: 'pointer' },
+      'button.ids-chip:focus,button.ids-chip:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
+      'button.ids-chip:disabled': { cursor: 'not-allowed' },
+      'button.ids-chip.ids-chip-compact:focus,button.ids-chip.ids-chip-compact:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-compact)',
+      },
+      'button.ids-chip.ids-chip-comfortable:focus,button.ids-chip.ids-chip-comfortable:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-comfortable)',
+      },
+      'button.ids-chip.ids-chip-spacious:focus,button.ids-chip.ids-chip-spacious:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-spacious)',
+      },
+      'button.ids-chip.ids-chip-dense:focus,button.ids-chip.ids-chip-dense:focus-visible': {
+        outlineWidth: 'var(--ids-comp-chip-focused-outline-size-outline-dense)',
+      },
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-filled-color-bg-primary-hovered)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-primary-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-primary-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus,button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-filled-color-bg-primary-focused)',
           borderColor: 'var(--ids-comp-chip-filled-color-border-primary-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-filled-color-fg-label-primary-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):active': {
         background: 'var(--ids-comp-chip-filled-color-bg-primary-pressed)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-primary-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-primary:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-primary-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-filled-color-bg-primary-disabled)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-primary-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-primary-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-primary.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-primary-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-filled-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-filled-color-bg-secondary-hovered)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus,button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-filled-color-bg-secondary-focused)',
           borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):active': {
         background: 'var(--ids-comp-chip-filled-color-bg-secondary-pressed)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-secondary:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-filled-color-bg-secondary-disabled)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-secondary-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-secondary-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-secondary.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-secondary-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-filled-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-filled-color-bg-surface-hovered)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-surface-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-surface-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus,button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-filled-color-bg-surface-focused)',
           borderColor: 'var(--ids-comp-chip-filled-color-border-surface-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-filled-color-fg-label-surface-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):active': {
         background: 'var(--ids-comp-chip-filled-color-bg-surface-pressed)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-surface-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-surface:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-surface-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-filled-color-bg-surface-disabled)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-surface-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-surface-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-surface.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-surface-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-filled-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-light-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-light-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-light-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-filled-color-bg-light-hovered)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-light-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-light-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-light-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus,button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-filled-color-bg-light-focused)',
           borderColor: 'var(--ids-comp-chip-filled-color-border-light-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
         },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-filled-color-fg-icon-light-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-filled-color-fg-label-light-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):active': {
         background: 'var(--ids-comp-chip-filled-color-bg-light-pressed)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-light-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-light-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-light:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-light-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-filled-color-bg-light-disabled)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-light-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-light-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-light.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-light-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-filled-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-default)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-filled-color-bg-dark-hovered)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-dark-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-dark-hovered)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus,button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-filled-color-bg-dark-focused)',
           borderColor: 'var(--ids-comp-chip-filled-color-border-dark-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-filled-color-fg-label-dark-focused)' },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):active': {
         background: 'var(--ids-comp-chip-filled-color-bg-dark-pressed)',
         borderColor: 'var(--ids-comp-chip-filled-color-border-dark-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-filled.ids-chip-dark:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-filled-color-fg-label-dark-pressed)',
       },
-      '.ids-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-filled-color-bg-dark-disabled)',
-        borderColor: 'var(--ids-comp-chip-filled-color-border-dark-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-filled-color-fg-icon-dark-disabled)',
-      },
-      '.ids-chip.ids-chip-filled.ids-chip-dark.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-filled-color-fg-label-dark-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-primary-default)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-outlined-color-bg-primary-hovered)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus,button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-outlined-color-bg-primary-focused)',
           borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):active': {
         background: 'var(--ids-comp-chip-outlined-color-bg-primary-pressed)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-primary:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-primary-disabled)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-primary-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-primary-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-primary.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-primary-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-outlined-color-bg-secondary-hovered)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus,button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-outlined-color-bg-secondary-focused)',
           borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):active': {
         background: 'var(--ids-comp-chip-outlined-color-bg-secondary-pressed)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-secondary:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-secondary-disabled)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-secondary-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-secondary-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-secondary.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-secondary-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-outlined-color-bg-surface-hovered)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus,button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-outlined-color-bg-surface-focused)',
           borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):active': {
         background: 'var(--ids-comp-chip-outlined-color-bg-surface-pressed)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-surface:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-surface-disabled)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-surface-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-surface-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-surface.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-surface-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-outlined-color-bg-light-hovered)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-light-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-light-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus,button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-outlined-color-bg-light-focused)',
           borderColor: 'var(--ids-comp-chip-outlined-color-border-light-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
         },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-outlined-color-fg-label-light-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):active': {
         background: 'var(--ids-comp-chip-outlined-color-bg-light-pressed)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-light-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-light:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-light:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-light-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-light-disabled)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-light-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-light-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-light.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-light-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-default)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):hover': {
         background: 'var(--ids-comp-chip-outlined-color-bg-dark-hovered)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):hover>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:hover>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):hover>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-hovered)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus,.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible':
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus,button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus-visible':
         {
           background: 'var(--ids-comp-chip-outlined-color-bg-dark-focused)',
           borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-focused)',
           outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
         },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-icon,.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-icon':
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus>.ids-icon,button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus-visible>.ids-icon':
         { color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus>.ids-chip__label,.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:focus-visible>.ids-chip__label':
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus>.ids-chip__label,button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):focus-visible>.ids-chip__label':
         { color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-focused)' },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active': {
         background: 'var(--ids-comp-chip-outlined-color-bg-dark-pressed)',
         borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-icon': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active>.ids-icon': {
         color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark:not(.ids-chip-disabled)[role=button]:active>.ids-chip__label': {
+      'button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active>.ids-chip__label': {
         color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-pressed)',
       },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled': {
-        background: 'var(--ids-comp-chip-outlined-color-bg-dark-disabled)',
-        borderColor: 'var(--ids-comp-chip-outlined-color-border-dark-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled>.ids-icon': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-icon-dark-disabled)',
-      },
-      '.ids-chip.ids-chip-outlined.ids-chip-dark.ids-chip-disabled>.ids-chip__label': {
-        color: 'var(--ids-comp-chip-outlined-color-fg-label-dark-disabled)',
-      },
-      '.ids-chip-group': { display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap' },
+      '.ids-chip-group': { display: 'inline-flex', flexWrap: 'wrap', alignItems: 'center', alignContent: 'center' },
       '.ids-chip-group.ids-chip-group-compact': {
         padding: 'var(--ids-comp-chip-group-size-padding-y-compact) var(--ids-comp-chip-group-size-padding-x-compact)',
         columnGap: 'var(--ids-comp-chip-group-size-column-gap-compact)',
@@ -6709,6 +6707,379 @@ module.exports = function ComponentsPlugin() {
         color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled)',
         background: 'var(--ids-comp-menu-item-filled-color-bg-surface-disabled)',
       },
+      '.ids-notification>.ids-notification__content-wrapper': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        flexWrap: 'wrap',
+        borderStyle: 'solid',
+      },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__leading-element': {
+        display: 'flex',
+        alignItems: 'center',
+        flexShrink: 0,
+      },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__container': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        alignContent: 'center',
+        flex: '1 0 0',
+        flexWrap: 'wrap',
+      },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container': {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { fontStyle: 'normal' },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { flex: '1 0 0', fontStyle: 'normal' },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action': {
+        display: 'flex',
+        alignItems: 'center',
+      },
+      '.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-btn-container.ids-notification__label-btn': {
+        display: 'flex',
+        alignSelf: 'center',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-filled-color-border-error-default)',
+        background: 'var(--ids-comp-notification-filled-color-bg-error-default)',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-filled-color-fg-icon-error-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-filled-color-fg-title-error-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-filled-color-fg-message-error-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-filled-color-border-success-default)',
+        background: 'var(--ids-comp-notification-filled-color-bg-success-default)',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-filled-color-fg-icon-success-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-filled-color-fg-title-success-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-filled-color-fg-message-success-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-filled-color-border-warning-default)',
+        background: 'var(--ids-comp-notification-filled-color-bg-warning-default)',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-filled-color-fg-icon-warning-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-filled-color-fg-title-warning-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-filled-color-fg-message-warning-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-filled-color-border-light-default)',
+        background: 'var(--ids-comp-notification-filled-color-bg-light-default)',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-filled-color-fg-icon-light-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-filled-color-fg-title-light-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-filled-color-fg-message-light-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-filled-color-border-dark-default)',
+        background: 'var(--ids-comp-notification-filled-color-bg-dark-default)',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-filled-color-fg-icon-dark-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-filled-color-fg-title-dark-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-filled-color-fg-message-dark-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-filled-color-border-surface-default)',
+        background: 'var(--ids-comp-notification-filled-color-bg-surface-default)',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-filled-color-fg-icon-surface-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-filled-color-fg-title-surface-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-filled-color-fg-message-surface-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-filled-color-border-info-default)',
+        background: 'var(--ids-comp-notification-filled-color-bg-info-default)',
+      },
+      '.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-filled-color-fg-icon-info-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-filled-color-fg-title-info-default)' },
+      '.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-filled-color-fg-message-info-default)' },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper': {
+        gap: 'var(--ids-comp-notification-outlined-container-size-gap-compact)',
+        padding:
+          'var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact)',
+        borderRadius: 'var(--ids-comp-notification-outlined-container-size-border-radius-compact)',
+        borderTopWidth: 'var(--ids-comp-notification-outlined-container-size-border-top-width-compact)',
+        borderRightWidth: 'var(--ids-comp-notification-outlined-container-size-border-right-width-compact)',
+        borderBottomWidth: 'var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact)',
+        borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-compact)',
+      },
+      '.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)',
+      },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon': {
+        width: 'var(--ids-comp-notification-icon-size-icon-compact)',
+        height: 'var(--ids-comp-notification-icon-size-icon-compact)',
+        fontSize: 'var(--ids-comp-notification-icon-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-notification-icon-typography-font-weight-compact)',
+        lineHeight: 'var(--ids-comp-notification-icon-typography-line-height-compact)',
+      },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container': {
+        minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-compact)',
+        paddingRight: 'var(--ids-comp-notification-message-size-padding-right-compact)',
+        gap: 'var(--ids-comp-notification-message-size-gap-compact)',
+      },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container':
+        { rowGap: 'var(--ids-comp-notification-message-size-gap-compact)' },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        {
+          fontSize: 'var(--ids-comp-notification-title-typography-font-size-compact)',
+          fontWeight: 'var(--ids-comp-notification-title-typography-font-weight-compact)',
+          lineHeight: 'var(--ids-comp-notification-title-typography-line-height-compact)',
+          letterSpacing: 'var(--ids-comp-notification-title-typography-letter-spacing-compact)',
+        },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        {
+          fontSize: 'var(--ids-comp-notification-message-typography-font-size-compact)',
+          fontWeight: 'var(--ids-comp-notification-message-typography-font-weight-compact)',
+          lineHeight: 'var(--ids-comp-notification-message-typography-line-height-compact)',
+          letterSpacing: 'var(--ids-comp-notification-message-typography-letter-spacing-compact)',
+        },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action':
+        { gap: 'var(--ids-comp-notification-actions-size-gap-compact)' },
+      '.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__close-btn-container>.ids-icon-button>.ids-icon':
+        {
+          width: 'var(--ids-comp-notification-icon-button-size-icon-button-compact)',
+          height: 'var(--ids-comp-notification-icon-button-size-icon-button-compact)',
+        },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper': {
+        gap: 'var(--ids-comp-notification-outlined-container-size-gap-comfortable)',
+        padding:
+          'var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable)',
+        borderRadius: 'var(--ids-comp-notification-outlined-container-size-border-radius-comfortable)',
+        borderTopWidth: 'var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable)',
+        borderRightWidth: 'var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable)',
+        borderBottomWidth: 'var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable)',
+        borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)',
+      },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element': {
+        paddingLeft: 'var(--ids-comp-notification-icon-size-padding-left-comfortable)',
+        paddingRight: 'var(--ids-comp-notification-icon-size-padding-right-comfortable)',
+      },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon': {
+        width: 'var(--ids-comp-notification-icon-size-icon-comfortable)',
+        height: 'var(--ids-comp-notification-icon-size-icon-comfortable)',
+        fontSize: 'var(--ids-comp-notification-icon-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-notification-icon-typography-font-weight-comfortable)',
+        lineHeight: 'var(--ids-comp-notification-icon-typography-line-height-comfortable)',
+      },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container': {
+        minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-comfortable)',
+        paddingRight: 'var(--ids-comp-notification-message-size-padding-right-comfortable)',
+        gap: 'var(--ids-comp-notification-message-size-gap-comfortable)',
+      },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container':
+        { rowGap: 'var(--ids-comp-notification-message-size-gap-comfortable)' },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        {
+          fontSize: 'var(--ids-comp-notification-title-typography-font-size-comfortable)',
+          fontWeight: 'var(--ids-comp-notification-title-typography-font-weight-comfortable)',
+          lineHeight: 'var(--ids-comp-notification-title-typography-line-height-comfortable)',
+          letterSpacing: 'var(--ids-comp-notification-title-typography-letter-spacing-comfortable)',
+        },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        {
+          fontSize: 'var(--ids-comp-notification-message-typography-font-size-comfortable)',
+          fontWeight: 'var(--ids-comp-notification-message-typography-font-weight-comfortable)',
+          lineHeight: 'var(--ids-comp-notification-message-typography-line-height-comfortable)',
+          letterSpacing: 'var(--ids-comp-notification-message-typography-letter-spacing-comfortable)',
+        },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action':
+        { gap: 'var(--ids-comp-notification-actions-size-gap-comfortable)' },
+      '.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__close-btn-container>.ids-icon-button>.ids-icon':
+        {
+          width: 'var(--ids-comp-notification-icon-button-size-icon-button-comfortable)',
+          height: 'var(--ids-comp-notification-icon-button-size-icon-button-comfortable)',
+        },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper': {
+        gap: 'var(--ids-comp-notification-outlined-container-size-gap-spacious)',
+        padding:
+          'var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious)',
+        borderRadius: 'var(--ids-comp-notification-outlined-container-size-border-radius-spacious)',
+        borderTopWidth: 'var(--ids-comp-notification-outlined-container-size-border-top-width-spacious)',
+        borderRightWidth: 'var(--ids-comp-notification-outlined-container-size-border-right-width-spacious)',
+        borderBottomWidth: 'var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious)',
+        borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)',
+      },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element': {
+        paddingLeft: 'var(--ids-comp-notification-icon-size-padding-left-spacious)',
+        paddingRight: 'var(--ids-comp-notification-icon-size-padding-right-spacious)',
+      },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon': {
+        width: 'var(--ids-comp-notification-icon-size-icon-spacious)',
+        height: 'var(--ids-comp-notification-icon-size-icon-spacious)',
+        fontSize: 'var(--ids-comp-notification-icon-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-notification-icon-typography-font-weight-spacious)',
+        lineHeight: 'var(--ids-comp-notification-icon-typography-line-height-spacious)',
+      },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container': {
+        minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-spacious)',
+        paddingRight: 'var(--ids-comp-notification-message-size-padding-right-spacious)',
+        gap: 'var(--ids-comp-notification-message-size-gap-spacious)',
+      },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container':
+        { rowGap: 'var(--ids-comp-notification-message-size-gap-spacious)' },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        {
+          fontSize: 'var(--ids-comp-notification-title-typography-font-size-spacious)',
+          fontWeight: 'var(--ids-comp-notification-title-typography-font-weight-spacious)',
+          lineHeight: 'var(--ids-comp-notification-title-typography-line-height-spacious)',
+          letterSpacing: 'var(--ids-comp-notification-title-typography-letter-spacing-spacious)',
+        },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        {
+          fontSize: 'var(--ids-comp-notification-message-typography-font-size-spacious)',
+          fontWeight: 'var(--ids-comp-notification-message-typography-font-weight-spacious)',
+          lineHeight: 'var(--ids-comp-notification-message-typography-line-height-spacious)',
+          letterSpacing: 'var(--ids-comp-notification-message-typography-letter-spacing-spacious)',
+        },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action':
+        { gap: 'var(--ids-comp-notification-actions-size-gap-spacious)' },
+      '.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__close-btn-container>.ids-icon-button>.ids-icon':
+        {
+          width: 'var(--ids-comp-notification-icon-button-size-icon-button-spacious)',
+          height: 'var(--ids-comp-notification-icon-button-size-icon-button-spacious)',
+        },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper': {
+        gap: 'var(--ids-comp-notification-outlined-container-size-gap-dense)',
+        padding:
+          'var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense)',
+        borderRadius: 'var(--ids-comp-notification-outlined-container-size-border-radius-dense)',
+        borderTopWidth: 'var(--ids-comp-notification-outlined-container-size-border-top-width-dense)',
+        borderRightWidth: 'var(--ids-comp-notification-outlined-container-size-border-right-width-dense)',
+        borderBottomWidth: 'var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense)',
+        borderLeftWidth: 'var(--ids-comp-notification-outlined-container-size-border-left-width-dense)',
+      },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element': {
+        paddingLeft: 'var(--ids-comp-notification-icon-size-padding-left-dense)',
+        paddingRight: 'var(--ids-comp-notification-icon-size-padding-right-dense)',
+      },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon': {
+        width: 'var(--ids-comp-notification-icon-size-icon-dense)',
+        height: 'var(--ids-comp-notification-icon-size-icon-dense)',
+        fontSize: 'var(--ids-comp-notification-icon-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-notification-icon-typography-font-weight-dense)',
+        lineHeight: 'var(--ids-comp-notification-icon-typography-line-height-dense)',
+      },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container': {
+        minWidth: 'var(--ids-comp-notification-outlined-container-size-min-width-dense)',
+        paddingRight: 'var(--ids-comp-notification-message-size-padding-right-dense)',
+        gap: 'var(--ids-comp-notification-message-size-gap-dense)',
+      },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container':
+        { rowGap: 'var(--ids-comp-notification-message-size-gap-dense)' },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        {
+          fontSize: 'var(--ids-comp-notification-title-typography-font-size-dense)',
+          fontWeight: 'var(--ids-comp-notification-title-typography-font-weight-dense)',
+          lineHeight: 'var(--ids-comp-notification-title-typography-line-height-dense)',
+          letterSpacing: 'var(--ids-comp-notification-title-typography-letter-spacing-dense)',
+        },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        {
+          fontSize: 'var(--ids-comp-notification-message-typography-font-size-dense)',
+          fontWeight: 'var(--ids-comp-notification-message-typography-font-weight-dense)',
+          lineHeight: 'var(--ids-comp-notification-message-typography-line-height-dense)',
+          letterSpacing: 'var(--ids-comp-notification-message-typography-letter-spacing-dense)',
+        },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action':
+        { gap: 'var(--ids-comp-notification-actions-size-gap-dense)' },
+      '.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__close-btn-container>.ids-icon-button>.ids-icon':
+        {
+          width: 'var(--ids-comp-notification-icon-button-size-icon-button-dense)',
+          height: 'var(--ids-comp-notification-icon-button-size-icon-button-dense)',
+        },
+      '.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-outlined-color-border-error-default)',
+        background: 'var(--ids-comp-notification-outlined-color-bg-error-default)',
+      },
+      '.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-icon-error-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-title-error-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-message-error-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-outlined-color-border-success-default)',
+        background: 'var(--ids-comp-notification-outlined-color-bg-success-default)',
+      },
+      '.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-icon-success-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-title-success-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-message-success-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-outlined-color-border-warning-default)',
+        background: 'var(--ids-comp-notification-outlined-color-bg-warning-default)',
+      },
+      '.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-icon-warning-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-title-warning-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-message-warning-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-outlined-color-border-light-default)',
+        background: 'var(--ids-comp-notification-outlined-color-bg-light-default)',
+      },
+      '.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-icon-light-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-title-light-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-message-light-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-outlined-color-border-dark-default)',
+        background: 'var(--ids-comp-notification-outlined-color-bg-dark-default)',
+      },
+      '.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-icon-dark-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-title-dark-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-message-dark-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-outlined-color-border-surface-default)',
+        background: 'var(--ids-comp-notification-outlined-color-bg-surface-default)',
+      },
+      '.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-icon-surface-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-title-surface-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-message-surface-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper': {
+        borderColor: 'var(--ids-comp-notification-outlined-color-border-info-default)',
+        background: 'var(--ids-comp-notification-outlined-color-bg-info-default)',
+      },
+      '.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-icon-info-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-title-info-default)' },
+      '.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message':
+        { color: 'var(--ids-comp-notification-outlined-color-fg-message-info-default)' },
       '.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:not(.ids-option-disabled)': { cursor: 'pointer' },
@@ -10336,15 +10707,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-tag': {
-        flexShrink: 0,
-        width: 'fit-content',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderStyle: 'solid',
-        boxSizing: 'border-box',
-      },
+      '.ids-tag': { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderStyle: 'solid', boxSizing: 'border-box' },
       '.ids-tag:focus,.ids-tag:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
       '.ids-tag:active': { outline: 'none' },
       '.ids-tag .ids-icon': { color: 'inherit' },
@@ -10353,7 +10716,7 @@ module.exports = function ComponentsPlugin() {
         height: 'var(--ids-comp-tag-size-height-compact)',
         padding: 'var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact)',
         borderRadius: 'var(--ids-comp-tag-size-border-radius-compact)',
-        border: 'var(--ids-comp-tag-size-border-width-compact)',
+        borderWidth: 'var(--ids-comp-tag-size-border-width-compact)',
       },
       '.ids-tag.ids-tag-compact:focus,.ids-tag.ids-tag-compact:focus-visible': {
         outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-compact)',
@@ -10377,7 +10740,7 @@ module.exports = function ComponentsPlugin() {
         height: 'var(--ids-comp-tag-size-height-comfortable)',
         padding: 'var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable)',
         borderRadius: 'var(--ids-comp-tag-size-border-radius-comfortable)',
-        border: 'var(--ids-comp-tag-size-border-width-comfortable)',
+        borderWidth: 'var(--ids-comp-tag-size-border-width-comfortable)',
       },
       '.ids-tag.ids-tag-comfortable:focus,.ids-tag.ids-tag-comfortable:focus-visible': {
         outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-comfortable)',
@@ -10401,7 +10764,7 @@ module.exports = function ComponentsPlugin() {
         height: 'var(--ids-comp-tag-size-height-spacious)',
         padding: 'var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious)',
         borderRadius: 'var(--ids-comp-tag-size-border-radius-spacious)',
-        border: 'var(--ids-comp-tag-size-border-width-spacious)',
+        borderWidth: 'var(--ids-comp-tag-size-border-width-spacious)',
       },
       '.ids-tag.ids-tag-spacious:focus,.ids-tag.ids-tag-spacious:focus-visible': {
         outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-spacious)',
@@ -10425,7 +10788,7 @@ module.exports = function ComponentsPlugin() {
         height: 'var(--ids-comp-tag-size-height-dense)',
         padding: 'var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense)',
         borderRadius: 'var(--ids-comp-tag-size-border-radius-dense)',
-        border: 'var(--ids-comp-tag-size-border-width-dense)',
+        borderWidth: 'var(--ids-comp-tag-size-border-width-dense)',
       },
       '.ids-tag.ids-tag-dense:focus,.ids-tag.ids-tag-dense:focus-visible': {
         outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-dense)',
@@ -10449,381 +10812,488 @@ module.exports = function ComponentsPlugin() {
         background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
+      '.ids-tag.ids-tag-filled.ids-tag-secondary': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-brand': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-error': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-success': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-warning': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-primary:focus,.ids-tag.ids-tag-filled.ids-tag-primary:focus-visible': {
+      '.ids-tag.ids-tag-filled.ids-tag-light': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-dark': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
+      },
+      '.ids-tag.ids-tag-filled.ids-tag-surface': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-primary': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-brand': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-error': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-success': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-warning': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-light': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-dark': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
+      },
+      '.ids-tag.ids-tag-outlined.ids-tag-surface': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
+      },
+      'ids-tag': { cursor: 'default' },
+      'a.ids-tag': { cursor: 'pointer', textDecoration: 'none' },
+      'a.ids-tag.ids-tag-filled.ids-tag-primary': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
+      },
+      'a.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-hovered)',
+      },
+      'a.ids-tag.ids-tag-filled.ids-tag-primary:focus,a.ids-tag.ids-tag-filled.ids-tag-primary:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-primary:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-primary:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-primary-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-primary-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-secondary': {
+      'a.ids-tag.ids-tag-filled.ids-tag-secondary': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-secondary:focus,.ids-tag.ids-tag-filled.ids-tag-secondary:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-secondary:focus,a.ids-tag.ids-tag-filled.ids-tag-secondary:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-secondary:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-secondary:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-brand': {
+      'a.ids-tag.ids-tag-filled.ids-tag-brand': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-brand:focus,.ids-tag.ids-tag-filled.ids-tag-brand:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-brand:focus,a.ids-tag.ids-tag-filled.ids-tag-brand:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-brand:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-brand:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-brand-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-brand-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-brand-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-error': {
+      'a.ids-tag.ids-tag-filled.ids-tag-error': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-error:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-error:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-error:focus,.ids-tag.ids-tag-filled.ids-tag-error:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-error:focus,a.ids-tag.ids-tag-filled.ids-tag-error:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-error:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-error:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-error-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-error-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-error-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-success': {
+      'a.ids-tag.ids-tag-filled.ids-tag-success': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-success:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-success:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-success:focus,.ids-tag.ids-tag-filled.ids-tag-success:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-success:focus,a.ids-tag.ids-tag-filled.ids-tag-success:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-success:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-success:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-success-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-success-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-success-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-warning': {
+      'a.ids-tag.ids-tag-filled.ids-tag-warning': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-warning:focus,.ids-tag.ids-tag-filled.ids-tag-warning:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-warning:focus,a.ids-tag.ids-tag-filled.ids-tag-warning:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-warning:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-warning:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-warning-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-warning-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-warning-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-light': {
+      'a.ids-tag.ids-tag-filled.ids-tag-light': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-light:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-light:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-light:focus,.ids-tag.ids-tag-filled.ids-tag-light:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-light:focus,a.ids-tag.ids-tag-filled.ids-tag-light:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-light:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-light:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-light-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-light-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-dark': {
+      'a.ids-tag.ids-tag-filled.ids-tag-dark': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-dark:focus,.ids-tag.ids-tag-filled.ids-tag-dark:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-dark:focus,a.ids-tag.ids-tag-filled.ids-tag-dark:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-dark:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-dark:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-dark-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-dark-pressed)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-surface': {
+      'a.ids-tag.ids-tag-filled.ids-tag-surface': {
         color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
         background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
         borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-hovered)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-hovered)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-surface:focus,.ids-tag.ids-tag-filled.ids-tag-surface:focus-visible': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-surface:focus,a.ids-tag.ids-tag-filled.ids-tag-surface:focus-visible': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-focused)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-filled.ids-tag-surface:active': {
-        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
+      'a.ids-tag.ids-tag-filled.ids-tag-surface:active': {
+        color: 'var(--ids-comp-tag-filled-color-fg-label-surface-pressed)',
+        background: 'var(--ids-comp-tag-filled-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-tag-filled-color-border-surface-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-primary': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-primary': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-primary:focus,.ids-tag.ids-tag-outlined.ids-tag-primary:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-primary:focus,a.ids-tag.ids-tag-outlined.ids-tag-primary:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-primary:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-primary:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-primary-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-secondary': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-secondary:focus,.ids-tag.ids-tag-outlined.ids-tag-secondary:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-secondary:focus,a.ids-tag.ids-tag-outlined.ids-tag-secondary:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-secondary:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-secondary:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-secondary-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-brand': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-brand': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-brand:focus,.ids-tag.ids-tag-outlined.ids-tag-brand:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-brand:focus,a.ids-tag.ids-tag-outlined.ids-tag-brand:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-brand:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-brand:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-brand-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-error': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-error': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-error:focus,.ids-tag.ids-tag-outlined.ids-tag-error:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-error:focus,a.ids-tag.ids-tag-outlined.ids-tag-error:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-error:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-error:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-error-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-error-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-error-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-success': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-success': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-success:focus,.ids-tag.ids-tag-outlined.ids-tag-success:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-success:focus,a.ids-tag.ids-tag-outlined.ids-tag-success:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-success:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-success:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-success-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-success-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-success-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-warning': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-warning': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-warning:focus,.ids-tag.ids-tag-outlined.ids-tag-warning:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-warning:focus,a.ids-tag.ids-tag-outlined.ids-tag-warning:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-warning:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-warning:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-warning-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-light': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-light': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-light:focus,.ids-tag.ids-tag-outlined.ids-tag-light:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-light:focus,a.ids-tag.ids-tag-outlined.ids-tag-light:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-light:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-light:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-light-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-light-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-light-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-dark': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-dark': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-dark:focus,.ids-tag.ids-tag-outlined.ids-tag-dark:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-dark:focus,a.ids-tag.ids-tag-outlined.ids-tag-dark:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-dark:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-dark:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-dark-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-pressed)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-surface': {
+      'a.ids-tag.ids-tag-outlined.ids-tag-surface': {
         color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
         background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
         borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-hovered)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-hovered)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-hovered)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-surface:focus,.ids-tag.ids-tag-outlined.ids-tag-surface:focus-visible': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-surface:focus,a.ids-tag.ids-tag-outlined.ids-tag-surface:focus-visible': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-focused)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-focused)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-focused)',
         outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
       },
-      '.ids-tag.ids-tag-outlined.ids-tag-surface:active': {
-        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
-        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
+      'a.ids-tag.ids-tag-outlined.ids-tag-surface:active': {
+        color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-pressed)',
+        background: 'var(--ids-comp-tag-outlined-color-bg-surface-pressed)',
+        borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-pressed)',
+      },
+      '.ids-tag-group': { display: 'inline-flex', flexWrap: 'wrap', alignItems: 'center', alignContent: 'center' },
+      '.ids-tag-group.ids-tag-group-compact': {
+        gap: 'var(--ids-comp-tag-group-size-row-gap-compact) var(--ids-comp-tag-group-size-column-gap-compact)',
+        padding: 'var(--ids-comp-tag-group-size-padding-y-compact) var(--ids-comp-tag-group-size-padding-x-compact)',
+      },
+      '.ids-tag-group.ids-tag-group-comfortable': {
+        gap: 'var(--ids-comp-tag-group-size-row-gap-comfortable) var(--ids-comp-tag-group-size-column-gap-comfortable)',
+        padding: 'var(--ids-comp-tag-group-size-padding-y-comfortable) var(--ids-comp-tag-group-size-padding-x-comfortable)',
+      },
+      '.ids-tag-group.ids-tag-group-spacious': {
+        gap: 'var(--ids-comp-tag-group-size-row-gap-spacious) var(--ids-comp-tag-group-size-column-gap-spacious)',
+        padding: 'var(--ids-comp-tag-group-size-padding-y-spacious) var(--ids-comp-tag-group-size-padding-x-spacious)',
+      },
+      '.ids-tag-group.ids-tag-group-dense': {
+        gap: 'var(--ids-comp-tag-group-size-row-gap-dense) var(--ids-comp-tag-group-size-column-gap-dense)',
+        padding: 'var(--ids-comp-tag-group-size-padding-y-dense) var(--ids-comp-tag-group-size-padding-x-dense)',
       },
-      'button.ids-tag :not(:disabled)': { cursor: 'pointer' },
-      'button.ids-tag :disabled': { cursor: 'not-allowed' },
       '.ids-tooltip': { position: 'fixed', display: 'block' },
       '.ids-tooltip>.ids-tooltip__content': {
         position: 'relative',