igniteui-webcomponents 4.5.0-beta.1 → 4.5.0

package/themes/dark/material.css

@@ -29,6 +29,7 @@
 
 :root {
   --ig-theme: material;
+  --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(204, 100%, 89%);
   --ig-primary-50-contrast: black;
@@ -754,6 +759,16 @@
   margin-bottom: var(--ig-overline-margin-bottom);
 }
 
+igc-dialog {
+  --elevation: var(--ig-dialog-elevation, var(--ig-elevation-24));
+  --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, transparent);
+  --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-radio {
   --hover-color: var(--ig-radio-hover-color, transparent);
   --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
@@ -827,12 +842,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(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
 }
 
+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, transparent);
+  --input-prefix-color: var(--ig-textarea-input-prefix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-textarea-input-prefix-background--filled, inherit);
+  --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, inherit);
+  --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, transparent);
+  --input-suffix-color: var(--ig-textarea-input-suffix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-textarea-input-suffix-background--filled, inherit);
+  --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, inherit);
+  --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-500), 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), var(--ig-primary-a)));
+  --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), 0.12));
+  --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-500), var(--ig-gray-a)));
+  --border-color: var(--ig-textarea-border-color, hsla(var(--ig-gray-600), 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, transparent);
+  --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-500), 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-100), 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(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}
+
 igc-select::part(input) {
   --search-resting-elevation: var(--ig-select-search-resting-elevation, var(--ig-elevation-1));
   --search-hover-elevation: var(--ig-select-search-hover-elevation, var(--ig-elevation-2));
@@ -881,7 +950,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(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
@@ -935,7 +1004,7 @@ 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(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
@@ -997,7 +1066,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(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
@@ -1025,7 +1094,28 @@ igc-select {
 }
 
 igc-tab {
-  --hover-background: hsla(var(--ig-gray-100), 0.5);
+  --item-text-color: var(--ig-tabs-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-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-gray-100), 0.5));
+  --item-hover-color: var(--ig-tabs-item-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-color: var(--ig-tabs-item-active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-icon-color: var(--ig-tabs-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-tabs-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-tabs-item-hover-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-disabled-icon-color: var(--ig-tabs-item-disabled-icon-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --item-active-background: var(--ig-tabs-item-active-background, hsla(var(--ig-gray-100), 0.5));
+  --item-disabled-color: var(--ig-tabs-item-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --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-700), 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-900), var(--ig-gray-a)));
+  --button-disabled-color: var(--ig-tabs-button-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --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, transparent);
+  --border-color--hover: var(--ig-tabs-border-color--hover, transparent);
+  --border-radius: var(--ig-tabs-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 0.375rem), 0.375rem));
 }
 
 apex-grid {
@@ -1037,6 +1127,38 @@ apex-grid {
   --row-border-color: hsla(var(--ig-gray-200), 0.24);
 }
 
+igc-chip {
+  --ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-8));
+  --remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');
+  --focus-outline-color: var(--ig-chip-focus-outline-color, transparent);
+  --focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, transparent);
+  --remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');
+  --text-color: var(--ig-chip-text-color, var(--ig-gray-300-contrast));
+  --background: var(--ig-chip-background, hsla(var(--ig-gray-300), 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-500-contrast));
+  --focus-background: var(--ig-chip-focus-background, hsla(var(--ig-gray-500), 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-300), 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-500-contrast));
+  --focus-selected-background: var(--ig-chip-focus-selected-background, hsla(var(--ig-gray-500), 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, 1) * 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-combo {
   --toggle-button-background-focus--border: var(--ig-combo-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --case-icon-color: var(--ig-combo-case-icon-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -1102,7 +1224,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(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
@@ -1129,6 +1251,19 @@ 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-expansion-panel {
+  --header-background: var(--igc-expansion-panel-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --body-background: var(--igc-expansion-panel-body-background, hsla(var(--ig-surface-500), var(--ig-surface-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-900), var(--ig-gray-a)));
+  --header-description-color: var(--igc-expansion-panel-header-description-color, hsla(var(--ig-gray-700), 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-button[variant=flat] {
   --shadow-color: var(--ig-button-shadow-color, transparent);
   --border-color: var(--ig-button-border-color, transparent);
@@ -1247,6 +1382,34 @@ igc-icon {
   --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-list-item {
+  --background: var(--ig-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-background: var(--ig-list-header-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-list-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-background: var(--ig-list-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --item-background-hover: var(--ig-list-item-background-hover, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-background-active: var(--ig-list-item-background-active, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-text-color: var(--ig-list-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-text-color-hover: var(--ig-list-item-text-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-text-color-active: var(--ig-list-item-text-color-active, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-title-color: var(--ig-list-item-title-color, 'currentColor');
+  --item-title-color-hover: var(--ig-list-item-title-color-hover, 'currentColor');
+  --item-title-color-active: var(--ig-list-item-title-color-active, 'currentColor');
+  --item-action-color: var(--ig-list-item-action-color, 'currentColor');
+  --item-action-color-hover: var(--ig-list-item-action-color-hover, 'currentColor');
+  --item-action-color-active: var(--ig-list-item-action-color-active, 'currentColor');
+  --item-subtitle-color: var(--ig-list-item-subtitle-color, 'currentColor');
+  --item-subtitle-color-hover: var(--ig-list-item-subtitle-color-hover, 'currentColor');
+  --item-subtitle-color-active: var(--ig-list-item-subtitle-color-active, 'currentColor');
+  --item-thumbnail-color: var(--ig-list-item-thumbnail-color, 'currentColor');
+  --item-thumbnail-color-hover: var(--ig-list-item-thumbnail-color-hover, 'currentColor');
+  --item-thumbnail-color-active: var(--ig-list-item-thumbnail-color-active, 'currentColor');
+  --border-color: var(--ig-list-border-color, transparent);
+  --border-width: var(--ig-list-border-width, 0);
+  --border-radius: var(--ig-list-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));
+  --item-border-radius: var(--ig-list-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.5rem), 1.5rem));
+}
+
 igc-navbar {
   --elevation: var(--ig-navbar-elevation, var(--ig-elevation-4));
   --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
@@ -1255,6 +1418,18 @@ igc-navbar {
   --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));
 }
 
+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-surface-500), var(--ig-surface-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-700), var(--ig-gray-a)));
+  --content-text-color: var(--ig-card-content-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --actions-text-color: var(--ig-card-actions-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --outline-color: var(--ig-card-outline-color, hsla(var(--ig-gray-400), 0.38));
+  --border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+}
+
 igc-checkbox {
   --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-50), var(--ig-gray-a)));
@@ -1268,8 +1443,28 @@ igc-checkbox {
   --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));
   --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-500), var(--ig-error-a)));
   --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 0.625rem), 0.625rem));
-  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 1.5rem, 0rem, 1.5rem);
-  --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
+}
+
+igc-slider {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --track-step-color: var(--ig-slider-track-step-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-secondary-400), var(--ig-secondary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, transparent);
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-secondary-500), var(--ig-secondary-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-gray-700), var(--ig-gray-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.24));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.24));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-400), 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-switch {
@@ -1298,8 +1493,7 @@ igc-switch {
   --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-gray-500), var(--ig-gray-a)));
   --border-radius-track: var(--ig-switch-border-radius-track, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.4375rem), 0.4375rem));
   --border-radius-thumb: var(--ig-switch-border-radius-thumb, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.625rem), 0.625rem));
