igniteui-webcomponents 4.4.0 → 4.5.0

package/index.d.ts

@@ -2,6 +2,7 @@ export { default as IgcAvatarComponent } from './components/avatar/avatar.js';
 export { default as IgcAccordionComponent } from './components/accordion/accordion.js';
 export { default as IgcBadgeComponent } from './components/badge/badge.js';
 export { default as IgcButtonComponent } from './components/button/button.js';
+export { default as IgcButtonGroupComponent } from './components/button-group/button-group.js';
 export { default as IgcCalendarComponent } from './components/calendar/calendar.js';
 export { default as IgcCardComponent } from './components/card/card.js';
 export { default as IgcCardActionsComponent } from './components/card/card.actions.js';
@@ -50,7 +51,9 @@ export { default as IgcTabsComponent } from './components/tabs/tabs.js';
 export { default as IgcTabComponent } from './components/tabs/tab.js';
 export { default as IgcTabPanelComponent } from './components/tabs/tab-panel.js';
 export { default as IgcToastComponent } from './components/toast/toast.js';
+export { default as IgcToggleButtonComponent } from './components/button-group/toggle-button.js';
 export { default as IgcSwitchComponent } from './components/checkbox/switch.js';
+export { default as IgcTextareaComponent } from './components/textarea/textarea.js';
 export { default as IgcTreeComponent } from './components/tree/tree.js';
 export { default as IgcTreeItemComponent } from './components/tree/tree-item.js';
 export { default as IgcStepperComponent } from './components/stepper/stepper.js';
@@ -65,4 +68,4 @@ export { DateRangeType } from './components/calendar/common/calendar.model.js';
 export type { DatePart, DatePartDeltas, } from './components/date-time-input/date-util.js';
 export type { IgcRangeSliderValue } from './components/slider/range-slider.js';
 export type { IgcActiveStepChangingArgs, IgcActiveStepChangedArgs, } from './components/stepper/stepper.common.js';
-export type { ComboItemTemplate } from './components/combo/types.js';
+export type { ComboItemTemplate, IgcComboChangeEventArgs, } from './components/combo/types.js';

package/index.js

@@ -2,6 +2,7 @@ export { default as IgcAvatarComponent } from './components/avatar/avatar.js';
 export { default as IgcAccordionComponent } from './components/accordion/accordion.js';
 export { default as IgcBadgeComponent } from './components/badge/badge.js';
 export { default as IgcButtonComponent } from './components/button/button.js';
+export { default as IgcButtonGroupComponent } from './components/button-group/button-group.js';
 export { default as IgcCalendarComponent } from './components/calendar/calendar.js';
 export { default as IgcCardComponent } from './components/card/card.js';
 export { default as IgcCardActionsComponent } from './components/card/card.actions.js';
@@ -50,7 +51,9 @@ export { default as IgcTabsComponent } from './components/tabs/tabs.js';
 export { default as IgcTabComponent } from './components/tabs/tab.js';
 export { default as IgcTabPanelComponent } from './components/tabs/tab-panel.js';
 export { default as IgcToastComponent } from './components/toast/toast.js';
+export { default as IgcToggleButtonComponent } from './components/button-group/toggle-button.js';
 export { default as IgcSwitchComponent } from './components/checkbox/switch.js';
