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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -60,7 +60,7 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@lit-labs/virtualizer": "^2.0.4",
-    "lit": "^2.7.6"
+    "@lit-labs/virtualizer": "^2.0.6",
+    "lit": "^2.8.0"
   }
 }

package/themes/dark/bootstrap.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: bootstrap;
   --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 {
@@ -829,12 +832,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.25rem, 0rem, 1.25rem);
+  --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, 1.9375rem, 2.375rem, 3rem);
+  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
 }
 igc-select::part(input) {
@@ -883,12 +886,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.25rem, 0rem, 1.25rem);
+  --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, 1.9375rem, 2.375rem, 3rem);
+  --size: var(--ig-select-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
 }
 igc-combo::part(input) {
@@ -937,18 +940,46 @@ 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.25rem, 0rem, 1.25rem);
+  --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, 1.9375rem, 2.375rem, 3rem);
+  --size: var(--ig-combo-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
 }
 igc-slider {
   --inactive-background: hsla(var(--ig-secondary-500), 0.48);
 }
+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-gray-50), var(--ig-gray-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-gray-50), var(--ig-gray-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-900), var(--ig-gray-a)));
+  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-title-color: var(--ig-list-item-title-color, 'currentColor');
+  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');
+  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');
+  --item-action-color: var(--ig-list-item-action-color, '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, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-width: var(--ig-list-border-width, 0.0625rem);
+  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 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,
 igc-list-item {
   --separator-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
@@ -962,62 +993,109 @@ igc-tree-item {
   --hover-color: hsla(var(--ig-gray-500), 0.3);
 }
+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), var(--ig-gray-a)));
+  --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), var(--ig-gray-a));
 }
 igc-select {
-  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --input-prefix-color: var(--ig-select-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --input-prefix-background--filled: var(--ig-select-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --input-suffix-color: var(--ig-select-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --input-suffix-background--filled: var(--ig-select-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --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-400), 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), 0.38));
-  --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), var(--ig-primary-a)));
-  --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-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-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, 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-400), 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-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.25rem, 0rem, 1.25rem);
-  --border-border-radius: var(--ig-select-border-border-radius, 0.25rem, 0rem, 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, 1.9375rem, 2.375rem, 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-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-800), 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-800), 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)));
+  --toggle-button-foreground--focus: var(--ig-select-toggle-button-foreground--focus, hsla(var(--ig-gray-800), 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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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-400), 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), 0.38));
+  --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), var(--ig-primary-a)));
+  --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-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-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, 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-400), 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-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.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(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-0));
+  --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-gray-700), var(--ig-gray-a)));
+  --item-text-color: var(--ig-drop-down-item-text-color, var(--ig-surface-500-contrast));
+  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, var(--ig-surface-500-contrast));
+  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, var(--ig-primary-600-contrast));
+  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-primary-600-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-primary-600-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-primary-600-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, 1px);
+  --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)));
 }
 apex-grid {
@@ -1047,12 +1125,84 @@ igc-combo {
   --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)));
   --toggle-button-foreground--focus: var(--ig-combo-toggle-button-foreground--focus, hsla(var(--ig-gray-800), 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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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-400), 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), 0.38));
+  --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), var(--ig-primary-a)));
+  --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-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-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, 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-400), 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-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.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(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-0));
+  --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-gray-700), var(--ig-gray-a)));
+  --item-text-color: var(--ig-drop-down-item-text-color, var(--ig-surface-500-contrast));
+  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, var(--ig-surface-500-contrast));
+  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, var(--ig-primary-600-contrast));
+  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-primary-600-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-primary-600-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-primary-600-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, 1px);
+  --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-avatar {
   --background: var(--ig-avatar-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
   --color: var(--ig-avatar-color, var(--ig-gray-200-contrast));
-  --border-radius: var(--ig-avatar-border-radius, 0.25rem);
+  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem));
   --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)));
 }
@@ -1171,7 +1321,7 @@ igc-button[variant=fab] {
 igc-icon {
   --color: var(--ig-icon-color, 'currentColor');
   --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(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 {
@@ -1230,6 +1380,7 @@ igc-switch {
   --focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
   --track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
   --focus-fill-color: var(--ig-switch-focus-fill-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
 }
 igc-radio {
@@ -1244,4 +1395,66 @@ igc-radio {
   --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));
   --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-100), var(--ig-error-a)));
   --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-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, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --indicator-color: var(--ig-stepper-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-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-400), var(--ig-gray-a)));
+  --complete-indicator-outline: var(--ig-stepper-complete-indicator-outline, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --complete-indicator-color: var(--ig-stepper-complete-indicator-color, var(--ig-gray-300-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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-title-color: var(--ig-stepper-disabled-title-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-subtitle-color: var(--ig-stepper-disabled-subtitle-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --step-separator-color: var(--ig-stepper-step-separator-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --complete-step-separator-color: var(--ig-stepper-complete-step-separator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --step-separator-style: var(--ig-stepper-step-separator-style, solid);
+  --complete-step-separator-style: var(--ig-stepper-complete-step-separator-style, solid);
+  --border-radius-indicator: var(--ig-stepper-border-radius-indicator, clamp(0rem, calc(var(--ig-radius-factor, 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));
 }