igniteui-webcomponents 4.3.0 → 4.4.0

package/themes/dark/indigo.css

@@ -1,49 +1,3 @@
-/**
- * @sass-export-section="light-material"
- */
-/**
- * @sass-export-section="light-bootstrap"
- */
-/**
- * @sass-export-section="light-fluent"
- */
-/**
- * @sass-export-section="light-indigo"
- */
-/**
- * @sass-export-section="light"
- */
-/**
- * @sass-export-section="dark-material"
- */
-/**
- * @sass-export-section="dark-bootstrap"
- */
-/**
- * @sass-export-section="dark-fluent"
- */
-/**
- * @sass-export-section="dark-indigo"
- */
-/**
- * @sass-export-section="dark"
- */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/**
- * @sass-export-section="bootstrap"
- */
-/**
- * @sass-export-section="material"
- */
-/**
- * @sass-export-section="fluent"
- */
-/**
- * @sass-export-section="indigo"
- */
-/**
- * @sass-export-section="material"
- */
 .ig-scrollbar {
   --size: var(--ig-scrollbar-size, 1rem);
   --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -68,21 +22,13 @@
     height: auto;
   }
 }
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+:root {
+  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --ig-scrollbar-track-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+
 :root {
   --ig-theme: indigo;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -90,9 +36,8 @@
   --ig-size-medium: 2;
   --ig-size-large: 3;
   --ig-scrollbar-size: 1rem;
-  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --ig-scrollbar-track-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
+
 :root {
   --ig-primary-50: hsl(230.85, 59.48%, 85.16%);
   --ig-primary-50-contrast: black;
@@ -451,6 +396,7 @@
   --ig-error-A700-contrast: white;
   --ig-error-A700: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.65);
 }
+
 :root {
   --ig-elevation-0: none;
   --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08);
@@ -478,6 +424,7 @@
   --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08);
   --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08);
 }
+
 :root {
   --ig-font-family: 'Nunito Sans', sans-serif;
   --ig-h1-font-size: 6rem;
@@ -586,8 +533,228 @@
   --ig-overline-margin-bottom: 0;
 }
 