+export { default as IgcTextareaComponent } from './components/textarea/textarea.js';
 export { default as IgcTreeComponent } from './components/tree/tree.js';
 export { default as IgcTreeItemComponent } from './components/tree/tree-item.js';
 export { default as IgcStepperComponent } from './components/stepper/stepper.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Components\nexport { default as IgcAvatarComponent } from './components/avatar/avatar.js';\nexport { default as IgcAccordionComponent } from './components/accordion/accordion.js';\nexport { default as IgcBadgeComponent } from './components/badge/badge.js';\nexport { default as IgcButtonComponent } from './components/button/button.js';\nexport { default as IgcCalendarComponent } from './components/calendar/calendar.js';\nexport { default as IgcCardComponent } from './components/card/card.js';\nexport { default as IgcCardActionsComponent } from './components/card/card.actions.js';\nexport { default as IgcCardContentComponent } from './components/card/card.content.js';\nexport { default as IgcCardHeaderComponent } from './components/card/card.header.js';\nexport { default as IgcCardMediaComponent } from './components/card/card.media.js';\nexport { default as IgcCheckboxComponent } from './components/checkbox/checkbox.js';\nexport { default as IgcCircularProgressComponent } from './components/progress/circular-progress.js';\nexport { default as IgcCircularGradientComponent } from './components/progress/circular-gradient.js';\nexport { default as IgcChipComponent } from './components/chip/chip.js';\nexport { default as IgcComboComponent } from './components/combo/combo.js';\nexport { default as IgcDateTimeInputComponent } from './components/date-time-input/date-time-input.js';\nexport { default as IgcDialogComponent } from './components/dialog/dialog.js';\nexport { default as IgcDropdownComponent } from './components/dropdown/dropdown.js';\nexport { default as IgcDropdownGroupComponent } from './components/dropdown/dropdown-group.js';\nexport { default as IgcDropdownHeaderComponent } from './components/dropdown/dropdown-header.js';\nexport { default as IgcDropdownItemComponent } from './components/dropdown/dropdown-item.js';\nexport { default as IgcSelectComponent } from './components/select/select.js';\nexport { default as IgcSelectGroupComponent } from './components/select/select-group.js';\nexport { default as IgcSelectHeaderComponent } from './components/select/select-header.js';\nexport { default as IgcSelectItemComponent } from './components/select/select-item.js';\nexport { default as IgcExpansionPanelComponent } from './components/expansion-panel/expansion-panel.js';\nexport { default as IgcIconComponent } from './components/icon/icon.js';\nexport { default as IgcIconButtonComponent } from './components/button/icon-button.js';\nexport { default as IgcInputComponent } from './components/input/input.js';\nexport { default as IgcFormComponent } from './components/form/form.js';\nexport { default as IgcLinearProgressComponent } from './components/progress/linear-progress.js';\nexport { default as IgcListComponent } from './components/list/list.js';\nexport { default as IgcListHeaderComponent } from './components/list/list-header.js';\nexport { default as IgcListItemComponent } from './components/list/list-item.js';\nexport { default as IgcMaskInputComponent } from './components/mask-input/mask-input.js';\nexport { default as IgcNavDrawerComponent } from './components/nav-drawer/nav-drawer.js';\nexport { default as IgcNavDrawerHeaderItemComponent } from './components/nav-drawer/nav-drawer-header-item.js';\nexport { default as IgcNavDrawerItemComponent } from './components/nav-drawer/nav-drawer-item.js';\nexport { default as IgcNavbarComponent } from './components/navbar/navbar.js';\nexport { default as IgcRadioGroupComponent } from './components/radio-group/radio-group.js';\nexport { default as IgcRadioComponent } from './components/radio/radio.js';\nexport { default as IgcRatingComponent } from './components/rating/rating.js';\nexport { default as IgcRatingSymbolComponent } from './components/rating/rating-symbol.js';\nexport { default as IgcRippleComponent } from './components/ripple/ripple.js';\nexport { default as IgcRangeSliderComponent } from './components/slider/range-slider.js';\nexport { default as IgcSnackbarComponent } from './components/snackbar/snackbar.js';\nexport { default as IgcSliderComponent } from './components/slider/slider.js';\nexport { default as IgcSliderLabelComponent } from './components/slider/slider-label.js';\nexport { default as IgcTabsComponent } from './components/tabs/tabs.js';\nexport { default as IgcTabComponent } from './components/tabs/tab.js';\nexport { default as IgcTabPanelComponent } from './components/tabs/tab-panel.js';\nexport { default as IgcToastComponent } from './components/toast/toast.js';\nexport { default as IgcSwitchComponent } from './components/checkbox/switch.js';\nexport { default as IgcTreeComponent } from './components/tree/tree.js';\nexport { default as IgcTreeItemComponent } from './components/tree/tree-item.js';\nexport { default as IgcStepperComponent } from './components/stepper/stepper.js';\nexport { default as IgcStepComponent } from './components/stepper/step.js';\n\n// definitions\nexport { defineComponents } from './components/common/definitions/defineComponents.js';\nexport { defineAllComponents } from './components/common/definitions/defineAllComponents.js';\n\n// icon registration\nexport {\n  registerIcon,\n  registerIconFromText,\n} from './components/icon/icon.registry.js';\n\n// theming configuration\nexport { configureTheme } from './theming/config.js';\n\n// localization objects\nexport { IgcCalendarResourceStringEN } from './components/common/i18n/calendar.resources.js';\n\n// Types\nexport type { DateRangeDescriptor } from './components/calendar/common/calendar.model.js';\nexport { DateRangeType } from './components/calendar/common/calendar.model.js';\nexport type {\n  DatePart,\n  DatePartDeltas,\n} from './components/date-time-input/date-util.js';\nexport type { IgcRangeSliderValue } from './components/slider/range-slider.js';\nexport type {\n  IgcActiveStepChangingArgs,\n  IgcActiveStepChangedArgs,\n} from './components/stepper/stepper.common.js';\nexport type { ComboItemTemplate } from './components/combo/types.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Components\nexport { default as IgcAvatarComponent } from './components/avatar/avatar.js';\nexport { default as IgcAccordionComponent } from './components/accordion/accordion.js';\nexport { default as IgcBadgeComponent } from './components/badge/badge.js';\nexport { default as IgcButtonComponent } from './components/button/button.js';\nexport { default as IgcButtonGroupComponent } from './components/button-group/button-group.js';\nexport { default as IgcCalendarComponent } from './components/calendar/calendar.js';\nexport { default as IgcCardComponent } from './components/card/card.js';\nexport { default as IgcCardActionsComponent } from './components/card/card.actions.js';\nexport { default as IgcCardContentComponent } from './components/card/card.content.js';\nexport { default as IgcCardHeaderComponent } from './components/card/card.header.js';\nexport { default as IgcCardMediaComponent } from './components/card/card.media.js';\nexport { default as IgcCheckboxComponent } from './components/checkbox/checkbox.js';\nexport { default as IgcCircularProgressComponent } from './components/progress/circular-progress.js';\nexport { default as IgcCircularGradientComponent } from './components/progress/circular-gradient.js';\nexport { default as IgcChipComponent } from './components/chip/chip.js';\nexport { default as IgcComboComponent } from './components/combo/combo.js';\nexport { default as IgcDateTimeInputComponent } from './components/date-time-input/date-time-input.js';\nexport { default as IgcDialogComponent } from './components/dialog/dialog.js';\nexport { default as IgcDropdownComponent } from './components/dropdown/dropdown.js';\nexport { default as IgcDropdownGroupComponent } from './components/dropdown/dropdown-group.js';\nexport { default as IgcDropdownHeaderComponent } from './components/dropdown/dropdown-header.js';\nexport { default as IgcDropdownItemComponent } from './components/dropdown/dropdown-item.js';\nexport { default as IgcSelectComponent } from './components/select/select.js';\nexport { default as IgcSelectGroupComponent } from './components/select/select-group.js';\nexport { default as IgcSelectHeaderComponent } from './components/select/select-header.js';\nexport { default as IgcSelectItemComponent } from './components/select/select-item.js';\nexport { default as IgcExpansionPanelComponent } from './components/expansion-panel/expansion-panel.js';\nexport { default as IgcIconComponent } from './components/icon/icon.js';\nexport { default as IgcIconButtonComponent } from './components/button/icon-button.js';\nexport { default as IgcInputComponent } from './components/input/input.js';\nexport { default as IgcFormComponent } from './components/form/form.js';\nexport { default as IgcLinearProgressComponent } from './components/progress/linear-progress.js';\nexport { default as IgcListComponent } from './components/list/list.js';\nexport { default as IgcListHeaderComponent } from './components/list/list-header.js';\nexport { default as IgcListItemComponent } from './components/list/list-item.js';\nexport { default as IgcMaskInputComponent } from './components/mask-input/mask-input.js';\nexport { default as IgcNavDrawerComponent } from './components/nav-drawer/nav-drawer.js';\nexport { default as IgcNavDrawerHeaderItemComponent } from './components/nav-drawer/nav-drawer-header-item.js';\nexport { default as IgcNavDrawerItemComponent } from './components/nav-drawer/nav-drawer-item.js';\nexport { default as IgcNavbarComponent } from './components/navbar/navbar.js';\nexport { default as IgcRadioGroupComponent } from './components/radio-group/radio-group.js';\nexport { default as IgcRadioComponent } from './components/radio/radio.js';\nexport { default as IgcRatingComponent } from './components/rating/rating.js';\nexport { default as IgcRatingSymbolComponent } from './components/rating/rating-symbol.js';\nexport { default as IgcRippleComponent } from './components/ripple/ripple.js';\nexport { default as IgcRangeSliderComponent } from './components/slider/range-slider.js';\nexport { default as IgcSnackbarComponent } from './components/snackbar/snackbar.js';\nexport { default as IgcSliderComponent } from './components/slider/slider.js';\nexport { default as IgcSliderLabelComponent } from './components/slider/slider-label.js';\nexport { default as IgcTabsComponent } from './components/tabs/tabs.js';\nexport { default as IgcTabComponent } from './components/tabs/tab.js';\nexport { default as IgcTabPanelComponent } from './components/tabs/tab-panel.js';\nexport { default as IgcToastComponent } from './components/toast/toast.js';\nexport { default as IgcToggleButtonComponent } from './components/button-group/toggle-button.js';\nexport { default as IgcSwitchComponent } from './components/checkbox/switch.js';\nexport { default as IgcTextareaComponent } from './components/textarea/textarea.js';\nexport { default as IgcTreeComponent } from './components/tree/tree.js';\nexport { default as IgcTreeItemComponent } from './components/tree/tree-item.js';\nexport { default as IgcStepperComponent } from './components/stepper/stepper.js';\nexport { default as IgcStepComponent } from './components/stepper/step.js';\n\n// definitions\nexport { defineComponents } from './components/common/definitions/defineComponents.js';\nexport { defineAllComponents } from './components/common/definitions/defineAllComponents.js';\n\n// icon registration\nexport {\n  registerIcon,\n  registerIconFromText,\n} from './components/icon/icon.registry.js';\n\n// theming configuration\nexport { configureTheme } from './theming/config.js';\n\n// localization objects\nexport { IgcCalendarResourceStringEN } from './components/common/i18n/calendar.resources.js';\n\n// Types\nexport type { DateRangeDescriptor } from './components/calendar/common/calendar.model.js';\nexport { DateRangeType } from './components/calendar/common/calendar.model.js';\nexport type {\n  DatePart,\n  DatePartDeltas,\n} from './components/date-time-input/date-util.js';\nexport type { IgcRangeSliderValue } from './components/slider/range-slider.js';\nexport type {\n  IgcActiveStepChangingArgs,\n  IgcActiveStepChangedArgs,\n} from './components/stepper/stepper.common.js';\nexport type {\n  ComboItemTemplate,\n  IgcComboChangeEventArgs,\n} from './components/combo/types.js';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "4.4.0",
