@i-cell/ids-styles 0.0.19 → 0.0.20

package/dist/chip/chip.css

@@ -4,16 +4,6 @@
   border-style: solid;
   box-sizing: border-box;
 }
-.ids-chip[role=button]:focus, .ids-chip[role=button]:focus-visible {
-  outline-offset: 2px;
-  outline-style: solid;
-}
-.ids-chip:not([role=button]):focus, .ids-chip:not([role=button]):focus-visible {
-  outline-style: none;
-}
-.ids-chip.ids-chip-disabled {
-  cursor: not-allowed;
-}
 .ids-chip > .ids-chip__label {
   display: flex;
   align-items: center;
@@ -24,9 +14,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-compact);
   border-width: var(--ids-comp-chip-container-size-border-width-compact);
 }
-.ids-chip.ids-chip-compact:focus, .ids-chip.ids-chip-compact:focus-visible {
-  outline-width: 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);
@@ -59,9 +46,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-comfortable);
   border-width: var(--ids-comp-chip-container-size-border-width-comfortable);
 }
-.ids-chip.ids-chip-comfortable:focus, .ids-chip.ids-chip-comfortable:focus-visible {
-  outline-width: 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);
@@ -94,9 +78,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-spacious);
   border-width: var(--ids-comp-chip-container-size-border-width-spacious);
 }
-.ids-chip.ids-chip-spacious:focus, .ids-chip.ids-chip-spacious:focus-visible {
-  outline-width: 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);
@@ -129,9 +110,6 @@
   border-radius: var(--ids-comp-chip-container-size-border-radius-dense);
   border-width: var(--ids-comp-chip-container-size-border-width-dense);
 }
-.ids-chip.ids-chip-dense:focus, .ids-chip.ids-chip-dense:focus-visible {
-  outline-width: 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);
@@ -158,521 +136,552 @@
   font-weight: var(--ids-comp-chip-icon-typography-font-weight-dense);
   line-height: 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);
   border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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);
+  border-color: 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 {
+  outline-style: none;
+}
+
+button.ids-chip {
+  cursor: pointer;
+}
+button.ids-chip:focus, button.ids-chip:focus-visible {
+  outline-offset: 2px;
+  outline-style: solid;
+}
+button.ids-chip:disabled {
+  cursor: not-allowed;
+}
+button.ids-chip.ids-chip-compact:focus, button.ids-chip.ids-chip-compact:focus-visible {
+  outline-width: var(--ids-comp-chip-focused-outline-size-outline-compact);
+}
+button.ids-chip.ids-chip-comfortable:focus, button.ids-chip.ids-chip-comfortable:focus-visible {
+  outline-width: var(--ids-comp-chip-focused-outline-size-outline-comfortable);
+}
+button.ids-chip.ids-chip-spacious:focus, button.ids-chip.ids-chip-spacious:focus-visible {
+  outline-width: var(--ids-comp-chip-focused-outline-size-outline-spacious);
+}
+button.ids-chip.ids-chip-dense:focus, button.ids-chip.ids-chip-dense:focus-visible {
+  outline-width: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-filled-color-border-primary-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-filled-color-border-secondary-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-filled-color-border-surface-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-filled-color-border-light-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-filled-color-border-dark-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-outlined-color-border-primary-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-outlined-color-border-secondary-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-outlined-color-border-surface-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-outlined-color-border-light-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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);
-  border-color: 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);
   border-color: 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);
   border-color: var(--ids-comp-chip-outlined-color-border-dark-focused);
   outline-color: 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);
   border-color: 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);
-  border-color: 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;
-  align-items: center;
   flex-wrap: wrap;
+  align-items: center;
+  align-content: 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);