-igc-checkbox,
-igc-checkbox ig-checkbox {
+.ig-typography h1 {
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
+  font-size: var(--ig-h1-font-size);
+  font-weight: var(--ig-h1-font-weight);
+  font-style: var(--ig-h1-font-style);
+  line-height: var(--ig-h1-line-height);
+  letter-spacing: var(--ig-h1-letter-spacing);
+  text-transform: var(--ig-h1-text-transform);
+  margin-top: var(--ig-h1-margin-top);
+  margin-bottom: var(--ig-h1-margin-bottom);
+}
+.ig-typography h2 {
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
+  font-size: var(--ig-h2-font-size);
+  font-weight: var(--ig-h2-font-weight);
+  font-style: var(--ig-h2-font-style);
+  line-height: var(--ig-h2-line-height);
+  letter-spacing: var(--ig-h2-letter-spacing);
+  text-transform: var(--ig-h2-text-transform);
+  margin-top: var(--ig-h2-margin-top);
+  margin-bottom: var(--ig-h2-margin-bottom);
+}
+.ig-typography h3 {
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
+  font-size: var(--ig-h3-font-size);
+  font-weight: var(--ig-h3-font-weight);
+  font-style: var(--ig-h3-font-style);
+  line-height: var(--ig-h3-line-height);
+  letter-spacing: var(--ig-h3-letter-spacing);
+  text-transform: var(--ig-h3-text-transform);
+  margin-top: var(--ig-h3-margin-top);
+  margin-bottom: var(--ig-h3-margin-bottom);
+}
+.ig-typography h4 {
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
+  font-size: var(--ig-h4-font-size);
+  font-weight: var(--ig-h4-font-weight);
+  font-style: var(--ig-h4-font-style);
+  line-height: var(--ig-h4-line-height);
+  letter-spacing: var(--ig-h4-letter-spacing);
+  text-transform: var(--ig-h4-text-transform);
+  margin-top: var(--ig-h4-margin-top);
+  margin-bottom: var(--ig-h4-margin-bottom);
+}
+.ig-typography h5 {
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
+  font-size: var(--ig-h5-font-size);
+  font-weight: var(--ig-h5-font-weight);
+  font-style: var(--ig-h5-font-style);
+  line-height: var(--ig-h5-line-height);
+  letter-spacing: var(--ig-h5-letter-spacing);
+  text-transform: var(--ig-h5-text-transform);
+  margin-top: var(--ig-h5-margin-top);
+  margin-bottom: var(--ig-h5-margin-bottom);
+}
+.ig-typography h6 {
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
+  font-size: var(--ig-h6-font-size);
+  font-weight: var(--ig-h6-font-weight);
+  font-style: var(--ig-h6-font-style);
+  line-height: var(--ig-h6-line-height);
+  letter-spacing: var(--ig-h6-letter-spacing);
+  text-transform: var(--ig-h6-text-transform);
+  margin-top: var(--ig-h6-margin-top);
+  margin-bottom: var(--ig-h6-margin-bottom);
+}
+.ig-typography p {
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-1-font-size);
+  font-weight: var(--ig-body-1-font-weight);
+  font-style: var(--ig-body-1-font-style);
+  line-height: var(--ig-body-1-line-height);
+  letter-spacing: var(--ig-body-1-letter-spacing);
+  text-transform: var(--ig-body-1-text-transform);
+  margin-top: var(--ig-body-1-margin-top);
+  margin-bottom: var(--ig-body-1-margin-bottom);
+}
+.ig-typography .ig-typography__h1 {
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
+  font-size: var(--ig-h1-font-size);
+  font-weight: var(--ig-h1-font-weight);
+  font-style: var(--ig-h1-font-style);
+  line-height: var(--ig-h1-line-height);
+  letter-spacing: var(--ig-h1-letter-spacing);
+  text-transform: var(--ig-h1-text-transform);
+  margin-top: var(--ig-h1-margin-top);
+  margin-bottom: var(--ig-h1-margin-bottom);
+}
+.ig-typography .ig-typography__h2 {
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
+  font-size: var(--ig-h2-font-size);
+  font-weight: var(--ig-h2-font-weight);
+  font-style: var(--ig-h2-font-style);
+  line-height: var(--ig-h2-line-height);
+  letter-spacing: var(--ig-h2-letter-spacing);
+  text-transform: var(--ig-h2-text-transform);
+  margin-top: var(--ig-h2-margin-top);
+  margin-bottom: var(--ig-h2-margin-bottom);
+}
+.ig-typography .ig-typography__h3 {
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
+  font-size: var(--ig-h3-font-size);
+  font-weight: var(--ig-h3-font-weight);
+  font-style: var(--ig-h3-font-style);
+  line-height: var(--ig-h3-line-height);
+  letter-spacing: var(--ig-h3-letter-spacing);
+  text-transform: var(--ig-h3-text-transform);
+  margin-top: var(--ig-h3-margin-top);
+  margin-bottom: var(--ig-h3-margin-bottom);
+}
+.ig-typography .ig-typography__h4 {
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
+  font-size: var(--ig-h4-font-size);
+  font-weight: var(--ig-h4-font-weight);
+  font-style: var(--ig-h4-font-style);
+  line-height: var(--ig-h4-line-height);
+  letter-spacing: var(--ig-h4-letter-spacing);
+  text-transform: var(--ig-h4-text-transform);
+  margin-top: var(--ig-h4-margin-top);
+  margin-bottom: var(--ig-h4-margin-bottom);
+}
+.ig-typography .ig-typography__h5 {
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
+  font-size: var(--ig-h5-font-size);
+  font-weight: var(--ig-h5-font-weight);
+  font-style: var(--ig-h5-font-style);
+  line-height: var(--ig-h5-line-height);
+  letter-spacing: var(--ig-h5-letter-spacing);
+  text-transform: var(--ig-h5-text-transform);
+  margin-top: var(--ig-h5-margin-top);
+  margin-bottom: var(--ig-h5-margin-bottom);
+}
+.ig-typography .ig-typography__h6 {
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
+  font-size: var(--ig-h6-font-size);
+  font-weight: var(--ig-h6-font-weight);
+  font-style: var(--ig-h6-font-style);
+  line-height: var(--ig-h6-line-height);
+  letter-spacing: var(--ig-h6-letter-spacing);
+  text-transform: var(--ig-h6-text-transform);
+  margin-top: var(--ig-h6-margin-top);
+  margin-bottom: var(--ig-h6-margin-bottom);
+}
+.ig-typography .ig-typography__subtitle-1 {
+  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-1-font-size);
+  font-weight: var(--ig-subtitle-1-font-weight);
+  font-style: var(--ig-subtitle-1-font-style);
+  line-height: var(--ig-subtitle-1-line-height);
+  letter-spacing: var(--ig-subtitle-1-letter-spacing);
+  text-transform: var(--ig-subtitle-1-text-transform);
+  margin-top: var(--ig-subtitle-1-margin-top);
+  margin-bottom: var(--ig-subtitle-1-margin-bottom);
+}
+.ig-typography .ig-typography__subtitle-2 {
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
+}
+.ig-typography .ig-typography__body-1 {
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-1-font-size);
+  font-weight: var(--ig-body-1-font-weight);
+  font-style: var(--ig-body-1-font-style);
+  line-height: var(--ig-body-1-line-height);
+  letter-spacing: var(--ig-body-1-letter-spacing);
+  text-transform: var(--ig-body-1-text-transform);
+  margin-top: var(--ig-body-1-margin-top);
+  margin-bottom: var(--ig-body-1-margin-bottom);
+}
+.ig-typography .ig-typography__body-2 {
+  font-family: var(--ig-body-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-2-font-size);
+  font-weight: var(--ig-body-2-font-weight);
+  font-style: var(--ig-body-2-font-style);
+  line-height: var(--ig-body-2-line-height);
+  letter-spacing: var(--ig-body-2-letter-spacing);
+  text-transform: var(--ig-body-2-text-transform);
+  margin-top: var(--ig-body-2-margin-top);
+  margin-bottom: var(--ig-body-2-margin-bottom);
+}
+.ig-typography .ig-typography__button {
+  font-family: var(--ig-button-font-family, var(--ig-font-family));
+  font-size: var(--ig-button-font-size);
+  font-weight: var(--ig-button-font-weight);
+  font-style: var(--ig-button-font-style);
+  line-height: var(--ig-button-line-height);
+  letter-spacing: var(--ig-button-letter-spacing);
+  text-transform: var(--ig-button-text-transform);
+  margin-top: var(--ig-button-margin-top);
+  margin-bottom: var(--ig-button-margin-bottom);
+}
+.ig-typography .ig-typography__caption {
+  font-family: var(--ig-caption-font-family, var(--ig-font-family));
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
+}
+.ig-typography .ig-typography__overline {
+  font-family: var(--ig-overline-font-family, var(--ig-font-family));
+  font-size: var(--ig-overline-font-size);
+  font-weight: var(--ig-overline-font-weight);
+  font-style: var(--ig-overline-font-style);
+  line-height: var(--ig-overline-line-height);
+  letter-spacing: var(--ig-overline-letter-spacing);
+  text-transform: var(--ig-overline-text-transform);
+  margin-top: var(--ig-overline-margin-top);
+  margin-bottom: var(--ig-overline-margin-bottom);
+}
+
+igc-checkbox {
   --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
   --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-surface-500), var(--ig-surface-a)));
   --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
