igniteui-webcomponents 4.3.0 → 4.4.0

package/themes/dark/material.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-100), var(--ig-gray-a));
+}
+
 :root {
   --ig-theme: material;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -90,8 +36,6 @@
   --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-100), var(--ig-gray-a));
 }
 
 :root {
@@ -835,20 +779,272 @@ igc-radio:focus-within::part(ripple checked) {
   opacity: 0.24;
 }
 
-igc-input,
-igc-mask-input,
-igc-date-time-input {
-  --focus-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+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-2));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), 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-700), 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-900), 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-900), 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-700), 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-900), 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-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), 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-500), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-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-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-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-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), 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, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --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), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 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-select::part(input) {
-  --focus-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  --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-2));
+  --search-disabled-elevation: var(--ig-select-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-select-helper-text-color, hsla(var(--ig-gray-700), 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-700), 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-900), 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-900), 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-700), 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-900), 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-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-select-idle-text-color, hsla(var(--ig-gray-700), 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-500), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-select-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-select-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-select-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-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-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-select-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-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-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-select-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-select-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-select-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-select-focused-border-color, hsla(var(--ig-primary-500), 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, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --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), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-select-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-select-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-select-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-select-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --box-background: var(--ig-select-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-select-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-select-box-background-focus, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-select-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-select-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-select-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-select-search-border-radius, 0.25rem, 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-2));
+  --search-disabled-elevation: var(--ig-combo-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-combo-helper-text-color, hsla(var(--ig-gray-700), 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-700), 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-900), 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-900), 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-700), 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-900), 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-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-combo-idle-text-color, hsla(var(--ig-gray-700), 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-500), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-combo-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-combo-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-combo-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-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-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-combo-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-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-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-combo-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-combo-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-combo-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-combo-focused-border-color, hsla(var(--ig-primary-500), 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, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --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), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-combo-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-combo-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-combo-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-combo-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --box-background: var(--ig-combo-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-combo-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-combo-box-background-focus, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-combo-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-combo-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-combo-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-combo-search-border-radius, 0.25rem, 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-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-700), var(--ig-gray-a)));
+  --toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsla(var(--ig-gray-500), 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-2));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), 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-700), 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-900), 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-900), 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-700), 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-900), 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-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), 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-500), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-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-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-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-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), 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, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --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), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 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-8));
+  --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, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-800), 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-gray-100), 0.8));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-gray-100), 0.8));
+  --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-secondary-100), var(--ig-secondary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-secondary-100-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-secondary-200-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-secondary-200-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.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 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-tab {
   --hover-background: hsla(var(--ig-gray-100), 0.5);
 }
 
+igc-nav-drawer {
+  --elevation: var(--ig-navdrawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-navdrawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-navdrawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-navdrawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-navdrawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-navdrawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-navdrawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-navdrawer-item-hover-background, hsla(var(--ig-gray-100), 0.5));
+  --item-hover-text-color: var(--ig-navdrawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-navdrawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-navdrawer-item-hover-icon-color, hsla(var(--ig-gray-900), 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, 0.1666666667) * 1.5rem), 1.5rem));
+}
+
 igc-nav-drawer-item {
   --hover-background: hsla(var(--ig-gray-100), 0.5);
 }
@@ -862,12 +1058,99 @@ apex-grid {
   --row-border-color: hsla(var(--ig-gray-200), 0.24);
 }
 
-igc-combo::part(input) {
-  --focus-background: hsla(var(--ig-gray-100), 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-400), 0.3));
+  --toggle-button-foreground: var(--ig-combo-toggle-button-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --toggle-button-foreground-focus: var(--ig-combo-toggle-button-foreground-focus, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --toggle-button-foreground-filled: var(--ig-combo-toggle-button-foreground-filled, hsla(var(--ig-gray-900), 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, var(--ig-gray-100-contrast));
+  --clear-button-foreground-focus: var(--ig-combo-clear-button-foreground-focus, var(--ig-gray-100-contrast));
+  --toggle-button-background-disabled: var(--ig-combo-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --toggle-button-foreground-disabled: var(--ig-combo-toggle-button-foreground-disabled, hsla(var(--ig-gray-500), 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-2));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), 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-700), 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-900), 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-900), 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-700), 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-900), 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-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), 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-500), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-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-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-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-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), 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, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --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), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 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-8));
+  --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, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-800), 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-gray-100), 0.8));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-gray-100), 0.8));
+  --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-secondary-100), var(--ig-secondary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-secondary-100-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-secondary-200-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-secondary-200-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.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 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, transparent);
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -877,6 +1160,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-200), 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));
@@ -891,11 +1175,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-secondary-500), var(--ig-secondary-a)));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-400), 0.12));
   --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --border-radius: var(--ig-button-border-radius, 0.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 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, transparent);
   --border-color: var(--ig-button-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
   --hover-border-color: var(--ig-button-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
@@ -905,6 +1188,7 @@ igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined]
   --disabled-border-color: var(--ig-button-disabled-border-color, hsla(var(--ig-gray-100), 0.3));
   --disabled-background: var(--ig-button-disabled-background, transparent);
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-200), 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));
@@ -919,11 +1203,10 @@ igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined]
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-400), 0.12));
   --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --border-radius: var(--ig-button-border-radius, 0.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 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, transparent);
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -933,6 +1216,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-100), 0.3));
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-200), 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-2));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-4));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-8));
@@ -947,11 +1231,10 @@ igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained]
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-secondary-300-contrast));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
   --active-foreground: var(--ig-button-active-foreground, var(--ig-secondary-300-contrast));
-  --border-radius: var(--ig-button-border-radius, 0.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 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, transparent);
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -961,6 +1244,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-100), 0.3));
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-6));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-12));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-12));
@@ -975,18 +1259,16 @@ igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fa
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-secondary-300-contrast));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
   --active-foreground: var(--ig-button-active-foreground, var(--ig-secondary-300-contrast));
-  --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, 'currentColor');
+  --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-4));
   --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));
@@ -994,8 +1276,7 @@ igc-navbar ig-navbar {
   --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));
 }
 
-igc-checkbox,
-igc-checkbox ig-checkbox {
+igc-checkbox {
   --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
@@ -1007,12 +1288,12 @@ igc-checkbox ig-checkbox {
   --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-500), 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-500), var(--ig-error-a)));
-  --border-radius: var(--ig-checkbox-border-radius, 0.125rem);
-  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 1.5rem);
+  --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 0.625rem), 0.625rem));
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 1.5rem, 0rem, 1.5rem);
+  --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 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));
@@ -1036,9 +1317,10 @@ igc-switch ig-switch {
   --thumb-on-error-color: var(--ig-switch-thumb-on-error-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
   --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-gray-500), var(--ig-gray-a)));
-  --border-radius-track: var(--ig-switch-border-radius-track, 0.4375rem);
-  --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.4375rem), 0.4375rem));
+  --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);
+  --ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
 }
 igc-switch:hover::part(thumb)::after {
   opacity: 0.12;
@@ -1051,4 +1333,73 @@ igc-switch:focus-within::part(thumb)::after {
 }
 igc-switch:focus-within::part(thumb checked)::after {
   opacity: 0.24;
+}
+
+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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --indicator-outline: var(--ig-stepper-indicator-outline, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --indicator-color: var(--ig-stepper-indicator-color, var(--ig-gray-400-contrast));
+  --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-gray-900), var(--ig-gray-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-900-contrast));
+  --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, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, hsla(var(--ig-gray-200), 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-gray-900), var(--ig-gray-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, dashed);
+  --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));
 }