-  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem, 0rem, 1.5rem);
-  --ripple-radius: var(--ig-switch-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
+  --border-radius-ripple: var(--ig-switch-border-radius-ripple, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
 }
 igc-switch:hover::part(thumb)::after {
   opacity: 0.12;
@@ -1314,13 +1508,6 @@ igc-switch:focus-within::part(thumb checked)::after {
   opacity: 0.24;
 }
 
-igc-avatar {
-  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
-  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
-  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
-  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
-}
-
 igc-step {
   --step-background: var(--ig-stepper-step-background, transparent);
   --step-hover-background: var(--ig-stepper-step-hover-background, hsla(var(--ig-gray-100), 0.3));
@@ -1400,4 +1587,57 @@ igc-nav-drawer-header-item {
   --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-2));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-100), 0.8));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-gray-300), 0.8));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-100), var(--ig-gray-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-2));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-100), 0.8));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-gray-300), 0.8));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+}
+
+igc-tree-item {
+  --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-secondary-200), var(--ig-secondary-a)));
+  --foreground-selected: var(--ig-tree-foreground-selected, var(--ig-secondary-200-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-secondary-300), var(--ig-secondary-a)));
+  --foreground-active-selected: var(--ig-tree-foreground-active-selected, var(--ig-secondary-300-contrast));
+  --border-color: var(--ig-tree-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-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-50), 0.1));
+  --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)));
 }

package/themes/light/bootstrap.css