@@ -599,14 +766,14 @@ igc-checkbox ig-checkbox {
   --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-400), var(--ig-gray-a)));
   --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));
   --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-200), var(--ig-error-a)));
-  --border-radius: var(--ig-checkbox-border-radius, 0.1875rem);
-  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.1875rem);
+  --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.3) * 0.625rem), 0.625rem));
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.1875rem, 0rem, 1.5rem);
   --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --focus-outline-color-focused: var(--ig-checkbox-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.125) * 1.5rem), 1.5rem));
 }
 
-igc-switch,
-igc-switch ig-switch {
+igc-switch {
   --resting-elevation: var(--ig-switch-resting-elevation, var(--ig-elevation-2));
   --hover-elevation: var(--ig-switch-hover-elevation, var(--ig-elevation-3));
   --disabled-elevation: var(--ig-switch-disabled-elevation, var(--ig-elevation-1));
@@ -630,17 +797,174 @@ igc-switch ig-switch {
   --thumb-on-error-color: var(--ig-switch-thumb-on-error-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
   --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --border-radius-track: var(--ig-switch-border-radius-track, 0.5rem);
-  --border-radius-thumb: var(--ig-switch-border-radius-thumb, 0.625rem);
-  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem);
+  --border-radius-track: var(--ig-switch-border-radius-track, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --border-radius-thumb: var(--ig-switch-border-radius-thumb, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.625rem), 0.625rem));
+  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem, 0rem, 1.5rem);
   --focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --focus-outline-color-focused: var(--ig-switch-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
+}
+
+igc-input {
+  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-1));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-1));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-input-input-prefix-background, transparent);
+  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, inherit);
+  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, inherit);
+  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-input-input-suffix-background, transparent);
+  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, inherit);
+  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, inherit);
+  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, var(--ig-surface-500-contrast));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));
+  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --border-background: var(--ig-input-border-background, transparent);
+  --border-disabled-background: var(--ig-input-border-disabled-background, transparent);
+  --search-background: var(--ig-input-search-background, transparent);
+  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), 0.7));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), 0.7));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), 0.7));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, transparent);
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, transparent);
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.125rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
 }
 