+  "version": "4.5.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",
@@ -27,6 +27,7 @@
     "avatar",
     "badge",
     "button",
+    "button group",
     "calendar",
     "card",
     "circular progress",
@@ -55,12 +56,13 @@
     "switch",
     "slider",
     "tabs",
+    "textarea",
     "toast",
     "tree"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.5.1",
-    "@lit-labs/virtualizer": "^2.0.6",
+    "@floating-ui/dom": "^1.5.3",
+    "@lit-labs/virtualizer": "^2.0.7",
     "lit": "^2.8.0"
   }
 }

package/themes/dark/bootstrap.css

@@ -29,6 +29,7 @@
 
 :root {
   --ig-theme: bootstrap;
+  --ig-theme-variant: dark;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -38,6 +39,10 @@
   --ig-scrollbar-size: 1rem;
 }
 
+body[dir=rtl] {
+  --ig-dir: -1;
+}
+
 :root {
   --ig-primary-50: hsl(215.75, 100%, 92.84%);
   --ig-primary-50-contrast: black;
@@ -762,6 +767,70 @@
   margin-bottom: var(--ig-overline-margin-bottom);
 }
 
+igc-badge {
+  --elevation: var(--ig-badge-elevation, var(--ig-elevation-0));
+  --icon-color: var(--ig-badge-icon-color, var(--ig-primary-500-contrast));
+  --text-color: var(--ig-badge-text-color, var(--ig-primary-500-contrast));
+  --border-color: var(--ig-badge-border-color, var(--ig-gray-50-contrast));
+  --background-color: var(--ig-badge-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-width: var(--ig-badge-border-width, 1px);
+  --border-radius: var(--ig-badge-border-radius, 0.25rem);
+}
+
+igc-card {
+  --resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));
+  --hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));
+  --background: var(--ig-card-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --header-text-color: var(--ig-card-header-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --subtitle-text-color: var(--ig-card-subtitle-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --content-text-color: var(--ig-card-content-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --actions-text-color: var(--ig-card-actions-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --outline-color: var(--ig-card-outline-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+}
+
+igc-chip {
+  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-0));
+  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');
+  --focus-outline-color: var(--ig-chip-focus-outline-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');
+  --text-color: var(--ig-chip-text-color, var(--ig-gray-200-contrast));
+  --background: var(--ig-chip-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --border-color: var(--ig-chip-border-color, transparent);
+  --ghost-background: var(--ig-chip-ghost-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-text-color: var(--ig-chip-hover-text-color, var(--ig-gray-400-contrast));
+  --hover-background: var(--ig-chip-hover-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-chip-hover-border-color, transparent);
+  --focus-text-color: var(--ig-chip-focus-text-color, var(--ig-gray-400-contrast));
+  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --focus-border-color: var(--ig-chip-focus-border-color, transparent);
+  --selected-text-color: var(--ig-chip-selected-text-color, var(--ig-gray-300-contrast));
+  --selected-background: var(--ig-chip-selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --selected-border-color: var(--ig-chip-selected-border-color, transparent);
+  --hover-selected-text-color: var(--ig-chip-hover-selected-text-color, var(--ig-gray-400-contrast));
+  --hover-selected-background: var(--ig-chip-hover-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-selected-border-color: var(--ig-chip-hover-selected-border-color, transparent);
+  --focus-selected-text-color: var(--ig-chip-focus-selected-text-color, var(--ig-gray-400-contrast));
+  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --focus-selected-border-color: var(--ig-chip-focus-selected-border-color, transparent);
+  --border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.25) * 1rem), 1rem));
+  --disabled-text-color: var(--ig-chip-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-background: var(--ig-chip-disabled-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-chip-disabled-border-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));
+}
+
+igc-dialog {
+  --elevation: var(--ig-dialog-elevation, var(--ig-elevation-0));
+  --background: var(--ig-dialog-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --title-color: var(--ig-dialog-title-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --message-color: var(--ig-dialog-message-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-dialog-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --backdrop: var(--ig-dialog-backdrop, hsla(var(--ig-gray-500), 0.54));
+  --border-radius: var(--ig-dialog-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1111111111) * 2.25rem), 2.25rem));
+}
+
 igc-dropdown {
   --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));
   --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
@@ -786,6 +855,19 @@ igc-dropdown {
   --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-expansion-panel {
+  --header-background: var(--igc-expansion-panel-header-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --body-background: var(--igc-expansion-panel-body-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --header-focus-background: var(--igc-expansion-panel-header-focus-background, hsla(var(--ig-gray-100), 0.3));
+  --header-title-color: var(--igc-expansion-panel-header-title-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --header-description-color: var(--igc-expansion-panel-header-description-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --header-icon-color: var(--igc-expansion-panel-header-icon-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --body-color: var(--igc-expansion-panel-body-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-color: var(--igc-expansion-panel-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --expanded-margin: var(--igc-expansion-panel-expanded-margin, 0.5rem);
+  --border-radius: var(--igc-expansion-panel-border-radius, 0rem, 0rem, 1rem);
+}
+
 igc-input {
   --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));
   --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-2));
@@ -834,12 +916,66 @@ igc-input {
   --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);
+  --search-border-radius: var(--ig-input-search-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 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)));
 }
 
+igc-textarea {
+  --search-resting-elevation: var(--ig-textarea-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-textarea-search-hover-elevation, var(--ig-elevation-2));
+  --search-disabled-elevation: var(--ig-textarea-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-textarea-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-textarea-input-prefix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color: var(--ig-textarea-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-textarea-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--filled: var(--ig-textarea-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-textarea-input-prefix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--focused: var(--ig-textarea-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-textarea-input-suffix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color: var(--ig-textarea-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-textarea-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--filled: var(--ig-textarea-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-textarea-input-suffix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--focused: var(--ig-textarea-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-textarea-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-textarea-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-textarea-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-textarea-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-textarea-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-textarea-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-textarea-focused-secondary-color, hsla(var(--ig-primary-500), 0.38));
+  --idle-bottom-line-color: var(--ig-textarea-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-textarea-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-textarea-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --interim-bottom-line-color: var(--ig-textarea-interim-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --disabled-bottom-line-color: var(--ig-textarea-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-textarea-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-textarea-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-textarea-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-textarea-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-background: var(--ig-textarea-border-background, transparent);
+  --border-disabled-background: var(--ig-textarea-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --search-background: var(--ig-textarea-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --search-disabled-background: var(--ig-textarea-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-textarea-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-textarea-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-textarea-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-textarea-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-textarea-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-textarea-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-textarea-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-textarea-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-textarea-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-textarea-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-textarea-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-textarea-search-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --success-shadow-color: var(--ig-textarea-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-textarea-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-textarea-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) {
   --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));
@@ -888,7 +1024,7 @@ igc-select::part(input) {
   --box-disabled-background: var(--ig-select-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
   --box-border-radius: var(--ig-select-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
   --border-border-radius: var(--ig-select-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
-  --search-border-radius: var(--ig-select-search-border-radius, 0.25rem, 0rem, 1.25rem);
+  --search-border-radius: var(--ig-select-search-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 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(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
@@ -942,14 +1078,31 @@ igc-combo::part(input) {
   --box-disabled-background: var(--ig-combo-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
   --box-border-radius: var(--ig-combo-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
   --border-border-radius: var(--ig-combo-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
-  --search-border-radius: var(--ig-combo-search-border-radius, 0.25rem, 0rem, 1.25rem);
+  --search-border-radius: var(--ig-combo-search-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 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(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);
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --track-step-color: var(--ig-slider-track-step-color, white);
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-secondary-500), 0.48));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.48));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
 }
 
 igc-list {
@@ -980,38 +1133,102 @@ igc-list {
   --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-header {
+  --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-item {
-  --separator-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  --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-tab {
-  --hover-color: hsla(var(--ig-primary-400), var(--ig-primary-a));
+  --item-text-color: var(--ig-tabs-item-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-background: var(--ig-tabs-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --item-hover-background: var(--ig-tabs-item-hover-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --item-hover-color: var(--ig-tabs-item-hover-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --item-active-color: var(--ig-tabs-item-active-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-tabs-item-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-icon-color: var(--ig-tabs-item-active-icon-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-hover-icon-color: var(--ig-tabs-item-hover-icon-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --item-disabled-icon-color: var(--ig-tabs-item-disabled-icon-color, hsla(var(--ig-primary-500), 0.5));
+  --item-active-background: var(--ig-tabs-item-active-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --item-disabled-color: var(--ig-tabs-item-disabled-color, hsla(var(--ig-primary-500), 0.5));
+  --indicator-color: var(--ig-tabs-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --button-color: var(--ig-tabs-button-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --button-background: var(--ig-tabs-button-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --button-hover-background: var(--ig-tabs-button-hover-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --button-hover-color: var(--ig-tabs-button-hover-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --button-disabled-color: var(--ig-tabs-button-disabled-color, hsla(var(--ig-primary-500), 0.5));
+  --tab-ripple-color: var(--ig-tabs-tab-ripple-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --button-ripple-color: var(--ig-tabs-button-ripple-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-color: var(--ig-tabs-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color--hover: var(--ig-tabs-border-color--hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --border-radius: var(--ig-tabs-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.6666666667) * 0.375rem), 0.375rem));
 }
 
 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));
+  --background: var(--ig-tree-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --foreground: var(--ig-tree-foreground, var(--ig-surface-500-contrast));
+  --background-selected: var(--ig-tree-background-selected, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --foreground-selected: var(--ig-tree-foreground-selected, var(--ig-primary-600-contrast));
+  --background-active: var(--ig-tree-background-active, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --foreground-active: var(--ig-tree-foreground-active, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --background-active-selected: var(--ig-tree-background-active-selected, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --foreground-active-selected: var(--ig-tree-foreground-active-selected, var(--ig-primary-600-contrast));
+  --border-color: var(--ig-tree-border-color, hsla(var(--ig-primary 200-500), var(--ig-primary 200-a)));
+  --background-disabled: var(--ig-tree-background-disabled, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --foreground-disabled: var(--ig-tree-foreground-disabled, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --drop-area-color: var(--ig-tree-drop-area-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --hover-color: var(--ig-tree-hover-color, hsla(var(--ig-gray-500), 0.3));
+  --size: var(--ig-tree-size, max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));
 }
 
 igc-select {
@@ -1071,7 +1288,7 @@ igc-select {
   --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);
+  --search-border-radius: var(--ig-input-search-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 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)));
@@ -1172,7 +1389,7 @@ igc-combo {
   --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);
+  --search-border-radius: var(--ig-input-search-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 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)));
@@ -1199,13 +1416,6 @@ igc-combo {
   --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, 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)));
-}
-
 igc-button[variant=flat] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-primary-200), 0.5));
   --border-color: var(--ig-button-border-color, transparent);
@@ -1338,16 +1548,15 @@ igc-checkbox {
   --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
   --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
-  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
   --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
   --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-100), var(--ig-error-a)));
   --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.4) * 0.625rem), 0.625rem));
-  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.25rem, 0rem, 1.5rem);
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
   --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
-  --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
 }
 
 igc-switch {
@@ -1376,11 +1585,10 @@ igc-switch {
   --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-primary-200), var(--ig-primary-a)));
   --border-radius-track: var(--ig-switch-border-radius-track, clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem));
   --border-radius-thumb: var(--ig-switch-border-radius-thumb, clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem));
-  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem, 0rem, 1.5rem);
+  --border-radius-ripple: var(--ig-switch-border-radius-ripple, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
   --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 {
@@ -1457,4 +1665,59 @@ igc-step {
   --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));
+}
+
+igc-nav-drawer,
+igc-nav-drawer-item,
+igc-nav-drawer-header-item {
+  --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-button-group {
+  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, var(--ig-primary-600-contrast));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, var(--ig-primary-600-contrast));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, var(--ig-primary-700-contrast));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+}
+
+igc-toggle-button {
+  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, var(--ig-primary-600-contrast));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, var(--ig-primary-600-contrast));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, var(--ig-primary-700-contrast));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
 }