@@ -29,6 +29,7 @@
 
 :root {
   --ig-theme: bootstrap;
+  --ig-theme-variant: light;
   --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;

package/themes/light/fluent.css

@@ -29,6 +29,7 @@
 
 :root {
   --ig-theme: fluent;
+  --ig-theme-variant: light;
   --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(206.04, 100%, 73.99%);
   --ig-primary-50-contrast: black;

package/themes/light/indigo.css

@@ -29,6 +29,7 @@
 
 :root {
   --ig-theme: indigo;
+  --ig-theme-variant: light;
   --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(230.85, 59.48%, 85.16%);
   --ig-primary-50-contrast: black;

package/themes/light/material.css

@@ -29,6 +29,7 @@
 
 :root {
   --ig-theme: material;
+  --ig-theme-variant: light;
   --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(204, 100%, 89%);
   --ig-primary-50-contrast: black;

package/theming/config.d.ts

@@ -1,6 +1,9 @@
-import type { Theme } from './types.js';
-export declare const getTheme: () => Theme;
-export declare const setTheme: (value: Theme) => void;
+import type { Theme, ThemeVariant } from './types.js';
+export declare const getTheme: () => {
+    theme: Theme;
+    themeVariant: ThemeVariant;
+};
+export declare const setTheme: (value: Theme, variant: ThemeVariant) => void;
 /**
  * Allows the global configuration of the active theme.
  *
@@ -8,7 +11,7 @@ export declare const setTheme: (value: Theme) => void;
  *  ```ts
  *  import { configureTheme } from 'igniteui-webcomponents';
  *
- *  configureTheme({ theme: 'material' });
+ *  configureTheme('material', 'light');
  *  ```
  */
-export declare const configureTheme: (t: Theme) => void;
+export declare const configureTheme: (t: Theme, v?: ThemeVariant) => void;

package/theming/config.js

@@ -1,26 +1,38 @@
 import { CHANGE_THEME_EVENT } from './theming-event.js';
 import { getAllCSSVariables } from './utils.js';
 let theme;
+let themeVariant;
 function dispatchThemingEvent(detail) {
     window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));
 }
 function isOfTypeTheme(theme) {
     return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);
 }
+function isOfTypeThemeVariant(variant) {
+    return ['light', 'dark'].includes(variant);
+}
 export const getTheme = () => {
-    if (!theme) {
-        const [_, t] = Object.entries(getAllCSSVariables()).find(([v]) => v === 'igTheme') || [];
-        theme = t && isOfTypeTheme(t) ? t : 'bootstrap';
+    if (!theme || !themeVariant) {
+        const [_theme, _variant] = Object.entries(getAllCSSVariables()).filter(([v]) => v === 'igTheme' || v === 'igThemeVariant') || [];
+        theme =
+            _theme && _theme[1] && isOfTypeTheme(_theme[1])
+                ? _theme[1]
+                : 'bootstrap';
+        themeVariant =
+            _variant && _variant[1] && isOfTypeThemeVariant(_variant[1])
+                ? _variant[1]
+                : 'light';
     }
-    return theme;
+    return { theme, themeVariant };
 };
-export const setTheme = (value) => {
+export const setTheme = (value, variant) => {
     theme = value;
+    themeVariant = variant;
 };
-export const configureTheme = (t) => {
-    if (isOfTypeTheme(t)) {
-        setTheme(t);
+export const configureTheme = (t, v = 'light') => {
+    if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {
+        setTheme(t, v);
     }
-    dispatchThemingEvent({ theme });
+    dispatchThemingEvent({ theme, themeVariant });
 };
 //# sourceMappingURL=config.js.map

package/theming/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AAKjB,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;IAClC,OAAO,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgB,GAAG,EAAE;IACxC,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GACV,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;QAE5E,KAAK,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAW,CAAC,CAAC,CAAC,WAAW,CAAC;KAC5D;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,GAAG,KAAK,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;IACzC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE;QACpB,QAAQ,CAAC,CAAC,CAAC,CAAC;KACb;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { ChangeThemeEventDetail, CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme } from './types.js';\nimport { getAllCSSVariables } from './utils.js';\n\nlet theme: Theme;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail) {\n  window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nexport const getTheme: () => Theme = () => {\n  if (!theme) {\n    const [_, t] =\n      Object.entries(getAllCSSVariables()).find(([v]) => v === 'igTheme') || [];\n\n    theme = t && isOfTypeTheme(t) ? (t as Theme) : 'bootstrap';\n  }\n\n  return theme;\n};\n\nexport const setTheme = (value: Theme) => {\n  theme = value;\n};\n\n/**\n * Allows the global configuration of the active theme.\n *\n * Usage:\n *  ```ts\n *  import { configureTheme } from 'igniteui-webcomponents';\n *\n *  configureTheme({ theme: 'material' });\n *  ```\n */\nexport const configureTheme = (t: Theme) => {\n  if (isOfTypeTheme(t)) {\n    setTheme(t);\n  }\n\n  dispatchThemingEvent({ theme });\n};\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AACjB,IAAI,YAA0B,CAAC;AAK/B,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;IAClC,OAAO,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,SAAS,oBAAoB,CAAC,OAAe;IAC3C,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAGjB,GAAG,EAAE;IACP,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GACtB,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,MAAM,CACzC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,gBAAgB,CACnD,IAAI,EAAE,CAAC;QAEV,KAAK;YACH,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBAC7C,CAAC,CAAE,MAAM,CAAC,CAAC,CAAW;gBACtB,CAAC,CAAC,WAAW,CAAC;QAElB,YAAY;YACV,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAC1D,CAAC,CAAE,QAAQ,CAAC,CAAC,CAAkB;gBAC/B,CAAC,CAAC,OAAO,CAAC;KACf;IAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,OAAqB,EAAE,EAAE;IAC9D,KAAK,GAAG,KAAK,CAAC;IACd,YAAY,GAAG,OAAO,CAAC;AACzB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,IAAkB,OAAO,EAAE,EAAE;IACpE,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE;QAC/C,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KAChB;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["import { ChangeThemeEventDetail, CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeVariant } from './types.js';\nimport { getAllCSSVariables } from './utils.js';\n\nlet theme: Theme;\nlet themeVariant: ThemeVariant;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail) {\n  window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nfunction isOfTypeThemeVariant(variant: string): variant is ThemeVariant {\n  return ['light', 'dark'].includes(variant);\n}\n\nexport const getTheme: () => {\n  theme: Theme;\n  themeVariant: ThemeVariant;\n} = () => {\n  if (!theme || !themeVariant) {\n    const [_theme, _variant] =\n      Object.entries(getAllCSSVariables()).filter(\n        ([v]) => v === 'igTheme' || v === 'igThemeVariant'\n      ) || [];\n\n    theme =\n      _theme && _theme[1] && isOfTypeTheme(_theme[1])\n        ? (_theme[1] as Theme)\n        : 'bootstrap';\n\n    themeVariant =\n      _variant && _variant[1] && isOfTypeThemeVariant(_variant[1])\n        ? (_variant[1] as ThemeVariant)\n        : 'light';\n  }\n\n  return { theme, themeVariant };\n};\n\nexport const setTheme = (value: Theme, variant: ThemeVariant) => {\n  theme = value;\n  themeVariant = variant;\n};\n\n/**\n * Allows the global configuration of the active theme.\n *\n * Usage:\n *  ```ts\n *  import { configureTheme } from 'igniteui-webcomponents';\n *\n *  configureTheme('material', 'light');\n *  ```\n */\nexport const configureTheme = (t: Theme, v: ThemeVariant = 'light') => {\n  if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {\n    setTheme(t, v);\n  }\n\n  dispatchThemingEvent({ theme, themeVariant });\n};\n"]}

package/theming/theming-controller.d.ts

@@ -1,9 +1,10 @@
 import { ReactiveController, ReactiveControllerHost, ReactiveElement } from 'lit';
-import type { Theme, ThemeController, Themes } from './types.js';
+import type { Theme, ThemeController, Themes, ThemeVariant } from './types.js';
 declare class ThemingController implements ReactiveController, ThemeController {
     private themes;
     private host;
     theme: Theme;
+    themeVariant: ThemeVariant;
     constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes);
     hostConnected(): void;
     hostDisconnected(): void;

package/theming/theming-controller.js

@@ -40,9 +40,11 @@ class ThemingController {
     }
     adoptStyles() {
         var _a;
-        this.theme = getTheme();
+        const { theme, themeVariant } = getTheme();
+        this.theme = theme;
+        this.themeVariant = themeVariant;
         const ctor = this.host.constructor;
-        const [_, cssResult] = (_a = Object.entries(this.themes).find(([name]) => name === this.theme)) !== null && _a !== void 0 ? _a : [];
+        const [_, cssResult] = (_a = Object.entries(this.themes[themeVariant]).find(([name]) => name === this.theme)) !== null && _a !== void 0 ? _a : [];
         adoptStyles(this.host.shadowRoot, [
             ...ctor.elementStyles,
             cssResult !== null && cssResult !== void 0 ? cssResult : css ``,

package/theming/theming-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  adoptStyles,\n  css,\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes } from './types.js';\n\nclass ThemeEventListeners {\n  private readonly listeners = new Set<Function>();\n\n  public add(listener: Function) {\n    window.addEventListener(CHANGE_THEME_EVENT, this);\n    this.listeners.add(listener);\n  }\n\n  public remove(listener: Function) {\n    this.listeners.delete(listener);\n    if (this.listeners.size < 1) {\n      window.removeEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  public handleEvent = () => {\n    for (const listener of this.listeners) {\n      listener();\n    }\n  };\n}\n\nconst _themingEventListeners = new ThemeEventListeners();\n\nclass ThemingController implements ReactiveController, ThemeController {\n  private themes: Themes;\n  private host: ReactiveControllerHost & ReactiveElement;\n  public theme!: Theme;\n\n  constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n    this.host = host;\n    this.themes = themes;\n  }\n\n  public hostConnected() {\n    this.adoptStyles();\n    _themingEventListeners.add(this.themeChanged);\n  }\n\n  public hostDisconnected() {\n    _themingEventListeners.remove(this.themeChanged);\n  }\n\n  protected adoptStyles() {\n    this.theme = getTheme();\n    const ctor = this.host.constructor as typeof LitElement;\n\n    const [_, cssResult] =\n      Object.entries(this.themes).find(([name]) => name === this.theme) ?? [];\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      cssResult ?? css``,\n    ]);\n  }\n\n  private themeChanged = () => {\n    this.adoptStyles();\n    this.host.requestUpdate();\n  };\n}\n\nconst _updateWhenThemeChanges = (\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  exposeTheme?: boolean\n) => {\n  const controller = new ThemingController(host, themes);\n  host.addController(controller);\n\n  if (exposeTheme) {\n    Object.defineProperty(host, themeSymbol, {\n      get() {\n        return controller.theme;\n      },\n      configurable: true,\n      enumerable: false,\n    });\n  }\n\n  return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n  _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n\nexport const themeSymbol = Symbol('Current active theme');\n"]}
+{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  adoptStyles,\n  css,\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes, ThemeVariant } from './types.js';\n\nclass ThemeEventListeners {\n  private readonly listeners = new Set<Function>();\n\n  public add(listener: Function) {\n    window.addEventListener(CHANGE_THEME_EVENT, this);\n    this.listeners.add(listener);\n  }\n\n  public remove(listener: Function) {\n    this.listeners.delete(listener);\n    if (this.listeners.size < 1) {\n      window.removeEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  public handleEvent = () => {\n    for (const listener of this.listeners) {\n      listener();\n    }\n  };\n}\n\nconst _themingEventListeners = new ThemeEventListeners();\n\nclass ThemingController implements ReactiveController, ThemeController {\n  private themes: Themes;\n  private host: ReactiveControllerHost & ReactiveElement;\n  public theme!: Theme;\n  public themeVariant!: ThemeVariant;\n\n  constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n    this.host = host;\n    this.themes = themes;\n  }\n\n  public hostConnected() {\n    this.adoptStyles();\n    _themingEventListeners.add(this.themeChanged);\n  }\n\n  public hostDisconnected() {\n    _themingEventListeners.remove(this.themeChanged);\n  }\n\n  protected adoptStyles() {\n    const { theme, themeVariant } = getTheme();\n    this.theme = theme;\n    this.themeVariant = themeVariant;\n\n    const ctor = this.host.constructor as typeof LitElement;\n\n    const [_, cssResult] =\n      Object.entries(this.themes[themeVariant]).find(\n        ([name]) => name === this.theme\n      ) ?? [];\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      cssResult ?? css``,\n    ]);\n  }\n\n  private themeChanged = () => {\n    this.adoptStyles();\n    this.host.requestUpdate();\n  };\n}\n\nconst _updateWhenThemeChanges = (\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  exposeTheme?: boolean\n) => {\n  const controller = new ThemingController(host, themes);\n  host.addController(controller);\n\n  if (exposeTheme) {\n    Object.defineProperty(host, themeSymbol, {\n      get() {\n        return controller.theme;\n      },\n      configurable: true,\n      enumerable: false,\n    });\n  }\n\n  return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n  _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n\nexport const themeSymbol = Symbol('Current active theme');\n"]}

package/theming/theming-event.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from './types.js';
+import type { Theme, ThemeVariant } from './types.js';
 export declare const CHANGE_THEME_EVENT = "igc-change-theme";
 declare global {
     interface WindowEventMap {
@@ -10,4 +10,5 @@ declare global {
  */
 export type ChangeThemeEventDetail = {
     theme: Theme;
+    themeVariant: ThemeVariant;
 };