-igc-input,
-igc-mask-input,
-igc-date-time-input {
-  --label-focus-color: hsla(var(--ig-gray-800), var(--ig-gray-a));
+igc-select::part(input) {
+  --search-resting-elevation: var(--ig-select-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-select-search-hover-elevation, var(--ig-elevation-1));
+  --search-disabled-elevation: var(--ig-select-search-disabled-elevation, var(--ig-elevation-1));
+  --helper-text-color: var(--ig-select-helper-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-select-input-prefix-background, transparent);
+  --input-prefix-color: var(--ig-select-input-prefix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-select-input-prefix-background--filled, inherit);
+  --input-prefix-color--filled: var(--ig-select-input-prefix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-select-input-prefix-background--focused, inherit);
+  --input-prefix-color--focused: var(--ig-select-input-prefix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-select-input-suffix-background, transparent);
+  --input-suffix-color: var(--ig-select-input-suffix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-select-input-suffix-background--filled, inherit);
+  --input-suffix-color--filled: var(--ig-select-input-suffix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-select-input-suffix-background--focused, inherit);
+  --input-suffix-color--focused: var(--ig-select-input-suffix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-select-idle-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-select-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-select-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-select-disabled-text-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-select-idle-secondary-color, var(--ig-surface-500-contrast));
+  --filled-secondary-color: var(--ig-select-filled-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-select-focused-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-bottom-line-color: var(--ig-select-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-select-hover-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-select-focused-bottom-line-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --interim-bottom-line-color: var(--ig-select-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));
+  --disabled-bottom-line-color: var(--ig-select-disabled-bottom-line-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-select-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-select-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-select-hover-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-select-focused-border-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --border-background: var(--ig-select-border-background, transparent);
+  --border-disabled-background: var(--ig-select-border-disabled-background, transparent);
+  --search-background: var(--ig-select-search-background, transparent);
+  --search-disabled-background: var(--ig-select-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-select-success-secondary-color, hsla(var(--ig-success-500), 0.7));
+  --warning-secondary-color: var(--ig-select-warning-secondary-color, hsla(var(--ig-warn-500), 0.7));
+  --error-secondary-color: var(--ig-select-error-secondary-color, hsla(var(--ig-error-500), 0.7));
+  --placeholder-color: var(--ig-select-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-select-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-select-box-background, transparent);
+  --box-background-hover: var(--ig-select-box-background-hover, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-select-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-select-box-disabled-background, transparent);
+  --box-border-radius: var(--ig-select-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-select-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-select-search-border-radius, 0.125rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-select-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-select-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-select-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}
+
+igc-combo::part(input) {
+  --search-resting-elevation: var(--ig-combo-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-combo-search-hover-elevation, var(--ig-elevation-1));
+  --search-disabled-elevation: var(--ig-combo-search-disabled-elevation, var(--ig-elevation-1));
+  --helper-text-color: var(--ig-combo-helper-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-combo-input-prefix-background, transparent);
+  --input-prefix-color: var(--ig-combo-input-prefix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-combo-input-prefix-background--filled, inherit);
+  --input-prefix-color--filled: var(--ig-combo-input-prefix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-combo-input-prefix-background--focused, inherit);
+  --input-prefix-color--focused: var(--ig-combo-input-prefix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-combo-input-suffix-background, transparent);
+  --input-suffix-color: var(--ig-combo-input-suffix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-combo-input-suffix-background--filled, inherit);
+  --input-suffix-color--filled: var(--ig-combo-input-suffix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-combo-input-suffix-background--focused, inherit);
+  --input-suffix-color--focused: var(--ig-combo-input-suffix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-combo-idle-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-combo-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-combo-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-combo-disabled-text-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-combo-idle-secondary-color, var(--ig-surface-500-contrast));
+  --filled-secondary-color: var(--ig-combo-filled-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-combo-focused-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-bottom-line-color: var(--ig-combo-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-combo-hover-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-combo-focused-bottom-line-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --interim-bottom-line-color: var(--ig-combo-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));
+  --disabled-bottom-line-color: var(--ig-combo-disabled-bottom-line-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-combo-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-combo-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-combo-hover-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-combo-focused-border-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --border-background: var(--ig-combo-border-background, transparent);
+  --border-disabled-background: var(--ig-combo-border-disabled-background, transparent);
+  --search-background: var(--ig-combo-search-background, transparent);
+  --search-disabled-background: var(--ig-combo-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-combo-success-secondary-color, hsla(var(--ig-success-500), 0.7));
+  --warning-secondary-color: var(--ig-combo-warning-secondary-color, hsla(var(--ig-warn-500), 0.7));
+  --error-secondary-color: var(--ig-combo-error-secondary-color, hsla(var(--ig-error-500), 0.7));
+  --placeholder-color: var(--ig-combo-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-combo-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-combo-box-background, transparent);
+  --box-background-hover: var(--ig-combo-box-background-hover, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-combo-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-combo-box-disabled-background, transparent);
+  --box-border-radius: var(--ig-combo-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-combo-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-combo-search-border-radius, 0.125rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-combo-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-combo-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-combo-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
 }
 
 igc-radio {
@@ -663,6 +987,34 @@ igc-slider {
   --inactive-hover-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
 
+igc-list {
+  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-list-header-text-color, var(--ig-surface-500-contrast));
+  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-title-color: var(--ig-list-item-title-color, 'currentColor');
+  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');
+  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');
+  --item-action-color: var(--ig-list-item-action-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-action-color-hover: var(--ig-list-item-action-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-action-color-active: var(--ig-list-item-action-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-subtitle-color: var(--ig-list-item-subtitle-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --border-color: var(--ig-list-border-color, transparent);
+  --border-width: var(--ig-list-border-width, 0);
+  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));
+  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.0833333333) * 1.5rem), 1.5rem));
+}
+
 igc-list-item {
   --item-hover-bg: hsla(var(--ig-primary-500), 0.5);
 }
@@ -671,25 +1023,160 @@ igc-tree-item {
   --hover-color: hsla(var(--ig-primary-200), 0.5);
 }
 
-igc-dropdown-header {
-  --header-color: var(--ig-surface-500-contrast);
+igc-dropdown {
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, var(--ig-surface-500-contrast));
+  --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 0);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
 }
 
 igc-nav-drawer {
+  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-0));
+  --background: var(--ig-navdrawer-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-navdrawer-border-color, transparent);
+  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-gray-400), 0.5));
+  --item-hover-background: var(--ig-navdrawer-item-hover-background, transparent);
+  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
   --background: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 
+igc-nav-drawer {
+  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-0));
+  --background: var(--ig-navdrawer-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-navdrawer-border-color, transparent);
+  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-gray-400), 0.5));
+  --item-hover-background: var(--ig-navdrawer-item-hover-background, transparent);
+  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --border-radius: var(--ig-navdrawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-navdrawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
+}
+
 igc-nav-drawer-item {
   --text-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
   --hover-text-color: hsla(var(--ig-gray-50), var(--ig-gray-a));
   --active-background: hsla(var(--ig-gray-400), 0.5);
 }
 
