npm - igniteui-webcomponents - Versions diffs - 4.3.0 → 4.3.1 - Mend

igniteui-webcomponents 4.3.0 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (571) hide show

package/themes/dark/indigo.css CHANGED Viewed

@@ -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,8 @@
     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-theme: indigo;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -586,8 +527,7 @@
   --ig-overline-margin-bottom: 0;
 }
-igc-checkbox,
-igc-checkbox ig-checkbox {
+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 +539,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 +570,173 @@ 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)));
 }
-igc-input,
-igc-mask-input,
-igc-date-time-input {
-  --label-focus-color: hsla(var(--ig-gray-800), 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-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-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 {
@@ -671,8 +767,28 @@ 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 {
@@ -685,8 +801,15 @@ igc-nav-drawer-item {
   --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)));
 }
 igc-snackbar {
@@ -710,12 +833,27 @@ 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)));
 }
-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 +863,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 +878,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 +891,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 +906,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 +919,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 +934,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 +947,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,18 +962,16 @@ 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(1rem, -1 * 1rem)));
 }
-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));