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

igniteui-webcomponents 4.3.1 → 4.4.0

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

package/themes/dark/fluent.css CHANGED Viewed

@@ -22,6 +22,11 @@
     height: auto;
   }
 }
+: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: fluent;
   --ig-spacing: 1;
@@ -31,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 {
@@ -901,6 +904,7 @@ igc-checkbox {
   --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, 0.125rem, 0rem, 1.5rem);
   --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.0833333333) * 1.5rem), 1.5rem));
 }
 igc-dropdown {
@@ -956,6 +960,7 @@ igc-switch {
   --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-700), var(--ig-gray-a)));
   --track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
 }
 igc-input {
@@ -1004,12 +1009,12 @@ igc-input {
   --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-300), 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, 0.125rem, 0rem, 1.25rem);
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
   --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 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, 2rem, 2.5rem, 3rem);
+  --size: var(--ig-input-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)));
 }
 igc-select::part(input) {
@@ -1058,12 +1063,12 @@ igc-select::part(input) {
   --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-300), 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, 0.125rem, 0rem, 1.25rem);
+  --box-border-radius: var(--ig-select-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
   --border-border-radius: var(--ig-select-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 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, 2rem, 2.5rem, 3rem);
+  --size: var(--ig-select-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)));
 }
 igc-combo::part(input) {
@@ -1112,12 +1117,12 @@ igc-combo::part(input) {
   --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-300), 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, 0.125rem, 0rem, 1.25rem);
+  --box-border-radius: var(--ig-combo-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
   --border-border-radius: var(--ig-combo-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 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, 2rem, 2.5rem, 3rem);
+  --size: var(--ig-combo-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)));
 }
 igc-radio {
@@ -1145,6 +1150,34 @@ igc-slider {
   --thumb-disabled-border: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
+igc-list {
+  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-title-color: var(--ig-list-item-title-color, 'currentColor');
+  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');
+  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');
+  --item-action-color: var(--ig-list-item-action-color, 'currentColor');
+  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');
+  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');
+  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');
+  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');
+  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');
+  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');
+  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');
+  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');
+  --border-color: var(--ig-list-border-color, transparent);
+  --border-width: var(--ig-list-border-width, 0);
+  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));
+  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));
+}
 igc-list-item {
   --item-hover-bg: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
@@ -1154,57 +1187,86 @@ igc-tab {
 }
 igc-select {
-  --search-resting-elevation: var(--ig-select-search-resting-elevation, var(--ig-elevation-0));
-  --search-hover-elevation: var(--ig-select-search-hover-elevation, var(--ig-elevation-0));
-  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --input-prefix-color--filled: var(--ig-select-input-prefix-color--filled, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --input-prefix-background--focused: var(--ig-select-input-prefix-background--focused, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --input-prefix-color--focused: var(--ig-select-input-prefix-color--focused, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --input-suffix-background: var(--ig-select-input-suffix-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --input-suffix-color--filled: var(--ig-select-input-suffix-color--filled, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --input-suffix-background--focused: var(--ig-select-input-suffix-background--focused, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --input-suffix-color--focused: var(--ig-select-input-suffix-color--focused, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --idle-text-color: var(--ig-select-idle-text-color, hsla(var(--ig-gray-900), 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-900), 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-100), var(--ig-gray-a)));
-  --border-color: var(--ig-select-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
-  --hover-border-color: var(--ig-select-hover-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --focused-border-color: var(--ig-select-focused-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
-  --border-background: var(--ig-select-border-background, transparent);
-  --border-disabled-background: var(--ig-select-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --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-100), 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-300), 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, 0.125rem, 0rem, 1.25rem);
-  --border-border-radius: var(--ig-select-border-border-radius, 0.125rem, 0rem, 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, 2rem, 2.5rem, 3rem);
+  --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-100), var(--ig-gray-a)));
+  --toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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-700), 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-400), var(--ig-gray-a)));
+  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-0));
+  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-0));
+  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-input-input-suffix-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-900), 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-900), 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-100), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-background: var(--ig-input-border-background, transparent);
+  --border-disabled-background: var(--ig-input-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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-100), 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-300), 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.1) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 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(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-4));
+  --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-gray-100), var(--ig-gray-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-surface-500-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-surface-500-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-surface-500-contrast));
+  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-width: var(--ig-drop-down-border-width, 0);
+  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.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-tree-item {
@@ -1217,6 +1279,23 @@ igc-tree-item {
   --active-selected-color: var(--ig-gray-200-contrast);
 }
+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-200), var(--ig-primary-a)));
+  --item-active-background: var(--ig-navdrawer-item-active-background, hsla(var(--ig-primary-400), 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-100), 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);
   --active-background: hsla(var(--ig-primary-400), 0.12);
@@ -1252,12 +1331,84 @@ igc-combo {
   --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-400), var(--ig-gray-a)));
+  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-0));
+  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-0));
+  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-input-input-suffix-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-900), 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-900), 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-100), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-background: var(--ig-input-border-background, transparent);
+  --border-disabled-background: var(--ig-input-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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-100), 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-300), 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.1) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 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(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-4));
+  --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-gray-100), var(--ig-gray-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-surface-500-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-surface-500-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-surface-500-contrast));
+  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-width: var(--ig-drop-down-border-width, 0);
+  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.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-icon {
   --color: var(--ig-icon-color, 'currentColor');
   --disabled-color: var(--ig-icon-disabled-color, hsla(var(--ig-gray-500), 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)));
+  --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 {
@@ -1266,4 +1417,84 @@ igc-navbar {
   --text-color: var(--ig-navbar-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --idle-icon-color: var(--ig-navbar-idle-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --hover-icon-color: var(--ig-navbar-hover-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+}
+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-rating {
+  --symbol-full-color: hsla(var(--ig-gray-800), var(--ig-gray-a));
+  --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+igc-rating[disabled],
+igc-rating:disabled {
+  --symbol-full-color: hsla(var(--ig-warn-900), var(--ig-warn-a));
+  --symbol-empty-color: hsla(var(--ig-warn-900), var(--ig-warn-a));
+}
+igc-step {
+  --step-background: var(--ig-stepper-step-background, transparent);
+  --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-100), 0.3));
+  --step-focus-background: var(--ig-stepper-step-focus-background, hsla(var(--ig-gray-100), 0.5));
+  --indicator-background: var(--ig-stepper-indicator-background, transparent);
+  --indicator-outline: var(--ig-stepper-indicator-outline, transparent);
+  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-color: var(--ig-stepper-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-hover-color: var(--ig-stepper-title-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --title-focus-color: var(--ig-stepper-title-focus-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --subtitle-color: var(--ig-stepper-subtitle-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-hover-color: var(--ig-stepper-subtitle-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --subtitle-focus-color: var(--ig-stepper-subtitle-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --complete-step-background: var(--ig-stepper-complete-step-background, transparent);
+  --complete-step-hover-background: var(--ig-stepper-complete-step-hover-background, hsla(var(--ig-gray-100), 0.3));
+  --complete-step-focus-background: var(--ig-stepper-complete-step-focus-background, hsla(var(--ig-gray-100), 0.5));
+  --complete-indicator-background: var(--ig-stepper-complete-indicator-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, transparent);
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-200-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, transparent);
+  --disabled-indicator-outline: var(--ig-stepper-disabled-indicator-outline, transparent);
+  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, 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, 0.02) * 6.25rem), 6.25rem));
+  --border-radius-step-header: var(--ig-stepper-border-radius-step-header, clamp(0rem, calc(var(--ig-radius-factor, 0.02) * 6.25rem), 6.25rem));
 }