-igc-select::part(label) {
-  --label-focus-color: hsla(var(--ig-gray-800), var(--ig-gray-a));
+igc-select {
+  --toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-background: var(--ig-select-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, hsla(var(--ig-gray-400), 0.3));
+  --toggle-button-foreground: var(--ig-select-toggle-button-foreground, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, transparent);
+  --toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-1));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-1));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-input-input-prefix-background, transparent);
+  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, inherit);
+  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, inherit);
+  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-input-input-suffix-background, transparent);
+  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, inherit);
+  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, inherit);
+  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, var(--ig-surface-500-contrast));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));
+  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --border-background: var(--ig-input-border-background, transparent);
+  --border-disabled-background: var(--ig-input-border-disabled-background, transparent);
+  --search-background: var(--ig-input-search-background, transparent);
+  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), 0.7));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), 0.7));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), 0.7));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, transparent);
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, transparent);
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.125rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-3));
+  --background-color: var(--ig-drop-down-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-drop-down-header-text-color, var(--ig-surface-500-contrast));
+  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-primary-500-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-primary-400-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-primary-400-contrast));
+  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-width: var(--ig-drop-down-border-width, 0);
+  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
 }
 
 igc-snackbar {
+  --elevation: var(--ig-snackbar-elevation, var(--ig-elevation-4));
+  --background: var(--ig-snackbar-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --text-color: var(--ig-snackbar-text-color, var(--ig-gray-200-contrast));
+  --button-color: var(--ig-snackbar-button-color, var(--ig-gray-200-contrast));
+  --border-radius: var(--ig-snackbar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1.5rem), 1.5rem));
   --background-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
   --text-color: var(--ig-gray-200-contrast);
 }
@@ -710,12 +1197,99 @@ apex-grid {
   --cell-active-border-color: var(--ig-surface-500-contrast);
 }
 
-igc-combo::part(label) {
-  --label-focus-color: hsla(var(--ig-gray-800), var(--ig-gray-a));
+igc-combo {
+  --toggle-button-background-focus--border: var(--ig-combo-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --case-icon-color: var(--ig-combo-case-icon-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --case-icon-color--active: var(--ig-combo-case-icon-color--active, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --empty-list-background: var(--ig-combo-empty-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --search-separator-border-color: var(--ig-combo-search-separator-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --empty-list-placeholder-color: var(--ig-combo-empty-list-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --toggle-button-background: var(--ig-combo-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-background-focus: var(--ig-combo-toggle-button-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-foreground: var(--ig-combo-toggle-button-foreground, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --toggle-button-foreground-focus: var(--ig-combo-toggle-button-foreground-focus, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --toggle-button-foreground-filled: var(--ig-combo-toggle-button-foreground-filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --clear-button-background: var(--ig-combo-clear-button-background, transparent);
+  --clear-button-background-focus: var(--ig-combo-clear-button-background-focus, transparent);
+  --clear-button-foreground: var(--ig-combo-clear-button-foreground, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --clear-button-foreground-focus: var(--ig-combo-clear-button-foreground-focus, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --toggle-button-background-disabled: var(--ig-combo-toggle-button-background-disabled, transparent);
+  --toggle-button-foreground-disabled: var(--ig-combo-toggle-button-foreground-disabled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-1));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-1));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-input-input-prefix-background, transparent);
+  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, inherit);
+  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, inherit);
+  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-input-input-suffix-background, transparent);
+  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, inherit);
+  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, inherit);
+  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, var(--ig-surface-500-contrast));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));
+  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --border-background: var(--ig-input-border-background, transparent);
+  --border-disabled-background: var(--ig-input-border-disabled-background, transparent);
+  --search-background: var(--ig-input-search-background, transparent);
+  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), 0.7));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), 0.7));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), 0.7));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, transparent);
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, transparent);
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.125rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-3));
+  --background-color: var(--ig-drop-down-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-drop-down-header-text-color, var(--ig-surface-500-contrast));
+  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-primary-500), 0.15));
+  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-primary-500-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-primary-400-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-primary-400-contrast));
+  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-width: var(--ig-drop-down-border-width, 0);
+  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
 }
 
-igc-button[variant=flat],
-igc-button[variant=flat] [igxButton=flat], igc-button[variant=flat] .igx-button--flat {
+igc-button[variant=flat] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -725,6 +1299,7 @@ igc-button[variant=flat] [igxButton=flat], igc-button[variant=flat] .igx-button-
   --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
   --disabled-background: var(--ig-button-disabled-background, transparent);
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -739,11 +1314,10 @@ igc-button[variant=flat] [igxButton=flat], igc-button[variant=flat] .igx-button-
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --active-background: var(--ig-button-active-background, transparent);
   --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --border-radius: var(--ig-button-border-radius, 1.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));
 }
 
-igc-button[variant=outlined],
-igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined] .igx-button--outlined {
+igc-button[variant=outlined] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-gray-200), 0.8));
   --border-color: var(--ig-button-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --hover-border-color: var(--ig-button-hover-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
@@ -753,6 +1327,7 @@ igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined]
   --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
   --disabled-background: var(--ig-button-disabled-background, transparent);
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -767,11 +1342,10 @@ igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined]
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --active-background: var(--ig-button-active-background, transparent);
   --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --border-radius: var(--ig-button-border-radius, 1.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));
 }
 
-igc-button[variant=contained],
-igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained] .igx-button--raised {
+igc-button[variant=contained] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -781,6 +1355,7 @@ igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained]
   --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
   --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-gray-200), 0.1));
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -795,11 +1370,10 @@ igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained]
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
   --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --border-radius: var(--ig-button-border-radius, 1.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));
 }
 
-igc-button[variant=fab],
-igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fab {
+igc-button[variant=fab] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -809,6 +1383,7 @@ igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fa
   --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
   --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-gray-200), 0.1));
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.625rem, -1 * 2.625rem), var(--is-small, 1) * max(2.25rem, -1 * 2.25rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -823,21 +1398,88 @@ igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fa
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
   --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-50), var(--ig-gray-a)));
-  --border-radius: var(--ig-button-border-radius, 1.75rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0.75rem, calc(var(--ig-radius-factor, 1) * 1.75rem), 1.75rem));
 }
 
-igc-icon,
-igc-icon ig-icon {
+igc-icon {
   --color: var(--ig-icon-color, 'currentColor');
-  --size: var(--ig-icon-size, 1.5rem);
   --disabled-color: var(--ig-icon-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --size: var(--ig-icon-size, max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.25rem, -1 * 1.25rem), var(--is-small, 1) * max(1.125rem, -1 * 1.125rem)));
 }
 
-igc-navbar,
-igc-navbar ig-navbar {
+igc-navbar {
   --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));
   --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));
   --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-primary-500-contrast));
   --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));
+}
+
+igc-avatar {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
+  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
+  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}
+
+igc-step {
+  --step-background: var(--ig-stepper-step-background, transparent);
+  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-100), 0.3));
+  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), 0.5));
+  --indicator-background: var(--ig-stepper-indicator-background, transparent);
+  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);
+  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-100), 0.3));
+  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), 0.5));
+  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --complete-title-color: var(--ig-stepper-complete-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-hover-color: var(--ig-stepper-complete-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-title-focus-color: var(--ig-stepper-complete-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-subtitle-color: var(--ig-stepper-complete-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-hover-color: var(--ig-stepper-complete-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-subtitle-focus-color: var(--ig-stepper-complete-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-step-background: var(--ig-stepper-current-step-background, transparent);
+  --current-step-hover-background: var(--ig-stepper-current-step-hover-background, hsla(var(--ig-gray-100), 0.3));
+  --current-step-focus-background: var(--ig-stepper-current-step-focus-background, hsla(var(--ig-gray-100), 0.5));
+  --current-indicator-background: var(--ig-stepper-current-indicator-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-outline: var(--ig-stepper-current-indicator-outline, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --current-indicator-color: var(--ig-stepper-current-indicator-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-color: var(--ig-stepper-current-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-hover-color: var(--ig-stepper-current-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-title-focus-color: var(--ig-stepper-current-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --current-subtitle-color: var(--ig-stepper-current-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-hover-color: var(--ig-stepper-current-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --current-subtitle-focus-color: var(--ig-stepper-current-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --invalid-step-background: var(--ig-stepper-invalid-step-background, transparent);
+  --invalid-step-hover-background: var(--ig-stepper-invalid-step-hover-background, hsla(var(--ig-gray-100), 0.3));
+  --invalid-step-focus-background: var(--ig-stepper-invalid-step-focus-background, hsla(var(--ig-gray-100), 0.5));
+  --invalid-indicator-background: var(--ig-stepper-invalid-indicator-background, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-outline: var(--ig-stepper-invalid-indicator-outline, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-indicator-color: var(--ig-stepper-invalid-indicator-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --invalid-title-color: var(--ig-stepper-invalid-title-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-hover-color: var(--ig-stepper-invalid-title-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-title-focus-color: var(--ig-stepper-invalid-title-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-color: var(--ig-stepper-invalid-subtitle-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-hover-color: var(--ig-stepper-invalid-subtitle-hover-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --invalid-subtitle-focus-color: var(--ig-stepper-invalid-subtitle-focus-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --disabled-indicator-color: var(--ig-stepper-disabled-indicator-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-indicator-background: var(--ig-stepper-disabled-indicator-background, transparent);
+  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, solid);
+  --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);
+  --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 1) * 6.25rem), 6.25rem));
+  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0) * 6.25rem), 6.25rem));
 }